sGrid / Getting Started

About

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)

Read more at: julian.io

Also take a look at: medium.com and sitepoint.com

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().

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 // this one is optional

 

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.

Why sGrid?

  1. It is made for Stylus and Stylus is the best! (imho) ;)
  2. It is a Flexbox grid system which uses native calc() function.
  3. You can use Stylus functions, but also ready to use classes (for prototyping etc.)
  4. You can integrate it with other Stylus plugins in any type of project.
  5. There are integrations for Grunt (scaffold), Meteor (package) and React (ready to use boilerplate with Webpack).

When not to use sGrid?

  1. When you need to support older browsers like IE10 and below.
  2. There are some problems with Flexbox on IE11 which has workarounds. See here: https://github.com/philipwalton/flexbugs Actually there is one of these workarounds used here on this page. (#7 IE11 bug)
  3. Other?

For installation documentation choose how you want to use sGrid and read more in separate sections of this documentation.

  1. You can use it as a standalone Npm package (in every project which uses Stylus and Npm packages).
  2. With ready to use Grunt workflow.
  3. With the React boilerplate.
  4. With the Meteor package.

I encourage you to contributions :) in all sections whether it is React boilerplate or Grunt or Meteor. Or even this website. I know that some things could be done better and they will, but with contributors we can achieve it faster :)

For more detailed grid documentation see here: Grid

If you want to try other grid system. I can recommend awesome grids. Take a look at:

  • 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)