Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 344 lines (324 sloc) 15.49 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- // Less.js at the ready! -->
    <link rel="stylesheet/less" type="text/css" media="all" href="style.less" />
    <script type="text/javascript" src="less-1.1.3.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      less.env = "development";
      less.watch();
    </script>
    <title>Bootstrap.less by Mark Otto</title>
    <!-- Google Webmaster Tools & Analytics -->
    <meta name="google-site-verification" content="i2l3RBLrWFm3JY5fXIug2_83I6muZwPlIF5e4j13-o8" />
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-146052-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  
  <body>
    
    <header>
      <p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
      <h1>Bootstrap.less</h1>
      <h2>Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development.</h2>
    </header>
    
    <section>
      <h2>What's Inside</h2>
      <p>Here's the rundown of what you can find in Bootstrap:</p>
      <div class="grid">
        <div class="span5">
          <h3>Mixins</h3>
          <ul>
            <li><a href="#border-radius">Rounded Corners</a></li>
            <li><a href="#box-shadow">Box Shadows</a></li>
            <li><a href="#gradients">Gradients</a></li>
            <li><a href="#transitions">Transitions</a></li>
            <li><a href="#clearfix">Clearfix</a></li>
            <li><a href="#translucency">Translucency</a></li>
            <li><a href="#font-stacks">Font Stacks</a></li>
            <li><a href="#buttons">Buttons</a></li>
            <li><a href="#grid">Grid System</a></li>
            <li><a href="#helpers">Helpers</a></li>
            <li><a href="#flexbox">Flexible Box Module</a></li>
          </ul>
        </div>
        <div class="span5">
          <h3>Variables</h3>
          <ul>
            <li><a href="#links">Links</a></li>
            <li><a href="#scheme">Color scheme</a></li>
            <li><a href="#baseline">Baseline</a></li>
          </ul>
        </div>
      </div>
    </section>
    
    <section>
      <h2>Mixins</h2>
      <p>Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like <code>-webkit-box-shadow</code>, gradients, and more.</p>
      <h3 id="border-radius">Rounding Corners</h3>
      <p>Round the corners of an element with <code>.border-radius</code>. You can pass in a single value for all corners like so:</p>
<pre>.border-radius(@radius: 6px) {
  -moz-border-radius: @radius;
  border-radius: @radius;
}</pre>
      <p>Or get fancy with it and selectively apply rounding to certain corners:</p>
      <pre>.border-radius(3px,3px,0,0);</pre>

      <h3 id="box-shadow">Box (Drop) Shadows</h3>
      <p>Give any element some depth in all the best browsers with a single rule. Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
<pre>.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}</pre>

      <h3 id="gradients">Gradients</h3>
      <p>Take any two colors and turn them into a most bodacious gradient of awesome. They even work with preset variables (see below) and RGBA colors. You can use vertical or horizontal gradients with the following lines of code:</p>
<pre>#gradient > .vertical(#333,#000);
#gradient > .horizontal(@blue,@red);</pre>
      <p>Two colors not enough? Go hog wild and add another color into the mix with a .three-color-gradient. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color. Donezo.</p>
<pre>#gradient > .vertical-three-colors(#777,#333,.25,#000);
#gradient > .vertical-three-colors(@blue,@red,@purple);</pre>
      <p>Go easy on those three color gradients though&mdash;they can get out of hand quick. Also, if you're feeling a little bit crazy, go ahead and take the <code>.vertical-three-colors</code> and expand them to four and five colors. Just don't let it get out of hand.</p>
      
      <h3 id="transitions">Transitions</h3>
      <p>Elegantly transition elements in style with a single rule.</p>
<pre>.transition(@transition: all linear .2s) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  transition: @transition;
}</pre>
      <p>Example transitions could include fading input elements on focus (instead of the default <code>outline</code>), animating logos on hover, and even animating link hovers.</p>
      
      <h3 id="clearfix">Simple Clearfix</h3>
      <p>Forget adding <code>.clearfix</code> to all your divs and just add the mixin where appropriate.</p>
