forked from mdo/preboot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
344 lines (324 loc) · 15.1 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- // Less.js at the ready! -->
<link rel="stylesheet/less" type="text/css" media="all" href="style.less" />
<script type="text/javascript" src="less-1.1.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<title>Bootstrap.less by Mark Otto</title>
<!-- Google Webmaster Tools & Analytics -->
<meta name="google-site-verification" content="i2l3RBLrWFm3JY5fXIug2_83I6muZwPlIF5e4j13-o8" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<header>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
<h1>Bootstrap.less</h1>
<h2>Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development.</h2>
</header>
<section>
<h2>What's Inside</h2>
<p>Here's the rundown of what you can find in Bootstrap:</p>
<div class="grid">
<div class="span5">
<h3>Mixins</h3>
<ul>
<li><a href="#border-radius">Rounded Corners</a></li>
<li><a href="#box-shadow">Box Shadows</a></li>
<li><a href="#gradients">Gradients</a></li>
<li><a href="#transitions">Transitions</a></li>
<li><a href="#clearfix">Clearfix</a></li>
<li><a href="#translucency">Translucency</a></li>
<li><a href="#font-stacks">Font Stacks</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#grid">Grid System</a></li>
<li><a href="#helpers">Helpers</a></li>
<li><a href="#flexbox">Flexible Box Module</a></li>
</ul>
</div>
<div class="span5">
<h3>Variables</h3>
<ul>
<li><a href="#links">Links</a></li>
<li><a href="#scheme">Color scheme</a></li>
<li><a href="#baseline">Baseline</a></li>
</ul>
</div>
</div>
</section>
<section>
<h2>Mixins</h2>
<p>Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like <code>-webkit-box-shadow</code>, gradients, and more.</p>
<h3 id="border-radius">Rounding Corners</h3>
<p>Round the corners of an element with <code>.border-radius</code>. You can pass in a single value for all corners like so:</p>
<pre>.border-radius(@radius: 6px) {
-moz-border-radius: @radius;
border-radius: @radius;
}</pre>
<p>Or get fancy with it and selectively apply rounding to certain corners:</p>
<pre>.border-radius(3px,3px,0,0);</pre>
<h3 id="box-shadow">Box (Drop) Shadows</h3>
<p>Give any element some depth in all the best browsers with a single rule. Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
<pre>.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}</pre>
<h3 id="gradients">Gradients</h3>
<p>Take any two colors and turn them into a most bodacious gradient of awesome. They even work with preset variables (see below) and RGBA colors. You can use vertical or horizontal gradients with the following lines of code:</p>
<pre>#gradient > .vertical(#333,#000);
#gradient > .horizontal(@blue,@red);</pre>
<p>Two colors not enough? Go hog wild and add another color into the mix with a .three-color-gradient. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color. Donezo.</p>
<pre>#gradient > .vertical-three-colors(#777,#333,.25,#000);
#gradient > .vertical-three-colors(@blue,@red,@purple);</pre>
<p>Go easy on those three color gradients though—they can get out of hand quick. Also, if you're feeling a little bit crazy, go ahead and take the <code>.vertical-three-colors</code> and expand them to four and five colors. Just don't let it get out of hand.</p>
<h3 id="transitions">Transitions</h3>
<p>Elegantly transition elements in style with a single rule.</p>
<pre>.transition(@transition: all linear .2s) {
-webkit-transition: @transition;
-moz-transition: @transition;
transition: @transition;
}</pre>
<p>Example transitions could include fading input elements on focus (instead of the default <code>outline</code>), animating logos on hover, and even animating link hovers.</p>
<h3 id="clearfix">Simple Clearfix</h3>
<p>Forget adding <code>.clearfix</code> to all your divs and just add the mixin where appropriate.</p>
<pre>.container {
.clearfix;
}
</pre>
<h3 id="translucency">Make Any Color Translucent</h3>
<p>While RGBA is great, LESS only has a color conversion tool that changes any color to HSL. By doing so, it allows us to add an extra alpha layer (just like RGB to RGBA). Just call the mixin, select a color, and add the alpha transparency (a decimal value from 0 to 1).</p>
<pre>.container {
#translucent > .background(@blue, 0.5);
div {
#translucent > .background(#900, 0.5);
}
}
</pre>
<h3 id="font-stacks">Font Stacks</h3>
<p>Style an element's text quickly and easily with flexible built-in serif, sans-serif, and monospace font stacks.</p>
<pre>#font {
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
}</pre>
<h3 id="buttons">Buttons</h3>
<p>Generate buttons of any color with a single mixin that provides ultimate control while still providing a consistent family of buttons. Set the base color, the text color, text shadow, font size, padding, and border radius. More controls coming soon (I hope).</p>
<pre>// Buttons
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
display: inline-block;
.gradient(@color,darken(saturate(@color,10),10));
padding: @padding;
text-shadow: @textShadow;
color: @textColor;
font-size: @fontSize;
line-height: 20px;
.rounded(6px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
.box-shadow(@shadow);
&:hover {
background-position: 0 -15px;
color: @textColor;
text-decoration: none;
}
}</pre>
<p>This mixin means you can quickly create a set of buttons like so:</p>
<pre>a.button {
.button();
&.purple {
.button(@purple,#fff,0 -1px 1px rgba(0,0,0,.4));
}
&.blue {
.button(@blue,#fff,0 -1px 1px rgba(0,0,0,.4));
}
}
</pre>
<p>Using just the base color of the buttons you can easily create a whole family of buttons with only a few lines of code.</p>
<h3 id="grid">Flexible Grid System</h3>
<p>Love grids? Get yourself on the fast track to an awesomely flexible grid system. Set the number of columns, the column width, and the column gutter width. Do note though that these columns won't work in IE6—they're designed to use the minimum amount of CSS, meaning they employ <code>:first-child</code> and have no set container widths.</p>
<div class="grid show-grid">
<div class="span1">1 Col</div>
<div class="span2">2 Cols</div>
<div class="span4">4 Cols</div>
<div class="span1">1 Col</div>
<div class="span1">1 Col</div>
<div class="span1">1 Col</div>
<div class="span1">1 Col</div>
</div>
<p>The <code>.container</code> and <code>.columns</code> mixins do all the code generation for you, meaning all you need to do is add the markup and call the mixins. Here's the LESS code that's needed to make it all happen, followed by the above example's code.</p>
<pre>// Grid System
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
.container {
width: @siteWidth;
margin: 0 auto;
.clearfix();
}
.columns(@columnSpan: 1) {
display: inline;
float: left;
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
margin-left: @gridGutterWidth;
&:first-child {
margin-left: 0;
}
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}</pre>
<p>And here's how you take that and create some sweet ass columns:</p>
<pre>// Gimme a grid!
@gridColumns: 11;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
div.grid {
.container;
div.span1 { .columns(1); }
div.span2 { .columns(2); }
...
div.span11 { .columns(11); }
}</pre>
<p>Boom, columns, baby! Also worth noting is the <code>.offset</code> mixin; with it you can build offset columns just like normal columns for more grid fun.</p>
<h2 id="helpers">Miscellaneous helpers</h2>
<p>A few helper methods that save time for common sizing and alignment patterns.</p>
<pre>// Center-align a block level element
.center-block {
display: block;
margin: 0 auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
}
</pre>
</section>
<section>
<h2 id="flexbox">Flexible Box Module</h2>
<p></p>
<div class="flexbox">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<pre>
div.flexbox {
#flexbox > .display-box;
#flexbox > .box-pack(center);
div {
margin: 5px;
#translucent > .background(@black,.25);
.square(50px);
}
div.box2 {
#flexbox > .box-flex(1);
}
}
</pre>
</section>
<section>
<h2 id="variables">Variables</h2>
<p>Variables have never existed in CSS, but with LESS, they're all up in da club. Bootstrap includes a set of great colors perfect for just about any project as an example of how to use variables.</p>
<h3 id="links">Links</h3>
<p>Easily style your links with the right color with only one value.</p>
<pre>// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
</pre>
<p>Note that the <code>@linkColorHover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.</p>
<h3 id="scheme">Color Scheme</h3>
<p>Get a jump on better color management within your code with these awesome variables. No more guessing hex values throughout a project.</p>
<pre>// Grays
@white: #fff;
@grayLighter: #ccc;
@grayLight: #777;
@gray: #555;
@grayDark: #333;
@black: #000;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
</pre>
<h3 id="baseline">Baseline</h3>
<p>Though not fully utilized within Bootstrap, <code>@baseline</code> will help simplify your line-heights and vertical rhythm in any project.</p>
<pre>@baseline: 20px;</pre>
<p>Using it is simple:</p>
<pre>div#exampleBlock {
margin-bottom: @baseline * 2; // 40px
padding: @baseline; // 20px
line-height: @baseline; // 20px
}
</pre>
</section>
<section>
<h2>How to Use</h2>
<h3>Rolling Your Own</h3>
<p>Getting up and running with LESS and Bootstrap is straightforward. Here's the 1-2-3 rundown to rolling your own install of Bootstrap.</p>
<ol>
<li><a href="https://github.com/cloudhead/less.js" target="_blank">Download</a> LESS and Bootstrap.</li>
<li>Add the LESS javascript file in your <code>head</code> and create a new .less file that imports bootstrap.less.</li>
<li>Start writing super awesome CSS!</li>
</ol>
<p>That's it—all you need to do is include a javascript and less file and you're ready to rock. But wait, there's more!</p>
<h3>Fully Bootstrapped</h3>
<p>Looking for a simpler start? Look no further than this very page. It's included as a fully functional demo of what's possible with LESS and Bootstrap that you can play around with or use as a template for something more.</p>
<p>It's licensed under the Creative Commons, so you're set to do what you please with it so long as you give me a shoutout or a link back here (it's much appreciated, and thanks in advance!).</p>
</section>
<section>
<h2>Download</h2>
<p>Bootstrap is available for download right from <a href="http://github.com/" target="_blank">GitHub</a>, the best code hosting and version control service out there. Included in the zip are the latest version of LESS, Bootstrap.less, and a demo page.</p>
<p><a href="https://github.com/markdotto/Bootstrap.less/zipball/master" class="purple button">Download Bootstrap.less</a> <small>or <a href="http://github.com/markdotto/Bootstrap.less" target="_blank">check it out on GitHub</a></small></p>
</section>
<footer>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
<p>
<a href="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" target="_blank">Read the blog post</a> <span>·</span>
<a href="http://github.com/markdotto/Bootstrap.less" target="_blank">View on GitHub</a>
</p>
<p>
<a href="mailto:[email protected]?subject=About Bootstrap">Questions or comments?</a> <span>·</span>
<a href="http://lesscss.org" target="_blank">Made for LESS</a> <span>·</span>
Made by @<a href="http://twitter.com/mdo">mdo</a>
</p>
<p>Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons</a>.</p>
</footer>
</body>
</html>