updated docs styles, notes in header of master file, etc

This commit is contained in:
Mark Otto 2011-06-30 10:21:27 -07:00
parent ced32d5ceb
commit 6aae3930c9
4 changed files with 34 additions and 29 deletions

6
bootstrap-1.0.0.css vendored
View File

@ -1,9 +1,9 @@
/* /*
* Master Stylesheet * Bootstrap v1.0.0
* This file is only for importing all required stylesheets for LESS to include and then compile.
* *
* Copyright 2011 Twitter, Inc * Copyright 2011 Twitter, Inc
* Open-sourced under Apache License v2.0: http://www.apache.org/licenses/LICENSE-2.0 * Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built @twitter by @mdo and @fat, like bosses. * Designed and built @twitter by @mdo and @fat, like bosses.
*/ */

View File

@ -17,20 +17,20 @@ section {
#masthead, #footer { #masthead, #footer {
background-color: #049cd9; background-color: #049cd9;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9)); background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
background-image: -webkit-linear-gradient(#0056b0, #049cd9); background-image: -webkit-linear-gradient(#004D9F, #049cd9);
background-image: -moz-linear-gradient(#0056b0, #049cd9); background-image: -moz-linear-gradient(#004D9F, #049cd9);
background-image: -o-linear-gradient(top, #0056b0, #049cd9); background-image: -o-linear-gradient(top, #004D9F, #049cd9);
background-image: -khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9)); background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#004D9F', EndColorStr='#049cd9', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))"; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#004D9F', EndColorStr='#049cd9', GradientType=0))";
} }
#masthead div.inner, #footer div.inner { #masthead div.inner, #footer div.inner {
background: transparent url(../img/grid-18px.png) top center; background: transparent url(../img/grid-18px.png) top center;
padding: 45px 0; padding: 45px 0;
-webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25); box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
} }
#masthead h1, #masthead h1,
#footer h1, #footer h1,
@ -131,6 +131,9 @@ div.quickstart form textarea {
margin-bottom: 0; margin-bottom: 0;
color: rgba(255,255,255,.8) color: rgba(255,255,255,.8)
} }
#footer p.right {
float: right;
}
/* Special grid styles /* Special grid styles
-------------------------------------------------- */ -------------------------------------------------- */
.show-grid { .show-grid {

View File

@ -1111,7 +1111,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span4 columns"> <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> <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source 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.</p>
<p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run LESS on your next project.</p>
</div> </div>
<div class="span12 columns"> <div class="span12 columns">
<h2>How to use it</h2> <h2>How to use it</h2>
@ -1200,22 +1201,22 @@
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ 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: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.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+
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-image: linear-gradient(left, @startColor, @endColor); // Le standard
} }
.vertical (@startColor: #555, @endColor: #333) { .vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor; background-color: @endColor;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */ 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: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */ 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-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: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.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+
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(@startColor, @endColor); /* the standard */ background-image: linear-gradient(@startColor, @endColor); // The standard
} }
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
... ...
@ -1227,7 +1228,7 @@
</pre> </pre>
<h3>Operations and grid system</h3> <h3>Operations and grid system</h3>
<p>Get fancy and perform some match to generate flexible and powerful mixins like the one below.</p> <p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
<pre class="css"> <pre class="css">
// Griditude // Griditude
@gridColumns: 16; @gridColumns: 16;
@ -1263,6 +1264,7 @@
<div id="footer"> <div id="footer">
<div class="inner"> <div class="inner">
<div class="container"> <div class="container">
<p class="right"><a href="#">Back to top</a></p>
<p> <p>
Designed and built <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>, like bosses.<br /> Designed and built <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>, like bosses.<br />
Open-sourced under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Open-sourced under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.

6
lib/bootstrap.less vendored
View File

@ -1,9 +1,9 @@
/* /*
* Master Stylesheet * Bootstrap v1.0.0
* This file is only for importing all required stylesheets for LESS to include and then compile.
* *
* Copyright 2011 Twitter, Inc * Copyright 2011 Twitter, Inc
* Open-sourced under Apache License v2.0: http://www.apache.org/licenses/LICENSE-2.0 * Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built @twitter by @mdo and @fat, like bosses. * Designed and built @twitter by @mdo and @fat, like bosses.
*/ */