Foundation

Typography

Foundation 3 uses a modular scale to generate typography. That means a great, logical relationship for your copy whether you use the Scss version or just download the CSS.

How a Modular Scale Works

  • Based on some stellar work by Tim Brown, the idea of a modular scale is that the size and spacing of all of the typography in the framework is derived from an initial value, another arbitrary "important" value, and a particular ratio. We chose to use the golden ratio, but there are others available.

    We then use Sass to generate sizes based on those values, in an ascending scale of size and spacing. If you use the Scss version of Foundation you can easily change these values, otherwise we default to a 14px base with a 44px important value (based on common UI element size).

  • 
    // Variables
    $ratio: $golden;
    $baseSize: 14px;
    $importantModNum: 44px;
    
    // Modular Scale SCSS Function Syntax
    h6 { font-size: ms(0); } // First Number in Scale
    h5 { font-size: ms(1); } // Second Number in Scale
    h4 { font-size: ms(2); } // Third Number in Scale
    

Header Styles

Foundation 3 includes a number of different styles and treatments for typographic elements, such as subheaders or small header segments.
  • Basic Headers

    h1 header

    h2 header

    h3 header

    h4 header

    h5 header
    h6 header

    Headers with <small>

    Small header text.

    Small header text.

    Small header text.

    Small header text.

    Small header text.
    Small header text.

    Subheaders

    h1.subheader header

    h2.subheader header

    h3.subheader header

    h4.subheader header

    h5.subheader header
    h6.subheader header
  • 
    <!-- Basic Headers -->
    <h1>h1 header</h1>
    <h2>h2 header</h2>
    <h3>h3 header</h3>
    <h4>h4 header</h4>
    <h5>h5 header</h5>
    <h6>h6 header</h6>
    
    <!-- Headers with small text -->
    <h1>h1 header <small>Small header text.</small></h1>
    <h2>h2 header <small>Small header text.</small></h2>
    <h3>h3 header <small>Small header text.</small></h3>
    <h4>h4 header <small>Small header text.</small></h4>
    <h5>h5 header <small>Small header text.</small></h5>
    <h6>h6 header <small>Small header text.</small></h6>
    
    <!-- Subheaders -->
    <h1 class="subheader">h1.subheader header</h1>
    <h2 class="subheader">h2.subheader header</h2>
    <h3 class="subheader">h3.subheader header</h3>
    <h4 class="subheader">h4.subheader header</h4>
    <h5 class="subheader">h5.subheader header</h5>
    <h6 class="subheader">h6.subheader header</h6>
    

Paragraphs

In Foundation, paragraphs fall within the modular scale. This includes their line-height, giving the page a feeling of harmony as you scroll.
  • It's really easy to add emphasis to copy in Foundation. We've implemented some standards like bold and italics, as well as, our own nifty styles, such as <code>, <kbd> and <small>

  • 
    <div class='six columns'>
        <p>It's really easy to add emphasis to copy in Foundation. We've implemented some standards like <strong>bold</strong> and <em>italics</em>, as well as, our own nifty styles, such as <code>&lt;code&gt;</code>, <kbd>&lt;kbd&gt;</kbd> and <small>&lt;small&gt;</small></p>
      </div>
      <div class='six columns'>
        <aside><p>You can also put text into and <strong>&lt;aside&gt;</strong> element to give it some hierarchy on the page. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla.</p></aside>
      </div>
    </div>
    

Links

Where would we be without links? Not in hypertext, that's for sure! Ah, nerd humor. Anyways. Links are very standard, and the color is preset or controlled via the _settings.scss file as the main color.

Lists

Lists are helpful for, well, lists of things. Foundation 3 uses Normalize.css so lists won't be reset as they were in previous versions. However, we still provide a few simple affordances for lists.
  • Unordered Lists

    ul.disc
    • List item with a much longer description or more content.
    • List item
    • List item
      • Nested List Item
      • Nested List Item
      • Nested List Item
    • List item
    • List item
    • List item
    ul.circle
    • List item with a much longer description or more content.
    • List item
    • List item
      • Nested List Item
      • Nested List Item
      • Nested List Item
    • List item
    • List item
    • List item
    ul.square
    • List item with a much longer description or more content.
    • List item
    • List item
      • Nested List Item
      • Nested List Item
      • Nested List Item
    • List item
    • List item
    • List item
  • 
    <!-- Disc Lists -->
    <h5>ul.disc</h5>
    <ul class="disc">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    
    <!-- Circle Lists -->
    <h5>ul.circle</h5>
    <ul class="circle">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    
    <!-- Square Lists -->
    <h5>ul.square</h5>
    <ul class="square">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    
    <!-- Ordered Lists -->
    <ol>
      <li>Ordered List Item</li>
      <li>Ordered List Item</li>
      <li>Ordered List Item</li>
      <li>Ordered List Item</li>
    </ol>
    
    <!-- Definition Lists -->
    <dl>
      <dt>Definition Title</dt>
      <dd>Definition text, you can add as many of these as you need. The line-height matches paragraphs.</dd>
    </dl>
    

Ordered Lists

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3

Definition Lists

Definition Title
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.
  • I do not fear computers. I fear the lack of them. Isaac Asimov

  • 
    <blockquote>
      <p>I do not fear computers. I fear the lack of them.
      <cite>Isaac Asimov</cite></p>
    </blockquote>
    

Print Styles

Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:

  • Clearing out backgrounds, box shadows, and text shadows
  • Appending link URLs after the anchor text
  • Bordering blockquotes and pre elements
  • Page cleanup and window minimization

On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attached .print-only on an element to only show when printing, and .hide-on-print to hide something when printing.


Buttons Galore

We know people love buttons, so do we. With that in mind, we made sure Foundation includes everything you need when it comes to building buttons.
Learn about our buttons »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs