Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
less.html 37.6 KB
Newer Older
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Mark Otto's avatar
change title attr to re-include twitter    
Mark Otto committed
5 
    <title>Less · Twitter Bootstrap</title>
Raul Riera's avatar
Removed trailing backslash :)    
Raul Riera committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
7
8
9
10 
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
Jacob Thornton's avatar
move doc building into base make method + build bootstrap to doc assets    
Jacob Thornton committed
11
12 
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
13
14
15 
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Mark Otto's avatar
move shim after css    
Mark Otto committed
16
17
18
19
20 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
21 
    <!-- Le fav and touch icons -->
Mark Otto's avatar
fix location of favicon    
Mark Otto committed
22 
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
Mark Otto's avatar
adding 144x144 ipad touch icon    
Mark Otto committed
23 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
Mark Otto's avatar
updated apple touch icons and moved input responsive fix from <480 to <767    
Mark Otto committed
24 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
Mark Otto's avatar
use variable for navbar text line-height    
Mark Otto committed
25
26 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
Mark Otto's avatar
adding google analytics tracking to docs    
Mark Otto committed
27
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
28
29 
  </head>
Mark Otto's avatar
restore scrollspy to body    
Mark Otto committed
30 
  <body data-spy="scroll" data-target=".subnav" data-offset="50">
Jacob Thornton's avatar
turn off brand hover for now + get nav toggling in mobile    
Jacob Thornton committed
31
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
32
33
34
35 
    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
36 
        <div class="bs-docs-container">
Purwandi's avatar
Add space on navbar button    
Purwandi committed
37 
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
38
39
40
41
42
43
44
45 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
46 
                <a href="./index.html">Home</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
47
48
49
50
51
52
53
54
55
56
57 
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
58 
                <a href="./javascript.html">Javascript</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
59
60 
              </li>
              <li class="active">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
61 
                <a href="./less.html">LESS</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
62
63
64
65
66
67
68
69
70
71
72
73
74
75 
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="./download.html">Customize</a>
              </li>
              <li class="">
                <a href="./examples.html">Examples</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
76 
    <div class="bs-docs-container">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
77
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
78
79
80
81
82 
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>Using LESS with Bootstrap</h1>
  <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
Mark Otto's avatar
remove subnav file, instead add an optional class for .navbar    
Mark Otto committed
83
84
85
86
87
88
89
90
91 
  <div class="navbar navbar-subnav">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a href="#builtWith">Built with Less</a></li>
        <li><a href="#variables">Variables</a></li>
        <li><a href="#mixins">Mixins</a></li>
        <li><a href="#compiling">Compiling Bootstrap</a></li>
      </ul>
    </div>
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
92 
  </div>
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
93 
</header>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
94
95
Mark Otto's avatar
updated docs pages (still wip), adding misc css classes, added form styles...    
Mark Otto committed
96
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
97
98
99
100
101
102 
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
  <div class="page-header">
    <h1>Built with LESS</h1>
  </div>
Mark Otto's avatar
updated less page to single col    
Mark Otto committed
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121 

  <h3>Why LESS?</h3>
  <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>

  <h3>What's included?</h3>
  <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>

  <h3>Learn more</h3>
  <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
  <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>

  <h3><a href="#variables">Variables</a></h3>
  <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>

  <h3><a href="#mixins">Mixins</a></h3>
  <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>

  <h3>Operations</h3>
  <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
122
123
124 
</section>
Mark Otto's avatar
revamp alert message and error state color/text/bg to be variables    
Mark Otto committed
125
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
126
127
128
129 
<!-- VARIABLES
================================================== -->
<section id="variables">
  <div class="page-header">
Mark Otto's avatar
add swatches to the color variables in less docs page    
Mark Otto committed
130 
    <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
131 
  </div>
