Giter VIP home page Giter VIP logo

bootstrap-sass's Introduction

Bootstrap for Sass

Build Status Code Climate

bootstrap-sass is an Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.

Installation

Please see the appropriate guide for your environment of choice:

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

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 2.3.2.1'

If you would like to use the beta Bootstrap 3 version of bootstrap-sass, use the master branch:

# Experimental Bootstrap 3.0 beta -- use at your own risk.
gem 'sass-rails', '>= 3.2'
gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'

bundle install and restart your server to make the files available through the pipeline.

b. Compass (no Rails)

Install the gem

gem install bootstrap-sass

If you have an existing Compass project:

# config.rb:
require 'bootstrap-sass'
compass install bootstrap

If you are creating a new Compass project, you can generate it with bootstrap-sass support:

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 - all of bootstrap variables (override them here).
  • styles.scss - main project SCSS file, import variables and bootstrap.

c. Sass (no Compass, no Rails)

Raw Sass support is coming soon!

Usage

CSS / SCSS / SASS

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 the Bootstrap mixins or variables.

@import "bootstrap";

You can also include optional bootstrap theme:

@import "bootstrap/theme";

Javascript

We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in application.js) to load the files in the correct order:

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

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

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 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 vendor/assets/javascripts/bootstrap
  • Generates a javascript manifest at vendor/assets/javascripts/bootstrap.js
  • Copies all upstream font files into vendor/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.

Credits

bootstrap-sass has a number of major contributors:

and a significant number of other contributors.

You're in good company

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.

bootstrap-sass's People

Contributors

aeyoll avatar agis avatar aj-acevedo avatar alexzaytsav avatar bbenezech avatar behrends avatar bernardo avatar bkerley avatar blackhawkso avatar caarlos0 avatar cabgfx avatar corny avatar cvrebert avatar danchapman avatar derekprior avatar epegzz avatar etienne avatar gabceb avatar glebm avatar jkelleyj avatar julian7 avatar masterkain avatar mjonuschat avatar mojavelinux avatar rafaelfranca avatar sporkd avatar thomas-mcdonald avatar trisweb avatar umairsiddique avatar wndxlori avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.