sass-twitter-bootstrap 0.1.0 → 2.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (245) hide show
  1. data/lib/{sass-twitter-bootstrap.rb → sass/twitter/bootstrap.rb} +1 -1
  2. data/lib/sass/twitter/bootstrap/rails.rb +1 -5
  3. data/lib/sass/twitter/bootstrap/rails/engine.rb +12 -0
  4. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  5. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  6. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +32 -28
  8. data/vendor/assets/javascripts/twitter/bootstrap-button.js +33 -29
  9. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +21 -33
  10. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +26 -47
  11. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +10 -18
  12. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +17 -25
  13. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +10 -13
  14. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +18 -44
  15. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +7 -12
  16. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +35 -40
  17. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +20 -30
  18. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +15 -29
  19. data/vendor/assets/stylesheets/tests/buttons.html +139 -0
  20. data/vendor/assets/stylesheets/tests/css-tests.css +99 -1
  21. data/vendor/assets/stylesheets/tests/css-tests.html +519 -37
  22. data/vendor/assets/stylesheets/tests/forms-responsive.html +71 -0
  23. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +104 -0
  24. data/vendor/assets/stylesheets/tests/navbar-static-top.html +107 -0
  25. data/vendor/assets/stylesheets/tests/navbar.html +38 -39
  26. data/vendor/assets/stylesheets/twitter/_accordion.scss +0 -5
  27. data/vendor/assets/stylesheets/twitter/_alerts.scss +15 -3
  28. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +0 -2
  29. data/vendor/assets/stylesheets/twitter/_button-groups.scss +32 -76
  30. data/vendor/assets/stylesheets/twitter/_buttons.scss +25 -33
  31. data/vendor/assets/stylesheets/twitter/_close.scss +1 -12
  32. data/vendor/assets/stylesheets/twitter/_code.scss +8 -8
  33. data/vendor/assets/stylesheets/twitter/_component-animations.scss +7 -9
  34. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +45 -58
  35. data/vendor/assets/stylesheets/twitter/_forms.scss +146 -206
  36. data/vendor/assets/stylesheets/twitter/_grid.scss +5 -2
  37. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +1 -3
  38. data/vendor/assets/stylesheets/twitter/_labels.scss +32 -0
  39. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -2
  40. data/vendor/assets/stylesheets/twitter/_mixins.scss +208 -273
  41. data/vendor/assets/stylesheets/twitter/_modals.scss +8 -14
  42. data/vendor/assets/stylesheets/twitter/_navbar.scss +73 -132
  43. data/vendor/assets/stylesheets/twitter/_navs.scss +43 -53
  44. data/vendor/assets/stylesheets/twitter/_pager.scss +0 -6
  45. data/vendor/assets/stylesheets/twitter/_pagination.scss +0 -1
  46. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +6 -28
  47. data/vendor/assets/stylesheets/twitter/_reset.scss +4 -9
  48. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +8 -4
  49. data/vendor/assets/stylesheets/twitter/_sprites.scss +7 -40
  50. data/vendor/assets/stylesheets/twitter/_tables.scss +33 -38
  51. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +2 -14
  52. data/vendor/assets/stylesheets/twitter/_tooltip.scss +1 -1
  53. data/vendor/assets/stylesheets/twitter/_type.scss +14 -28
  54. data/vendor/assets/stylesheets/twitter/_variables.scss +19 -116
  55. data/vendor/assets/stylesheets/twitter/_wells.scss +0 -10
  56. data/vendor/assets/stylesheets/twitter/bootstrap.scss +7 -3
  57. data/vendor/assets/stylesheets/twitter/responsive.scss +301 -15
  58. metadata +25 -190
  59. data/.gitignore +0 -4
  60. data/Gemfile +0 -3
  61. data/Gemfile.lock +0 -14
  62. data/LICENSE +0 -176
  63. data/Makefile +0 -94
  64. data/README.md +0 -217
  65. data/Rakefile +0 -52
  66. data/bootstrap-2.0.4.css +0 -4661
  67. data/bootstrap-2.0.4.min.css +0 -9
  68. data/bootstrap-responsive-2.0.4.css +0 -932
  69. data/bootstrap-responsive-2.0.4.min.css +0 -9
  70. data/docs/assets/css/bootstrap-responsive.css +0 -932
  71. data/docs/assets/css/bootstrap.css +0 -4661
  72. data/docs/assets/css/docs.css +0 -846
  73. data/docs/assets/ico/apple-touch-icon-114-precomposed.png +0 -0
  74. data/docs/assets/ico/apple-touch-icon-144-precomposed.png +0 -0
  75. data/docs/assets/ico/apple-touch-icon-57-precomposed.png +0 -0
  76. data/docs/assets/ico/apple-touch-icon-72-precomposed.png +0 -0
  77. data/docs/assets/ico/favicon.ico +0 -0
  78. data/docs/assets/img/bird.png +0 -0
  79. data/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg +0 -0
  80. data/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg +0 -0
  81. data/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg +0 -0
  82. data/docs/assets/img/browsers.png +0 -0
  83. data/docs/assets/img/example-sites/fleetio.png +0 -0
  84. data/docs/assets/img/example-sites/jshint.png +0 -0
  85. data/docs/assets/img/example-sites/kippt.png +0 -0
  86. data/docs/assets/img/example-sites/soundready.png +0 -0
  87. data/docs/assets/img/examples/bootstrap-example-fluid.jpg +0 -0
  88. data/docs/assets/img/examples/bootstrap-example-hero.jpg +0 -0
  89. data/docs/assets/img/examples/bootstrap-example-starter.jpg +0 -0
  90. data/docs/assets/img/github-16px.png +0 -0
  91. data/docs/assets/img/glyphicons-halflings-white.png +0 -0
  92. data/docs/assets/img/glyphicons-halflings.png +0 -0
  93. data/docs/assets/img/glyphicons/glyphicons_009_magic.png +0 -0
  94. data/docs/assets/img/glyphicons/glyphicons_042_group.png +0 -0
  95. data/docs/assets/img/glyphicons/glyphicons_079_podium.png +0 -0
  96. data/docs/assets/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  97. data/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  98. data/docs/assets/img/glyphicons/glyphicons_163_iphone.png +0 -0
  99. data/docs/assets/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  100. data/docs/assets/img/glyphicons/glyphicons_266_book_open.png +0 -0
  101. data/docs/assets/img/grid-18px-masked.png +0 -0
  102. data/docs/assets/img/icon-css3.png +0 -0
  103. data/docs/assets/img/icon-github.png +0 -0
  104. data/docs/assets/img/icon-html5.png +0 -0
  105. data/docs/assets/img/icon-twitter.png +0 -0
  106. data/docs/assets/img/less-logo-large.png +0 -0
  107. data/docs/assets/img/less-small.png +0 -0
  108. data/docs/assets/img/responsive-illustrations.png +0 -0
  109. data/docs/assets/js/README.md +0 -106
  110. data/docs/assets/js/application.js +0 -184
  111. data/docs/assets/js/bootstrap-alert.js +0 -90
  112. data/docs/assets/js/bootstrap-button.js +0 -96
  113. data/docs/assets/js/bootstrap-carousel.js +0 -169
  114. data/docs/assets/js/bootstrap-collapse.js +0 -157
  115. data/docs/assets/js/bootstrap-dropdown.js +0 -100
  116. data/docs/assets/js/bootstrap-modal.js +0 -218
  117. data/docs/assets/js/bootstrap-popover.js +0 -98
  118. data/docs/assets/js/bootstrap-scrollspy.js +0 -151
  119. data/docs/assets/js/bootstrap-tab.js +0 -135
  120. data/docs/assets/js/bootstrap-tooltip.js +0 -275
  121. data/docs/assets/js/bootstrap-transition.js +0 -61
  122. data/docs/assets/js/bootstrap-typeahead.js +0 -285
  123. data/docs/assets/js/bootstrap.js +0 -1825
  124. data/docs/assets/js/bootstrap.min.js +0 -6
  125. data/docs/assets/js/google-code-prettify/prettify.css +0 -30
  126. data/docs/assets/js/google-code-prettify/prettify.js +0 -28
  127. data/docs/assets/js/jquery.js +0 -9252
  128. data/docs/base-css.html +0 -1710
  129. data/docs/build/index.js +0 -44
  130. data/docs/build/node_modules/.bin/hulk +0 -93
  131. data/docs/build/node_modules/hogan.js/.git_ignore +0 -1
  132. data/docs/build/node_modules/hogan.js/.gitmodules +0 -3
  133. data/docs/build/node_modules/hogan.js/LICENSE +0 -177
  134. data/docs/build/node_modules/hogan.js/Makefile +0 -62
  135. data/docs/build/node_modules/hogan.js/README.md +0 -93
  136. data/docs/build/node_modules/hogan.js/bin/hulk +0 -93
  137. data/docs/build/node_modules/hogan.js/lib/compiler.js +0 -348
  138. data/docs/build/node_modules/hogan.js/lib/hogan.js +0 -20
  139. data/docs/build/node_modules/hogan.js/lib/template.js +0 -233
  140. data/docs/build/node_modules/hogan.js/package.json +0 -20
  141. data/docs/build/node_modules/hogan.js/test/html/list.html +0 -8
  142. data/docs/build/node_modules/hogan.js/test/index.html +0 -13
  143. data/docs/build/node_modules/hogan.js/test/index.js +0 -848
  144. data/docs/build/node_modules/hogan.js/test/mustache.js +0 -90
  145. data/docs/build/node_modules/hogan.js/test/spec.js +0 -77
  146. data/docs/build/node_modules/hogan.js/test/spec/Changes +0 -31
  147. data/docs/build/node_modules/hogan.js/test/spec/README.md +0 -65
  148. data/docs/build/node_modules/hogan.js/test/spec/Rakefile +0 -27
  149. data/docs/build/node_modules/hogan.js/test/spec/TESTING.md +0 -46
  150. data/docs/build/node_modules/hogan.js/test/spec/specs/comments.json +0 -1
  151. data/docs/build/node_modules/hogan.js/test/spec/specs/comments.yml +0 -103
  152. data/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.json +0 -1
  153. data/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.yml +0 -158
  154. data/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.json +0 -1
  155. data/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.yml +0 -230
  156. data/docs/build/node_modules/hogan.js/test/spec/specs/inverted.json +0 -1
  157. data/docs/build/node_modules/hogan.js/test/spec/specs/inverted.yml +0 -193
  158. data/docs/build/node_modules/hogan.js/test/spec/specs/partials.json +0 -1
  159. data/docs/build/node_modules/hogan.js/test/spec/specs/partials.yml +0 -109
  160. data/docs/build/node_modules/hogan.js/test/spec/specs/sections.json +0 -1
  161. data/docs/build/node_modules/hogan.js/test/spec/specs/sections.yml +0 -256
  162. data/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.json +0 -1
  163. data/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.yml +0 -149
  164. data/docs/build/node_modules/hogan.js/test/templates/list.mustache +0 -8
  165. data/docs/build/node_modules/hogan.js/tools/release.js +0 -74
  166. data/docs/build/node_modules/hogan.js/tools/web_templates.js +0 -32
  167. data/docs/build/node_modules/hogan.js/web/1.0.0/hogan.js +0 -500
  168. data/docs/build/node_modules/hogan.js/web/1.0.0/hogan.min.js +0 -14
  169. data/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.js +0 -500
  170. data/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.min.js +0 -14
  171. data/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.js +0 -545
  172. data/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.min.js +0 -5
  173. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.amd.js +0 -576
  174. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.common.js +0 -576
  175. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.js +0 -572
  176. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.amd.js +0 -5
  177. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.common.js +0 -5
  178. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.js +0 -5
  179. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.mustache.js +0 -5
  180. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.mustache.js +0 -619
  181. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.js +0 -233
  182. data/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.min.js +0 -5
  183. data/docs/build/node_modules/hogan.js/web/favicon.ico +0 -0
  184. data/docs/build/node_modules/hogan.js/web/images/logo.png +0 -0
  185. data/docs/build/node_modules/hogan.js/web/images/noise.png +0 -0
  186. data/docs/build/node_modules/hogan.js/web/images/small-hogan-icon.png +0 -0
  187. data/docs/build/node_modules/hogan.js/web/images/stripes.png +0 -0
  188. data/docs/build/node_modules/hogan.js/web/index.html.mustache +0 -139
  189. data/docs/build/node_modules/hogan.js/web/stylesheets/layout.css +0 -206
  190. data/docs/build/node_modules/hogan.js/web/stylesheets/skeleton.css +0 -236
  191. data/docs/build/node_modules/hogan.js/wrappers/amd.js.mustache +0 -21
  192. data/docs/build/node_modules/hogan.js/wrappers/common.js.mustache +0 -21
  193. data/docs/build/node_modules/hogan.js/wrappers/js.mustache +0 -17
  194. data/docs/build/node_modules/hogan.js/wrappers/mustache.js.mustache +0 -64
  195. data/docs/build/package.json +0 -6
  196. data/docs/components.html +0 -1931
  197. data/docs/download.html +0 -454
  198. data/docs/examples.html +0 -147
  199. data/docs/examples/fluid.html +0 -162
  200. data/docs/examples/hero.html +0 -109
  201. data/docs/examples/starter-template.html +0 -79
  202. data/docs/index.html +0 -259
  203. data/docs/javascript.html +0 -1520
  204. data/docs/less.html +0 -1060
  205. data/docs/scaffolding.html +0 -671
  206. data/docs/templates/layout.mustache +0 -146
  207. data/docs/templates/pages/base-css.mustache +0 -1594
  208. data/docs/templates/pages/components.mustache +0 -1815
  209. data/docs/templates/pages/download.mustache +0 -338
  210. data/docs/templates/pages/examples.mustache +0 -31
  211. data/docs/templates/pages/index.mustache +0 -144
  212. data/docs/templates/pages/javascript.mustache +0 -1405
  213. data/docs/templates/pages/less.mustache +0 -944
  214. data/docs/templates/pages/scaffolding.mustache +0 -555
  215. data/docs/templates/pages/upgrading.mustache +0 -194
  216. data/docs/upgrading.html +0 -310
  217. data/js/tests/index.html +0 -54
  218. data/js/tests/phantom.js +0 -63
  219. data/js/tests/server.js +0 -14
  220. data/js/tests/unit/bootstrap-alert.js +0 -56
  221. data/js/tests/unit/bootstrap-button.js +0 -77
  222. data/js/tests/unit/bootstrap-carousel.js +0 -28
  223. data/js/tests/unit/bootstrap-collapse.js +0 -54
  224. data/js/tests/unit/bootstrap-dropdown.js +0 -87
  225. data/js/tests/unit/bootstrap-modal.js +0 -114
  226. data/js/tests/unit/bootstrap-phantom.js +0 -21
  227. data/js/tests/unit/bootstrap-popover.js +0 -93
  228. data/js/tests/unit/bootstrap-scrollspy.js +0 -31
  229. data/js/tests/unit/bootstrap-tab.js +0 -61
  230. data/js/tests/unit/bootstrap-tooltip.js +0 -155
  231. data/js/tests/unit/bootstrap-transition.js +0 -13
  232. data/js/tests/unit/bootstrap-typeahead.js +0 -148
  233. data/js/tests/vendor/jquery.js +0 -9252
  234. data/js/tests/vendor/qunit.css +0 -232
  235. data/js/tests/vendor/qunit.js +0 -1510
  236. data/package.json +0 -25
  237. data/sass-twitter-bootstrap.gemspec +0 -19
  238. data/vendor/assets/javascripts/README.md +0 -112
  239. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -12
  240. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +0 -52
  241. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +0 -26
  242. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +0 -149
  243. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +0 -17
  244. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +0 -153
  245. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +0 -41