Mark Otto's avatar
start breaking down patterns.less into more distinct files, update docs for...    
Mark Otto committed
132
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
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 
  <h3>Scaffolding and links</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@bodyBackground</code></td>
        <td><code>@white</code></td>
        <td>Page background color</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
      </tr>
      <tr>
        <td><code>@textColor</code></td>
        <td><code>@grayDark</code></td>
        <td>Default text color for entire body, headings, and more</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
      </tr>
      <tr>
        <td><code>@linkColor</code></td>
        <td><code>#08c</code></td>
        <td>Default link text color</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
      </tr>
      <tr>
        <td><code>@linkColorHover</code></td>
        <td><code>darken(@linkColor, 15%)</code></td>
        <td>Default link text hover color</td>
        <td><span class="swatch" style="background-color: #005580;"></span></td>
      </tr>
    </tbody>
  </table>
  <h3>Grid system</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@gridColumns</code></td>
        <td>12</td>
      </tr>
      <tr>
        <td><code>@gridColumnWidth</code></td>
        <td>60px</td>
      </tr>
      <tr>
        <td><code>@gridGutterWidth</code></td>
        <td>20px</td>
      </tr>
      <tr>
        <td><code>@fluidGridColumnWidth</code></td>
        <td>6.382978723%</td>
      </tr>
      <tr>
        <td><code>@fluidGridGutterWidth</code></td>
        <td>2.127659574%</td>
      </tr>
    </tbody>
  </table>
  <h3>Typography</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@sansFontFamily</code></td>
        <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
      </tr>
      <tr>
        <td><code>@serifFontFamily</code></td>
        <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
      </tr>
      <tr>
        <td><code>@monoFontFamily</code></td>
        <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
      </tr>

      <tr>
        <td><code>@baseFontSize</code></td>
        <td>13px</td>
        <td><em class="muted">Must be pixels</em></td>
      </tr>
      <tr>
        <td><code>@baseFontFamily</code></td>
        <td colspan="2"><code>@sansFontFamily</code></td>
      </tr>
      <tr>
        <td><code>@baseLineHeight</code></td>
        <td>18px</td>
        <td><em class="muted">Must be pixels</em></td>
      </tr>
      <tr>
        <td><code>@altFontFamily</code></td>
        <td colspan="2"><code>@serifFontFamily</code></td>
      </tr>

      <tr>
        <td><code>@headingsFontFamily</code></td>
        <td colspan="2"><code>inherit</code></td>
      </tr>
      <tr>
        <td><code>@headingsFontWeight</code></td>
        <td colspan="2"><code>bold</code></td>
      </tr>
      <tr>
        <td><code>@headingsColor</code></td>
        <td colspan="2"><code>inherit</code></td>
      </tr>
    </tbody>
  </table>
  <h3>Tables</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@tableBackground</code></td>
        <td><code>transparent</code></td>
      </tr>
      <tr>
        <td><code>@tableBackgroundAccent</code></td>
        <td><code>#f9f9f9</code></td>
      </tr>
      <tr>
        <td><code>@tableBackgroundHover</code></td>
        <td><code>#f5f5f5</code></td>
      </tr>
      <tr>
        <td><code>@tableBorder</code></td>
Mark Otto's avatar
more content changes to docs    
Mark Otto committed
253 
        <td><code>#ddd</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
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 
      </tr>
    </tbody>
  </table>

  <h3>Grayscale colors</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@black</code></td>
        <td>#000</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
      </tr>
      <tr>
        <td><code>@grayDarker</code></td>
        <td>#222</td>
        <td><span class="swatch" style="background-color: #222;"></span></td>
      </tr>
      <tr>
        <td><code>@grayDark</code></td>
        <td>#333</td>
        <td><span class="swatch" style="background-color: #333;"></span></td>
      </tr>
      <tr>
        <td><code>@gray</code></td>
        <td>#555</td>
        <td><span class="swatch" style="background-color: #555;"></span></td>
      </tr>
      <tr>
        <td><code>@grayLight</code></td>
        <td>#999</td>
        <td><span class="swatch" style="background-color: #999;"></span></td>
      </tr>
      <tr>
        <td><code>@grayLighter</code></td>
        <td>#eee</td>
        <td><span class="swatch" style="background-color: #eee;"></span></td>
      </tr>
      <tr>
        <td><code>@white</code></td>
        <td>#fff</td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>
    </tbody>
  </table>
  <h3>Accent colors</h3>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@blue</code></td>
        <td>#049cdb</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
      </tr>
      <tr>
        <td><code>@green</code></td>
        <td>#46a546</td>
        <td><span class="swatch" style="background-color: #46a546;"></span></td>
      </tr>
      <tr>
        <td><code>@red</code></td>
        <td>#9d261d</td>
        <td><span class="swatch" style="background-color: #9d261d;"></span></td>
      </tr>
      <tr>
        <td><code>@yellow</code></td>
        <td>#ffc40d</td>
        <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
      </tr>
      <tr>
        <td><code>@orange</code></td>
        <td>#f89406</td>
        <td><span class="swatch" style="background-color: #f89406;"></span></td>
      </tr>
      <tr>
        <td><code>@pink</code></td>
        <td>#c3325f</td>
        <td><span class="swatch" style="background-color: #c3325f;"></span></td>
      </tr>
      <tr>
        <td><code>@purple</code></td>
        <td>#7a43b6</td>
        <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
      </tr>
    </tbody>
  </table>
