Integrate code

Integrate Setka's code into your project’s bundling process. You will find all of these in the examples directory of the repository.

Webpack

Importing Stylus

To have the full potential and customization of Setka, use the source files as a part of your project’s bundling process.

Import Setka, override built-in variables, then generate Setka's styles:

@import "~setka/index"

// Set variables            

// Generaate Setka's styles
setka()

For compiling styles, install and use the required loaders: stylus-loader, postcss-loader with Autoprefixer. Minimal setup, your webpack config should include this rule or similar in module: { rules: [...] }:

...
module: {
    rules: [{
        test: /\.(styl)$/,
        use: [{
            loader: 'style-loader', // inject CSS to page
        }, {
            loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
            loader: 'postcss-loader', // Run post css actions
            options: {
                plugins: function () {
                    return [
                        require('autoprefixer')
                    ];
                }
            }
        }, {
            loader: 'stylus-loader' // compiles Stylus to CSS
        }]
    }]
},
...

Importing CSS

Alternatively, you may use Setka's compiled CSS by simply adding this line to your project’s entry point:

import 'setka/dist/setka.min.css';

In this case you may use your existing rule for css without any special modifications to webpack config, and you only need style-loader and css-loader.

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}
...

Gulp

For building CSS from source code with Gulp, minimal gulpfile.js configuration should be:

const gulp = require('gulp');
const setka = require('setka');
const stylus = require('gulp-stylus');

gulp.task('build', function () {
  return gulp.src('./styles.styl')
    .pipe(stylus({
      use: setka()
    }))
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', [ 'build' ]);

And in styles.styl import Setka and build CSS:

@import 'setka'

// Set variables

// Build Setka's CSS
setka()

Grid