7 Best Alternatives to Bootstrap

Bootstrap, according to Bootstrap, is for “everyone everywhere.” This is part of what makes Bootstrap great. It’s a good framework for mobile sites that can be used by anyone for a very wide range of purposes.

But that wide range can also make Bootstrap less than ideal for certain projects. Because it was designed for “everyone everywhere” and you are a specific person with a specific need, there will be times when it has more than you want. Sometimes, using Bootstrap is like using a Swiss Army knife when all you really need is a corkscrew.

Here are seven alternatives to Bootstrap to use when you’re working on a lighter project and only need one tool and not a whole set:

1. Bootflat

Not comfortable totally spurning Bootstrap just yet? Bootflat is based on the Bootstrap 3.3.0 CSS framework. Think of it as a stripped down — or flattened — Bootstrap. It’s designed with mobile devices as its top priority. Nearly every single widget it has works with screens of all sizes. It stays light weight by using high-functioning plugins, which keeps JS file sizes and CSS down.
Perhaps best of all, Bootflat also has a PSD User Interface Pack which has tons of pretty sharp looking components. You can use them on websites, startup projects and even Android or iOS Apps. 

2. Skeleton

Skeleton, as the name implies, is a barebones CSS framework, and it’s ideal for working on mobile sites. It has 12-column grid that is fluid — it expands and contracts along with the size of the browser or device. It made the list because it has some muscle, too, even with its sparse features.
If you’ve been struggling with properly formatting forms, Skeleton has some styles that normalizes the height of the inputs, buttons and select, so people can, you know, actually comprehend and fill out your forms. How it handles media queries is also especially good for mobile devices: The grid is built so queries are mobile first, ensuring that larger devices don’t have to deal with a lot of unused CSS as they would for Bootstrap.

3. Toast

If Skeleton’s 12-column grid was a little too restrictive for you, then you might want to try Toast. Toast is even more barebones than Skeleton. It allows you to create as many combinations of as many columns as you want. And — well that’s pretty much it. Toast is basically just a CSS grid.
Unlike Skeleton, it doesn’t screw around with fluid gutters for its grid. Whatever the gutter width is set at is where it’s staying. Toast is what you should use if you have a very specific vision in mind, and all of the supposedly helpful features of these other frameworks just keep getting in the way.

4. Tuk Tuk

Tuk Tuk admits right up front that it is in no way trying to compete with Bootstrap (or Foundation, another multi-use, heavier-duty framework) because “they play in a different league.” Instead, Tuk Tuk is all about simplicity — noticing a theme here? It too has 12 columns.
It’s no accident that you’ll see a lot of frameworks with 12 columns, by the way. Having a duodecimal system works well because the number 12 is so divisible. If you have a whole lot of small items, you can have 12 columns. If you only have a few, you can have four or three. Tuk Tuk’s website provides a few examples (blog pages, landing pages, profile pages and web applications) that show how many diverse looks you can get from that 12-column base.

5. Jeet

Like Toast, Jeet is all about getting you off of that 12-column grid Skeleton and Tuk Tuk use so well. Jeet, however, goes even further than Toast in its dedication to customization. It doesn’t just allow you to create any number of columns that you want. It allows you create a totally custom grid based on decimals. Forget 12 columns — you can have 11.75. Jeet also is known for its speed. Its syntax is reassuringly legible — creating a .5 column is as simple as col(1/2) — and easy to use.

Plus, it can be used as a Ralis application, in a Stylus Node package, or just in a plain old SCSS static site. Unlike a framework like Toast, which is all about just getting out of your way, Jeet’s website has videos to help you get started and others to take you to another level once you’re settled in.

6. Concise CSS

Here is another one whose name is a good description of how it works. Built specifically for mobile devices, Concise has been used to put together some pretty sharp web pages. You don’t have to speak Spanish to be able to tell that this example is showing off some neat-looking design. Concise made it all possible.

There are Stylus and LESS versions of Concise out there, but Concise itself includes support for Vanilla CSS and SASS. It also features add-ons — libraries or pieces of code that aren’t in the main Concise package, like extra effects and even more CSS styling.

7. Mueller

Like lots of these other frameworks, Mueller really gives you a lot of control. You can manage the media-queries, the baseline grid, the column width and the gutter width. All of this is done on a modular grid system, which is based on Compass.

Like Jeet, you can add decimal classes on top of your layouts. You can also opt for a single default grid. You could then choose to extend that grid into a predetermined layout. Mueller also allows you to use templates instead if just filling your markup with presentational classes.

Find the One That Works for You

Just as it doesn’t always make sense to use Bootstrap, it won’t always make sense to use one of these alternatives. You know best what your needs and desires are. If you want more freedom, you might want to check out Toast or Skeleton. If you’d rather have a little more support, you might want to go for something like Tuk Tuk. No matter what, the right framework for you is out there somewhere, and it isn’t always Bootstrap.


Pin It on Pinterest

Share This