This is part of the underappreciated series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. For a full introduction, see the first article in the series.
Kickstart is a bit different, and a bit more ambitious, than some of the other frameworks featured in this series so far. It aimed to take on Bootstrap and Foundation directly. And, though it didn’t quite reach that status, it comes with some great ideas.
The implementation’s great too. Really, the only thing missing was lots and lots of marketing. But don’t take my word for it.
The best parts
The framework is SASS-based, full-featured, and it weighs in at 8kb. A comparison chart is provided for Bootstrap and Foundation, but the information might be a bit old. Even so, I’m pretty sure they’re both still bigger than 8kb.
So keep in mind, as you read on, that this thing is tiny.
Original JS library
A big contributor to the size of other frameworks is the pretty-much-default inclusion of jQuery. Kickstart comes with its own JavaScript library, and small set of functions.
Sure, it’s not as powerful, but you can still do basic stuff like select DOM elements, add classes, and so on. Since most of us are animating things with CSS3 these days, that’s about all you need for a modern app interface. Beyond that, get ready to write your own JavaScript, or integrate the library/framework of your choice.
Marketplace
Yes. This thing has its very own marketplace. See, not only was Kickstart designed to be extended and themed, Adam Grant (Kickstart’s creator) actively encourages it.
So far, the only extensions and themes on the marketplace come from Mr. Grant. However, if this framework ends up really taking off, there’s already a place for anyone who wants to share their contributions.
Amadeus
Amadeus is not a component as such. It’s a set of conventions for contributors, to keep them on the right path, code-wise. Because SASS allows for programming concepts like variables, mixins, and other stuff like that, Amadeus was introduced to keep those variables and functions consistent.
Here’s how it’s explained in the documentation:
Conceived as a convention for future versions of Kickstart, Amadeus is a set of conventions to keep your CSS variables organized and intuitive. These are not conventions for CSS classes however.
The standard stuff
On top of all that cool stuff, Kickstart has a lot of fairly standard features. Unless you need one of the sort of “specialist” components from another framework, you should have everything you need right here:
- Alerts
- Buttons
- Containers
- Forms
- Grid (flexbox-based)
- Icons
- Labels
- Modals
- Navigation
- Notifications
- Tables
- Tabs
- Tooltips
- Typography styles
Installation
Kickstart comes with quite a few methods for easy installation. It can be installed as a Rails gem file, from NPM, and it is compatible with Gulp and Jekyll. Naturally, you could just download the .zip file and go from there.
Yet another option is to hotlink to the CSS and JS files on Kickstart’s very own CDN.
Conclusion
Kickstart is, as I said earlier, ambitious. Better yet, the concepts were well-executed. It’s a true shame that more people don’t know about it. I hope that more people take notice, and either use it, or introduce some of Kickstart’s ideas to other frameworks.