data/docs/less.html DELETED
@@ -1,1060 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Less · Twitter Bootstrap</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <meta name="description" content="">
8
- <meta name="author" content="">
9
-
10
- <!-- Le styles -->
11
- <link href="assets/css/bootstrap.css" rel="stylesheet">
12
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
13
- <link href="assets/css/docs.css" rel="stylesheet">
14
- <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
15
-
16
- <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
17
- <!--[if lt IE 9]>
18
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
19
- <![endif]-->
20
-
21
- <!-- Le fav and touch icons -->
22
- <link rel="shortcut icon" href="assets/ico/favicon.ico">
23
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
24
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
25
- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
26
- <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
27
-
28
- </head>
29
-
30
- <body data-spy="scroll" data-target=".subnav" data-offset="50">
31
-
32
-
33
- <!-- Navbar
34
- ================================================== -->
35
- <div class="navbar navbar-fixed-top">
36
- <div class="navbar-inner">
37
- <div class="container">
38
- <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
39
- <span class="icon-bar"></span>
40
- <span class="icon-bar"></span>
41
- <span class="icon-bar"></span>
42
- </button>
43
- <a class="brand" href="./index.html">Bootstrap</a>
44
- <div class="nav-collapse collapse">
45
- <ul class="nav">
46
- <li class="">
47
- <a href="./index.html">Overview</a>
48
- </li>
49
- <li class="">
50
- <a href="./scaffolding.html">Scaffolding</a>
51
- </li>
52
- <li class="">
53
- <a href="./base-css.html">Base CSS</a>
54
- </li>
55
- <li class="">
56
- <a href="./components.html">Components</a>
57
- </li>
58
- <li class="">
59
- <a href="./javascript.html">Javascript plugins</a>
60
- </li>
61
- <li class="active">
62
- <a href="./less.html">Using LESS</a>
63
- </li>
64
- <li class="divider-vertical"></li>
65
- <li class="">
66
- <a href="./download.html">Customize</a>
67
- </li>
68
- <li class="">
69
- <a href="./examples.html">Examples</a>
70
- </li>
71
- </ul>
72
- </div>
73
- </div>
74
- </div>
75
- </div>
76
-
77
- <div class="container">
78
-
79
- <!-- Masthead
80
- ================================================== -->
81
- <header class="jumbotron subhead" id="overview">
82
- <h1>Using LESS with Bootstrap</h1>
83
- <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>
84
- <div class="subnav">
85
- <ul class="nav nav-pills">
86
- <li><a href="#builtWith">Built with Less</a></li>
87
- <li><a href="#variables">Variables</a></li>
88
- <li><a href="#mixins">Mixins</a></li>
89
- <li><a href="#compiling">Compiling Bootstrap</a></li>
90
- </ul>
91
- </div>
92
- </header>
93
-
94
-
95
-
96
- <!-- BUILT WITH LESS
97
- ================================================== -->
98
- <section id="builtWith">
99
- <div class="page-header">
100
- <h1>Built with LESS</h1>
101
- </div>
102
- <div class="row">
103
- <div class="span4">
104
- <h3>Why LESS?</h3>
105
- <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>
106
- </div>
107
- <div class="span4">
108
- <h3>What's included?</h3>
109
- <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>
110
- </div>
111
- <div class="span4">
112
- <h3>Learn more</h3>
113
- <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
114
- <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
115
- </div>
116
- </div>
117
- <div class="row">
118
- <div class="span4">
119
- <h3><a href="#variables">Variables</a></h3>
120
- <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>
121
- </div>
122
- <div class="span4">
123
- <h3><a href="#mixins">Mixins</a></h3>
124
- <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>
125
- </div>
126
- <div class="span4">
127
- <h3>Operations</h3>
128
- <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>
129
- </div>
130
- </div>
131
- </section>
132
-
133
-
134
-
135
- <!-- VARIABLES
136
- ================================================== -->
137
- <section id="variables">
138
- <div class="page-header">
139
- <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
140
- </div>
141
-
142
- <h3>Scaffolding and links</h3>
143
- <table class="table table-bordered table-striped">
144
- <tbody>
145
- <tr>
146
- <td class="span4"><code>@bodyBackground</code></td>
147
- <td><code>@white</code></td>
148
- <td>Page background color</td>
149
- <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
150
- </tr>
151
- <tr>
152
- <td><code>@textColor</code></td>
153
- <td><code>@grayDark</code></td>
154
- <td>Default text color for entire body, headings, and more</td>
155
- <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
156
- </tr>
157
- <tr>
158
- <td><code>@linkColor</code></td>
159
- <td><code>#08c</code></td>
160
- <td>Default link text color</td>
161
- <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
162
- </tr>
163
- <tr>
164
- <td><code>@linkColorHover</code></td>
165
- <td><code>darken(@linkColor, 15%)</code></td>
166
- <td>Default link text hover color</td>
167
- <td><span class="swatch" style="background-color: #005580;"></span></td>
168
- </tr>
169
- </tbody>
170
- </table>
171
- <h3>Grid system</h3>
172
- <table class="table table-bordered table-striped">
173
- <tbody>
174
- <tr>
175
- <td class="span4"><code>@gridColumns</code></td>
176
- <td>12</td>
177
- </tr>
178
- <tr>
179
- <td><code>@gridColumnWidth</code></td>
180
- <td>60px</td>
181
- </tr>
182
- <tr>
183
- <td><code>@gridGutterWidth</code></td>
184
- <td>20px</td>
185
- </tr>
186
- <tr>
187
- <td><code>@fluidGridColumnWidth</code></td>
188
- <td>6.382978723%</td>
189
- </tr>
190
- <tr>
191
- <td><code>@fluidGridGutterWidth</code></td>
192
- <td>2.127659574%</td>
193
- </tr>
194
- </tbody>
195
- </table>
196
- <h3>Typography</h3>
197
- <table class="table table-bordered table-striped">
198
- <tbody>
199
- <tr>
200
- <td class="span4"><code>@sansFontFamily</code></td>
201
- <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
202
- </tr>
203
- <tr>
204
- <td><code>@serifFontFamily</code></td>
205
- <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
206
- </tr>
207
- <tr>
208
- <td><code>@monoFontFamily</code></td>
209
- <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
210
- </tr>
211
-
212
- <tr>
213
- <td><code>@baseFontSize</code></td>
214
- <td>13px</td>
215
- <td><em class="muted">Must be pixels</em></td>
216
- </tr>
217
- <tr>
218
- <td><code>@baseFontFamily</code></td>
219
- <td colspan="2"><code>@sansFontFamily</code></td>
220
- </tr>
221
- <tr>
222
- <td><code>@baseLineHeight</code></td>
223
- <td>18px</td>
224
- <td><em class="muted">Must be pixels</em></td>
225
- </tr>
226
- <tr>
227
- <td><code>@altFontFamily</code></td>
228
- <td colspan="2"><code>@serifFontFamily</code></td>
229
- </tr>
230
-
231
- <tr>
232
- <td><code>@headingsFontFamily</code></td>
233
- <td colspan="2"><code>inherit</code></td>
234
- </tr>
235
- <tr>
236
- <td><code>@headingsFontWeight</code></td>
237
- <td colspan="2"><code>bold</code></td>
238
- </tr>
239
- <tr>
240
- <td><code>@headingsColor</code></td>
241
- <td colspan="2"><code>inherit</code></td>
242
- </tr>
243
- </tbody>
244
- </table>
245
- <h3>Tables</h3>
246
- <table class="table table-bordered table-striped">
247
- <tbody>
248
- <tr>
249
- <td class="span4"><code>@tableBackground</code></td>
250
- <td><code>transparent</code></td>
251
- </tr>
252
- <tr>
253
- <td><code>@tableBackgroundAccent</code></td>
254
- <td><code>#f9f9f9</code></td>
255
- </tr>
256
- <tr>
257
- <td><code>@tableBackgroundHover</code></td>
258
- <td><code>#f5f5f5</code></td>
259
- </tr>
260
- <tr>
261
- <td><code>@tableBorder</code></td>
262
- <td><code>ddd</code></td>
263
- </tr>
264
- </tbody>
265
- </table>
266
-
267
- <h3>Grayscale colors</h3>
268
- <table class="table table-bordered table-striped">
269
- <tbody>
270
- <tr>
271
- <td class="span4"><code>@black</code></td>
272
- <td>#000</td>
273
- <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
274
- </tr>
275
- <tr>
276
- <td><code>@grayDarker</code></td>
277
- <td>#222</td>
278
- <td><span class="swatch" style="background-color: #222;"></span></td>
279
- </tr>
280
- <tr>
281
- <td><code>@grayDark</code></td>
282
- <td>#333</td>
283
- <td><span class="swatch" style="background-color: #333;"></span></td>
284
- </tr>
285
- <tr>
286
- <td><code>@gray</code></td>
287
- <td>#555</td>
288
- <td><span class="swatch" style="background-color: #555;"></span></td>
289
- </tr>
290
- <tr>
291
- <td><code>@grayLight</code></td>
292
- <td>#999</td>
293
- <td><span class="swatch" style="background-color: #999;"></span></td>
294
- </tr>
295
- <tr>
296
- <td><code>@grayLighter</code></td>
297
- <td>#eee</td>
298
- <td><span class="swatch" style="background-color: #eee;"></span></td>
299
- </tr>
300
- <tr>
301
- <td><code>@white</code></td>
302
- <td>#fff</td>
303
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
304
- </tr>
305
- </tbody>
306
- </table>
307
- <h3>Accent colors</h3>
308
- <table class="table table-bordered table-striped">
309
- <tbody>
310
- <tr>
311
- <td class="span4"><code>@blue</code></td>
312
- <td>#049cdb</td>
313
- <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
314
- </tr>
315
- <tr>
316
- <td><code>@green</code></td>
317
- <td>#46a546</td>
318
- <td><span class="swatch" style="background-color: #46a546;"></span></td>
319
- </tr>
320
- <tr>
321
- <td><code>@red</code></td>
322
- <td>#9d261d</td>
323
- <td><span class="swatch" style="background-color: #9d261d;"></span></td>
324
- </tr>
325
- <tr>
326
- <td><code>@yellow</code></td>
327
- <td>#ffc40d</td>
328
- <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
329
- </tr>
330
- <tr>
331
- <td><code>@orange</code></td>
332
- <td>#f89406</td>
333
- <td><span class="swatch" style="background-color: #f89406;"></span></td>
334
- </tr>
335
- <tr>
336
- <td><code>@pink</code></td>
337
- <td>#c3325f</td>
338
- <td><span class="swatch" style="background-color: #c3325f;"></span></td>
339
- </tr>
340
- <tr>
341
- <td><code>@purple</code></td>
342
- <td>#7a43b6</td>
343
- <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
344
- </tr>
345
- </tbody>
346
- </table>
347
-
348
-
349
- <h3>Components</h3>
350
-
351
- <h4>Buttons</h4>
352
- <table class="table table-bordered table-striped">
353
- <tbody>
354
- <tr>
355
- <td class="span4"><code>@btnBackground</code></td>
356
- <td><code>@white</code></td>
357
- <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
358
- </tr>
359
- <tr>
360
- <td><code>@btnBackgroundHighlight</code></td>
361
- <td><code>darken(@white, 10%)</code></td>
362
- <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
363
- </tr>
364
- <tr>
365
- <td><code>@btnBorder</code></td>
366
- <td><code>darken(@white, 20%)</code></td>
367
- <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
368
- </tr>
369
-
370
- <tr>
371
- <td><code>@btnPrimaryBackground</code></td>
372
- <td><code>@linkColor</code></td>
373
- <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
374
- </tr>
375
- <tr>
376
- <td><code>@btnPrimaryBackgroundHighlight</code></td>
377
- <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
378
- <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
379
- </tr>
380
-
381
- <tr>
382
- <td><code>@btnInfoBackground</code></td>
383
- <td><code>#5bc0de</code></td>
384
- <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
385
- </tr>
386
- <tr>
387
- <td><code>@btnInfoBackgroundHighlight</code></td>
388
- <td><code>#2f96b4</code></td>
389
- <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
390
- </tr>
391
-
392
- <tr>
393
- <td><code>@btnSuccessBackground</code></td>
394
- <td><code>#62c462</code></td>
395
- <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
396
- </tr>
397
- <tr>
398
- <td><code>@btnSuccessBackgroundHighlight</code></td>
399
- <td><code>51a351</code></td>
400
- <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
401
- </tr>
402
-
403
- <tr>
404
- <td><code>@btnWarningBackground</code></td>
405
- <td><code>lighten(@orange, 15%)</code></td>
406
- <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
407
- </tr>
408
- <tr>
409
- <td><code>@btnWarningBackgroundHighlight</code></td>
410
- <td><code>@orange</code></td>
411
- <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
412
- </tr>
413
-
414
- <tr>
415
- <td><code>@btnDangerBackground</code></td>
416
- <td><code>#ee5f5b</code></td>
417
- <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
418
- </tr>
419
- <tr>
420
- <td><code>@btnDangerBackgroundHighlight</code></td>
421
- <td><code>#bd362f</code></td>
422
- <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
423
- </tr>
424
-
425
- <tr>
426
- <td><code>@btnInverseBackground</code></td>
427
- <td><code>@gray</code></td>
428
- <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
429
- </tr>
430
- <tr>
431
- <td><code>@btnInverseBackgroundHighlight</code></td>
432
- <td><code>@grayDarker</code></td>
433
- <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
434
- </tr>
435
- </tbody>
436
- </table>
437
- <h4>Forms</h4>
438
- <table class="table table-bordered table-striped">
439
- <tbody>
440
- <tr>
441
- <td class="span4"><code>@placeholderText</code></td>
442
- <td><code>@grayLight</code></td>
443
- </tr>
444
- <tr>
445
- <td><code>@inputBackground</code></td>
446
- <td><code>@white</code></td>
447
- </tr>
448
- <tr>
449
- <td><code>@inputBorder</code></td>
450
- <td><code>#ccc</code></td>
451
- </tr>
452
- <tr>
453
- <td><code>@inputBorderRadius</code></td>
454
- <td><code>3px</code></td>
455
- </tr>
456
- <tr>
457
- <td><code>@inputDisabledBackground</code></td>
458
- <td><code>@grayLighter</code></td>
459
- </tr>
460
- <tr>
461
- <td><code>@formActionsBackground</code></td>
462
- <td><code>#f5f5f5</code></td>
463
- </tr>
464
- </tbody>
465
- </table>
466
- <h4>Form states and alerts</h4>
467
- <table class="table table-bordered table-striped">
468
- <tbody>
469
- <tr>
470
- <td class="span4"><code>@warningText</code></td>
471
- <td>#c09853</td>
472
- <td><span class="swatch" style="background-color: #c09853;"></span></td>
473
- </tr>
474
- <tr>
475
- <td><code>@warningBackground</code></td>
476
- <td>#f3edd2</td>
477
- <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
478
- </tr>
479
- <tr>
480
- <td><code>@errorText</code></td>
481
- <td>#b94a48</td>
482
- <td><span class="swatch" style="background-color: #b94a48;"></span></td>
483
- </tr>
484
- <tr>
485
- <td><code>@errorBackground</code></td>
486
- <td>#f2dede</td>
487
- <td><span class="swatch" style="background-color: #f2dede;"></span></td>
488
- </tr>
489
- <tr>
490
- <td><code>@successText</code></td>
491
- <td>#468847</td>
492
- <td><span class="swatch" style="background-color: #468847;"></span></td>
493
- </tr>
494
- <tr>
495
- <td><code>@successBackground</code></td>
496
- <td>#dff0d8</td>
497
- <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
498
- </tr>
499
- <tr>
500
- <td><code>@infoText</code></td>
501
- <td>#3a87ad</td>
502
- <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
503
- </tr>
504
- <tr>
505
- <td><code>@infoBackground</code></td>
506
- <td>#d9edf7</td>
507
- <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
508
- </tr>
509
- </tbody>
510
- </table>
511
-
512
- <h4>Navbar</h4>
513
- <table class="table table-bordered table-striped">
514
- <tbody>
515
- <tr>
516
- <td class="span4"><code>@navbarHeight</code></td>
517
- <td>40px</td>
518
- <td class="swatch-col"></td>
519
- </tr>
520
- <tr>
521
- <td><code>@navbarBackground</code></td>
522
- <td><code>@grayDarker</code></td>
523
- <td><span class="swatch" style="background-color: #222;"></span></td>
524
- </tr>
525
- <tr>
526
- <td><code>@navbarBackgroundHighlight</code></td>
527
- <td><code>@grayDark</code></td>
528
- <td><span class="swatch" style="background-color: #333;"></span></td>
529
- </tr>
530
-
531
- <tr>
532
- <td><code>@navbarText</code></td>
533
- <td><code>@grayLight</code></td>
534
- <td><span class="swatch" style="background-color: #999;"></span></td>
535
- </tr>
536
- <tr>
537
- <td><code>@navbarLinkColor</code></td>
538
- <td><code>@grayLight</code></td>
539
- <td><span class="swatch" style="background-color: #999;"></span></td>
540
- </tr>
541
- <tr>
542
- <td><code>@navbarLinkColorHover</code></td>
543
- <td><code>@white</code></td>
544
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
545
- </tr>
546
- <tr>
547
- <td><code>@navbarLinkColorActive</code></td>
548
- <td><code>@navbarLinkColorHover</code></td>
549
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
550
- </tr>
551
- <tr>
552
- <td><code>@navbarLinkBackgroundHover</code></td>
553
- <td><code>transparent</code></td>
554
- <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
555
- </tr>
556
- <tr>
557
- <td><code>@navbarLinkBackgroundActive</code></td>
558
- <td><code>@navbarBackground</code></td>
559
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
560
- </tr>
561
-
562
- <tr>
563
- <td><code>@navbarSearchBackground</code></td>
564
- <td><code>lighten(@navbarBackground, 25%)</code></td>
565
- <td><span class="swatch" style="background-color: #666;"></span></td>
566
- </tr>
567
- <tr>
568
- <td><code>@navbarSearchBackgroundFocus</code></td>
569
- <td><code>@white</code></td>
570
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
571
- </tr>
572
- <tr>
573
- <td><code>@navbarSearchBorder</code></td>
574
- <td><code>darken(@navbarSearchBackground, 30%)</code></td>
575
- <td><span class="swatch" style="background-color: #111;"></span></td>
576
- </tr>
577
- <tr>
578
- <td><code>@navbarSearchPlaceholderColor</code></td>
579
- <td><code>#ccc</code></td>
580
- <td><span class="swatch" style="background-color: #ccc;"></span></td>
581
- </tr>
582
- <tr>
583
- <td><code>@navbarBrandColor</code></td>
584
- <td><code>@navbarLinkColor</code></td>
585
- <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
586
- </tr>
587
- </tbody>
588
- </table>
589
- <h4>Dropdowns</h4>
590
- <table class="table table-bordered table-striped">
591
- <tbody>
592
- <tr>
593
- <td class="span4"><code>@dropdownBackground</code></td>
594
- <td><code>@white</code></td>
595
- </tr>
596
- <tr>
597
- <td><code>@dropdownBorder</code></td>
598
- <td><code>rgba(0,0,0,.2)</code></td>
599
- </tr>
600
- <tr>
601
- <td><code>@dropdownLinkColor</code></td>
602
- <td><code>@grayDark</code></td>
603
- </tr>
604
- <tr>
605
- <td><code>@dropdownLinkColorHover</code></td>
606
- <td><code>@white</code></td>
607
- </tr>
608
- <tr>
609
- <td><code>@dropdownLinkBackgroundHover</code></td>
610
- <td><code>@linkColor</code></td>
611
- </tr>
612
- <tr>
613
- <td><code>@@dropdownDividerTop</code></td>
614
- <td><code>#e5e5e5</code></td>
615
- </tr>
616
- <tr>
617
- <td><code>@@dropdownDividerBottom</code></td>
618
- <td><code>@white</code></td>
619
- </tr>
620
- </tbody>
621
- </table>
622
- <h4>Hero unit</h4>
623
- <table class="table table-bordered table-striped">
624
- <tbody>
625
- <tr>
626
- <td class="span4"><code>@heroUnitBackground</code></td>
627
- <td><code>@grayLighter</code></td>
628
- <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
629
- </tr>
630
- <tr>
631
- <td class="span2"><code>@heroUnitHeadingColor</code></td>
632
- <td><code>inherit</code></td>
633
- <td></td>
634
- </tr>
635
- <tr>
636
- <td><code>@heroUnitLeadColor</code></td>
637
- <td><code>inhereit</code></td>
638
- <td></td>
639
- </tr>
640
- </tbody>
641
- </table>
642
-
643
-
644
- </section>
645
-
646
-
647
-
648
- <!-- MIXINS
649
- ================================================== -->
650
- <section id="mixins">
651
- <div class="page-header">
652
- <h1>Bootstrap mixins <small></small></h1>
653
- </div>
654
- <h2>About mixins</h2>
655
- <div class="row">
656
- <div class="span4">
657
- <h3>Basic mixins</h3>
658
- <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>
659
- <pre class="prettyprint linenums">
660
- .element {
661
- .clearfix();
662
- }
663
- </pre>
664
- </div><!-- /span4 -->
665
- <div class="span4">
666
- <h3>Parametric mixins</h3>
667
- <p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
668
- <pre class="prettyprint linenums">
669
- .element {
670
- .border-radius(4px);
671
- }
672
- </pre>
673
- </div><!-- /span4 -->
674
- <div class="span4">
675
- <h3>Easily add your own</h3>
676
- <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>
677
- <p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
678
- </div><!-- /span4 -->
679
- </div><!-- /row -->
680
- <h2>Included mixins</h2>
681
- <h3>Utilities</h3>
682
- <table class="table table-bordered table-striped">
683
- <thead>
684
- <tr>
685
- <th class="span4">Mixin</th>
686
- <th>Parameters</th>
687
- <th>Usage</th>
688
- </tr>
689
- </thead>
690
- <tbody>
691
- <tr>
692
- <td><code>.clearfix()</code></td>
693
- <td><em class="muted">none</em></td>
694
- <td>Add to any parent to clear floats within</td>
695
- </tr>
696
- <tr>
697
- <td><code>.tab-focus()</code></td>
698
- <td><em class="muted">none</em></td>
699
- <td>Apply the Webkit focus style and round Firefox outline</td>
700
- </tr>
701
- <tr>
702
- <td><code>.center-block()</code></td>
703
- <td><em class="muted">none</em></td>
704
- <td>Auto center a block-level element using <code>margin: auto</code></td>
705
- </tr>
706
- <tr>
707
- <td><code>.ie7-inline-block()</code></td>
708
- <td><em class="muted">none</em></td>
709
- <td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
710
- </tr>
711
- <tr>
712
- <td><code>.size()</code></td>
713
- <td><code>@height @width</code></td>
714
- <td>Quickly set the height and width on one line</td>
715
- </tr>
716
- <tr>
717
- <td><code>.square()</code></td>
718
- <td><code>@size</code></td>
719
- <td>Builds on <code>.size()</code> to set the width and height as same value</td>
720
- </tr>
721
- <tr>
722
- <td><code>.opacity()</code></td>
723
- <td><code>@opacity</code></td>
724
- <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
725
- </tr>
726
- </tbody>
727
- </table>
728
- <h3>Forms</h3>
729
- <table class="table table-bordered table-striped">
730
- <thead>
731
- <tr>
732
- <th class="span4">Mixin</th>
733
- <th>Parameters</th>
734
- <th>Usage</th>
735
- </tr>
736
- </thead>
737
- <tbody>
738
- <tr>
739
- <td><code>.placeholder()</code></td>
740
- <td><code>@color: @placeholderText</code></td>
741
- <td>Set the <code>placeholder</code> text color for inputs</td>
742
- </tr>
743
- </tbody>
744
- </table>
745
- <h3>Typography</h3>
746
- <table class="table table-bordered table-striped">
747
- <thead>
748
- <tr>
749
- <th class="span4">Mixin</th>
750
- <th>Parameters</th>
751
- <th>Usage</th>
752
- </tr>
753
- </thead>
754
- <tbody>
755
- <tr>
756
- <td><code>#font > #family > .serif()</code></td>
757
- <td><em class="muted">none</em></td>
758
- <td>Make an element use a serif font stack</td>
759
- </tr>
760
- <tr>
761
- <td><code>#font > #family > .sans-serif()</code></td>
762
- <td><em class="muted">none</em></td>
763
- <td>Make an element use a sans-serif font stack</td>
764
- </tr>
765
- <tr>
766
- <td><code>#font > #family > .monospace()</code></td>
767
- <td><em class="muted">none</em></td>
768
- <td>Make an element use a monospace font stack</td>
769
- </tr>
770
- <tr>
771
- <td><code>#font > .shorthand()</code></td>
772
- <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
773
- <td>Easily set font size, weight, and leading</td>
774
- </tr>
775
- <tr>
776
- <td><code>#font > .serif()</code></td>
777
- <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
778
- <td>Set font family to serif, and control size, weight, and leading</td>
779
- </tr>
780
- <tr>
781
- <td><code>#font > .sans-serif()</code></td>
782
- <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
783
- <td>Set font family to sans-serif, and control size, weight, and leading</td>
784
- </tr>
785
- <tr>
786
- <td><code>#font > .monospace()</code></td>
787
- <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
788
- <td>Set font family to monospace, and control size, weight, and leading</td>
789
- </tr>
790
- </tbody>
791
- </table>
792
- <h3>Grid system</h3>
793
- <table class="table table-bordered table-striped">
794
- <thead>
795
- <tr>
796
- <th class="span4">Mixin</th>
797
- <th>Parameters</th>
798
- <th>Usage</th>
799
- </tr>
800
- </thead>
801
- <tbody>
802
- <tr>
803
- <td><code>.container-fixed()</code></td>
804
- <td><em class="muted">none</em></td>
805
- <td>Create a horizontally centered container for holding your content</td>
806
- </tr>
807
- <tr>
808
- <td><code>#grid > .core()</code></td>
809
- <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
810
- <td>Generate a pixel grid system (container, row, and columns) with <em>n</em> columns and <em>x</em> pixel wide gutter</td>
811
- </tr>
812
- <tr>
813
- <td><code>#grid > .fluid()</code></td>
814
- <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
815
- <td>Generate a percent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
816
- </tr>
817
- <tr>
818
- <td><code>#grid > .input()</code></td>
819
- <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
820
- <td>Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders</td>
821
- </tr>
822
- <tr>
823
- <td><code>.makeColumn</code></td>
824
- <td><code>@columns: 1, @offset: 0</code></td>
825
- <td>Turn any <code>div</code> into a grid column without the <code>.span*</code> classes</td>
826
- </tr>
827
- </tbody>
828
- </table>
829
- <h3>CSS3 properties</h3>
830
- <table class="table table-bordered table-striped">
831
- <thead>
832
- <tr>
833
- <th class="span3">Mixin</th>
834
- <th>Parameters</th>
835
- <th>Usage</th>
836
- </tr>
837
- </thead>
838
- <tbody>
839
- <tr>
840
- <td><code>.border-radius()</code></td>
841
- <td><code>@radius</code></td>
842
- <td>Round the corners of an element. Can be a single value or four space-separated values</td>
843
- </tr>
844
- <tr>
845
- <td><code>.box-shadow()</code></td>
846
- <td><code>@shadow</code></td>
847
- <td>Add a drop shadow to an element</td>
848
- </tr>
849
- <tr>
850
- <td><code>.transition()</code></td>
851
- <td><code>@transition</code></td>
852
- <td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
853
- </tr>
854
- <tr>
855
- <td><code>.rotate()</code></td>
856
- <td><code>@degrees</code></td>
857
- <td>Rotate an element <em>n</em> degrees</td>
858
- </tr>
859
- <tr>
860
- <td><code>.scale()</code></td>
861
- <td><code>@ratio</code></td>
862
- <td>Scale an element to <em>n</em> times its original size</td>
863
- </tr>
864
- <tr>
865
- <td><code>.translate()</code></td>
866
- <td><code>@x, @y</code></td>
867
- <td>Move an element on the x and y planes</td>
868
- </tr>
869
- <tr>
870
- <td><code>.background-clip()</code></td>
871
- <td><code>@clip</code></td>
872
- <td>Crop the background of an element (useful for <code>border-radius</code>)</td>
873
- </tr>
874
- <tr>
875
- <td><code>.background-size()</code></td>
876
- <td><code>@size</code></td>
877
- <td>Control the size of background images via CSS3</td>
878
- </tr>
879
- <tr>
880
- <td><code>.box-sizing()</code></td>
881
- <td><code>@boxmodel</code></td>
882
- <td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
883
- </tr>
884
- <tr>
885
- <td><code>.user-select()</code></td>
886
- <td><code>@select</code></td>
887
- <td>Control cursor selection of text on a page</td>
888
- </tr>
889
- <tr>
890
- <td><code>.backface-visibility()</code></td>
891
- <td><code>@visibility: visible</code></td>
892
- <td>Prevent flickering of content when using CSS 3D transforms</td>
893
- </tr>
894
- <tr>
895
- <td><code>.resizable()</code></td>
896
- <td><code>@direction: both</code></td>
897
- <td>Make any element resizable on the right and bottom</td>
898
- </tr>
899
- <tr>
900
- <td><code>.content-columns()</code></td>
901
- <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
902
- <td>Make the content of any element use CSS3 columns</td>
903
- </tr>
904
- <tr>
905
- <td><code>.hyphens()</code></td>
906
- <td><code>@mode: auto</code></td>
907
- <td>CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>)</td>
908
- </tr>
909
- </tbody>
910
- </table>
911
- <h3>Backgrounds and gradients</h3>
912
- <table class="table table-bordered table-striped">
913
- <thead>
914
- <tr>
915
- <th class="span4">Mixin</th>
916
- <th>Parameters</th>
917
- <th>Usage</th>
918
- </tr>
919
- </thead>
920
- <tbody>
921
- <tr>
922
- <td><code>#translucent > .background()</code></td>
923
- <td><code>@color: @white, @alpha: 1</code></td>
924
- <td>Give an element a translucent background color</td>
925
- </tr>
926
- <tr>
927
- <td><code>#translucent > .border()</code></td>
928
- <td><code>@color: @white, @alpha: 1</code></td>
929
- <td>Give an element a translucent border color</td>
930
- </tr>
931
- <tr>
932
- <td><code>#gradient > .vertical()</code></td>
933
- <td><code>@startColor, @endColor</code></td>
934
- <td>Create a cross-browser vertical background gradient</td>
935
- </tr>
936
- <tr>
937
- <td><code>#gradient > .horizontal()</code></td>
938
- <td><code>@startColor, @endColor</code></td>
939
- <td>Create a cross-browser horizontal background gradient</td>
940
- </tr>
941
- <tr>
942
- <td><code>#gradient > .directional()</code></td>
943
- <td><code>@startColor, @endColor, @deg</code></td>
944
- <td>Create a cross-browser directional background gradient</td>
945
- </tr>
946
- <tr>
947
- <td><code>#gradient > .vertical-three-colors()</code></td>
948
- <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
949
- <td>Create a cross-browser three-color background gradient</td>
950
- </tr>
951
- <tr>
952
- <td><code>#gradient > .radial()</code></td>
953
- <td><code>@innerColor, @outerColor</code></td>
954
- <td>Create a cross-browser radial background gradient</td>
955
- </tr>
956
- <tr>
957
- <td><code>#gradient > .striped()</code></td>
958
- <td><code>@color, @angle</code></td>
959
- <td>Create a cross-browser striped background gradient</td>
960
- </tr>
961
- <tr>
962
- <td><code>#gradientBar()</code></td>
963
- <td><code>@primaryColor, @secondaryColor</code></td>
964
- <td>Used for buttons to assign a gradient and slightly darker border</td>
965
- </tr>
966
- </tbody>
967
- </table>
968
- </section>
969
-
970
-
971
-
972
- <!-- COMPILING LESS AND BOOTSTRAP
973
- ================================================== -->
974
- <section id="compiling">
975
- <div class="page-header">
976
- <h1>Compiling Bootstrap with LESS</h1>
977
- </div>
978
- <div class="alert alert-info">
979
- <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.
980
- </div>
981
- <h2>Tools for compiling</h2>
982
- <div class="row">
983
- <div class="span4">
984
- <h3>Node with makefile</h3>
985
- <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
986
- <pre>$ npm install -g less jshint recess uglify-js</pre>
987
- <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
988
- <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>
989
- </div><!-- /span4 -->
990
- <div class="span4">
991
- <h3>Command line</h3>
992
- <p>Install the LESS command line tool via Node and run the following command:</p>
993
- <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
994
- <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
995
- </div><!-- /span4 -->
996
- <div class="span4">
997
- <h3>Javascript</h3>
998
- <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>
999
- <pre class="prettyprint">
1000
- &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
1001
- &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
1002
- </pre>
1003
- <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
1004
- </div><!-- /span4 -->
1005
- </div><!-- /row -->
1006
- <div class="row">
1007
- <div class="span4">
1008
- <h3>Unofficial Mac app</h3>
1009
- <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
1010
- <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
1011
- </div><!-- /span4 -->
1012
- <div class="span4">
1013
- <h3>More Mac apps</h3>
1014
- <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
1015
- <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
1016
- <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
1017
- <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
1018
- <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
1019
- <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
1020
- </div><!-- /span4 -->
1021
- </div><!-- /row -->
1022
- </section>
1023
-
1024
-
1025
- <!-- Footer
1026
- ================================================== -->
1027
- <footer class="footer">
1028
- <p class="pull-right"><a href="#">Back to top</a></p>
1029
- <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
1030
- <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
1031
- <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
1032
- </footer>
1033
-
1034
- </div><!-- /container -->
1035
-
1036
-
1037
-
1038
- <!-- Le javascript
1039
- ================================================== -->
1040
- <!-- Placed at the end of the document so the pages load faster -->
1041
- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
1042
- <script src="assets/js/jquery.js"></script>
1043
- <script src="assets/js/google-code-prettify/prettify.js"></script>
1044
- <script src="assets/js/bootstrap-transition.js"></script>
1045
- <script src="assets/js/bootstrap-alert.js"></script>
1046
- <script src="assets/js/bootstrap-modal.js"></script>
1047
- <script src="assets/js/bootstrap-dropdown.js"></script>
1048
- <script src="assets/js/bootstrap-scrollspy.js"></script>
1049
- <script src="assets/js/bootstrap-tab.js"></script>
1050
- <script src="assets/js/bootstrap-tooltip.js"></script>
1051
- <script src="assets/js/bootstrap-popover.js"></script>
1052
- <script src="assets/js/bootstrap-button.js"></script>
1053
- <script src="assets/js/bootstrap-collapse.js"></script>
1054
- <script src="assets/js/bootstrap-carousel.js"></script>
1055
- <script src="assets/js/bootstrap-typeahead.js"></script>
1056
- <script src="assets/js/application.js"></script>
1057
-
1058
-
1059
- </body>
1060
- </html>