{"id":17,"date":"2012-09-12T20:55:27","date_gmt":"2012-09-12T13:55:27","guid":{"rendered":"https:\/\/dev.1stserver.com\/index.php\/template-typography\/"},"modified":"2012-09-12T20:55:27","modified_gmt":"2012-09-12T13:55:27","slug":"template-typography","status":"publish","type":"page","link":"https:\/\/dev.1stserver.com\/index.php\/template-typography\/","title":{"rendered":"Template Typography"},"content":{"rendered":"

<\/p>\n

\n

Typography<\/h1>\n<\/div>\n
\n
\n

Headings<\/h2>\n

All HTML headings, <h1><\/code> through <h6><\/code> are available.<\/p>\n

\n

h1. Heading 1<\/h1>\n

h2. Heading 2<\/h2>\n

h3. Heading 3<\/h3>\n

h4. Heading 4<\/h4>\n

h5. Heading 5<\/h5>\n
h6. Heading 6<\/h6>\n<\/div>\n

Built with Less<\/h3>\n

The typographic scale is based on two LESS variables in variables.less<\/strong>: @baseFontSize<\/code> and @baseLineHeight<\/code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.<\/p>\n<\/div>\n<\/div>\n

\n
\n

Body copy<\/h2>\n

Bootstrap’s global default font-size<\/code> is 14px<\/strong>, with a line-height<\/code> of 1.7em<\/strong>. This is applied to the <body><\/code> and all paragraphs. In addition, <p><\/code> (paragraphs) receive a bottom margin of half their line-height (9px by default).<\/p>\n

\n

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.<\/p>\n<\/div>\n

<p>...<\/p><\/pre>\n
Lead body copy<\/h3>\n
Make a paragraph stand out by adding .lead<\/code>.<\/p>\n
\n
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.<\/p>\n<\/div>\n
<p class=\"lead\">...<\/p><\/pre>\n<\/div>\n<\/div>\n
\u00a0<\/div>\n
<\/p>\n
Emphasis<\/h2>\n
Make use of HTML’s default emphasis tags with lightweight styles.<\/span><\/p>\n
\n
\n
<em><\/code><\/h4>\n
For emphasizing a snippet of text with stress<\/em><\/p>\n
\n
The following snippet of text is rendered as italicized text<\/em>.<\/p>\n<\/div>\n
<em>rendered as italicized text<\/em><\/pre>\n
<strong><\/code><\/h4>\n
For emphasizing a snippet of text with important<\/strong><\/p>\n
\n
The following snippet of text is rendered as bold text<\/strong>.<\/p>\n<\/div>\n
<strong>rendered as bold text<\/strong><\/pre>\n<\/div>\n<\/div>\n
\n
\n
<small><\/code><\/h4>\n
For de-emphasizing inline or blocks of text, use the small tag.<\/small><\/p>\n
\n
This line of text is meant to be treated as fine print.<\/small><\/p>\n<\/div>\n
<p>\r\n  <small>This line of text is meant to be treated as fine print.<\/small>\r\n<\/p><\/pre>\n
<\/p>\n
Note:<\/strong> Feel free to use <b><\/code> and <i><\/code> in HTML5. <b><\/code> is meant to highlight words or phrases without conveying additional importance while <i><\/code> is mostly for voice, technical terms, etc.<\/p>\n<\/div>\n<\/div>\n
\u00a0<\/div>\n
Notice Styles<\/h3>\n
Use the <p><\/code> tag with .success<\/code>, .warning<\/code>, .info<\/code> or .error<\/code> classes.<\/p>\n
\n
\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="success">...<\/p><\/pre>\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="info">...<\/p><\/pre>\n<\/div>\n<\/div>\n
\n
\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="warning">...<\/p><\/pre>\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="error">...<\/p><\/pre>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
\n
\n
Abbreviations<\/h2>\n
Stylized implementation of HTML’s <abbr><\/code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title<\/code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.<\/p>\n
<abbr><\/code><\/h4>\n
For expanded text on long hover of an abbreviation, include the title<\/code> attribute.<\/p>\n
\n
An abbreviation of the word attribute is attr<\/abbr>.<\/p>\n<\/div>\n
<abbr title=\"attribute\">attr<\/abbr><\/pre>\n
<abbr class=\"initialism\"><\/code><\/h4>\n
Add .initialism<\/code> to an abbreviation for a slightly smaller font-size.<\/p>\n
\n
HTML<\/abbr> is the best thing since sliced bread.<\/p>\n<\/div>\n
<abbr title=\"attribute\" class=\"initialism\">attr<\/abbr><\/pre>\n<\/div>\n<\/div>\n
\n
\n
Addresses<\/h2>\n
Present contact information for the nearest ancestor or the entire body of work.<\/p>\n
<address><\/code><\/h4>\n
Preserve formatting by ending all lines with <br><\/code>.<\/p>\n
\n
Twitter, Inc.<\/strong>
 795 Folsom Ave, Suite 600
 San Francisco, CA 94107
 P:<\/abbr> (123) 456-7890<\/address>\n
Full Name<\/strong>
 first.last@gmail.com<\/a><\/address>\n<\/div>\n
<address>\r\n  <strong>Twitter, Inc.<\/strong><br>\r\n  795 Folsom Ave, Suite 600<br>\r\n  San Francisco, CA 94107<br>\r\n  <abbr title=\"Phone\">P:<\/abbr> (123) 456-7890\r\n<\/address>\r\n<address>\r\n  <strong>Full Name<\/strong><br>\r\n  <a href=\"mailto:#\">first.last@gmail.com<\/a>\r\n<\/address>\r\n<\/pre>\n<\/div>\n<\/div>\n
\u00a0<\/div>\n
<\/p>\n
Blockquotes<\/h2>\n
For quoting blocks of content from another source within your document.<\/p>\n
Default blockqoute<\/h3>\n
Wrap <blockquote><\/code> around any HTML<\/abbr> as the quote. For straight quotes we recommend a <p><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n<\/blockquote>\n<\/div>\n
<blockquote>\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\r\n<\/blockquote><\/pre>\n
Blockquote options<\/h3>\n
Style and content changes for simple variations on a standard blockquote.<\/span><\/p>\n
\n
\n
Naming a source<\/h4>\n
Add <small><\/code> tag for identifying the source. Wrap the name of the source work in <cite><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n
Someone famous in Source Title<\/cite><\/small><\/p><\/blockquote>\n<\/div>\n
<blockquote>\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\r\n  <small>Someone famous <cite title=\"Source Title\">Source Title<\/cite><\/small>\r\n<\/blockquote><\/pre>\n<\/div>\n<\/div>\n
\n
\n
Alternate displays<\/h4>\n
Use .pull-right<\/code> for a floated, right-aligned blockquote.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n
Someone famous in Source Title<\/cite><\/small><\/p><\/blockquote>\n<\/div>\n
<blockquote class=\"pull-right\">\r\n  ...\r\n<\/blockquote><\/pre>\n<\/div>\n<\/div>\n
\u00a0<\/div>\n

\n<\/p>\n
Lists<\/h2>\n
<\/div>\n
\n
\n
Unordered<\/h3>\n
A list of items in which the order does not<\/em> explicitly matter.<\/p>\n
\n
    \n
  • Lorem ipsum dolor sit amet<\/li>\n
  • Nulla volutpat aliquam velit\n
      \n
    • Phasellus iaculis neque<\/li>\n
    • Purus sodales ultricies<\/li>\n
    • Vestibulum laoreet porttitor sem<\/li>\n
    • Ac tristique libero volutpat at<\/li>\n<\/ul>\n<\/li>\n
    • Faucibus porta lacus fringilla vel<\/li>\n
    • Eget porttitor lorem<\/li>\n<\/ul>\n<\/div>\n
      <ul>\r\n  <li>...<\/li>\r\n<\/ul><\/pre>\n<\/div>\n<\/div>\n
      \n
      \n
      Ordered<\/h3>\n
      A list of items in which the order does<\/em> explicitly matter.<\/p>\n
      \n
        \n
      1. Lorem ipsum dolor sit amet<\/li>\n
      2. Consectetur adipiscing elit<\/li>\n
      3. Integer molestie lorem at massa<\/li>\n
      4. Facilisis in pretium nisl aliquet<\/li>\n
      5. Nulla volutpat aliquam velit<\/li>\n
      6. Faucibus porta lacus fringilla vel<\/li>\n
      7. Aenean sit amet erat nunc<\/li>\n
      8. Eget porttitor lorem<\/li>\n<\/ol>\n<\/div>\n
        <ol>\r\n  <li>...<\/li>\r\n<\/ol><\/pre>\n<\/div>\n<\/div>\n
        \n
        \n
        Unstyled<\/h3>\n
        A list of items with no list-style<\/code> or additional left padding.<\/p>\n
        \n
          \n
        • Lorem ipsum dolor sit amet<\/li>\n
        • Nulla volutpat aliquam velit\n
            \n
          • Phasellus iaculis neque<\/li>\n
          • Purus sodales ultricies<\/li>\n
          • Vestibulum laoreet porttitor sem<\/li>\n
          • Ac tristique libero volutpat at<\/li>\n<\/ul>\n<\/li>\n
          • Faucibus porta lacus fringilla vel<\/li>\n
          • Eget porttitor lorem<\/li>\n<\/ul>\n<\/div>\n
            <ul class=\"unstyled\">\r\n  <li>...<\/li>\r\n<\/ul><\/pre>\n<\/div>\n<\/div>\n
            \u00a0<\/div>\n
            \n
            \n
            Description<\/h3>\n
            A list of terms with their associated descriptions.<\/p>\n
            \n
            \n
            Description lists<\/dt>\n
            A description list is perfect for defining terms.<\/dd>\n
            Euismod<\/dt>\n
            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<\/dd>\n
            Donec id elit non mi porta gravida at eget metus.<\/dd>\n
            Malesuada porta<\/dt>\n
            Etiam porta sem malesuada magna mollis euismod.<\/dd>\n<\/dl>\n<\/div>\n
            <dl>\r\n  <dt>...<\/dt>\r\n  <dd>...<\/dd>\r\n<\/dl><\/pre>\n
            <\/p>\n
            Note:<\/strong> Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow<\/code>. In narrower viewports, they will change to the default stacked layout.<\/p>\n<\/div>\n<\/div>\n
            \n
            \n
            Horizontal description<\/h3>\n
            Make terms and descriptions in <dl><\/code> line up side-by-side.<\/p>\n
            \n
            \n
            Description lists<\/dt>\n
            A description list is perfect for defining terms.<\/dd>\n
            Euismod<\/dt>\n
            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<\/dd>\n
            Donec id elit non mi porta gravida at eget metus.<\/dd>\n
            Malesuada porta<\/dt>\n
            Etiam porta sem malesuada magna mollis euismod.<\/dd>\n
            Felis euismod semper eget lacinia<\/dt>\n
            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<\/dd>\n<\/dl>\n<\/div>\n
            <dl class=\"dl-horizontal\">\r\n  <dt>...<\/dt>\r\n  <dd>...<\/dd>\r\n<\/dl><\/pre>\n<\/div>\n<\/div>\n
            \u00a0<\/div>\n
            <\/p>\n
            \n
            Code<\/h1>\n<\/div>\n
            \n
            \n
            Inline<\/h2>\n
            Wrap inline snippets of code with <code><\/code>.<\/p>\n
            For example, <section><\/code> should be wrapped as inline.<\/div>\n
            For example, <code><section><\/code> should be wrapped as inline.<\/pre>\n
            Note:<\/strong> Be sure to keep code within <pre><\/code> tags as close to the left as possible; it will render all tabs.<\/p>\n
            You may optionally add the .pre-scrollable<\/code> class which will set a max-height of 350px and provide a y-axis scrollbar.<\/p>\n<\/div>\n<\/div>\n
            \n
            \n
            Basic block<\/h2>\n
            Use <pre><\/code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.<\/p>\n
            \n
            <p>Sample text here...<\/p><\/pre>\n<\/div>\n
            <pre>\r\n  &lt;p&gt;Sample text here...&lt;\/p&gt;\r\n<\/pre><\/pre>\n<\/div>\n<\/div>\n
            \u00a0<\/div>\n
            <\/p>\n
            \n
            Tables<\/h1>\n<\/div>\n
            Default styles<\/h2>\n
            For basic styling\u2014light padding and only horizontal dividers\u2014add the base class .table<\/code> to any <table><\/code>.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            <table class=\"table\">\r\n  \u2026\r\n<\/table><\/pre>\n
            <\/p>\n
            Optional classes<\/h2>\n
            Add any of the follow classes to the .table<\/code> base class.<\/span><\/p>\n
            \n
            \n
            .table-striped<\/code><\/h4>\n
            Adds zebra-striping to any table row within the <tbody><\/code> via the :nth-child<\/code> CSS selector (not available in IE7-IE8).<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            <table class=\"table table-striped\">\r\n  \u2026\r\n<\/table><\/pre>\n
            .table-hover<\/code><\/h4>\n
            Enable a hover state on table rows within a <tbody><\/code>.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            <table class=\"table table-hover\">\r\n  \u2026\r\n<\/table><\/pre>\n<\/div>\n<\/div>\n
            \n
            \n
            .table-bordered<\/code><\/h4>\n
            Add borders and rounded corners to the table.<\/p>\n
            \n\n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            Mark<\/td>\nOtto<\/td>\n@TwBootstrap<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            <table class=\"table table-bordered\">\r\n  \u2026\r\n<\/table><\/pre>\n
            .table-condensed<\/code><\/h4>\n
            Makes tables more compact by cutting cell padding in half.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            <table class=\"table table-condensed\">\r\n  \u2026\r\n<\/table><\/pre>\n<\/div>\n<\/div>\n
            \u00a0<\/div>\n
            <\/p>\n
            Optional row classes<\/h2>\n
            Use contextual classes to color table rows.<\/p>\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n\n
             
            Class<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            .success<\/code><\/td>\nIndicates a successful or positive action.<\/td>\n<\/tr>\n
            .error<\/code><\/td>\nIndicates a dangerous or potentially negative action.<\/td>\n<\/tr>\n
            .warning<\/code><\/td>\nIndicates a warning that might need attention.<\/td>\n<\/tr>\n
            .info<\/code><\/td>\nUsed as an alternative to the default styles.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \n\n\n\n\n\n\n\n\n
            #<\/th>\nProduct<\/th>\nPayment Taken<\/th>\nStatus<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nTB – Monthly<\/td>\n01\/04\/2012<\/td>\nApproved<\/td>\n<\/tr>\n
            2<\/td>\nTB – Monthly<\/td>\n02\/04\/2012<\/td>\nDeclined<\/td>\n<\/tr>\n
            3<\/td>\nTB – Monthly<\/td>\n03\/04\/2012<\/td>\nPending<\/td>\n<\/tr>\n
            4<\/td>\nTB – Monthly<\/td>\n04\/04\/2012<\/td>\nCall in to confirm<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
            ...\r\n  <tr class=\"success\">\r\n    <td>1<\/td>\r\n    <td>TB - Monthly<\/td>\r\n    <td>01\/04\/2012<\/td>\r\n    <td>Approved<\/td>\r\n  <\/tr>\r\n...<\/pre>\n
            Supported table markup<\/h2>\n
            List of supported table HTML elements and how they should be used.<\/p>\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n\n\n\n\n
             
            Tag<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            <table><\/code><\/td>\nWrapping element for displaying data in a tabular format<\/td>\n<\/tr>\n
            <thead><\/code><\/td>\nContainer element for table header rows (<tr><\/code>) to label table columns<\/td>\n<\/tr>\n
            <tbody><\/code><\/td>\nContainer element for table rows (<tr><\/code>) in the body of the table<\/td>\n<\/tr>\n
            <tr><\/code><\/td>\nContainer element for a set of table cells (<td><\/code> or <th><\/code>) that appears on a single row<\/td>\n<\/tr>\n
            <td><\/code><\/td>\nDefault table cell<\/td>\n<\/tr>\n
            <th><\/code><\/td>\nSpecial table cell for column (or row, depending on scope and placement) labels
             Must be used within a <thead><\/code><\/td>\n<\/tr>\n
            <caption><\/code><\/td>\nDescription or summary of what the table holds, especially useful for screen readers<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            <table>\r\n  <caption>...<\/caption>\r\n  <thead>\r\n    <tr>\r\n      <th>...<\/th>\r\n      <th>...<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>...<\/td>\r\n      <td>...<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table><\/pre>\n
            <\/p>\n
            \n
            Forms<\/h1>\n<\/div>\n
            \n
            \n
            Default styles<\/h2>\n
            Individual form controls receive styling, but without any required base class on the <form><\/code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.<\/p>\n
            \n
            \nLegend<\/legend>\n