1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>bootstrap-sass by thomas-mcdonald</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>bootstrap-sass</h1>
<p>bootstrap-sass is bootstrap for Sass, ready to roll</p>
<p class="view"><a href="https://github.com/thomas-mcdonald/bootstrap-sass">View the Project on GitHub <small>thomas-mcdonald/bootstrap-sass</small></a></p>
<ul>
<li><a href="https://github.com/thomas-mcdonald/bootstrap-sass/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/thomas-mcdonald/bootstrap-sass/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="https://github.com/thomas-mcdonald/bootstrap-sass">Fork On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
<h1>Bootstrap for Sass</h1>
<p><code>bootstrap-sass</code> is an Sass-powered version of <a href="http://github.com/twitter/bootstrap">Twitter's Bootstrap</a>, ready to drop right into your Sass powered applications.</p>
<p>Enjoy.</p>
<h2>Updating</h2>
<p>Updating your application to a new version of <code>bootstrap-sass</code>? See <a href="https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/CHANGELOG.md">our changelog</a>, <a href="https://github.com/twitter/bootstrap/wiki/Changelog">Bootstrap's changelog</a>, and this <a href="http://twitter.github.com/bootstrap/upgrading.html">guide to updating to Bootstrap 2.0</a></p>
<h2>Usage</h2>
<h3>Rails</h3>
<p>In your Gemfile:</p>
<pre><code>gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.2'
</code></pre>
<h4>CSS</h4>
<p>Import "bootstrap" in your SCSS file of choice 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="https://github.com/thomas-mcdonald/bootstrap-sass/issues/79#issuecomment-4428595">able to use</a> the awesome mixins that Bootstrap has defined.</p>
<pre><code>@import "bootstrap";
</code></pre>
<p>Need to configure a variable or two? Simple define the value of the variable you want to change <em>before</em> importing Bootstrap. Sass will respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the <a href="http://twitter.github.com/bootstrap/less.html#variables">Bootstrap documentation</a>.</p>
<pre><code>$primaryButtonBackground: #f00;
@import "bootstrap";
</code></pre>
<p><strong>Note</strong>: It's important that the file you are importing is not named <code>bootstrap</code>, since this will cause an import loop. As a general rule, errors are something you should try to avoid.</p>
<h4>Javascripts</h4>
<p>You can include the Bootstrap javascripts through two methods. In this case, Sprocket's <code>//= require</code> directives are useful, since there is no better alternative.</p>
<p>We have a helper that includes all available javascripts:</p>
<pre><code>// Loads all Bootstrap javascripts
//= require bootstrap
</code></pre>
<p>You can also load individual modules, provided you sort out any related dependencies.</p>
<pre><code>//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown
</code></pre>
<p>Simples.</p>
<h3>Compass</h3>
<p><code>bootstrap-sass</code> 2.0 now comes with support for Compass, meaning projects that don't use Rails can get in on the fun Bootstrap web.</p>
<h4>New project</h4>
<p>Install the gem and create a new project using the gem.</p>
<pre><code>gem install bootstrap-sass
compass create compass-test -r bootstrap-sass --using bootstrap
</code></pre>
<p>This will sort a few things out:</p>
<ul>
<li>You'll get a starting <code>styles.scss</code> ready for your alterations</li>
<li>You'll get a compiled stylesheet compiled & ready to drop into your application</li>
<li>We'll also copy the Bootstrap javascripts & images into their respective folders for you, absolutely free of charge! How cool is that?</li>
</ul><h4>Existing project</h4>
<p>Install the gem, add the require statement to the top of your configuration file, and install the extension.</p>
<pre><code>gem install bootstrap-sass
# In config.rb
require 'bootstrap-sass'
compass install bootstrap
</code></pre>
<p>You'll get the same benefits as those starting from scratch. Radical.</p>
<hr><p>As per the Bootstrap project we don't include the responsive styles by default. <code>@import "bootstrap-responsive";</code> to get them.</p>
</section>
<footer>
<p>This project is maintained by <a href="https://github.com/thomas-mcdonald">thomas-mcdonald</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
</html>
|
