Software:Kickstart CSS library
| Original author(s) | Adam Grant |
|---|---|
| Initial release | 2011 |
| Stable release | 3.1.1
/ May 5, 2015 |
| Written in | Jade, Sass and CoffeeScript |
| Platform | Web engines |
| Type | HTML and CSS-based design templates |
| License | MIT License |
| Website | getkickstart |
Kickstart is a lightweight open source CSS library. It is not a front end framework like Bootstrap. This makes websites using Kickstart much faster and lighter than those which have to load a complete UI library.
Kickstart is gaining popularity as a Bootstrap alternative and now has over 1,700 stars on GitHub and has been forked more than 36,000 times. [1]
Origin
Kickstart is an evolution of "Kickstrap", which was designed to be a layer above Bootstrap. Kickstrap allows users to create their own customization and is loosely coupled with Bootstrap core. Thus it does not hinder any updates on Bootstrap.
While working on Kickstrap several observations were made that lead to the creation of Kickstart. They are:
- Frameworks are huge and slow.
- They are difficult to extend
- They have only one or few themes.
In Kickstart extensibility was given the topmost priority, something that is still lacking in today's framework. It was this primary motivation that lead to the creation of Kickstart store.[2]
It was only in the third version of Kickstrap, when Bootstrap was completely removed and thus the name Kickstart was chosen. Kickstart v3.1.0 is now its own CSS library.[3]
Features
Kickstart officially supports all the Evergreen Browsers. It also supports the following- IE 10+,IE9 with shim, Chrome 35, Firefox 30+, Safari 8+.
It provides native support for projects in HTML, Jekyll, Gulp and Rails. Since Kickstart gives a high priority to extendibility it has a native support for third party components along with an Official Component/Theme store.
There are several other features[4] which are not present in today's frameworks(such as Foundation and Bourbon), such as:
- Optional single-mixin components
- Flexboard Grid
- Optional simple CDN-hosted CSS/JS usage
Usage
The power of Kickstart comes in its simplicity. It is very easy to include the CSS libraries statically in HTML or using it in a mixin. This sample code demonstrates that.
Static HTML[4]
<!-- We will use the CSS class called navbar and button from the Kickstart library in this example -->
<div class="navbar">
<nav>
<ul>
<li>
<a href="#">Heading1</a>
</li>
<li>
<a href="#">Heading2</a>
</li>
<li>
<a href="#">Heading3</a>
</li>
</ul>
<ul>
<li>
<a class="button button-primary" role="button" href="#">Send</a>
</li>
</ul>
</nav>
</div>
This will create a navigation bar in the webpage with three headings(Heading1,Heading2 and Heading3) and a button called Send.
Mixin[4]
// including the CSS class in the mixins below
.my-navbar { @include navbar(); }
.button { @include button($primary-color); }
<div class="my-navbar">
<nav>
<ul>
<li>
<a href="#">Heading1</a>
</li>
<li>
<a href="#">Heading2</a>
</li>
<li>
<a href="#">Heading3</a>
</li>
</ul>
<ul>
<li>
<a class="button" role="button" href="#">Send</a>
</li>
</ul>
</nav>
</div>
The above code will generate exactly the same navigation bar as the static HTML above. So Kickstart gives web designers a lot of flexibility in development.
Notes
External links
 |
