2014-08-10 12:02:48 +02:00
# Bootstrap for Sass [![Gem Version](https://badge.fury.io/rb/bootstrap-sass.svg)](http://badge.fury.io/rb/bootstrap-sass) [![Bower Version](https://badge.fury.io/bo/bootstrap-sass-official.svg)](http://badge.fury.io/bo/bootstrap-sass-official) [![Build Status](http://img.shields.io/travis/twbs/bootstrap-sass.svg)](http://travis-ci.org/twbs/bootstrap-sass)
2014-05-12 20:08:19 +02:00
`bootstrap-sass` is a Sass-powered version of [Bootstrap ](http://github.com/twbs/bootstrap ), ready to drop right into your Sass powered applications.
## Installation
Please see the appropriate guide for your environment of choice:
### a. Ruby on Rails
`bootstrap-sass` is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the `bootstrap-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
```ruby
2014-08-10 12:02:48 +02:00
gem 'bootstrap-sass', '~> 3.2.0'
2014-05-12 20:08:19 +02:00
gem 'sass-rails', '>= 3.2'
2014-08-10 12:02:48 +02:00
```
It is also recommended to use [Autoprefixer ](https://github.com/ai/autoprefixer-rails ) with Bootstrap
to add browser vendor prefixes automatically. Simply add the gem:
```ruby
gem 'autoprefixer-rails'
2014-05-12 20:08:19 +02:00
```
`bundle install` and restart your server to make the files available through the pipeline.
2014-08-10 12:02:48 +02:00
In `app/assets/stylesheets/application.css.scss` :
```scss
@import "bootstrap-sprockets";
@import "bootstrap";
```
Do not use `//= require` in Sass or your other stylesheets will not be [able to access][antirequire] the Bootstrap mixins or variables.
In `app/assets/javascripts/application.js` :
```js
//= require jquery
//= require bootstrap-sprockets
```
2014-05-12 20:08:19 +02:00
#### Rails 3.2.x
Rails 3.2 is [no longer maintained for bugfixes ](http://guides.rubyonrails.org/maintenance_policy.html ), and you should upgrade as soon as possible.
Starting with bootstrap-sass v3.1.1.1, due to the structural changes from upstream you will need these
backported asset pipeline gems on Rails 3.2. There is more on why this is necessary in
https://github.com/twbs/bootstrap-sass/issues/523 and https://github.com/twbs/bootstrap-sass/issues/578.
```ruby
gem 'sprockets-rails', '=2.0.0.backport1'
gem 'sprockets', '=2.2.2.backport2'
gem 'sass-rails', github: 'guilleiguaran/sass-rails', branch: 'backport'
```
### b. Compass without Rails
Install the gem
```sh
gem install bootstrap-sass
```
If you have an existing Compass project:
```ruby
# config.rb:
require 'bootstrap-sass'
```
```console
2014-08-10 12:02:48 +02:00
$ bundle exec compass install bootstrap
2014-05-12 20:08:19 +02:00
```
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
```console
2014-08-10 12:02:48 +02:00
$ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
2014-05-12 20:08:19 +02:00
```
or, alternatively, if you're not using a Gemfile for your dependencies:
```console
2014-08-10 12:02:48 +02:00
$ compass create my-new-project -r bootstrap-sass --using bootstrap
2014-05-12 20:08:19 +02:00
```
This will create a new Compass project with the following files in it:
2014-08-10 12:02:48 +02:00
* [styles.sass ](/templates/project/styles.sass ) - main project Sass file, imports Bootstrap and variables.
* [_bootstrap-variables.sass ](/templates/project/_bootstrap-variables.sass.erb ) - all of Bootstrap variables, override them here.
2014-05-12 20:08:19 +02:00
Some bootstrap-sass mixins may conflict with the Compass ones.
If this happens, change the import order so that Compass mixins are loaded later.
2014-08-10 12:02:48 +02:00
### c. Bower
2014-05-12 20:08:19 +02:00
Using bootstrap-sass as a Bower package is still being tested. It is compatible with node-sass 0.8.3+. You can install it with:
2014-08-10 12:02:48 +02:00
```console
$ bower install bootstrap-sass-official
2014-05-12 20:08:19 +02:00
```
`bootstrap-sass` is taken so make sure you use the command above.
2014-08-10 12:02:48 +02:00
Sass, JS, and all other assets are located at [assets ](/assets ).
2014-05-12 20:08:19 +02:00
By default, `bower.json` main field list only the main `bootstrap.scss` and all the static assets (fonts and JS).
This is compatible by default with asset managers such as [wiredep ](https://github.com/taptapship/wiredep ).
2014-08-10 12:02:48 +02:00
#### Node.js Mincer
If you use [mincer][mincer] with node-sass, import bootstrap into like so:
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
In `application.css.ejs.scss` (NB ** .css.ejs.css**):
2014-05-12 20:08:19 +02:00
```scss
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
```
2014-08-10 12:02:48 +02:00
In `application.js` :
```js
//= require bootstrap-sprockets
```
2014-05-12 20:08:19 +02:00
See also this [example manifest.js ](/test/dummy_node_mincer/manifest.js ) for mincer.
2014-08-10 12:02:48 +02:00
### Configuration
#### Sass
By default all of Bootstrap is imported.
You can also import components explicitly. To start with a full list of modules copy
[`bootstrap.scss` ](assets/stylesheets/bootstrap.scss ) file into your assets as `bootstrap-custom.scss` .
Then comment out components you do not want from `bootstrap-custom` .
In the application Sass file, replace `@import 'bootstrap'` with:
```scss
@import 'bootstrap-custom';
```
#### Sass: Number Precision
2014-05-12 20:08:19 +02:00
bootstrap-sass [requires ](https://github.com/twbs/bootstrap-sass/issues/409 ) minimum [Sass number precision][sass-precision] of 10 (default is 5).
2014-08-10 12:02:48 +02:00
Precision is set for Rails and Compass automatically.
When using ruby Sass compiler standalone or with the Bower version you can set it with:
2014-05-12 20:08:19 +02:00
```ruby
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
```
2014-08-10 12:02:48 +02:00
Note that libsass and node-sass do not currently support the precision option, due to an open bug ([bug #364 ](https://github.com/sass/libsass/issues/364)) in libsass.
#### Sass: Autoprefixer
Using [Autoprefixer][autoprefixer] with Bootstrap is recommended.
[Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from [Can I Use ](http://caniuse.com/ ).
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
#### JavaScript
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
[`assets/javascripts/bootstrap.js` ](/assets/javascripts/bootstrap.js ) contains all of Bootstrap JavaScript,
concatenated in the [correct order ](/assets/javascripts/bootstrap-sprockets.js ).
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
#### JavaScript with Sprockets or Mincer
If you use Sprockets or Mincer, you can require `bootstrap-sprockets` instead to load the individual modules:
```js
// Load all Bootstrap JavaScript
//= require bootstrap-sprockets
```
You can also load individual modules, provided you also require any dependencies.
You can check dependencies in the [Bootstrap JS documentation][jsdocs].
```js
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
```
#### Fonts
The fonts are referenced as:
```scss
2014-05-12 20:08:19 +02:00
"#{$icon-font-path}#{$icon-font-name}.eot"
```
2014-08-10 12:02:48 +02:00
`$icon-font-path` defaults to `bootstrap/` if asset path helpers are used, and `../fonts/bootstrap/` otherwise.
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
When using bootstrap-sass with Compass, Sprockets, or Mincer, you **must** import the relevant path helpers before Bootstrap itself, for example:
2014-05-12 20:08:19 +02:00
2014-08-10 12:02:48 +02:00
```scss
@import "bootstrap-compass";
@import "bootstrap";
2014-05-12 20:08:19 +02:00
```
## Usage
### Sass
2014-08-10 12:02:48 +02:00
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
2014-05-12 20:08:19 +02:00
```scss
@import "bootstrap";
```
You can also include optional bootstrap theme:
```scss
@import "bootstrap/theme";
```
The full list of bootstrap variables can be found [here ](http://getbootstrap.com/customize/#less-variables ). You can override these by simply redefining the variable before the `@import` directive, e.g.:
```scss
$navbar-default-bg: #312312 ;
$light-orange: #ff8c00 ;
$navbar-default-color: $light-orange;
@import "bootstrap";
```
---
## Development and Contributing
If you'd like to help with the development of bootstrap-sass itself, read this section.
### Upstream Converter
Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.
**Note: if you're just looking to *use* Bootstrap 3, see the [installation ](#installation ) section above.**
Upstream changes to the Bootstrap project can now be pulled in using the `convert` rake task.
Here's an example run that would pull down the master branch from the main [twbs/bootstrap ](https://github.com/twbs/bootstrap ) repo:
rake convert
This will convert the latest LESS to Sass and update to the latest JS.
To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
The latest converter script is located [here][converter] and does the following:
* Converts upstream bootstrap LESS files to its matching SCSS file.
2014-08-10 12:02:48 +02:00
* Copies all upstream JavaScript into `assets/javascripts/bootstrap` , an Sprockets manifest at `assets/javascripts/bootstrap-sprockets.js` , and a concatenation at `assets/javascripts/bootstrap.js` .
* Copies all upstream font files into `assets/fonts/bootstrap` .
2014-05-12 20:08:19 +02:00
* Sets `Bootstrap::BOOTSTRAP_SHA` in [version.rb][version] to the branch sha.
This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).
Please submit GitHub issues tagged with `conversion` .
## Credits
bootstrap-sass has a number of major contributors:
<!-- feel free to make these link wherever you wish -->
* [Thomas McDonald ](https://twitter.com/thomasmcdonald_ )
* [Tristan Harward ](http://www.trisweb.com )
* Peter Gumeson
* [Gleb Mazovetskiy ](https://github.com/glebm )
and a [significant number of other contributors][contrib].
## You're in good company
bootstrap-sass is used to build some awesome projects all over the web, including
[Diaspora ](http://diasporaproject.org/ ), [rails_admin ](https://github.com/sferik/rails_admin ),
Michael Hartl's [Rails Tutorial ](http://railstutorial.org/ ), [gitlabhq ](http://gitlabhq.com/ ) and
[kandan ](http://kandanapp.com/ ).
[converter]: https://github.com/twbs/bootstrap-sass/blob/master/tasks/converter/less_conversion.rb
[version]: https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass/version.rb
[contrib]: https://github.com/twbs/bootstrap-sass/graphs/contributors
[antirequire]: https://github.com/twbs/bootstrap-sass/issues/79#issuecomment-4428595
[jsdocs]: http://getbootstrap.com/javascript/#transitions
[sass-precision]: http://sass-lang.com/documentation/Sass/Script/Number.html#precision-class_method
[mincer]: https://github.com/nodeca/mincer
2014-08-10 12:02:48 +02:00
[autoprefixer]: https://github.com/ai/autoprefixer