Mark Otto's avatar
updated docs pages (still wip), adding misc css classes, added form styles...    
Mark Otto committed
339
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
340 
  <h3>Components</h3>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389 

  <h4>Buttons</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@btnBackground</code></td>
        <td><code>@white</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
      </tr>
      <tr>
        <td><code>@btnBackgroundHighlight</code></td>
        <td><code>darken(@white, 10%)</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
      </tr>
      <tr>
        <td><code>@btnBorder</code></td>
        <td><code>darken(@white, 20%)</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
      </tr>

      <tr>
        <td><code>@btnPrimaryBackground</code></td>
        <td><code>@linkColor</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
      </tr>
      <tr>
        <td><code>@btnPrimaryBackgroundHighlight</code></td>
        <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
      </tr>

      <tr>
        <td><code>@btnInfoBackground</code></td>
        <td><code>#5bc0de</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
      </tr>
      <tr>
        <td><code>@btnInfoBackgroundHighlight</code></td>
        <td><code>#2f96b4</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
      </tr>

      <tr>
        <td><code>@btnSuccessBackground</code></td>
        <td><code>#62c462</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
      </tr>
      <tr>
        <td><code>@btnSuccessBackgroundHighlight</code></td>
Mark Otto's avatar
fix less docs typos    
Mark Otto committed
390 
        <td><code>#51a351</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598 
        <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
      </tr>

      <tr>
        <td><code>@btnWarningBackground</code></td>
        <td><code>lighten(@orange, 15%)</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
      </tr>
      <tr>
        <td><code>@btnWarningBackgroundHighlight</code></td>
        <td><code>@orange</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
      </tr>

      <tr>
        <td><code>@btnDangerBackground</code></td>
        <td><code>#ee5f5b</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
      </tr>
      <tr>
        <td><code>@btnDangerBackgroundHighlight</code></td>
        <td><code>#bd362f</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
      </tr>

      <tr>
        <td><code>@btnInverseBackground</code></td>
        <td><code>@gray</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
      </tr>
      <tr>
        <td><code>@btnInverseBackgroundHighlight</code></td>
        <td><code>@grayDarker</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
      </tr>
    </tbody>
  </table>
  <h4>Forms</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@placeholderText</code></td>
        <td><code>@grayLight</code></td>
      </tr>
      <tr>
        <td><code>@inputBackground</code></td>
        <td><code>@white</code></td>
      </tr>
      <tr>
        <td><code>@inputBorder</code></td>
        <td><code>#ccc</code></td>
      </tr>
      <tr>
        <td><code>@inputBorderRadius</code></td>
        <td><code>3px</code></td>
      </tr>
      <tr>
        <td><code>@inputDisabledBackground</code></td>
        <td><code>@grayLighter</code></td>
      </tr>
      <tr>
        <td><code>@formActionsBackground</code></td>
        <td><code>#f5f5f5</code></td>
      </tr>
    </tbody>
  </table>
  <h4>Form states and alerts</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@warningText</code></td>
        <td>#c09853</td>
        <td><span class="swatch" style="background-color: #c09853;"></span></td>
      </tr>
      <tr>
        <td><code>@warningBackground</code></td>
        <td>#f3edd2</td>
        <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
      </tr>
      <tr>
        <td><code>@errorText</code></td>
        <td>#b94a48</td>
        <td><span class="swatch" style="background-color: #b94a48;"></span></td>
      </tr>
      <tr>
        <td><code>@errorBackground</code></td>
        <td>#f2dede</td>
        <td><span class="swatch" style="background-color: #f2dede;"></span></td>
      </tr>
      <tr>
        <td><code>@successText</code></td>
        <td>#468847</td>
        <td><span class="swatch" style="background-color: #468847;"></span></td>
      </tr>
      <tr>
        <td><code>@successBackground</code></td>
        <td>#dff0d8</td>
        <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
      </tr>
      <tr>
        <td><code>@infoText</code></td>
        <td>#3a87ad</td>
        <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
      </tr>
      <tr>
        <td><code>@infoBackground</code></td>
        <td>#d9edf7</td>
        <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
      </tr>
    </tbody>
  </table>

  <h4>Navbar</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@navbarHeight</code></td>
        <td>40px</td>
        <td class="swatch-col"></td>
      </tr>
      <tr>
        <td><code>@navbarBackground</code></td>
        <td><code>@grayDarker</code></td>
        <td><span class="swatch" style="background-color: #222;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarBackgroundHighlight</code></td>
        <td><code>@grayDark</code></td>
        <td><span class="swatch" style="background-color: #333;"></span></td>
      </tr>

      <tr>
        <td><code>@navbarText</code></td>
        <td><code>@grayLight</code></td>
        <td><span class="swatch" style="background-color: #999;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarLinkColor</code></td>
        <td><code>@grayLight</code></td>
        <td><span class="swatch" style="background-color: #999;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarLinkColorHover</code></td>
        <td><code>@white</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarLinkColorActive</code></td>
        <td><code>@navbarLinkColorHover</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarLinkBackgroundHover</code></td>
        <td><code>transparent</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarLinkBackgroundActive</code></td>
        <td><code>@navbarBackground</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>

      <tr>
        <td><code>@navbarSearchBackground</code></td>
        <td><code>lighten(@navbarBackground, 25%)</code></td>
        <td><span class="swatch" style="background-color: #666;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarSearchBackgroundFocus</code></td>
        <td><code>@white</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarSearchBorder</code></td>
        <td><code>darken(@navbarSearchBackground, 30%)</code></td>
        <td><span class="swatch" style="background-color: #111;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarSearchPlaceholderColor</code></td>
        <td><code>#ccc</code></td>
        <td><span class="swatch" style="background-color: #ccc;"></span></td>
      </tr>
      <tr>
        <td><code>@navbarBrandColor</code></td>
        <td><code>@navbarLinkColor</code></td>
        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
      </tr>
    </tbody>
  </table>
  <h4>Dropdowns</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@dropdownBackground</code></td>
        <td><code>@white</code></td>
      </tr>
      <tr>
        <td><code>@dropdownBorder</code></td>
        <td><code>rgba(0,0,0,.2)</code></td>
      </tr>
      <tr>
        <td><code>@dropdownLinkColor</code></td>
        <td><code>@grayDark</code></td>
      </tr>
      <tr>
        <td><code>@dropdownLinkColorHover</code></td>
        <td><code>@white</code></td>
      </tr>
