Ghost Themes
SimpleChat.Support - Open Source Live Chat App
0%
sGrid - Working with Flexible Box layouts
words - read.

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. 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:

You can also try it live with such tools 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.

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 change 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 setup 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 main grid structure and CSS classes. You can preview all files on 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 ready to use workflow and also with Meteor based projects.

Basic 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 project described here: http://julian.io/foundation-5-and-yeoman/ 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 'grunt' task and the server with live reload should start on 127.0.0.1:9000.

There will be two folders 'app' and 'dist'. You should 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:

I encourage you to read more about a very similar workflow in my Yeoman Foundation blog post.

sGrid with Meteor

Using it with Meteor projects is even simpler. You just 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 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.

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

Comments

comments powered by Disqus