2012-03-28 17:13:39 +04:00
# Bootstrap for Sass
2011-09-06 23:08:31 +04:00
2013-08-02 01:22:23 +04:00
[![Build Status ](https://secure.travis-ci.org/thomas-mcdonald/bootstrap-sass.png?branch=master )](http://travis-ci.org/thomas-mcdonald/bootstrap-sass) [![Code Climate ](https://codeclimate.com/github/thomas-mcdonald/bootstrap-sass.png )](https://codeclimate.com/github/thomas-mcdonald/bootstrap-sass)
2012-05-11 17:38:25 +04:00
2013-08-11 15:14:05 +04:00
`bootstrap-sass` is an Sass-powered version of [Bootstrap ](http://github.com/twbs/bootstrap ), ready to drop right into your Sass powered applications.
2011-09-06 23:08:31 +04:00
2013-10-16 23:24:42 +04:00
## Installation
2011-09-06 23:08:31 +04:00
2013-10-16 23:24:42 +04:00
Please see the appropriate guide for your environment of choice:
2011-09-06 23:08:31 +04:00
2013-10-16 23:24:42 +04:00
### a. Rails
2013-09-29 18:38:18 +04:00
`bootstrap-sass` is easy to drop into Rails with the asset pipeline.
2013-09-29 18:46:34 +04:00
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.
2013-09-29 18:38:18 +04:00
```ruby
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 2.3.2.1'
```
2013-09-29 18:54:55 +04:00
If you would like to use the beta Bootstrap 3 version of bootstrap-sass, use the master branch:
```ruby
# Experimental Bootstrap 3.0 beta -- use at your own risk.
gem 'sass-rails', '>= 3.2'
2013-10-16 23:24:42 +04:00
gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'
2013-09-29 18:54:55 +04:00
```
2013-09-29 18:46:34 +04:00
2013-09-29 18:38:18 +04:00
`bundle install` and restart your server to make the files available through the pipeline.
2013-10-16 23:24:42 +04:00
## b. Compass (without Rails)
Install the gem
```console
gem install bootstrap-sass
```
If you have an existing Compass project:
```ruby
# config.rb:
require 'bootstrap-sass'
```
```console
compass install bootstrap
```
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
```console
compass create my-new-project -r bootstrap-sass --using bootstrap
```
This will create a new Compass project with the following files in it:
[_variables.scss ](/blob/master/templates/project/_variables.scss.erb ) - all of bootstrap variables (override them here).
[styles].scss(/blob/master/templates/project/styles.scss) - main project SCSS file. import `variables` and `bootstrap` .
## Sass (without neither Compass nor Rails)
Raw Sass support is coming soon!
2013-09-29 18:46:34 +04:00
### Usage
2013-09-29 18:38:18 +04:00
2013-09-29 18:46:34 +04:00
#### CSS
2013-09-29 18:38:18 +04:00
Import Bootstrap in an SCSS file (for example, `application.css.scss` ) to get all of Bootstrap's styles, mixins and variables! We recommend against using `//= require` directives, since none of your other stylesheets will be [able to access][antirequire] the Bootstrap mixins or variables.
```css
@import "bootstrap";
```
You can also include optional bootstrap theme:
```css
@import "bootstrap/theme";
```
2013-09-29 18:46:34 +04:00
#### Javascript
2013-09-29 18:38:18 +04:00
We have a helper that includes all Bootstrap javascripts. Put this in your Javascript manifest (usually in `application.js` ) to
```js
// Loads all Bootstrap javascripts
//= require bootstrap
```
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
```
2013-09-29 18:54:55 +04:00
## Development and Contributing
2011-09-06 23:08:31 +04:00
2013-09-29 18:38:18 +04:00
If you'd like to help with the development of bootstrap-sass itself, read this section.
2013-08-21 20:13:33 +04:00
### Upstream Converter
2011-09-20 02:02:29 +04:00
2013-09-29 18:54:55 +04:00
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.**
2013-03-20 16:56:42 +04:00
2013-08-01 09:09:59 +04:00
Upstream changes to the Bootstrap project can now be pulled in using the `convert` rake task.
2011-09-07 03:25:14 +04:00
2013-08-21 20:30:32 +04:00
Here's an example run that would pull down the `3.0.0-wip` branch from the main twbs/bootstrap repo (defaults to `master` ):
2011-12-03 02:23:53 +04:00
2013-08-22 21:11:02 +04:00
bundle exec rake convert[3.0.0-wip]
2011-12-03 02:23:53 +04:00
2013-08-21 20:13:33 +04:00
The latest converter script is located [here][converter] and does the following:
2012-02-06 17:38:26 +04:00
2013-08-01 09:09:59 +04:00
* Converts upstream bootstrap LESS files to its matching SCSS file.
* Copies all upstream JavaScript into `vendor/assets/javascripts/bootstrap`
2013-05-30 11:25:02 +04:00
* Generates a javascript manifest at `vendor/assets/javascripts/bootstrap.js`
2013-08-21 20:30:32 +04:00
* Copies all upstream font files into `vendor/assets/fonts/bootstrap`
* Sets `Bootstrap::BOOTSTRAP_SHA` in [version.rb][version] to the branch sha.
2012-02-06 17:38:26 +04:00
2013-08-22 21:11:02 +04:00
This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).
2013-08-22 21:08:29 +04:00
Please submit GitHub issues tagged with `conversion` .
2011-09-20 02:02:29 +04:00
2013-08-21 20:13:33 +04:00
## Credits
2012-02-06 17:38:26 +04:00
2013-08-21 20:13:33 +04:00
bootstrap-sass has a number of major contributors:
2012-02-06 17:38:26 +04:00
2013-08-21 20:13:33 +04:00
<!-- feel free to make these link wherever you wish -->
2013-09-09 14:38:35 +04:00
* [Thomas McDonald ](https://twitter.com/thomasmcdonald_ )
2013-09-29 18:46:34 +04:00
* [Tristan Harward ](http://www.trisweb.com )
2013-08-21 20:13:33 +04:00
* Peter Gumeson
2013-09-09 14:38:35 +04:00
* [Gleb Mazovetskiy ](https://github.com/glebm )
2011-09-20 02:02:29 +04:00
2013-08-21 20:13:33 +04:00
and a [significant number of other contributors][contrib].
2012-05-14 00:28:06 +04:00
## You're in good company
2013-09-09 14:38:35 +04:00
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/ ).
2013-08-21 20:13:33 +04:00
[converter]: https://github.com/thomas-mcdonald/bootstrap-sass/blob/3/tasks/converter.rb
2013-08-21 20:30:32 +04:00
[version]: https://github.com/thomas-mcdonald/bootstrap-sass/blob/3/lib/bootstrap-sass/version.rb
2013-09-29 18:38:18 +04:00
[contrib]: https://github.com/thomas-mcdonald/bootstrap-sass/graphs/contributors
[antirequire]: https://github.com/thomas-mcdonald/bootstrap-sass/issues/79#issuecomment-4428595
[jsdocs]: http://getbootstrap.com/javascript/#transitions