s-grid

sGrid - Flexbox Grid System for 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.

It has many integrations like Meteor, Grund and React.

- More complex documentation: http://stylusgrid.com
- Blog post: sGrid - Working with Flexible Box layouts
- Blog post: My workflow with the Stylus and Flexbox grid system
- Article on Sitepoint.com: Introducing sGrid: A Stylus-based Flexbox Grid System

Instalation

This is a standard Npm package so you can use it standalone, but you can also use it with boilerplates for Grunt and React. Also with Meteor.

Usage

- Npm
- Meteor
- React Boilerplate
- Grunt Boilerplate

You should use it with Autoprefixer https://github.com/jenius/autoprefixer-stylus Package for Meteor is bundled with it. It is also configured in Grunt and React boilerplates.

You'll find more complex documentation and examples here: http://stylusgrid.com/.

$3

#### With only sGrid functions

Stylus code:
``css
section
grid()
div
padding rem-calc(15)
cell(1, 4)
&.other-cell
cell(2, 4, 'bottom')
&.different-cell
cell(1, 3, g: 30px)
`

HTML code:
`html


HTML code:
`


You can overwrite the settings (from s-grid-settings.styl file), just place your settings after s-grid-settings import. Do something like this:

`bash

// main s-grid settings file:

@import 's-grid-settings'

// my new settings goes here:

base-font-size = 16 // base font size it is 16px by default it is used to calculate rem sizes
gutter = 20px // gutters size
columns = 12 // how many columns you need in your grid (usage with helper classes)
gridClassName = 's-grid' // main grid wraper class name (usage with helper classes)
cellClassName = 's-grid-cell' // main grid cell class name (usage with helper classes)

breakpoints = { // media queries breakpoints
sm: 0,
md: 640px,
lg: 1200px,
xlg: 1440px,
xxlg: 1920px
}

// s-grid imports:

@import 's-grid-functions'
@import 's-grid-classes'

// ...
// my app styles here..
// ...
`

$3

* Cory Simmons: (Creator of Jeet grid system and many other grid tools) https://github.com/corysimmons
* Philip Walton (Solved by Flexbox): http://philipwalton.github.io/solved-by-flexbox/demos/grids/
* CSS tricks: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
* Foundation for Apps grid http://foundation.zurb.com/apps/docs/#!/grid

Let me know if something is wrong with sGrid, its website or React, Grunt boilerplates. I'm sure that there is much more to do with it.

$3

- In IE and probably also in Edge in many cases you should read this: https://github.com/philipwalton/flexbugs
- In IE 11 there is for sure a bug described here: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box you can solve it by providing another content wrapper as it is described in 'Workaround' point 2

$3

MIT

$3

#### v1.2.1
- fix for 0 gutter when stylus --compress flag is used - see issue #10 ... removed 0rem` value

#### v1.2.0
- center(width, padding) improvements - thanks to @Splendorr. New use cases: center(1200px, 15px) ; center(80%, 5%)

#### v1.1.2
- helper classes fix

#### v1.1.1
- docs update

#### v1.1.0
- stack() function
- center() function
- rwd images in cells for FF fix

#### v1.0.1
- better rem-calc() function

#### v1.0.0
- refactor and api changes
- cols() is now cell()
- Grid helper classes is optional. You can import s-grid-classes.styl file if you need it.
- Functions parameters order is changed. See below.. you can use named parameters too.