From dfbb5919532b1dbe1868aadac6e2e95286cad969 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Sep 2011 14:02:56 -0700 Subject: [PATCH] addng docs for the themes stuff and examples --- bootstrap-1.2.0.css | 14 ++++++++---- bootstrap-1.2.0.min.css | 6 ++--- docs/assets/css/docs.css | 28 ++++++++++++++---------- docs/assets/img/example-diagram-01.png | Bin 0 -> 1675 bytes docs/assets/img/example-diagram-02.png | Bin 0 -> 1831 bytes docs/assets/img/example-diagram-03.png | Bin 0 -> 1531 bytes docs/index.html | 29 ++++++++++++++++++++++--- lib/forms.less | 8 +++---- lib/theme.less | 22 ++++++++++++++----- 9 files changed, 76 insertions(+), 31 deletions(-) create mode 100644 docs/assets/img/example-diagram-01.png create mode 100644 docs/assets/img/example-diagram-02.png create mode 100644 docs/assets/img/example-diagram-03.png diff --git a/bootstrap-1.2.0.css b/bootstrap-1.2.0.css index 58ed9a1070..4055d4ca92 100644 --- a/bootstrap-1.2.0.css +++ b/bootstrap-1.2.0.css @@ -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 { diff --git a/bootstrap-1.2.0.min.css b/bootstrap-1.2.0.min.css index 1fc14f628f..caaa362ab4 100644 --- a/bootstrap-1.2.0.min.css +++ b/bootstrap-1.2.0.min.css @@ -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;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f72cd39530..d466561036 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -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; } diff --git a/docs/assets/img/example-diagram-01.png b/docs/assets/img/example-diagram-01.png new file mode 100644 index 0000000000000000000000000000000000000000..16ac0c44ee5d1b4eeff1ad556742030d77ae05d7 GIT binary patch literal 1675 zcmbVNdrT8|96ykWg$axA`Qj{O2|?~rTl$cq^aaHg2@oCzH_q!}EA+0tJK6$IFRUIPX6FAgOfzam}ZXsuBE66bIC6G-S2nb*XQ$n z{Bj2~(o+_Ptqy}AXt6O>mkIV>uxb}A1aHy0=}xe{$?Nm@ET)Ke5iA8Io0(k{Y_t)( zsZ5G6mpQtqL61TYR1X)b+@Gfe%l~#)Lkc=izk zG}c_C%G4QVvA~yFY~gvk3PoKm7vkE4Fzjv=S1Oe#CP5{VcwiCFmC-!mj;FckKm;Ad zk*w9uTNxS_A`-ipQeG_vO#La?>?YG(V49mP6et<$ChRDVV5rR|@qurW>Oqe%95ZTMbQCgP`g(H35I};YCCHMO(9Bj3|VTUXx^w(i-86)Tg{+E3Jk~P zQcNzv5)?SD(J1tKJXwbsWXTGNULS}tpRe4YQ%W&eg4Q6@;1WeHB(&=V5@!|0{F9ulfH}4FzOSVLVYzY1? zdjHX_sr$eZ^l%I`8moTt^eu0axBr8g1(k78ucDXxABX3!dLG^n@29XK zNE5u_W%L)-0!yHVd?s*=pWurL0CmR>?e(kB#o;BrU28wD%Mv{(jJS2jzwW(iCsN)nUa;9BPBq%aP{A{!N0sOkQ(}_xKR;xC#l-~>7OItbTpcg(Z_$a zxz7ikaTd0o|DnF7KcZ=1f4?`3L~=Ga4Fu(Ej;n3U`~C8sP~S<=|BGec8Rr;X+8=rP z*z%%>Ki|RXVow|qLUioS@x(G6+|Kcw(u-L=lxTAA@-fr#X$PHBelyB(sq;zFEbf`Zs6-dn|UtMVLS=>2z|4T0bpXyq; k%F?>P*Drrd3yDe*29<9aXm-3e94h=CjQVulIZa{JKTxn=!Toh+r_L2x>P3sMB%mOn2tr|LyT9sZ?ske8a^9O2smz1TFNkk@TKy(;Qq#`mfAO=U) zVG0aUnbu#xmeFXQS!!h}nHslJfD$+paoI49xRyfGXv-pvS_I9(NFW1Sr`8A=11HT4 zK&=uoR&(N@IIRTBQb!l)u%v=`C0dY!@>Pt;2w<5}KsmrM5&?{Ou0}5~3K?U51(fVM z1{uJZ37I2gxJjkPB?1ychXEWW6pBJ&Fc8LO!fc4o<}U$Q5DbAZ3xv3#FeKn`1rQ93 zKMX3GPL(N8Naf?Ps4pQSizKxI5HuJJOv6$pp<4&Sd_Et9SRjiPN?C;JO&St0hHCUd z6CR|P9@VL}q?*tGE{{kCkw*#{6jOH!xHc|s(y>NAUMQ+$pb^o6FcSiC+?CguwVqU9 z|Im1)wO(n`VxR)k6L~t6>PKeK1emJb>jSwADK>%xotkP2k}D<9JRH-IF;XFe(lAwO z6;&c01jAf5#AQKYJQx;>c`_L+l0tHhh{ux2CVadK%j5F75)s6g$T<=imO)}Ro5kbF z*=!D5!s9NLPhev-dJ@r~*hE}46?YuVdo5NV(P0Ql=#&JJJ23%?Sp-Swvj{C9N#ZbJ zAPzy*8rO-dLGFB|m`T(purXHd0Tyl(5q%>L{{CY-nJ$6nhlCVb_Tjg_qd&r7?Wl^@8 zGdYKm3qHxET`9P7ck?cWQY`yK7;(3_mVNDj;kU~Eg|!VK-`LumfrDu&@l(9K%ij=t zxE6h56^(v|t*|+3)$bgezJ6lrw_7Ub z-b}niKV&;~@M7(YkiqxY`mWSPTCMvRnf6xKUc$>O_p^Jl;9kOq8tFK#qYdz?O92Jqpq@K!~R>%Rq5XJ%a4xl_^_QN-a;;&m-k?G^kC)i<*9Q;EhX8S zuI9A*z`6aj`n?o#Ykqo*XJx)TaD-#o*g1oe!t1v^3+QjpnkGM45p@y`lKs3sy?0gP zlh!R^maVNNE@*p}bFewmi5AZq*(yMOEGlY@NU){Xd(!cpPXkWfr1?(o>)kzH zzXi3jwdS5B4i42Z)H#&2CZ{#@TyBwBKM-`^(UiaM?CA0vzgY2y_0_g;hsj>!ceuTC i#^lsfHJ&v(Go2PS^^xUG`r{R@UssGQUV2cRUiLSf8NoRK literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-diagram-03.png b/docs/assets/img/example-diagram-03.png new file mode 100644 index 0000000000000000000000000000000000000000..00401e0b16fc3d807796e8f60fc7e5755e5f8919 GIT binary patch literal 1531 zcmeAS@N?(olHy`uVBq!ia0vp^mw>p3gAGV>%6>lzq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~;1FfeCihD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Keo`G(%ftjI#nTejE ziGihwrH+D;fuVuEp^?6Uxvrssm8rRvfuRBvC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR zmzV368|&p4rRy77T3YHG80i}s=>k>g7FXt#Bv$C=6)VF`a7isrF3Kz@$;{7F0GXJW zlwVq6s|0i@#0$9vzP@mS^NOJX1q?F%io^naLp=li++2{qz^aQ&f>IIAz^b}9q_QAY zKPa_0zqBYB7$0fMFwMZQ!*3BtA<#8e{zaLylcOS(cjOR+OKs01jcROe`)iups1fh~5-( zLQNm&7=2LkKuRt!Az&H=G2w|H$bn~{)I4CGDFSAWpxlk07#Nr|JzX3_DsH{GWtep+ zfT7{xGBZD2zPoq6aLHP0d|`QXYis%kr*-SrUf9U~;@ZNdUE(rJ!ZxV9{lNY?)~pID0zw>|Al$;@#MHv_wByi=X?yz1rlo2xpLI*` zlg6vovj@9at04axPX<>nAQDk&tQf!>S0K_0^h!SKIu}EVzftnV;>_>4T z4hw!ci`7_Py`t!QdHo-$oFiRZZoj?fqgi_6{rC61krS`I{<>ImDc|a=uU2Ym2boFr zE_--xgTdO6JyN=#ve$P_h)Rr^x_9!~w8=T!Z%=<%P$7N%<5taOT^(wZPadwZ`_Cai zdDD0C){ARj2pYZn{(Ji7n{W1Ae|@*qYOeIKMOP2a_ zzLW^w$F!|G_w<(FrX>>XNwdQ?Uhd}NH_)9IdRghgmdKI;Vst0Q0Z^4*&oF literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 1c88096455..7531807fdd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -110,13 +110,13 @@

About Bootstrap Brief history, browser support, and more

-
+

History

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.

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.

Read more on dev.twitter.com ›

-
+

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.

Tested and supported in Chrome, Safari, Internet Explorer, and Firefox @@ -128,7 +128,7 @@
  • Opera 11
    • -
    +

    What's included

    Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

      @@ -139,6 +139,29 @@
    + +
    +
    +

    Quick-start examples

    +

    Need some quick templates? Check out these basic examples we've put together:

    + +
    +
    + Simple three-column layout with hero unit +
    +
    + Fluid layout with static sidebar +
    +
    + Simple hanging container for apps +
    +
    +
    +
    +

    Theming Bootstrap

    +

    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.

    +
    +
    diff --git a/lib/forms.less b/lib/forms.less index 5f8a09693e..99177138a4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -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; } } diff --git a/lib/theme.less b/lib/theme.less index 84102ef04e..1442819ccc 100644 --- a/lib/theme.less +++ b/lib/theme.less @@ -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