npm install s-gridsGrid 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
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.
- 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/.
#### 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`
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
#### You can achieve the same effect with helper classes
HTML code:
``
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
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..
// ...
`
* 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.
- 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
MIT
#### 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.