8 Bootstrap Alternatives

bootstrap_alt_header

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

Foundation - The Most Advanced Responsive Front end Framework from ZURB

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

Zimit Framework - The consistent HTML5 framework

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

InK - Interface Kit

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.

HTML KickStart

HTML KickStart Web Framework

HTML KickStart is perfect place to start for building menus, buttons, placeholders and even slideshows. It contains a set of HTML, CSS, and JavaScript components that will help you save a ton of time, by letting you build things quickly. HTML KickStart has everything you need to rapidly create HTML page layouts including components for buttons, lists, menus tables and more, making it perfect for wireframing.

Kickstrap

Kickstrap

Kickstrap isn’t exactly an alternative to Bootstrap. It is a boilerplate of Bootstrap, JSPM (a JavaScript package manager), AngularJS and Roots (for compiling Jade, CoffeeScript and Stylus). Basically Kickstrap seamlessly combines Bootstrap with a bunch of top-tier web technologies. It can even run an authenticated, database-driven web app without a backend, using built-in Firebase integration.

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

Pure

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

HTML5 Boilerplate  - The web s most popular front end template

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.

YUI

YUI Library

YUI is a free, open source JavaScript and CSS framework for building interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution. YUI has been around for a while and has proven to be scalable, fast, and robust. Built by front-end engineers at Yahoo! and contributors from around the world, it includes a comprehensive API for things like working with the DOM, creating UI effects and loading content via Ajax.

Front-end Frameworks

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.

  • http://www.brutus-maximus.nl Brutus

    http://groundworkcss.github.io/ is one to watch too!

    • http://codecondo.com/ Alex Ivanovs

      Hey Brutus,

      it looks really good, I love the interactive design style!

    • http://twitter.com/1mr_styler Styl3r

      Is it as good as bootstrap??

      • http://novicepost.com/outset-theme/ Ajit

        No, I have used Twitter Bootstrap to create my theme and this one is not as good. But, it is a good alternative to Ink and other frameworks.

  • http://gsb.com sb
    • http://codecondo.com/ Alex Ivanovs

      Hi sb,

      awesome list and spreadsheet all together, thanks for sharing it! :)

  • http://www.adrianmiu.ro/ Adrian Miu

    I would add Semantic UI to the list http://semantic-ui.com/

    • http://rg.com RG

      This UI framework looks good though we need to combine with a Javascript framework

  • Stephen Neate

    This is one I found earlier in the week: http://gumbyframework.com/ there is a lot to like about it, although haven’t built a site with it yet. It does kind of feel like the best bits of Foundation and Bootstrap though.

    • http://codecondo.com/ Alex Ivanovs

      Hi Stephen,

      Gumby looks like a really populated framework, glad you could add it to the list – thanks!

  • Pingback: Articles for 2014-feb-19 | Readings for a day

  • http://iGyan.org IgYAN

    Nice Article, We loved the ink most then others

  • http://www.vissit.com Jaime

    ParaGridma is less important that those frameworks, and they are still developing some modules, but it looks very good too. http://www.vissit.com/projects/paragridma/ what do you think?

  • http://responsivebp.com James South

    Check out Responsive http://responsivebp.com. It’s lighter than both Foundation and Bootstrap, less design opinionated, and has extra functionality including cross device touch detection.

    • RustyH

      Thank you for this! I have been searching for a few days trying to find a real world, lightweight framework because Bootstrap and Foundation are truly too heavy!

  • Pingback: 17 Minimal CSS Frameworks / Grid Systems for Web Developers | CodeCondo

  • http://raju.com.au vijay rudraraju

    I love the lightweight, mobile-first boilerplate called Kraken by Chris Ferdinandi. Extremely lightweight and comes un-styled.
    http://cferdinandi.github.io/kraken/

  • Dave C

    I found http://www.builtwithhtml5boilerplate.com/ good for examples of HTML5 Boilerplate sites and http://www.builtwithbootstrap.com/ good for Bootstrap. But can’t really find any good compilations of foundation or zimit? Anyone?

Top