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, 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 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 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 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 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, 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 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 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.
Frontend 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.
https://groundworkcss.github.io/ is one to watch too!
Hey Brutus,
it looks really good, I love the interactive design style!
Is it as good as bootstrap??
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.
https://docs.google.com/spreadsheet/ccc?key=0AiN0QfBTPpOCdDFjWlM0eU1ra21XanZkekxGbjA2WWc
has a bunch.
Hi sb,
awesome list and spreadsheet all together, thanks for sharing it! 🙂
I would add Semantic UI to the list https://semantic-ui.com/
This UI framework looks good though we need to combine with a Javascript framework
This is one I found earlier in the week: https://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.
Hi Stephen,
Gumby looks like a really populated framework, glad you could add it to the list – thanks!
Nice Article, We loved the ink most then others
ParaGridma is less important that those frameworks, and they are still developing some modules, but it looks very good too. https://www.vissit.com/projects/paragridma/ what do you think?
Check out Responsive https://responsivebp.com. It’s lighter than both Foundation and Bootstrap, less design opinionated, and has extra functionality including cross device touch detection.
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!
No worries 🙂
I’ve just released v3 which adds a lot more goodness including accessibility and right-to-left language support. All without any bloat.
I love the lightweight, mobile-first boilerplate called Kraken by Chris Ferdinandi. Extremely lightweight and comes un-styled.
https://cferdinandi.github.io/kraken/
I found https://www.builtwithhtml5boilerplate.com/ good for examples of HTML5 Boilerplate sites and https://www.builtwithbootstrap.com/ good for Bootstrap. But can’t really find any good compilations of foundation or zimit? Anyone?
SAP have open-sourced their responsive framework OpenUI5 at https://sap.github.io/openui5/
I use AngularJS along with classyUI from http://www.classyui.com, and these two libraries help me save me a lot of time when I’m developing complex applications, I use angular to control all the events and synchronization features of the application, and complement that with the classyui rich set of components
I created this simple framework http://www.simplecss.it is small complete
Iam using lightweight responsive css framework (14kb) with pure css and minimal js without any dependencies .It is a bootstrap alternative with 100% speed. https://lightuikit.in.
Our company is likely moving away from Bootstrap altogether. The reason? The file sizes have become too big, and smart editors like Dreamweaver, Zend, and Codelobster try to call those Bootstrap files causing the editor to hang and crash. This happens on all our machines despite some having SSDrives and mega memory. There are many posts on this, with some blaming Adobe, Bootstrap, and templates. The end result is we can no longer edit files. Too bad, as Boostrap has the most robust tools, but they won’t take ownership of this even though we provided 10 coherent reasons why. Just an FYI for those considering investing time and resources into a framework.
Same story here. We have been redesigning websites for quite some time now and Bootstrap has been our first choice, but it has become a nightmare for clients to view the site on mobiles when the connection is not 4G (well, yes, everybody does not live in San Francisco), simply because it takes a lot of time to load all the components of the framework (speak alone of the CSS which is bloated with tons of features we will never use). After having spent months of “cleaning” the Bootstrap CSS for every client, we now face the sad reality: this is just a waste of time.
We had to switch to X-Code to edit our websites as Dreamweaver just hangs for long minutes, even with Style rendering unchecked (with actually is the only great thing in Dreamweaver).
What competitor of Bootstrap would you chose for the near future?
We still didn’t make a decision.
We are still using Bootstrap for now, but editing docs with Brackets (Adobe Labs). Are you loading customized Bootstrap files from an app? We used files from an Admin Template that was good, but found that their styles.css file was 1MB and crashed every smart editor we use. Minifying the .css can help, but only to a point because the greater the compression the higher the likelihood that layouts fail.
Ink is built on SASS, not LESS. You should probably update that, as I think SASS might be the more popular preprocessor. LESS is almost a deal breaker for me.
Do all / most frontend frameworks require javascript? What about jquery? Are there any that use only css? I have small and odd projects where I what to do the all the javascript on my own — but would like css that has reasonably coordinated colors and html powered layout.
Best replacement for Bootstrap is uikit! https://getuikit.com/
I completely agree. I loved frameworks like bs & foundation, then I hated it once I started looking at performance and how much of it I didn’t need in my ux layouts. I think a modular approach it best. So you build a core like in foundation with a: reset, grid, typography, basic forms, etc and then you can also add a module for blog, gallery, carousel, dashboard etc. This way you can save time and only add what parts you need for a given project. I’m working on a framework that will in the future have modules. Right now it’s just the core. It’s hosted on github and it’s called spark. It’s meant for an aid to building the best ux layouts so it’s kind of opinionated but uses the bs grid class naming scheme and buttons too. Spark CSS Framework
@Nehal I built a framework I called CSS Cement without any need for javascript https://rachelreveley.co.uk/css-cement/
https://tailwindcss.com/is also best utility-first CSS framework for rapidly building custom designs.
but i am boostrap lover i love this framework