sGrid - Working with Flexible Box layouts

01 April 2015

Working with CSS is always hard especially in big projects. We have many CSS frameworks nowadays which try to help with this. Everyone knows Bootstrap or Foundation. Basically we always need some kind of grid system to be the foundation of our layout.

A majority of those frameworks are based on a standard Box Model. It’s a well established approach and it’s really very useful. But sometimes we encounter some edge cases with it like vertical aligning, ordering and complicated systems with overdose CSS styles.

We need something better.
Here comes Flexbox (Flexible Box Layout). This is a new standard although it has been in web development for a long time.

I want to show you how I work with Flexbox, how I have automated my workflow, and how you can customize yours.

What I want to show you here is my Flexbox grid system based on Stylus. You can use it with Meteor as a package or as a standalone tool using Grunt based configuration with many other useful tools such as Wiredep, LiveReload and Usemin.

What is Flexible Box Layout?

I don't want to write a tutorial about it here because there are so many great articles on the web. Whatever I write here will be poor in comparison to those such as:

It is also important that Flexbox be used wisely. You should mix it with solid containers. Flexbox is very good, but you always want to put it in some frame like layout containers.

Also it needs to be said that Flexbox is in W3C working draft. It means that the specification for it isn't officially finished, but in fact it shouldn't change. Many browsers support it, but it needs some vendor prefixes. See support table here: http://caniuse.com/#search=flexbox

With sGrid using Grunt or Meteor workflow you don't need to think about vendor prefixes because we will use Autoprefixer there.

What is sGrid system and why Stylus?

sGrid is a Flexbox grid system built with Stylus CSS preprocessor. It is prepared to use with helper classes, like Bootstrap or Foundation does it, but also in a more semantic way by using special Stylus functions. More about it later. It is also based on CSS native calc().

Stylus is the best CSS preprocessor, in my opinion.
It is fast and very intuitive with great JavaScript API and plugin system. I like the way I can write without colons, semi-colons and braces. Usage of functions and mixins is very simple. I strongly encourage Less and Sass users to try it out, especially with JavaScript development.

If you remember Bootstrap or Foundation grid classes and you know how to use it you will understand exactly what to do. Here I will show you basic usage examples.

For a more detailed documentation you can go to the website: http://stylusgrid.com/docs.html There you'll find full sGrid documentation. Below there are some cases of how you can use it.

It is very similar to other CSS grids usage but here we use Flexbox. In this example we have a standard 12 columns grid (You can change it in the settings). All cells will be the same and will change depending on screen resolution.

You can change the names of the main classes in the settings when you overwrite defaults. (read about it on the stylusgrid.com). You can also extend custom classes and use the grid() and cell() functions to create your custom styles. It is a very clean and simple usage case. It is also a recommended one because you will keep your html code clean and you can structure your styles as you want.

sGrid summary

Here you have a simple and functional grid system based on Flexbox which you can use with helper classes or with Stylus functions. It has elastic settings to overwrite, and it is a very small and light library.

You can use it as a standalone npm package with a ready to use Grunt project scaffold or with a Meteor project.