bootstrap-styl

Bootstrap Stylus 3.4.1
======================

Port of the amazing Bootstrap 3.4.1 to Stylus 0.52.0.

Installing

Latest version via Bower:

``bash
$ 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.

`bash
$ bower install bootstrap-stylus#2.3.2
`

Via npm:

`bash
$ npm install bootstrap-styl
`
Example of requiring and using bootstrap middleware to create compile function to utilize in other frameworks.
`javascript
var bootstrap = require('bootstrap-styl'),
stylus = require('stylus');

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

To import whole bootstrap in your stylus file:
`stylus
@import bootstrap
`

Alternatively to import individual components:
`stylus
@import 'bootstrap/variables'
@import 'bootstrap/mixins'
@import 'bootstrap/alerts'

`

Compiling CSS from Stylus

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.

$3

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.

$3

#### Compile CSS and JavaScript - grunt dist
grunt dist creates the /dist directory with compiled files. Uses UglifyJS.

#### Legacy 2.3.2 Theme - grunt theme
This will compile the theme.styl separately and output it to the /dist folder.

#### Watch - grunt watch
This is a convenience method for watching just Stylus files and automatically building them whenever you save.

$3

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

$3


* 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.

$3

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'));
});
``

Original Authors

Mark Otto

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

Jacob Thornton

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

Copyright and license

Copyright 2013 Twitter, Inc under the Apache 2.0 license.