laptop-phone webbbr

3 CSS Frameworks worth checking out in 2016

, May 24, 2016
css-frameworks

Before we get under way, let’s try and address the elephant in the room. Bootstrap. This is the big player and if your team is using it (most are) then it’s quite possible you are going to have a hard time persuading them to change. But what if there was a better way? Well, reader, open your mind wide and read on because I promise you at least one of the 3 CSS frameworks mentioned in this article is definitely, at the very least, worthy of your consideration.

Step forward the candidates..

Pure.css

Pure is a CSS framework, nothing more, nothing less. Adding Pure to your site is very easy. You can add Pure to your page via Yahoo’s free CDN. Just add one single include into your page’s head, before your project’s stylesheets.

Reasons to like Pure

  • Pure is small (4.0KB* minified and gzipped).
  • Pure grids offer arguably greater flexibility than Bootstrap.
  • Pure’s design is unopinionated, minimal and flat.

Drawbacks

  • Getting your head around new naming conventions that will seem alien at first.
  • Getting your team to adopt a new way of writing code.
  • Still in relative infancy.
  • The CSS may be minimal, but there is some evidence of bloat in the required html for the menu – “pure-menu-item pure-menu-has-children pure-menu-allow-hover”.

Bulma

In a similar vein to Pure, Bulma is just a CSS framework. As such, the sole output is a single CSS file: bulma.css.

You can either use that file, “out of the box”, or download the Sass source files to customize the variables. There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic.

Reasons to like Bulma

  • Easy vertical centering in fullscreen.
  • Logical, memorable naming conventions.
  • Flexible columns (columns that will take up the remaining space available).
  • Magic Tiles feature looks interesting.
magic-tiles

Drawbacks

  • Getting your head around new naming conventions that will seem alien at first.
  • Getting your team to adopt a new way of writing code (especially one based on flexbox).
  • Still in infancy.
  • Are you really ready to use a flexbox framework for your clients site??!

Cutestrap

Cutestrap, like Bulma, also utilises flexbox. It is also light, weighing in at just 8kb of CSS and characterises itself as ‘a sassy, opinionated CSS Framework. A tiny alternative to Bootstrap”.

Reasons to like Cutestrap

  • Simple grid system, declare once and child elements will size themselves to be equal width to their siblings.
  • Familiar naming conventions.
  • Nice looking forms that are modified using only CSS so accessibility doesn’t suffer.

Drawbacks

  • Grid system possibly reminiscent of tables.
  • Same drawbacks as Bulma above.

What have been your experiences of the above CSS frameworks? Your opinions and thoughts welcome as always. For a list of more CSS frameworks see http://cssframework.net/.