Responsive Design: 6 Bootstrap Alternatives


Top Responsive Frameworks & Grid Systems

As a responsive designer, you may want to consider viable alternatives to Bootstrap, but also avoid the "flavor-of-the-day" grid systems that come and go. These top frontend frameworks will allow you to build sites faster, and reap the benefits of responsive layouts, pre-defined styles and reusable components. So, which framework is best for you?


#1 - Foundation

http://foundation.zurb.com

The most apparent alternative to Bootstrap, Zurb's Foundation boasts a robust mobile-first grid system and many components that are missing from Bootstrap. Take a look at Foundation's responsive images, Equalizer, Pricing tables, Switches and JoyRide for some features you won't find in Bootstrap. However, Foundation doesn't have the wide variety of themes readily available for Bootstrap, so consider that if you plan on changing Foundation's minimal look-and-feel. It's easy to customize Foundation based sites using a separate style sheet or SASS. Foundation uses em sizing for most elements (ie: grid column widths, media queries, font-sizing, etc..) which provides improved flexibility over Bootstrap's percentage based unit sizing. You'll also find that Foundation is widely used, and plenty of tutorials to help you along.

Size / footprint: medium
Ideal for: Closest framework to Bootstrap.
Try Foundation on Codeply

Foundation Example:


#2 - Skeleton

http://getskeleton.com

Toughted as a "dead simple, responsive boilerplate", Skeleton is exactly that. Skeleton is a great choice for designers and developers that simply want a responsive grid. You won't find all the bells-and-whistles of Bootstrap such as sliders, alerts, panels and navbars. Skeleton is solely a CSS framework so you don't need to worry about any JavaScript / jQuery bloat. What Skeleton does offer is a powerful, lightweight grid that is perfect for creating responsive layouts. Skeleton also provides some base styles for typography, buttons and forms. On the downside, Skeleton doesn't include class for column ordering which would really help to make the minimal grid more flexible.

Size / footprint: small
Ideal for: Minimal grid only, no styles.
Try Skeleton on Codeply

Skeleton Example:


#3 - Pure CSS

http://purecss.io/

Created by Yahoo!, Pure is another minimal CSS-only framework that's an extension of normalize.css. It's a repsonsive grid system that also includes core styles for forms, buttons, tables and menus. Like Bootstap, the Pure grid has 4 breakpoints for different device widths - sm, md, lg and xl. Pure ships with both a 5ths and 24ths based grid. The 5ths-based grid is very handy for layouts with odd numbers of columns, which is a layout feature you won't find in the Bootstrap grid.

Size / footprint: small
Ideal for: Minimal grid with a few extras.
Try Pure on Codeply

Pure Example:


#4 - UIkit

http://getuikit.com/

UIkit image

UIkit is self-described as "A lightweight and modular front-end framework for developing fast and powerful web interfaces". It's a very complete and complex framework that has just about everything but the kitchen sink. This is framework of choice for developers that want an all-in-one CSS/JS framework that doesn't leave you searching for that missing component. UIkit's grid is very flexible. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions, column ordering and multiple gutter sizes. None of the other frameworks offer this level of control. UIkit also supports CSS 3's flexbox which enables support for things like equal height columns. Check out the customizer and themes available at the UIkit website. UIkit is separated into "core" and "components" bundles which is beneficial if you just need the base features and components without all the extras provided in "components" bundle.

Size / footprint: medium to large
Ideal for: Many layout options and elements.
Try UIkit on Codeply

UIkit Example:


#5 - Semantic UI

http://semantic-ui.com/

Semantic UI image

Semantic UI is another component library implemented using a set of specifications designed around natural language. Like Bootstrap & UIkit, Semantic UI is a very complete framework that is extensive with features and components. Similar to Foundation, Semantic UI uses em grid and element sizing. Semantic includes more than 3000 theming variables so make it very easy and flexible to theme. The component libary is extensive with stuff like buttons, modals, labels, loaders, breadcrumbs, forms, accordions, cards, menus, etc.. Semantic UI is made available via a single large bundle of CSS and JavaScript files, which is something to consider if you're looking for a minimal framework.

Size / footprint: very large
Ideal for: Everything, and then a little more.
Try Semantic UI on Codeply

Semantic UI Example:


#6 - Materialize

http://materializecss.com/

Materialize CSS

Many frontend developers are moving towards adoption of the Principles of Google's Material Design. At the core, Material Design emphasizes the metaphor of real world paper & ink. MD uses motion (animation) to focus attention and meaningful user interaction. MD elements and colors are bold & deliberate. The team at Materialize has adopted these principles into their responsive front-end framework that's based on Material Design. Materialize provides a responsive grid with 3 breakpoints, and many UI components that enable Web developers to rapidly design sites based on the Material Design language. It includes animation features, cards, collections (lists), buttons, form styles and 740 Material Design Icons courtesy of Google. There are also several JavaScript components that facilitate other features such as modals, scrolling animations, tabs and dialogs. Materialize is a very new framework, which it something to consider if you're looking for a stable, mature codebase. Currently it's available as a bundle of minified CSS and JS files, or as a SASS bundle for improved customization.

Size / footprint: medium
Ideal for: The next big thing.
Try Materialize on Codeply

Materialize Example:


In conclusion, there is not a "best" framework for everyone, but there may be one Bootstrap alternative that is best suited to your needs. You can play with all of these great frontend frameworks at Codeply. Did I miss one that is a viable alternative? Let me know in the comments.