Skip to content

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

345 lines (324 sloc) 15.49 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.