Mark Otto's avatar
add separate vars for dropdown link hover and active states    
Mark Otto committed
599
600
601
602 
      <tr>
        <td><code>@dropdownLinkColorActive</code></td>
        <td><code>@linkColor</code></td>
      </tr>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
603
604 
      <tr>
        <td><code>@dropdownLinkBackgroundHover</code></td>
Mark Otto's avatar
add separate vars for dropdown link hover and active states    
Mark Otto committed
605
606
607
608 
        <td><code>@grayLighter</code></td>
      </tr>
      <tr>
        <td><code>@dropdownLinkBackgroundActive</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
609
610
611 
        <td><code>@linkColor</code></td>
      </tr>
      <tr>
Mark Otto's avatar
fix double @@ on less pages    
Mark Otto committed
612 
        <td><code>@dropdownDividerTop</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
613
614
615 
        <td><code>#e5e5e5</code></td>
      </tr>
      <tr>
Mark Otto's avatar
fix double @@ on less pages    
Mark Otto committed
616 
        <td><code>@dropdownDividerBottom</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635 
        <td><code>@white</code></td>
      </tr>
    </tbody>
  </table>
  <h4>Hero unit</h4>
  <table class="table table-bordered table-striped">
    <tbody>
      <tr>
        <td class="span4"><code>@heroUnitBackground</code></td>
        <td><code>@grayLighter</code></td>
        <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
      </tr>
      <tr>
        <td class="span2"><code>@heroUnitHeadingColor</code></td>
        <td><code>inherit</code></td>
        <td></td>
      </tr>
      <tr>
        <td><code>@heroUnitLeadColor</code></td>
Mark Otto's avatar
fix less docs typos    
Mark Otto committed
636 
        <td><code>inherit</code></td>