<pre>.container {
  .clearfix;
}
</pre>
      
      <h3 id="translucency">Make Any Color Translucent</h3>
      <p>While RGBA is great, LESS only has a color conversion tool that changes any color to HSL. By doing so, it allows us to add an extra alpha layer (just like RGB to RGBA). Just call the mixin, select a color, and add the alpha transparency (a decimal value from 0 to 1).</p>
<pre>.container {
  #translucent > .background(@blue, 0.5);
  div {
    #translucent > .background(#900, 0.5);
  }
}
</pre>
      
      <h3 id="font-stacks">Font Stacks</h3>
      <p>Style an element's text quickly and easily with flexible built-in serif, sans-serif, and monospace font stacks.</p>
<pre>#font {
  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Georgia", Times New Roman, Times, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
    font-family: "Monaco", Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}</pre>

      <h3 id="buttons">Buttons</h3>
      <p>Generate buttons of any color with a single mixin that provides ultimate control while still providing a consistent family of buttons. Set the base color, the text color, text shadow, font size, padding, and border radius. More controls coming soon (I hope).</p>
<pre>// Buttons
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
  display: inline-block;
  .gradient(@color,darken(saturate(@color,10),10));
  padding: @padding;
  text-shadow: @textShadow;
  color: @textColor;
  font-size: @fontSize;
  line-height: 20px;
  .rounded(6px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
  .box-shadow(@shadow);
  &:hover {
    background-position: 0 -15px;
    color: @textColor;
    text-decoration: none;
  }
}</pre>
      <p>This mixin means you can quickly create a set of buttons like so:</p>
<pre>a.button {
  .button();
  &.purple {
    .button(@purple,#fff,0 -1px 1px rgba(0,0,0,.4));
  }
  &.blue {
    .button(@blue,#fff,0 -1px 1px rgba(0,0,0,.4));
  }
}
</pre>
      <p>Using just the base color of the buttons you can easily create a whole family of buttons with only a few lines of code.</p>
      
      <h3 id="grid">Flexible Grid System</h3>
      <p>Love grids? Get yourself on the fast track to an awesomely flexible grid system. Set the number of columns, the column width, and the column gutter width. Do note though that these columns won't work in IE6&mdash;they're designed to use the minimum amount of CSS, meaning they employ <code>:first-child</code> and have no set container widths.</p>
      <div class="grid show-grid">
        <div class="span1">1 Col</div>
        <div class="span2">2 Cols</div>
        <div class="span4">4 Cols</div>
        <div class="span1">1 Col</div>
        <div class="span1">1 Col</div>
        <div class="span1">1 Col</div>
        <div class="span1">1 Col</div>
      </div>
    <p>The <code>.container</code> and <code>.columns</code> mixins do all the code generation for you, meaning all you need to do is add the markup and call the mixins. Here's the LESS code that's needed to make it all happen, followed by the above example's code.</p>
<pre>// Grid System
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  display: inline;
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}</pre>
    <p>And here's how you take that and create some sweet ass columns:</p>
<pre>// Gimme a grid!
@gridColumns: 11;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
div.grid {
  .container;
  div.span1 { .columns(1); }
  div.span2 { .columns(2); }
  ...
  div.span11 { .columns(11); }
}</pre>
      <p>Boom, columns, baby! Also worth noting is the <code>.offset</code> mixin; with it you can build offset columns just like normal columns for more grid fun.</p>

      <h2 id="helpers">Miscellaneous helpers</h2>
      <p>A few helper methods that save time for common sizing and alignment patterns.</p>
<pre>// Center-align a block level element
.center-block {
  display: block;
  margin: 0 auto;
}

// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
  height: @height;
  width: @width;
}
.square(@size: 5px) {
  .size(@size, @size);
}
</pre>
    </section>
    <section>
      <h2 id="flexbox">Flexible Box Module</h2>
      <p></p>
      <div class="flexbox">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
      </div>
