Hello readers, Today In my blog I will discuss about a recent framework i.e HTML KickStart Framework.
It is useful for resolving the issues that have aroused in various frameworks and have tried to resolve them.
Introduction :-
- It is lightweight in nature and easy to use .
- It contains a number of UI controls .
- It is more flexible and stable.
Now moving to the various sections in our Web page which contains Grid, Buttons , Images, Form , Fonts , Navigation etc.
Below is the brief introduction about each topic that I had discussed above , these are as follows :-
- The Grid :- It is the firstly the most important feature of any framework as using a flexible grid would help in creating a responsive site.
It also contains 12 columns .
Here , the HTML KickStart Framework provides the user 2 types of Grids such as -
- Flexible grid
- Standard grid
Below is the code showing the use of a flexible grid -
<div class="grid flex">
<div class="col_6 column">Content Here</div>
<div class="col_6 column">Content Here</div>
</div>
Now in this code , If we need to create a flexible grid , we would simply add flex keyword to the class name , using flexible grid it extends the width of the entire screen while if we need to create a standard div , we just need to remove “flex” from the outer div and it has a maximum width of 1024px as shown in the above code.
This framework also contains a number of helper classes that can be used with grid for showing or hiding content as required which we used to do using media query.
Some are discussed below -:
- show-desktop and hide-desktop
- show-tablet and hide-tablet
- show-phone and hide-phone
We the help of these classes we can simply decide whether we want our grid to show or hide .
- Navigation :- The HTML KickStart framework provide the user with three options i.e vertical-left , vertical-right and horizontal .
To code this we need unordered list , below is the code :-
<ul class="menu">
<li class="current"><a href="">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
In the above code , we can create horizontal menu using unordered list while for creating vertical-left and vertical-right , we can just add the class vertical for the vertical-left and vertical right for the vertical-right menu .
<ul class="menu vertical">...</ul>
<ul class="menu vertical right">...</ul>
- Button :- In HTML KickStart Framework , for creating a button there is no need to add button class we can simply use button tag and therefore the style would be applied automatically.
It is also easy to apply color to our button , by just adding the name of the color to the class .
If the user wants to apply button to the anchor tag , he /she can simply add button class to it .
Below is the code for number of styles that can be applied over button , these are as follows :-
<!-- Pill Style -->
<button class="pill">Pill</button>
<!-- Pop -->
<a class="button pop" href="#">Pop</a>
<!-- Inset Button-->
<button class="inset">Inset</button>
<!-- Square Button-->
<button class="square">Square</button>
We can also create button bar whose code is similar to the horizontal navigation , below is the code for it :-
<ul class="button-bar">
<li><a href="">New</a></li>
<li><a href="">Upload File</a></li>
<li><a href="">Delete</a></li>
</ul>
- Images :- The HTML KickStart Framework has created pop-ups for galleries and images . For adding the caption it uses caption class and we can also easily float images whether to right or left .
Below is the code for it :-
<div class="gallery">
<a href="img/image1.jpg">
<img src="img/thumb1.jpg" width="100" height="100" />
</a>
<a href="img/image2.png">
<img src="img/thumb2.png" width="100" height="100" />
</a>
</div>
For the caption :-
<img class="caption" title="My Caption" src="img/image.png"/>
Now, for the alignment , here is the code :-
<img class="align-left" src="img/align.jpg"/>
For the SlideShow :-
It also provide a simple slideshow which uses BXSlider which works over jQuery and easy to use .
Below is the code for the simple slider :-
<ul class="slideshow">
<li><img src="img/image1.png”/></li>
<li><img src="img/image2.png”/></li>
<li>
<h3>A Content Slider</h3>
<p>This slider handles HTML content as well as images.</p>
</li>
</ul>
- Forms:- As it become a little bit difficult for styling forms in the Web page but The HTML KickStart Framework has made it simple by using less classes and divs .
Below is the code for the vertical form :-
<form class=”vertical”>
<label for="name">Name</label>
<input id="name" type="text" placeholder=”Your Name” />
<label for="age">Age</label>
<select id="age">
<option value="0">-- Choose --</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<textarea id="notes" placeholder="Some Notes"></textarea>
</form>
As we can see the code , it has include vertical class to the form just because the form elements could not be treated as inline .
One of the best part of the HTML KickStart Framework is that it error notice that could be used with the forms .
Below is the code for it :-
<!-- Error -->
<div class="notice error">Error Notice <a href="#close" class="icon-remove"></a></div>
<!-- Warning -->
<div class="notice warning">Warning Notice <a href="#close" class="icon-remove"></a></div>
<!-- Success -->
<div class="notice success">Success Notice <a href="#close" class="icon-remove"></a></div>
Conclusion :-
The HTML KickStart Framework is nice due to its simplicity of its code with less classes and divs which therefore reduces the risk of generating errors .
By adding the following link to our html , we can easily use it to create a fluid and responsive Web Page .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kickstart.js"></script> <!-- KICKSTART -->
<link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
Note :- The HTML KickStart Framework works on IE 8+ , Safari , Chrome ,Firefox , Opera , Safari IOS .
0 Comment(s)