Mark Otto's avatar
fix navbar button for mobile tapping (turn to button instead of adding...    
Mark Otto committed
637
638
639
640
641 
        <td></td>
      </tr>
    </tbody>
  </table>
Mark Otto's avatar
updated docs pages (still wip), adding misc css classes, added form styles...    
Mark Otto committed
642
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
643 
</section>
Mark Otto's avatar
updated docs pages (still wip), adding misc css classes, added form styles...    
Mark Otto committed
644
645
646
Mark Otto's avatar
fix up docs css for responsive and subnav, fix forms error states    
Mark Otto committed
647
648 
<!-- MIXINS
================================================== -->
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
649
650
651
652
653
654
655
656
657 
<section id="mixins">
  <div class="page-header">
    <h1>Bootstrap mixins <small></small></h1>
  </div>
  <h2>About mixins</h2>
  <div class="row">
    <div class="span4">
      <h3>Basic mixins</h3>
      <p>A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
658 
<pre class="prettyprint linenums">
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
659
660
661 
.element {
  .clearfix();
}
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
662 
</pre>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
663
664
665 
    </div><!-- /span4 -->
    <div class="span4">
      <h3>Parametric mixins</h3>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
666 
      <p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
667 
<pre class="prettyprint linenums">
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
668
669
670 
.element {
  .border-radius(4px);
}
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
671 
</pre>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
672
673
674
675
676
677
678
679
680
681
682
683
684 
    </div><!-- /span4 -->
    <div class="span4">
      <h3>Easily add your own</h3>
      <p>Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.</p>
      <p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
    </div><!-- /span4 -->
  </div><!-- /row -->
  <h2>Included mixins</h2>
  <h3>Utilities</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="span4">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
685 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
686
687
688
689
690
691 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>.clearfix()</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
692
693 
        <td><em class="muted">none</em></td>
        <td>Add to any parent to clear floats within</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
694 
      </tr>
Mark Otto's avatar
new tab focus style and mixin    
Mark Otto committed
695
696
697
698
699 
      <tr>
        <td><code>.tab-focus()</code></td>
        <td><em class="muted">none</em></td>
        <td>Apply the Webkit focus style and round Firefox outline</td>
      </tr>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
700
701 
      <tr>
        <td><code>.center-block()</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
702
703 
        <td><em class="muted">none</em></td>
        <td>Auto center a block-level element using <code>margin: auto</code></td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
704
705
706 
      </tr>
      <tr>
        <td><code>.ie7-inline-block()</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
707
708 
        <td><em class="muted">none</em></td>
        <td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
709
710
711 
      </tr>
      <tr>
        <td><code>.size()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
712 
        <td><code>@height @width</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
713 
        <td>Quickly set the height and width on one line</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
714
715
716 
      </tr>
      <tr>
        <td><code>.square()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
717 
        <td><code>@size</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
718 
        <td>Builds on <code>.size()</code> to set the width and height as same value</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
719
720
721 
      </tr>
      <tr>
        <td><code>.opacity()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
722 
        <td><code>@opacity</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
723 
        <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
724
725
726
727
728
729
730
731 
      </tr>
    </tbody>
  </table>
  <h3>Forms</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="span4">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
732 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
733
734
735
736
737
738 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>.placeholder()</code></td>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
739
740 
        <td><code>@color: @placeholderText</code></td>
        <td>Set the <code>placeholder</code> text color for inputs</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
741
742
743
744
745
746
747
748 
      </tr>
    </tbody>
  </table>
  <h3>Typography</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="span4">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
749 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
750
751
752
753
754
755 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>#font > #family > .serif()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
756
757 
        <td><em class="muted">none</em></td>
        <td>Make an element use a serif font stack</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
758
759
760 
      </tr>
      <tr>
        <td><code>#font > #family > .sans-serif()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
761
762 
        <td><em class="muted">none</em></td>
        <td>Make an element use a sans-serif font stack</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
763
764
765 
      </tr>
      <tr>
        <td><code>#font > #family > .monospace()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
766
767 
        <td><em class="muted">none</em></td>
        <td>Make an element use a monospace font stack</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
768
769
770 
      </tr>
      <tr>
        <td><code>#font > .shorthand()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
771
772 
        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
        <td>Easily set font size, weight, and leading</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
773
774
775 
      </tr>
      <tr>
        <td><code>#font > .serif()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
776
777 
        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
        <td>Set font family to serif, and control size, weight, and leading</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
778
779
780 
      </tr>
      <tr>
        <td><code>#font > .sans-serif()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
781
782 
        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
        <td>Set font family to sans-serif, and control size, weight, and leading</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
783
784
785 
      </tr>
      <tr>
        <td><code>#font > .monospace()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
786
787 
        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
        <td>Set font family to monospace, and control size, weight, and leading</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
788
789
790
791
792
793
794
795 
      </tr>
    </tbody>
  </table>
  <h3>Grid system</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="span4">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
796 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
797
798
799
800
801 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
802
803 
        <td><code>.container-fixed()</code></td>
        <td><em class="muted">none</em></td>
Mark Otto's avatar
update grid system mixins in less docs for new grid    
Mark Otto committed
804 
        <td>Create a horizontally centered container for holding your content</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
805
806 
      </tr>
      <tr>
Mark Otto's avatar
update grid system mixins in less docs for new grid    
Mark Otto committed
807
808
809 
        <td><code>#grid > .core()</code></td>
        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
        <td>Generate a pixel grid system (container, row, and columns) with <em>n</em> columns and <em>x</em> pixel wide gutter</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
810
811 
      </tr>
      <tr>
Mark Otto's avatar
update grid system mixins in less docs for new grid    
Mark Otto committed
812
813 
        <td><code>#grid > .fluid()</code></td>
        <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
Mark Otto's avatar
manually resolve #3516: type in less docs    
Mark Otto committed
814 
        <td>Generate a percent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
815 
      </tr>
Mark Otto's avatar
merge in #2684, offset on the .makeColumn mixin    
Mark Otto committed
816
817
818
819
820
821
822
823
824
825 
      <tr>
        <td><code>#grid > .input()</code></td>
        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
        <td>Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders</td>
      </tr>
      <tr>
        <td><code>.makeColumn</code></td>
        <td><code>@columns: 1, @offset: 0</code></td>
        <td>Turn any <code>div</code> into a grid column without the <code>.span*</code> classes</td>
      </tr>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
826
827
828
829
830
831 
    </tbody>
  </table>
  <h3>CSS3 properties</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
832 
        <th class="span3">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
833 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
834
835
836
837
838
839 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>.border-radius()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
840 
        <td><code>@radius</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
841 
        <td>Round the corners of an element. Can be a single value or four space-separated values</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
842
843
844 
      </tr>
      <tr>
        <td><code>.box-shadow()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
845 
        <td><code>@shadow</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
846 
        <td>Add a drop shadow to an element</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
847
848
849 
      </tr>
      <tr>
        <td><code>.transition()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
850
851 
        <td><code>@transition</code></td>
        <td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
852
853
854 
      </tr>
      <tr>
        <td><code>.rotate()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
855
856 
        <td><code>@degrees</code></td>
        <td>Rotate an element <em>n</em> degrees</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
857
858
859 
      </tr>
      <tr>
        <td><code>.scale()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
860 
        <td><code>@ratio</code></td>
Mark Otto's avatar
fix incorrect uses of it's in the docs    
Mark Otto committed
861 
        <td>Scale an element to <em>n</em> times its original size</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
862
863
864 
      </tr>
      <tr>
        <td><code>.translate()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
865 
        <td><code>@x, @y</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
866 
        <td>Move an element on the x and y planes</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
867
868
869 
      </tr>
      <tr>
        <td><code>.background-clip()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
870 
        <td><code>@clip</code></td>
Kyle Robinson Young's avatar
Typo fixes    
Kyle Robinson Young committed
871 
        <td>Crop the background of an element (useful for <code>border-radius</code>)</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
872
873
874 
      </tr>
      <tr>
        <td><code>.background-size()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
875
876 
        <td><code>@size</code></td>
        <td>Control the size of background images via CSS3</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
877
878
879 
      </tr>
      <tr>
        <td><code>.box-sizing()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
880
881 
        <td><code>@boxmodel</code></td>
        <td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
882
883
884 
      </tr>
      <tr>
        <td><code>.user-select()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
885
886 
        <td><code>@select</code></td>
        <td>Control cursor selection of text on a page</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
887 
      </tr>
Mark Otto's avatar
document .backface-visibility and update comments and initial value    
Mark Otto committed
888
889
890
891
892 
      <tr>
        <td><code>.backface-visibility()</code></td>
        <td><code>@visibility: visible</code></td>
        <td>Prevent flickering of content when using CSS 3D transforms</td>
      </tr>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
893
894 
      <tr>
        <td><code>.resizable()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
895
896 
        <td><code>@direction: both</code></td>
        <td>Make any element resizable on the right and bottom</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
897
898
899 
      </tr>
      <tr>
        <td><code>.content-columns()</code></td>
Mark Otto's avatar
update less docs page to reflect changes in mixins (no more default values) and variable name fix    
Mark Otto committed
900 
        <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
901 
        <td>Make the content of any element use CSS3 columns</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
902 
      </tr>
Mark Otto's avatar
document .hyphens() mixin    
Mark Otto committed
903
904
905
906
907 
      <tr>
        <td><code>.hyphens()</code></td>
        <td><code>@mode: auto</code></td>
        <td>CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>)</td>
      </tr>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
