kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

trying out new doc style stuff

This commit is contained in:
Mark Otto 2011-06-29 15:51:27 -07:00
parent 025f74ef93
commit 936d7acb31
6 changed files with 227 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
bootstrap-1.0.0.css vendored
View File

@ -429,7 +429,7 @@ p {
}
p small {
font-size: 12px;
color: #b3b3b3;
color: #bfbfbf;
}
/* Headings
-------------------------------------------------- */
@ -448,7 +448,7 @@ h3 small,
h4 small,
h5 small,
h6 small {
color: #b3b3b3;
color: #bfbfbf;
}
h1 {
margin-bottom: 18px;
@ -488,7 +488,7 @@ h5 {
}
h6 {
font-size: 13px;
color: #b3b3b3;
color: #bfbfbf;
text-transform: uppercase;
}
/* Colors
@ -564,7 +564,7 @@ blockquote cite {
font-size: 12px;
font-weight: 300;
line-height: 18px;
color: #b3b3b3;
color: #bfbfbf;
}
blockquote cite:before {
content: '\2014 \00A0';
@ -791,7 +791,7 @@ div.actions div.secondary-action a:hover {
.help-inline, .help-block {
font-size: 12px;
line-height: 18px;
color: #b3b3b3;
color: #bfbfbf;
}
.help-inline {
padding-left: 5px;
@ -827,7 +827,7 @@ div.input-prepend .add-on, div.input-append .add-on {
width: auto;
min-width: 16px;
padding: 4px 4px 4px 5px;
color: #b3b3b3;
color: #bfbfbf;
font-weight: normal;
line-height: 18px;
height: 18px;
@ -1074,7 +1074,7 @@ div.topbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
div.topbar a {
color: #b3b3b3;
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
@ -1102,12 +1102,12 @@ div.topbar a.logo img {
}
div.topbar form {
float: left;
margin: 4px 0 0 0;
margin: 5px 0 0 0;
opacity: 1;
position: relative;
}
div.topbar form input {
background-color: #b3b3b3;
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: normal;
@ -1435,7 +1435,7 @@ ul.tabs li a, ul.pills li a {
}
ul.tabs {
width: 100%;
border-bottom: 1px solid #b3b3b3;
border-bottom: 1px solid #bfbfbf;
}
ul.tabs li a {
margin-bottom: -1px;
@ -1448,7 +1448,7 @@ ul.tabs li a {
}
ul.tabs li a:hover {
background-color: #e6e6e6;
border-bottom: 1px solid #b3b3b3;
border-bottom: 1px solid #bfbfbf;
}
ul.tabs li.active a {
background-color: #fff;
@ -1509,7 +1509,7 @@ div.pagination ul li a:hover, div.pagination ul li.active a {
}
div.pagination ul li.disabled a, div.pagination ul li.disabled a:hover {
background-color: none;
color: #b3b3b3;
color: #bfbfbf;
}
div.pagination ul li.next a, div.pagination ul li:last-child a {
border: 0;

20
bootstrap-1.0.0.min.css vendored
View File

@ -38,15 +38,15 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;}a:hover{color:#0050a3;
.btn:disabled,.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:18px;}p small{font-size:12px;color:#b3b3b3;}
h1,h2,h3,h4,h5,h6{font-weight:500;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#b3b3b3;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:18px;}p small{font-size:12px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:500;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3,h4,h5,h6{line-height:36px;}
h3{font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;}h4 small{font-size:12px;}
h5{font-size:14px;}
h6{font-size:13px;color:#b3b3b3;text-transform:uppercase;}
h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
@ -61,7 +61,7 @@ strong{font-style:inherit;font-weight:bold;line-height:inherit;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#e6e6e6;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote cite{display:block;font-size:12px;font-weight:300;line-height:18px;color:#b3b3b3;}blockquote cite:before{content:'\2014 \00A0';}
blockquote cite{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote cite:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:2px 3px;}
@ -90,7 +90,7 @@ form .input-xxlarge,form input.xxlarge,form textarea.xxlarge,form select.xxlarge
form textarea.xxlarge{overflow-y:scroll;}
form input[readonly]:focus,form textarea[readonly]:focus,form input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
div.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}div.actions div.secondary-action{float:right;}div.actions div.secondary-action a{line-height:30px;}div.actions div.secondary-action a:hover{text-decoration:underline;}
.help-inline,.help-block{font-size:12px;line-height:18px;color:#b3b3b3;}
.help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
.help-inline{padding-left:5px;}
.help-block{display:block;max-width:600px;}
div.inline-inputs{color:#808080;}div.inline-inputs span,div.inline-inputs input[type=text]{display:inline-block;}
@ -98,7 +98,7 @@ div.inline-inputs input.mini{width:60px;}
div.inline-inputs input.small{width:90px;}
div.inline-inputs span{padding:0 2px 0 1px;}
div.input-prepend input[type=text],div.input-append input[type=text]{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
div.input-prepend .add-on,div.input-append .add-on{background:#f5f5f5;float:left;display:block;width:auto;min-width:16px;padding:4px 4px 4px 5px;color:#b3b3b3;font-weight:normal;line-height:18px;height:18px;text-align:center;text-shadow:0 1px 0 #fff;border:1px solid #bbb;border-right-width:0;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
div.input-prepend .add-on,div.input-append .add-on{background:#f5f5f5;float:left;display:block;width:auto;min-width:16px;padding:4px 4px 4px 5px;color:#bfbfbf;font-weight:normal;line-height:18px;height:18px;text-align:center;text-shadow:0 1px 0 #fff;border:1px solid #bbb;border-right-width:0;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
div.input-prepend .active,div.input-append .active{background:#a9dba9;border-color:#46a546;}
div.input-append input[type=text]{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
div.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;border-right-width:1px;border-left-width:0;}
@ -134,10 +134,10 @@ table.zebra-striped th.orange{color:#f89406;border-bottom-color:#f89406;}
table.zebra-striped th.headerSortUp.orange,table.zebra-striped th.headerSortDown.orange{background-color:#fee9cc;}
table.zebra-striped th.purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown.purple{background-color:#e2d5f0;}
div.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#b3b3b3;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;}
div.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;}
div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;}
div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{float:left;margin-right:6px;}
div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#b3b3b3;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;}
div.topbar form{float:left;margin:5px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;}
div.topbar form input::-webkit-input-placeholder{color:#e6e6e6;}
div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
@ -170,13 +170,13 @@ div.block-message.success{background:#dff1df;border:1px solid #bbe2bb;}
div.block-message.info{background:#eaf9ff;border:1px solid #d1f1fe;}
ul.tabs,ul.pills{margin:0 0 20px;padding:0;zoom:1;}ul.tabs:after,ul.pills:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
ul.tabs li,ul.pills li{display:inline;}ul.tabs li a,ul.pills li a{float:left;width:auto;}
ul.tabs{width:100%;border-bottom:1px solid #b3b3b3;}ul.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}ul.tabs li a:hover{background-color:#e6e6e6;border-bottom:1px solid #b3b3b3;}
ul.tabs{width:100%;border-bottom:1px solid #bfbfbf;}ul.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}ul.tabs li a:hover{background-color:#e6e6e6;border-bottom:1px solid #bfbfbf;}
ul.tabs li.active a{background-color:#fff;padding:0 14px;border:1px solid #ccc;border-bottom:0;color:#808080;}
ul.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}ul.pills li a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
ul.pills li.active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
div.pagination{height:36px;margin:18px 0;}div.pagination ul{float:left;margin:0;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:0 1px 2px rgba(0, 0, 0, 0.075);}div.pagination ul li{display:inline;}div.pagination ul li a{float:left;padding:0 14px;line-height:34px;border-right:1px solid rgba(0, 0, 0, 0.15);text-decoration:none;}
div.pagination ul li a:hover,div.pagination ul li.active a{background-color:#eaf9ff;}
div.pagination ul li.disabled a,div.pagination ul li.disabled a:hover{background-color:none;color:#b3b3b3;}
div.pagination ul li.disabled a,div.pagination ul li.disabled a:hover{background-color:none;color:#bfbfbf;}
div.pagination ul li.next a,div.pagination ul li:last-child a{border:0;}
div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
div.modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}

34
docs/assets/css/docs.css
View File

@ -34,12 +34,14 @@ section {
}
#masthead h1,
#footer h1,
#masthead h4,
#footer h4,
#masthead p,
#footer p,
#masthead small,
#footer small {
color: #fff;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
#masthead {
margin-top: 40px;
@ -86,6 +88,36 @@ section {
#masthead small a {
color: #fff;
}
div.quick-start {
background-color: rgba(0,0,0,.25);
padding: 18px 20px;
margin: 27px 0 -36px;
}
div.quick-start h4,
div.quick-start p,
div.quick-start form {
float: left;
}
#masthead div.quick-start p {
margin-bottom: 0;
font-size: 14px;
line-height: 27px;
color: rgba(255,255,255,.5);
}
div.quick-start p a {
color: #fff;
}
div.quick-start form {
margin-bottom: 0;
padding: 0 10px;
}
div.quick-start form input {
width: 530px;
border: none;
padding: 3px 5px;
height: 21px;
line-height: 21px;
}
#footer {
margin-top: 80px;
}

327
docs/index.html
View File

@ -25,8 +25,7 @@
<img src="assets/img/twitter-logo-no-bird.png" alt="Twitter" /> <span>bootstrap</span>
</a></h3>
<ul>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#preboot">Preboot</a></li>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#typography">Typography</a></li>
@ -35,6 +34,7 @@
<li><a href="#navigation">Navigation</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#modals">Modals</a></li>
<li><a href="#less">LESS</a></li>
</ul>
</div>
</div>
@ -56,6 +56,15 @@
</div>
</div>
</div>
<div class="quick-start">
<div class="container">
<p>Copy and paste for a quick start:</p>
<form>
<input type="text" value='&lt;link type="text/css" href="http://twitter.github.com/bootstrap-1.0.0.css" media="all" /&gt;' />
</form>
<p><a href="">Using LESS?</a></p>
</div>
</div>
</div>
</div>
@ -63,175 +72,25 @@
<section id="getting-started">
<section id="getting-started" style="display: none;">
<div class="page-header">
<h1>Getting started</h1>
</div>
<div class="row">
<div class="span4 columns">
<p>You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.</p>
<p>Using Twitter Bootstrap is uber easy: just drop in the compiled, minified CSS and you're ready to go.</p>
</div>
<div class="span12 columns">
<h3>1. Compiled CSS</h3>
<h3>Compiled CSS</h3>
<p>Use this option if you want all the styles of Bootstrap in a <a href="../bootstrap-1.0.0.min.css">compiled and minified stylesheet</a>, but none of the extra power of LESS.</p>
<pre class="html">&lt;link type="text/css" href="bootstrap-1.0.0.css" media="all" /&gt;</pre>
<h3>2. Run with LESS.js</h3>
<p>Use this option to make full use of Bootstrap's LESS variables, mixins, and nesting in CSS.</p>
<pre class="html">
&lt;link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /&gt;
&lt;script type="text/javascript" src="js/less-1.0.41.min.js"&gt;&lt;/script&gt;</pre>
<hr />
<p>Interested in running LESS on your project? No problem, <a href="#less">read how to use Bootstrap with LESS &raquo;</a></p>
</div>
</div>
</section>
<section id="preboot">
<div class="page-header">
<h1>Fully Bootstrapped <small>Supercharged CSS with variables, mixins, and functions</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p><a href="http://markdotto.com/bootstrap/">Preboot</a> 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, that we used to build Bootstrap.</p>
</div>
<div class="span12 columns">
<h2>What's included</h2>
<p>Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
<h3>Color variables</h3>
<p>Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.</p>
<pre class="css">
// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline
@baseline: 20px;
</pre>
<h3>Commenting</h3>
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
<pre class="css">
// This is a comment
/* This is also a comment */
</pre>
<h3>Mixins up the wazoo</h3>
<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
<h4>Font stacks</h4>
<pre class="css">
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.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>
<h4>Gradients</h4>
<pre class="css">
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(@startColor, @endColor); /* the standard */
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
...
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
...
}
}
</pre>
<h3>Operations and grid system</h3>
<p>Get fancy and perform some match to generate flexible and powerful mixins like the one below.</p>
<pre class="css">
// Griditude
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
// Grid System
.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>
</div>
</div>
</section>
<section id="grid-system">
<div class="page-header">
@ -1219,6 +1078,160 @@
</section>
<section id="preboot">
<div class="page-header">
<h1>Using Bootstrap with LESS <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p><a href="http://markdotto.com/bootstrap/">Preboot</a> 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, that we used to build Bootstrap.</p>
</div>
<div class="span12 columns">
<h2>How to use it</h2>
<p>Use this option to make full use of Bootstrap's LESS variables, mixins, and nesting in CSS via javascript in your browser.</p>
<pre class="html">
&lt;link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /&gt;
&lt;script type="text/javascript" src="js/less-1.0.41.min.js"&gt;&lt;/script&gt;</pre>
<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the LESS Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
<h2>What's included</h2>
<p>Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
<h3>Color variables</h3>
<p>Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.</p>
<pre class="css">
// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline
@baseline: 20px;
</pre>
<h3>Commenting</h3>
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
<pre class="css">
// This is a comment
/* This is also a comment */
</pre>
<h3>Mixins up the wazoo</h3>
<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
<h4>Font stacks</h4>
<pre class="css">
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.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>
<h4>Gradients</h4>
<pre class="css">
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
background-image: linear-gradient(@startColor, @endColor); /* the standard */
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
...
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
...
}
}
</pre>
<h3>Operations and grid system</h3>
<p>Get fancy and perform some match to generate flexible and powerful mixins like the one below.</p>
<pre class="css">
// Griditude
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
// Grid System
.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>
</div>
</div>
</section>
</div> <!-- /container -->
<div id="footer">

2
lib/patterns.less
View File

@ -52,7 +52,7 @@ div.topbar {
// Search Form
form {
float: left;
margin: 4px 0 0 0;
margin: 5px 0 0 0;
opacity: 1;
position: relative;
input {

2
lib/preboot.less
View File

@ -15,7 +15,7 @@
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@white: #fff;