Port of the amazing Bootstrap 3.4.1 to Stylus 0.52.0.

Latest version via Bower:

$ bower install bootstrap-stylus

Legacy 2.3.2 version is kept in this release and can be installed via Bower as well, however it does not include any build scripts.

$ bower install bootstrap-stylus#2.3.2

Via npm:

$ npm install bootstrap-styl

Example of requiring and using bootstrap middleware to create compile function to utilize in other frameworks.

var bootstrap = require('bootstrap-styl'),
    stylus    = require('stylus');

function compile(str) {
  return stylus(str)
    .use(bootstrap());
}

To import whole bootstrap in your stylus file:

@import bootstrap

Alternatively to import individual components:

@import 'bootstrap/variables'
@import 'bootstrap/mixins'
@import 'bootstrap/alerts'

Bootstrap Stylus uses Grunt with convenient methods for working with the framework. To use it, install the required dependencies as directed and then run some Grunt commands.

From the command line:

1. Install grunt-cli globally with npm install -g grunt-cli.
2. Install the necessary local dependencies via npm install

When completed, you'll be able to run the various Grunt commands provided from the command line.

Unfamiliar with npm? Don't have node installed? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.

grunt dist creates the /dist directory with compiled files. Uses UglifyJS.

This will compile the theme.styl separately and output it to the /dist folder.

This is a convenience method for watching just Stylus files and automatically building them whenever you save.

Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install.

• You may select what css components you want to include by editing stylus/bootstrap.styl.
• You may override bootstrap variables in your private code, for example

// myStyles.styl
$font-family-serif ?= 'Merriweather', serif
$font-family-base ?= $font-family-serif
@import "bower_components/bootstrap-stylus/stylus/bootstrap.styl" // Or wherever your bootstrap.styl is located

this allows flexibility for easily updating to new bootstrap versions. See ?=.

• You may select what javascript components you want by editing the uglify task in gulpfile.js. You can ommit components by removing them from the uglify:dist:files list.

To use with gulp, use bootstrap-stylus as a plugin.

var bootstrap = require('bootstrap-styl');
var stylus = require('gulp-stylus');

gulp.task('bootstrap', function(){
    gulp.src('./your_code.styl')
        .pipe(stylus({ use: bootstrap(), compress: true }))
        .pipe(gulp.dest('./build'));
});

Mark Otto

• http://twitter.com/mdo
• http://github.com/mdo

Jacob Thornton

• http://twitter.com/fat
• http://github.com/fat

Copyright 2013 Twitter, Inc under the Apache 2.0 license.