Fork the code for this repository. Make your changes and submit a pull request. The Ozone team will review your pull request and evaluate if it should be part of the project. For more information on the patch process please review the Patch Process at https://ozone.nextcentury.com/patch_process.
This repo OZP-bootstrap-sass is now the sole bootstrap instance for the OZP project. As of 11/5/2015 ozp-webtop switched from ozp-bootstrap to ozp-bootstrap-sass. OZP-bootstrap is no longer being maintained.
To convert our version of the bootstrap less found here you have to use Docker and a rails image to run a convert script provided by bootstrap-sass official. The script that you'll run (convert.rb) is already configured to pull from this repository, no additional configuration is required.
Install dockerPull the rails docker repositorydocker pull ozplatform/bootstrap-sass
docker run -i -t -v $(pwd):/tmp/bootstrap ozplatform/bootstrap-sass
This has updated all changed files in the scss (found under assets). To make these available to all projects with ozp-bootstrap as a dependency, push to master.
bootstrap-sass
is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.
Please see the appropriate guide for your environment of choice:
- Ruby on Rails.
- Compass not on Rails.
- Bower.
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.
gem 'bootstrap-sass', '~> 3.3.1'
gem 'sass-rails', '>= 3.2'
It is also recommended to use Autoprefixer with Bootstrap to add browser vendor prefixes automatically. Simply add the gem:
gem 'autoprefixer-rails'
bundle install
and restart your server to make the files available through the pipeline.
Import Bootstrap styles in app/assets/stylesheets/application.css.scss
:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
bootstrap-sprockets
must be imported before bootstrap
for the icon fonts to work.
Make sure the file has .css.scss
extension (or .css.sass
for Sass syntax). If you have just generated a new Rails app,
it may come with a .css
file instead. If this file exists, it will be served instead of Sass, so remove it:
$ rm app/assets/stylesheets/application.css
Do not use //= require
in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
Require Bootstrap Javascripts in app/assets/javascripts/application.js
:
//= require jquery
//= require bootstrap-sprockets
When using bootstrap-sass Bower package instead of the gem in Rails, configure assets in config/application.rb
:
# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
config.sass.load_paths << bower_path
config.assets.paths << bower_path
end
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff)$)
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
Replace Bootstrap @import
statements in application.css.scss
with:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";
Replace Bootstrap require
directive in application.js
with:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
Please make sure sprockets-rails
is at least v2.1.4.
Rails 3.2 is no longer maintained for bugfixes, 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 twbs#523 and twbs#578.
gem 'sprockets-rails', '=2.0.0.backport1'
gem 'sprockets', '=2.2.2.backport2'
gem 'sass-rails', github: 'guilleiguaran/sass-rails', branch: 'backport'
Install the gem
gem install bootstrap-sass
If you have an existing Compass project:
# config.rb:
require 'bootstrap-sass'
$ bundle exec compass install bootstrap
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
$ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
or, alternatively, if you're not using a Gemfile for your dependencies:
$ compass create my-new-project -r bootstrap-sass --using bootstrap
This will create a new Compass project with the following files in it:
- styles.sass - main project Sass file, imports Bootstrap and variables.
- _bootstrap-variables.sass - all of Bootstrap variables, override them here.
Some bootstrap-sass mixins may conflict with the Compass ones. If this happens, change the import order so that Compass mixins are loaded later.
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:
$ bower install bootstrap-sass-official
bootstrap-sass
is taken so make sure you use the command above.
Sass, JS, and all other assets are located at assets.
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.
If you use mincer with node-sass, import bootstrap into like so:
In application.css.ejs.scss
(NB .css.ejs.css):
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
In application.js
:
//= require bootstrap-sprockets
See also this example manifest.js for mincer.
By default all of Bootstrap is imported.
You can also import components explicitly. To start with a full list of modules copy
_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:
@import 'bootstrap-custom';
bootstrap-sass requires minimum Sass number precision of 10 (default is 5).
Precision is set for Rails and Compass automatically. When using ruby Sass compiler standalone or with the Bower version you can set it with:
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
Note that libsass and node-sass do not currently support the precision option, due to an open bug (bug #364) in libsass.
Using Autoprefixer with Bootstrap is recommended. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.
assets/javascripts/bootstrap.js
contains all of Bootstrap JavaScript,
concatenated in the correct order.
If you use Sprockets or Mincer, you can require bootstrap-sprockets
instead to load the individual modules:
// 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.
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
The fonts are referenced as:
"#{$icon-font-path}#{$icon-font-name}.eot"
$icon-font-path
defaults to bootstrap/
if asset path helpers are used, and ../fonts/bootstrap/
otherwise.
When using bootstrap-sass with Compass, Sprockets, or Mincer, you must import the relevant path helpers before Bootstrap itself, for example:
@import "bootstrap-compass";
@import "bootstrap";
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
@import "bootstrap";
You can also include optional bootstrap theme:
@import "bootstrap/theme";
The full list of bootstrap variables can be found here. You can override these by simply redefining the variable before the @import
directive, e.g.:
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
bootstrap-sass
version reflects the upstream version, with an additional number for Sass-specific changes.
Always refer to CHANGELOG.md when upgrading.
If you'd like to help with the development of bootstrap-sass itself, read this section.
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 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 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 and does the following:
- Converts upstream bootstrap LESS files to its matching SCSS file.
- Copies all upstream JavaScript into
assets/javascripts/bootstrap
, an Sprockets manifest atassets/javascripts/bootstrap-sprockets.js
, and a concatenation atassets/javascripts/bootstrap.js
. - Copies all upstream font files into
assets/fonts/bootstrap
. - Sets
Bootstrap::BOOTSTRAP_SHA
in version.rb 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
.
bootstrap-sass has a number of major contributors:
- Thomas McDonald
- Tristan Harward
- Peter Gumeson
- Gleb Mazovetskiy
and a significant number of other contributors.
bootstrap-sass is used to build some awesome projects all over the web, including Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq and kandan.