01 April 2015

sGrid - Working with Flexible Box layouts

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. We always need some 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 handy. But sometimes, we encounter some edge cases 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.

I want to show you my Flexbox grid system based on Stylus. You can use it with Meteor as a package or a standalone tool using Grunt-based configuration with many other valuable 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 many great articles on the web. Whatever I write here will be poor in comparison to those such as:

You can also try it live with such tools as:

It is also crucial that Flexbox be used wisely. It would help if you mixed 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 the 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.

What is the 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, 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 a 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 straightforward. I strongly encourage Less and Sass users to try it out, especially with JavaScript development.

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

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

You can use it as a block grid:

<div class="s-grid-top s-grid-sm-12 s-grid-md-6 s-grid-lg-4 s-grid-xlg-3 s-grid-xxlg-2">
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell">
        Lorem ipsum dolor sit amet.
    </div>
</div>

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 vary depending on screen resolution.

You can align all cells vertically by using:

s-grid-top
s-grid-center
s-grid-bottom
s-grid-stretch

You can also add:

s-grid-justify-center - centering all columns horizontally

Another example is a grid with different cells:

<div class="s-grid-top s-grid-justify-center">
    <div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-4">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-4">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-center s-grid-cell-sm-12 s-grid-cell-md-12 s-grid-cell-lg-4">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-12">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-sm-6 s-grid-cell-md-6 s-grid-cell-lg-8">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-bottom s-grid-cell-sm-6 s-grid-cell-md-12 s-grid-cell-lg-4">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-sm-4">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="s-grid-cell s-grid-cell-sm-6 s-grid-cell-offset-sm-2">
        Lorem ipsum dolor sit amet.
    </div>
</div>

You can use individual classes for vertical positioning:

s-grid-cell-top
s-grid-cell-center
s-grid-cell-bottom

You can also use offsets here, just add classes like:

s-grid-cell-offset-sm-2
s-grid-cell-offset-lg-3
s-grid-cell-offset-xxlg-6
..etc

You can use it without helper classes. This is a semantic approach.

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.

Stylus part:

section
    grid()
    aside, main
        cell(columns, columns, gutter)
    @media screen and (min-width: rem-calc(breakpoints[md]))
        aside
            cell(columns / 3, columns, gutter)
        main
            cell((columns / 3) * 2, columns, gutter)

HTML part:

<section>
    <aside>
        Lorem ipsum dolor sit amet.
    </aside>
    <main>
        Lorem ipsum dolor sit amet.
    </main>
</section>

You can nest your grids, reorder cells, and you can also set up grid direction from top to bottom. Read more on: http://stylusgrid.com/docs.html

sGrid installation and ways of use

In the core of the grid lies the npm package, which includes three main .styl files.

s-grid-settings.styl 
s-grid-functions.styl 
s-grid-classes.styl // optional - only if you want to use helper classes

You can find the npm package on the npm registry here: https://www.npmjs.com/package/s-grid, and you can also preview files on GitHub here: https://github.com/juliancwirko/s-grid.

The first file includes grid settings, the second one is the grid logic, functions, and mixins, and the last one is the primary grid structure and CSS classes. You can preview all files on the GitHub repo.

sGrid is divided into three files because you should have the possibility to overwrite settings and even functions in your project.

You can use it as a standalone npm package or with Grunt's ready-to-use workflow and also with Meteor based projects.

The primary usage of sGrid is by simply installing the npm package and including .styl files in your project. You can install it by:

$ npm install -g s-grid

and then in your project (main .styl file) include files:

@import 's-grid-settings' 
// you can overwrite settings here
@import 's-grid-functions' 
@import 's-grid-classes'

In this case, you need a refresher on Autoprefixer: https://www.npmjs.com/package/autoprefixer-stylus.

A better approach is to use it with the Grunt-based scaffold project or with the Meteor project. There is a Meteor package on Atmosphere.

Grunt project with sGrid

If you need something similar to the Yeoman/Grunt you probably want to check out this repo: https://github.com/juliancwirko/s-grid-grunt.

This is a ready-to-use Grunt project scaffold. All you need is npm and bower installed. If you want to use sGrid with Grunt, just run:

$ git clone git@github.com:juliancwirko/s-grid-grunt.git 
$ cd s-grid-grunt 
$ rm -rf .git 
$ npm install 
$ bower install

You will have a clean project scaffold with Autoprefixer included and working. When you clone the repo, just run the 'grunt' task, and the server live should start on 127.0.0.1:9000.

There will be two folders, ' app' and 'dist'. It would be best to work in the 'app' folder and then build the project into the 'dist' folder.

You can build your project by running 'grunt publish'. It will prepare your CSS and js files, and it will compress and concatenate them.

With this scaffold you can use such Grunt tasks as:

sGrid with Meteor

Using it with Meteor projects is even simpler. You have to install the package:

$ meteor add juliancwirko:s-grid

Then in your project, in your main .styl file, include all three files. The same as above. You shouldn't install the Stylus package as it will be installed with the s-grid package.

You can even use PostCSS plugins with this package. Check it out!

Meteor package information websites:

sGrid summary

Here you have a functional and straightforward grid system based on Flexbox that you can use with helper classes or Stylus functions. It has adjustable settings to overwrite, and it is a tiny and light library.

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

I am waiting for your feedback. Thanks.

Update: Also read about it on Medium.com: My workflow with the Stylus and Flexbox grid system and SitePoint.com Introducing sGrid: A Stylus-based Flexbox Grid System

Update: New sGrid website with documentation: http://stylusgrid.com

Update: There is also the React Webpack boilerplate project with sGrid included. You will find it here: https://github.com/juliancwirko/react-boilerplate.