addng docs for the themes stuff and examples
This commit is contained in:
Mark Otto
parent
7882f0f64b
commit
dfbb591953
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sat Sep 3 15:53:45 PDT 2011
|
||||
* Date: Sun Sep 4 14:02:46 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
|
@ -282,6 +282,12 @@ textarea {
|
|||
Feel free to create and add new variables and mixins here. The goal is to make this your playground and keep the core files intact.
|
||||
*/
|
||||
/*
|
||||
TODO:
|
||||
- add ability to set app/site-wide base font-face (need better variables: @baseFontSize, @baseFontFace, @baseLineHeight, etc)
|
||||
- make form inputs and tables apply the new global type changes (currently statically set)
|
||||
- add new docs section for examples
|
||||
- add new docs section for Theme.less
|
||||
*//*
|
||||
* Scaffolding
|
||||
* Basic and global styles for generating a grid system, structural layout, and page templates
|
||||
* ------------------------------------------------------------------------------------------- */
|
||||
|
|
@ -683,7 +689,7 @@ fieldset {
|
|||
fieldset legend {
|
||||
display: block;
|
||||
margin-left: 150px;
|
||||
font-size: 20px;
|
||||
font-size: 19.5px;
|
||||
line-height: 1;
|
||||
*margin: 0 0 5px 145px;
|
||||
/* IE6-7 */
|
||||
|
|
@ -897,7 +903,7 @@ textarea[readonly] {
|
|||
text-decoration: underline;
|
||||
}
|
||||
.help-inline, .help-block {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
|
@ -997,7 +1003,7 @@ textarea[readonly] {
|
|||
color: #808080;
|
||||
}
|
||||
.inputs-list li label small {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.inputs-list li ul.inputs-list {
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospa
|
|||
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:17px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
|
||||
form{margin-bottom:18px;}
|
||||
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;margin-left:150px;font-size:20px;line-height:1;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;}
|
||||
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;margin-left:150px;font-size:19.5px;line-height:1;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;}
|
||||
.clearfix{margin-bottom:18px;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
|
||||
label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
|
||||
|
|
@ -142,7 +142,7 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
|
|||
textarea.xxlarge{overflow-y:auto;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.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;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
|
||||
.help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
|
||||
.help-block{display:block;max-width:600px;}
|
||||
.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
|
||||
|
|
@ -156,7 +156,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
|
|||
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.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;}
|
||||
.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}.inputs-list li label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list li label strong{color:#808080;}
|
||||
.inputs-list li label small{font-size:12px;font-weight:normal;}
|
||||
.inputs-list li label small{font-size:11px;font-weight:normal;}
|
||||
.inputs-list li ul.inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
|
||||
.inputs-list li:first-child{padding-top:5px;}
|
||||
.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
|
||||
|
|
|
|||
|
|
@ -151,10 +151,8 @@ div.quickstart form textarea {
|
|||
}
|
||||
/* Render mini layout previews
|
||||
-------------------------------------------------- */
|
||||
div.mini-layout {
|
||||
height: 340px;
|
||||
margin-bottom: 20px;
|
||||
padding: 9px;
|
||||
.diagram,
|
||||
.mini-layout {
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
|
|
@ -163,28 +161,36 @@ div.mini-layout {
|
|||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
div.mini-layout div {
|
||||
.diagram {
|
||||
padding: 4px;
|
||||
}
|
||||
.mini-layout {
|
||||
height: 340px;
|
||||
margin-bottom: 20px;
|
||||
padding: 9px;
|
||||
}
|
||||
.mini-layout div {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
div.mini-layout div.mini-layout-body {
|
||||
.mini-layout .mini-layout-body {
|
||||
background-color: #dceaf4;
|
||||
margin: 0 auto;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
}
|
||||
div.mini-layout.fluid div.mini-layout-sidebar,
|
||||
div.mini-layout.fluid div.mini-layout-header,
|
||||
div.mini-layout.fluid div.mini-layout-body {
|
||||
.mini-layout.fluid .mini-layout-sidebar,
|
||||
.mini-layout.fluid .mini-layout-header,
|
||||
.mini-layout.fluid .mini-layout-body {
|
||||
float: left;
|
||||
}
|
||||
div.mini-layout.fluid div.mini-layout-sidebar {
|
||||
.mini-layout.fluid .mini-layout-sidebar {
|
||||
background-color: #bbd8e9;
|
||||
width: 90px;
|
||||
height: 340px;
|
||||
}
|
||||
div.mini-layout.fluid div.mini-layout-body {
|
||||
.mini-layout.fluid .mini-layout-body {
|
||||
width: 300px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -110,13 +110,13 @@
|
|||
<h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span6 columns">
|
||||
<div class="span-one-third">
|
||||
<h3>History</h3>
|
||||
<p>In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented and development quickly accelerated during Twitter’s first Hackweek.</p>
|
||||
<p>With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.</p>
|
||||
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
|
||||
</div>
|
||||
<div class="span5 columns">
|
||||
<div class="span-one-third">
|
||||
<h3>Browser support</h3>
|
||||
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
|
||||
<img src="assets/img/browsers.png" width="258px" height="48px" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
<li>Opera 11</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span5 columns">
|
||||
<div class="span-one-third">
|
||||
<h3>What's included</h3>
|
||||
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
|
||||
<ul>
|
||||
|
|
@ -139,6 +139,29 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>Quick-start examples</h3>
|
||||
<p>Need some quick templates? Check out these basic examples we've put together:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Theming Bootstrap</h3>
|
||||
<p>Starting with v1.3.0, Bootstrap comes equipped with a customizable Less file, Theme.less. It's designed to replace default values in the library and provide a one-stop-shop for adding-on.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ fieldset {
|
|||
legend {
|
||||
display: block;
|
||||
margin-left: 150px;
|
||||
font-size: 20px;
|
||||
font-size: @basefont * 1.5;
|
||||
line-height: 1;
|
||||
*margin: 0 0 5px 145px; /* IE6-7 */
|
||||
*line-height: 1.5; /* IE6-7 */
|
||||
|
|
@ -69,7 +69,7 @@ select,
|
|||
width: 210px;
|
||||
height: @baseline;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
font-size: @basefont;
|
||||
line-height: @baseline;
|
||||
color: @gray;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -253,7 +253,7 @@ textarea[readonly] {
|
|||
// Help Text
|
||||
.help-inline,
|
||||
.help-block {
|
||||
font-size: 12px;
|
||||
font-size: @basefont - 2;
|
||||
line-height: @baseline;
|
||||
color: @grayLight;
|
||||
}
|
||||
|
|
@ -351,7 +351,7 @@ textarea[readonly] {
|
|||
color: @gray;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
font-size: @basefont - 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,34 +19,44 @@
|
|||
|
||||
|
||||
// Font face, size, weight, and more
|
||||
----------------------------------------
|
||||
// -------------------------------------
|
||||
@baseFontSize: 13px; // base font-size
|
||||
@baseLineHeight: 18px; // base line-height of elements (incrementally increases with font-size)
|
||||
|
||||
|
||||
// Link color
|
||||
-----------------
|
||||
// ---------------
|
||||
@linkColor: #0069d6;
|
||||
// No need to specify a link hover color because we'll automatically do that for you in Preboot
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// COMING SOON...
|
||||
// --------------
|
||||
|
||||
@baseFontFace: "Helvetica";
|
||||
|
||||
|
||||
// Primary button color
|
||||
--------------------------------
|
||||
// -----------------------------
|
||||
@primaryButtonColor: #333;
|
||||
|
||||
|
||||
// Grid system
|
||||
------------------------------------
|
||||
// ---------------------------------
|
||||
// Griditude
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
|
||||
/*
|
||||
TODO:
|
||||
- move primary button color here
|
||||
- add ability to set app/site-wide base font-face (need better variables: @baseFontSize, @baseFontFace, @baseLineHeight, etc)
|
||||
- make form inputs and tables apply the new global type changes (currently statically set)
|
||||
- add new docs section for examples
|
||||
|
|
|
|||
Loading…
Reference in New Issue