Basic usage of S-Grid is by simply installing the npm package and including .styl files in your project. You can install it by:
$ npm install -g s-grid
Then in your project (main .styl file) include files:
@import 's-grid-settings'
// you can overwrite settings here
@import 's-grid-functions'
@import 's-grid-classes' // classes are optional - good for prototyping
Of course you can integrate it with your build systems. Also you need to use autoprefixer-stylus. This is importat because of many flexbox vendor prefixes. Read more about it on its website.
You can use it with your command line like:
$ stylus -u s-grid -u autoprefixer-stylus -w main.styl
It can be used as a standard Stylus plugin:
var stylus = require('stylus');
var autoprefixer = require('autoprefixer-stylus');
var sGrid = require('s-grid');
stylus(css)
.use(sGrid())
.use(autoprefixer())
.render(function(err, output){
console.log(output);
});
Of course a better approach is to use it with the Grunt based scaffold project or with the Meteor project. There is a Meteor package on Atmosphere. Also you can use React boilerplate with sGrid and Webpack.
Here are the package's links:
For more detailed grid documentation see here: Grid