sGrid / Npm Package

Standalone Npm package

sGrid on Npm 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