My workflow with the Stylus and Flexbox grid system

  1. I needed a very light Stylus library
  2. I needed only a plug-in-able grid system without any other UI elements
  3. I needed a Flexbox grid
  4. I needed grid classes for prototyping but also Stylus functions to build custom and semantic grids.
  5. I needed a grid which is fully configurable — columns amount, gutters, flexbox properties, breakpoints etc.
  1. Why Stylus and Flexbox?
  2. sGrid and Npm package walkthrough
  3. How to use it with: Meteor, React and Grunt
  4. Layout examples built upon sGrid
  5. When to use sGrid and when not to
  1. Stylus tutorial
  2. Flexbox tutorial

Why Stylus and Flexbox?

compare(a, b)
if a > b
higher
else if a < b
lower
else
equal

sGrid and Npm package walkthrough

@import 's-grid-settings'
@import 's-grid-functions'
@import 's-grid-classes' // optional
.container
center(1200px)
grid()
.column
cell(1, 2)
<div class='container'>
<div class='column'>lorem ipsum 1</div>
<div class='column'>lorem ipsum 2</div>
</div>

How to use it with: Meteor, React and Grunt

$ meteor add juliancwirko:s-grid
$ git clone https://github.com/juliancwirko/react-boilerplate.git
$ git clone https://github.com/juliancwirko/s-grid-grunt.git

Layout examples built upon sGrid

When to use sGrid and when not to

  • You need Flexbox grid and you work with Stylus
  • You work with Meteor or other JS platforms and need only a grid system
  • You don’t need to support older browsers
  • You want to build a mobile hybrid app
  • You want a very light grid system without other UI elements
  • You need to support older IE browsers like IE 10 and below
  • You want to build some really complicated grid layouts and you need to support IE 11 browser

sGrid summary

  • Jeet — If you don’t want to use Flexbox and you like how sGrid is built.
  • Lost — Great grid. You can use it with PostCSS
  • Zurb Foundation Grid — Foundation 6 Grid will be so cool! You definitely need to check it out. (Scss)

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Julian Ćwirko

Julian Ćwirko

julian.io

More from Medium

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

CSS Specificity

HOW CSS IS APPLIED TO HTML ELEMENTS?

What does CSS do? The power of Cascading Style Sheets (1/3)