908
909
910
911
912
913
914 
    </tbody>
  </table>
  <h3>Backgrounds and gradients</h3>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="span4">Mixin</th>
Mark Otto's avatar
start filling out mixins tables    
Mark Otto committed
915 
        <th>Parameters</th>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
916
917
918
919
920 
        <th>Usage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
921 
        <td><code>#translucent > .background()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
922
923 
        <td><code>@color: @white, @alpha: 1</code></td>
        <td>Give an element a translucent background color</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
924
925 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
926 
        <td><code>#translucent > .border()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
927
928 
        <td><code>@color: @white, @alpha: 1</code></td>
        <td>Give an element a translucent border color</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
929
930 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
931 
        <td><code>#gradient > .vertical()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
932
933 
        <td><code>@startColor, @endColor</code></td>
        <td>Create a cross-browser vertical background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
934
935 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
936 
        <td><code>#gradient > .horizontal()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
937
938 
        <td><code>@startColor, @endColor</code></td>
        <td>Create a cross-browser horizontal background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
939
940 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
941 
        <td><code>#gradient > .directional()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
942
943 
        <td><code>@startColor, @endColor, @deg</code></td>
        <td>Create a cross-browser directional background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
944
945 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
946 
        <td><code>#gradient > .vertical-three-colors()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
