Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

171 lines (155 sloc) 8.692 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.0.41.min.js"></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>
<hgroup>
<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>
</hgroup>
</header>
<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>Rounding Corners</h3>
<p>Round all four corners of an element with <code>.rounded</code></p>
<pre>.rounded(@radius: 6px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}</pre>
<p>Or get fancy with your <code>border-radius</code> by giving each corner a unique size.</p>
<pre>.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
-moz-border-top-left-radius: @topleft;
-moz-border-top-right-radius: @topright;
-moz-border-bottom-right-radius: @bottomright;
-moz-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
}
</pre>
<h3>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>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.</p>
<pre>.gradient(#333,#000);
.gradient(@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>.three-color-gradient(#777,#333,.25,#000);
.three-color-gradient(@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>.three-color-gradient</code> and expand them to four and five colors. Just don't let it get out of hand.</p>
<h3>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>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>.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>
</section>
<section>
<h2>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>
<pre>// Links
@link-color: #8b59c2;
@link-hover-color: darken(@link-color, 10);
// Grays
@gray-light: #777;
@gray: #555;
@gray-dark: #333;
// Accent Colors
@blue: #00b3ee;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
</pre>
<p>Note that the <code>@link-hover-color</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>
<p>Also included are some great accent colors for just about every element you'll need when getting started.</p>
</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="http://github.com/markdotto/Bootstrap.less" class="purple button">Download Bootstrap.less</a></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.