By Alex Ivanovs
You’ve probably heard a lot about Bootstrap. Put simply, it is a front-end framework that helps speed up and improve building functional websites.r. The original Bootstrap (also known as Twitter Bootstrap) was the project of two Twitter employees, Mark Otto and Jacob Thornton.
Twitter Bootstrap is great, for developers. It allows us to put things together easily, without having to put nearly as much time into some of the design aspects of development.It does lack support for legacy browsers, but, for many applications, this is not an issue, though it’s worth taking note of.
However, when choosing a front-end framework, it comes down to what you need and want from it, and that is one of the big reasons why there are so many alternatives available to the Bootstrap. This doesn’t necessarily mean that someone is trying to compete for the top spot, but merely that there are options to consider and potentially try something new.
In this article I will discuss a handful of alternatives to Bootstrap – hopefully some that may be new to you while others you may aleady be familar with. While I won’t go into great detail about each, I will mention the most notable features and, where relevant, a little bit of history for each.
Foundation, from Zurb, is a very popular front-end framework and was the first ever open-source web framework to support responsive design and the first to be Mobile First. The team knew that future of the web design standards is changing, successfully predicting that mobile would lead the way.
The newest version, Foundation 5, was released in the fall of 2013 and brought some much needed improvements that have set a new standard for web frameworks. My favorite is ‘Interchange‘ – a simple way for using media queries to change content depending on the user’s browser. It makes it possible to provide lighter component options for mobile users.
Foundation is very well documented, so check the official documentation to learn more.
Zimit is a very lightweight HTML5 framework for prototyping responsive web site designs for web developers. It’s based on the LESS CSS pre-processor and provides a framework designed for scalability and code that’s easy to read and understand. It supports all modern web browsers and compiled it’s only 88kb in total file size.
I suggest playing around with how the framework hanldes responsive design for a little bit. The design section of the documentation offers some inight and shows how Zimit handles responsive grids.
InK is an interface kit for the rapid development of web interfaces that aims to be easy to use and expand upon. It’s also based on LESS and offers a fluid grid and other responsive development features for creating both large and small website projects. InK’s primary differentiator is how it handles layout, allowing flexibility in how blocks fall within the grid. You can see some demos of sites build with InK here, and here.
Just like any other framework, it was built to take away the hassle of having to start every project from scratch and from having to think about how you’re going to support a range of browsers. You can head over to their getting started guide to get a feel for it.
The version of Bootstrap included is a fork, but offers some really nice functionality including a bunch of built-in themes which you can preview on their page.
Pure, created by Yahoo! is a collection of CSS modules designed to be extremely compact (4.5KB minified and gzipped). It offers the ability to select only the pieces that you need, saving and compressing the size again. This can be especially important on mobile devices. You can see a really nice comparison to Bootstrap in this review.
HTML5 Boilerplate isn’t really a framework but rather it is a professional front-end template to give you a head start building a robust and adaptable web app. Boilerplate comes baked with Modernizr, Normalize.css and jQuery to help you create pages that work across browsers and can adapt to browsers that don’t offer support for certain features.
I know I have missed some front-end frameworks (I wrote a post about Node.js web frameworks on my blog and I had missed a ton of good ones that also had great communities behind them). These are just some of the tools I have saved in my own bookmarks over time. However, feel free to leave comments if you know of one I missed or have experience with one of these that you’d like to share. The web is growing very quickly, with new libraries appearing all the time, and it’s not easy to keep track of everything at once.
Modern Web Newsletter
Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.