947
948 
        <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
        <td>Create a cross-browser three-color background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
949
950 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
951 
        <td><code>#gradient > .radial()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
952
953 
        <td><code>@innerColor, @outerColor</code></td>
        <td>Create a cross-browser radial background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
954
955 
      </tr>
      <tr>
Mark Otto's avatar
fix gradient mixins by escaping them, add notes on progress bars    
Mark Otto committed
956 
        <td><code>#gradient > .striped()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
957
958 
        <td><code>@color, @angle</code></td>
        <td>Create a cross-browser striped background gradient</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
959
960 
      </tr>
      <tr>
Mark Otto's avatar
fix #gradientBar to .gradientBar in LESS docs    
Mark Otto committed
961 
        <td><code>.gradientBar()</code></td>
Mark Otto's avatar
finish the rest of the less page mixins docs    
Mark Otto committed
962
963 
        <td><code>@primaryColor, @secondaryColor</code></td>
        <td>Used for buttons to assign a gradient and slightly darker border</td>
Mark Otto's avatar
spec out all mixins on less page    
Mark Otto committed
964
965
966
967 
      </tr>
    </tbody>
  </table>
</section>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
968
969
Mark Otto's avatar
move css builder and downloader to dedicated page, start to update remaining...    
Mark Otto committed
970
971
972
973
974
975
976
977
978
979 

<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
  <div class="page-header">
    <h1>Compiling Bootstrap with LESS</h1>
  </div>
  <div class="alert alert-info">
    <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
  </div>
Mark Otto's avatar
updated less page to single col    
Mark Otto committed
980
Mark Otto's avatar
move css builder and downloader to dedicated page, start to update remaining...    
Mark Otto committed
981 
  <h2>Tools for compiling</h2>
Mark Otto's avatar
updated less page to single col    
Mark Otto committed
982
983
984
985
986
987
988
989
990
991
992
993
994
995 

  <h3>Node with makefile</h3>
  <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
  <pre>$ npm install -g less jshint recess uglify-js</pre>
  <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
  <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>

  <h3>Command line</h3>
  <p>Install the LESS command line tool via Node and run the following command:</p>
    <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
  <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>

  <h3>Javascript</h3>
  <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
996
997
998
999 
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
Mark Otto's avatar
updated less page to single col    
Mark Otto committed
1000 
  <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
For faster browsing, not all history is shown. View entire blame