bootstrap-styl
v5.0.9
Published
Port of the amazing Bootstrap 3.4.1 to Stylus
Downloads
5,810
Readme
Bootstrap Stylus 3.4.1
Port of the amazing Bootstrap 3.4.1 to Stylus 0.52.0.
Installing
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'
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.
Install Grunt
From the command line:
- Install
grunt-cli
globally withnpm install -g grunt-cli
. - 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.
Available Grunt commands
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.
Troubleshooting dependencies
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install
.
Usage
- 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 theuglify:dist:files
list.
Using with gulp
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
Jacob Thornton
Copyright and license
Copyright 2013 Twitter, Inc under the Apache 2.0 license.