https://github.com/juliancwirko/s-grid
Flexbox grid system for Stylus
https://github.com/juliancwirko/s-grid
css flexbox-grid sgrid stylus
Last synced: 28 days ago
JSON representation
Flexbox grid system for Stylus
- Host: GitHub
- URL: https://github.com/juliancwirko/s-grid
- Owner: juliancwirko
- License: mit
- Created: 2015-02-21T19:47:40.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-28T14:25:39.000Z (almost 8 years ago)
- Last Synced: 2025-03-28T22:41:54.521Z (about 2 months ago)
- Topics: css, flexbox-grid, sgrid, stylus
- Language: CSS
- Homepage: http://stylusgrid.com
- Size: 22.5 KB
- Stars: 63
- Watchers: 6
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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](http://stylusgrid.com)
- Blog post: [sGrid - Working with Flexible Box layouts](http://julian.io/s-grid-working-with-flexible-box-layouts/)
- Blog post: [My workflow with the Stylus and Flexbox grid system](https://medium.com/@juliancwirko/my-workflow-with-the-stylus-and-flexbox-grid-system-5f4f50ac3f33)
- Article on Sitepoint.com: [Introducing sGrid: A Stylus-based Flexbox Grid System](http://www.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](http://stylusgrid.com/npm.html)
- [Meteor](http://stylusgrid.com/meteor.html)
- [React Boilerplate](http://stylusgrid.com/react.html)
- [Grunt Boilerplate](http://stylusgrid.com/grunt.html)
You should use it with Autoprefixer [https://github.com/jenius/autoprefixer-stylus](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/](http://stylusgrid.com).
### Simple examples
#### 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
```
### Overwrite settings
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..
// ...
```
### Inspired by:
* Cory Simmons: (Creator of Jeet grid system and many other grid tools) [https://github.com/corysimmons](https://github.com/corysimmons)
* Philip Walton (Solved by Flexbox): [http://philipwalton.github.io/solved-by-flexbox/demos/grids/](http://philipwalton.github.io/solved-by-flexbox/demos/grids/)
* CSS tricks: [http://css-tricks.com/snippets/css/a-guide-to-flexbox/](http://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* Foundation for Apps grid [http://foundation.zurb.com/apps/docs/#!/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.
### Known problems
- In IE and probably also in Edge in many cases you should read this: [https://github.com/philipwalton/flexbugs](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](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
### License
MIT
### Changelog
#### v1.2.1
- fix for 0 gutter when stylus `--compress` flag is used - see issue [#10](https://github.com/juliancwirko/s-grid/issues/10) ... removed `0rem` value
#### v1.2.0
- center(width, padding) improvements - thanks to [@Splendorr](https://github.com/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.