Skip to content

B
bootstrap
Commit edd0b97b authored by Mark Otto's avatar Mark Otto
Browse files
Options

Don't copy-pasta all the Sass docs because fuck keeping that up to date.... 

Don't copy-pasta all the Sass docs because fuck keeping that up to date. Instead, point to https://github.com/twbs/bootstrap-sass/blob/master/README.md.
parent c4b41cea
Show whitespace changes
Inline Side-by-side
Showing with 6 additions and 154 deletions
docs/_includes/nav-css.html
View file @ edd0b97b
......@@ -122,9 +122,6 @@
<a href="#sass">Using Sass</a>
<ul class="nav">
<li><a href="#sass-contents">What's included</a></li>
<li><a href="#sass-installation-rails">Rails install</a></li>
<li><a href="#sass-installation-compass">Compass install</a></li>
<li><a href="#sass-installation-sass-only">Sass install</a></li>
<li><a href="#sass-usage">Usage</a></li>
<li><a href="#sass-installation">Rails install</a></li>
</ul>
</li>
docs/css.html
View file @ edd0b97b
......@@ -3334,153 +3334,8 @@ a {
<h2 id="sass-installation">Installation</h2>
<p>Use the appropriate guide for your environment of choice.</p>
<h3 id="sass-installation-rails">Rails</h3>
<p><code>bootstrap-sass</code> is easy to drop into Rails with the asset pipeline.</p>
<p>In your Gemfile you need to add the <code>bootstrap-sass</code> gem, and ensure that the <code>sass-rails</code> gem is present&mdash;it is added to new Rails applications by default.</p>
{% highlight ruby %}
gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.0.3.0'
{% endhighlight %}
<p><code>bundle install</code> and restart your server to make the files available through the pipeline.</p>
<h3 id="sass-installation-compass">Compass <small>without Rails</small></h3>
<p>Install the gem:</p>
{% highlight bash %}
gem install bootstrap-sass
{% endhighlight %}
<p>If you have an existing Compass project:</p>
{% highlight ruby %}
# config.rb:
require 'bootstrap-sass'
{% endhighlight %}
{% highlight bash %}
bundle exec compass install bootstrap
{% endhighlight %}
<p>If you are creating a new Compass project, you can generate it with <code>bootstrap-sass</code> support:</p>
{% highlight bash %}
bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
{% endhighlight %}
<p>This will create a new Compass project with the following files in it:</p>
<ul>
<li><a href="{{ site.sass_repo }}/blob/master/templates/project/_variables.scss.erb">_variables.scss</a> &mdash; all of bootstrap variables (override them here).
</li>
<li><a href="{{ site.sass_repo }}/blob/master/templates/project/styles.scss">styles.scss</a> &mdash; main project SCSS file, import `variables` and `bootstrap`.</li>
</ul>
<h3 id="sass-installation-sass-only">Sass-only <small>without Compass or Rails</small></h3>
<p>Require the gem, and load paths and Sass helpers will be configured automatically:</p>
{% highlight ruby %}
require 'bootstrap-sass'
{% endhighlight %}
<p>Using bootstrap-sass as a Bower package is still being tested. You can install it with:</p>
{% highlight bash %}
bower install 'git://github.com/twbs/bootstrap-sass.git#v3.0.3.0'
{% endhighlight %}
<h4>JS and fonts</h4>
<p>If you are using Rails or Sprockets, see Usage. If none of Rails/Sprockets/Compass were detected the fonts will be referenced as:</p>
{% highlight sass %}
"#{$icon-font-path}/#{$icon-font-name}.eot"
{% endhighlight %}
<p><code>$icon-font-path</code> defaults to <code>bootstrap/</code>. When not using an asset pipeline, you have to copy fonts and javascripts from the gem.</p>
{% highlight bash %}
mkdir public/fonts
cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/
mkdir public/javascripts
cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/
{% endhighlight %}
<p>In ruby you can get the assets' location in the filesystem like this:</p>
{% highlight ruby %}
Bootstrap.stylesheets_path
Bootstrap.fonts_path
Bootstrap.javascripts_path
{% endhighlight %}
<h2 id="sass-usage">Usage</h2>
<h3 id="sass-usage-sass">Sass</h3>
<p>Import Bootstrap into a Sass file (for example, <code>application.css.scss</code>) to get all of Bootstrap's styles, mixins and variables! We recommend against using <code>//= require</code> directives, since none of your other stylesheets will be <a href="{{ site.sass_repo }}/issues/79#issuecomment-4428595">able to access</a> the Bootstrap mixins or variables.</p>
{% highlight sass %}
@import "bootstrap";
{% endhighlight %}
<p>You can also include optional Bootstrap theme:</p>
{% highlight sass %}
@import "bootstrap/theme";
{% endhighlight %}
<p>The full list of Bootstrap variables can be found <a href="../customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
{% highlight sass %}
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
{% endhighlight %}
<p>You can also import components explicitly. To start with a full list of modules copy this file from the gem:</p>
{% highlight bash %}
# copy and prepend "bootstrap/" to the @import paths:
sed 's/@import "/@import "bootstrap\//' \
$(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap/bootstrap.scss > \
app/assets/stylesheets/bootstrap-custom.scss
{% endhighlight %}
<p>In your <code>application.sass</code>, replace <code>@import 'bootstrap'</code> with:</p>
{% highlight sass %}
@import 'bootstrap-custom';
{% endhighlight %}
<p>Comment out any components you do not want from <code>bootstrap-custom</code>.</p>
<h3 id="sass-usage-js">JavaScript</h3>
<p>We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately), put this in your Javascript manifest (usually in <code>application.js</code>) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):</p>
{% highlight js %}
// Loads all Bootstrap javascripts
//= require bootstrap
{% endhighlight %}
<p>You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].</p>
{% highlight js %}
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
{% endhighlight %}
<p>For information on how to install and use Bootstrap for Sass, consult the <a href="{{ site.sass_repo }}">GitHub repository readme</a>. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.</p>
<p>
<a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
</p>
</div>
docs/index.html
View file @ edd0b97b
......@@ -26,7 +26,7 @@ title: Bootstrap
<div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
<h3>Preprocesors</h3>
<p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#using-less">Less</a> and <a href="{{ page.base_url }}css#using-sass">Sass</a>.</p>
<p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#less">Less</a> and <a href="{{ page.base_url }}css#sass">Sass</a>.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment