Skip to content

Commit 74a18b3

Browse files
mdomdo
committed
updated le docs to include note about topbar and padding on box (issue twbs#86) and add snippet about @basefont and @baseline to type section
1 parent ab77d7a commit 74a18b3

File tree

1 file changed

+27
-24
lines changed

1 file changed

+27
-24
lines changed

‎docs/index.html

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h1>Bootstrap, from Twitter</h1>
6565
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
6666
</p>
6767
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
68-
</div> <!-- /container -->
68+
</div><!-- /container -->
6969
</div>
7070
</div>
7171

@@ -303,8 +303,10 @@ <h1>Typography <small>Headings, paragraphs, lists, and other inline type element
303303
<!-- Headings & Paragraph Copy -->
304304
<div class="row">
305305
<div class="span4 columns">
306-
<h2>Headings and copy</h2>
306+
<h2>Headings &amp; copy</h2>
307307
<p>A standard typographic hierarchy for structuring your webpages.</p>
308+
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
309+
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
308310
</div>
309311
<div class="span4 columns">
310312
<h1>h1. Heading 1</h1>
@@ -611,7 +613,7 @@ <h2>Default styles</h2>
611613
<div class="input">
612614
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
613615
</div>
614-
</div> <!-- /clearfix -->
616+
</div><!-- /clearfix -->
615617
<div class="clearfix">
616618
<label for="normalSelect">Select</label>
617619
<div class="input">
@@ -623,7 +625,7 @@ <h2>Default styles</h2>
623625
<option>5</option>
624626
</select>
625627
</div>
626-
</div> <!-- /clearfix -->
628+
</div><!-- /clearfix -->
627629
<div class="clearfix">
628630
<label for="mediumSelect">Select</label>
629631
<div class="input">
@@ -635,26 +637,26 @@ <h2>Default styles</h2>
635637
<option>5</option>
636638
</select>
637639
</div>
638-
</div> <!-- /clearfix -->
640+
</div><!-- /clearfix -->
639641
<div class="clearfix">
640642
<label>Uneditable Input</label>
641643
<div class="input">
642644
<span class="uneditable-input">Some Value Here</span>
643645
</div>
644-
</div> <!-- /clearfix -->
646+
</div><!-- /clearfix -->
645647
<div class="clearfix">
646648
<label for="disabledInput">Disabled Input</label>
647649
<div class="input">
648650
<input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
649651
</div>
650-
</div> <!-- /clearfix -->
652+
</div><!-- /clearfix -->
651653
<div class="clearfix error">
652654
<label for="xlInput">X-Large Input</label>
653655
<div class="input">
654656
<input class="xlarge error" id="xlInput" name="xlInput" size="30" type="text" />
655657
<span class="help-inline">Small snippet of help text</span>
656658
</div>
657-
</div> <!-- /clearfix -->
659+
</div><!-- /clearfix -->
658660
</fieldset>
659661
<fieldset>
660662
<legend>Example form legend</legend>
@@ -666,7 +668,7 @@ <h2>Default styles</h2>
666668
<input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
667669
</div>
668670
</div>
669-
</div> <!-- /clearfix -->
671+
</div><!-- /clearfix -->
670672
<div class="clearfix">
671673
<label for="prependedInput2">Prepended Checkbox</label>
672674
<div class="input">
@@ -675,7 +677,7 @@ <h2>Default styles</h2>
675677
<input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
676678
</div>
677679
</div>
678-
</div> <!-- /clearfix -->
680+
</div><!-- /clearfix -->
679681
<div class="clearfix">
680682
<label for="appendedInput">Appended Checkbox</label>
681683
<div class="input">
@@ -684,13 +686,13 @@ <h2>Default styles</h2>
684686
<label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
685687
</div>
686688
</div>
687-
</div> <!-- /clearfix -->
689+
</div><!-- /clearfix -->
688690
<div class="clearfix">
689691
<label for="xlInput">File Input</label>
690692
<div class="input">
691693
<input class="input-file" id="fileInput" name="fileInput" type="file" />
692694
</div>
693-
</div> <!-- /clearfix -->
695+
</div><!-- /clearfix -->
694696
</fieldset>
695697
<fieldset>
696698
<legend>Example form legend</legend>
@@ -727,7 +729,7 @@ <h2>Default styles</h2>
727729
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
728730
</span>
729731
</div>
730-
</div> <!-- /clearfix -->
732+
</div><!-- /clearfix -->
731733
<div class="clearfix">
732734
<label>Date Range</label>
733735
<div class="input">
@@ -740,7 +742,7 @@ <h2>Default styles</h2>
740742
<span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
741743
</div>
742744
</div>
743-
</div> <!-- /clearfix -->
745+
</div><!-- /clearfix -->
744746
<div class="clearfix">
745747
<label for="textarea">Textarea</label>
746748
<div class="input">
@@ -749,7 +751,7 @@ <h2>Default styles</h2>
749751
Block of help text to describe the field above if need be.
750752
</span>
751753
</div>
752-
</div> <!-- /clearfix -->
754+
</div><!-- /clearfix -->
753755
<div class="clearfix">
754756
<label id="optionsRadio">List of Options</label>
755757
<div class="input">
@@ -768,7 +770,7 @@ <h2>Default styles</h2>
768770
</li>
769771
</ul>
770772
</div>
771-
</div> <!-- /clearfix -->
773+
</div><!-- /clearfix -->
772774
<div class="actions">
773775
<button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
774776
</div>
@@ -793,7 +795,7 @@ <h2>Stacked forms</h2>
793795
<div class="input">
794796
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
795797
</div>
796-
</div> <!-- /clearfix -->
798+
</div><!-- /clearfix -->
797799
<div class="clearfix">
798800
<label for="stackedSelect">Select</label>
799801
<div class="input">
@@ -805,7 +807,7 @@ <h2>Stacked forms</h2>
805807
<option>5</option>
806808
</select>
807809
</div>
808-
</div> <!-- /clearfix -->
810+
</div><!-- /clearfix -->
809811
</fieldset>
810812
<fieldset>
811813
<legend>Example form legend</legend>
@@ -815,7 +817,7 @@ <h2>Stacked forms</h2>
815817
<input class="xlarge error" id="xlInput" name="xlInput" size="30" type="text" />
816818
<span class="help-inline">Small snippet of help text</span>
817819
</div>
818-
</div> <!-- /clearfix -->
820+
</div><!-- /clearfix -->
819821
<div class="clearfix">
820822
<label id="optionsCheckboxes">List of Options</label>
821823
<div class="input">
@@ -837,7 +839,7 @@ <h2>Stacked forms</h2>
837839
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
838840
</span>
839841
</div>
840-
</div> <!-- /clearfix -->
842+
</div><!-- /clearfix -->
841843
</fieldset>
842844
<div class="actions">
843845
<button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
@@ -923,9 +925,9 @@ <h3><a href="#">Project Name</a></h3>
923925
</li>
924926
</ul>
925927
</div>
926-
</div> <!-- /fill -->
927-
</div> <!-- /topbar -->
928-
</div> <!-- topbar-wrapper -->
928+
</div><!-- /fill -->
929+
</div><!-- /topbar -->
930+
</div><!-- /topbar-wrapper -->
929931

930932
<div class="row">
931933
<div class="span5 columns">
@@ -941,6 +943,7 @@ <h4>Dropdowns included</h4>
941943
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
942944
</div>
943945
</div>
946+
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
944947

945948
<br />
946949

@@ -1366,7 +1369,7 @@ <h3>Operations and grid system</h3>
13661369

13671370
</section>
13681371

1369-
</div> <!-- /container -->
1372+
</div><!-- /container -->
13701373

13711374
<div id="footer">
13721375
<div class="inner">

0 commit comments

Comments
 (0)