<pre>
div.flexbox {
  #flexbox > .display-box;
  #flexbox > .box-pack(center);
  div {
    margin: 5px;
    #translucent > .background(@black,.25);
    .square(50px);
  }
  div.box2 {
    #flexbox > .box-flex(1);
  }
}
</pre>
    </section>
    <section>
      <h2 id="variables">Variables</h2>
      <p>Variables have never existed in CSS, but with LESS, they're all up in da club. Bootstrap includes a set of great colors perfect for just about any project as an example of how to use variables.</p>
      <h3 id="links">Links</h3>
      <p>Easily style your links with the right color with only one value.</p>
<pre>// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
</pre>
      <p>Note that the <code>@linkColorHover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.</p>
      <h3 id="scheme">Color Scheme</h3>
      <p>Get a jump on better color management within your code with these awesome variables. No more guessing hex values throughout a project.</p>
<pre>// Grays
@white: #fff;
@grayLighter: #ccc;
@grayLight: #777;
@gray: #555;
@grayDark: #333;
@black: #000;

// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
</pre>
      <h3 id="baseline">Baseline</h3>
      <p>Though not fully utilized within Bootstrap, <code>@baseline</code> will help simplify your line-heights and vertical rhythm in any project.</p>
<pre>@baseline: 20px;</pre>
      <p>Using it is simple:</p>
<pre>div#exampleBlock {
  margin-bottom: @baseline * 2; // 40px
  padding: @baseline; // 20px
  line-height: @baseline; // 20px
}
</pre>
    </section>
          

    <section>
      <h2>How to Use</h2>
      <h3>Rolling Your Own</h3>
      <p>Getting up and running with LESS and Bootstrap is straightforward. Here's the 1-2-3 rundown to rolling your own install of Bootstrap.</p>
      <ol>
        <li><a href="https://github.com/cloudhead/less.js" target="_blank">Download</a> LESS and Bootstrap.</li>
        <li>Add the LESS javascript file in your <code>head</code> and create a new .less file that imports bootstrap.less.</li>
        <li>Start writing super awesome CSS!</li>
      </ol>
      <p>That's it&mdash;all you need to do is include a javascript and less file and you're ready to rock. But wait, there's more!</p>
      
      <h3>Fully Bootstrapped</h3>
      <p>Looking for a simpler start? Look no further than this very page. It's included as a fully functional demo of what's possible with LESS and Bootstrap that you can play around with or use as a template for something more.</p>
      <p>It's licensed under the Creative Commons, so you're set to do what you please with it so long as you give me a shoutout or a link back here (it's much appreciated, and thanks in advance!).</p>
    </section>

    <section>
      <h2>Download</h2>
      <p>Bootstrap is available for download right from <a href="http://github.com/" target="_blank">GitHub</a>, the best code hosting and version control service out there. Included in the zip are the latest version of LESS, Bootstrap.less, and a demo page.</p>
      <p><a href="https://github.com/markdotto/Bootstrap.less/zipball/master" class="purple button">Download Bootstrap.less</a> <small>or <a href="http://github.com/markdotto/Bootstrap.less" target="_blank">check it out on GitHub</a></small></p>
    </section>
    
    <footer>
      <p><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></p>
      <p>
        <a href="http://www.markdotto.com/2011/03/21/introducing-bootstrap/" target="_blank">Read the blog post</a> <span>&middot;</span>
        <a href="http://github.com/markdotto/Bootstrap.less" target="_blank">View on GitHub</a>
      </p>
      <p>
        <a href="mailto:hi@markdotto.com?subject=About Bootstrap">Questions or comments?</a> <span>&middot;</span>
        <a href="http://lesscss.org" target="_blank">Made for LESS</a> <span>&middot;</span>
        Made by @<a href="http://twitter.com/mdo">mdo</a>
      </p>
      <p>Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons</a>.</p>
    </footer>
  </body>
</html>
Something went wrong with that request. Please try again.