Layout/Grid

Layout/Grid

heroes

Hero units are designed for full-screen landing pages. They're meant to highlight or market something. They may be incorporated into regular content pages also, but they will only be as wide as the content. They follow the basic format of:



<section class="hero"><article>Content here...</article></section>
Copy

Section Classes:

hero
defines a full-screen marketing section
photo
entire section will have a background photo (sizes are p30,p40,p50)
photo is applied as background image either inline or via css
headline
used for adding <h1> along bottom of photo
quote
used for adding marketing quote

Article Classes:

contained
maximum width of 75rem, centered on screen
pad
adds 1rem of padding for easier readability


<section class="hero text-center">
    <article class="contained pad">
        <h2>Virtual Tour</h2>
        <p>Binghamton is located in the Southern Tier of upstate New York, situated on 930 acres
        of land, and just 3 hours from New York City and Philadelphia; 5 hours from Boston
        and Washington, DC.</p>
    </article>
</section>
Copy

Virtual Tour

Binghamton is located in the Southern Tier of upstate New York, situated on 930 acres of land, and just 3 hours from New York City and Philadelphia; 5 hours from Boston and Washington, DC.



<section class="hero quote">
    <article class="contained pad">
        <p>“One of the nation’s best for academics, affordability and career prospects, affordability and career prospects.”</p>
        <cite>The Princeton Review, 2016</cite>
    </article>
</section>
Copy

“One of the nation’s best for academics, affordability and career prospects, affordability and career prospects.”

The Princeton Review, 2016

Columns Snippet

Two Columns

Using 'Columns' snippet adds 2 equal columns.

Up is of the most common directions. It's also a fantastic Pixar film.

Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.

Three Columns

Code below adds another column to the default 2 columns

Up is of the most common directions. It's also a fantastic Pixar film.

Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.

Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.



<td style="vertical-align: top;">
<p>Add this code to the column snippet for 3 columns</p>
</td>
Copy

Custom Grid (Columns and Rows)

Basic Grids

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.
small-2 large-4
small-4 large-4
small-6 large-4
large-3
large-6
large-3
small-6 large-2
small-6 large-8
small-12 large-2


<div class="row">
<div class="columns small-2 large-4">small-2 large-4</div>
<div class="columns small-4 large-4">small-4 large-4</div>
<div class="columns small-6 large-4">small-6 large-4</div>
</div>
<div class="row">
<div class="columns large-3">large-3</div>
<div class="columns large-6">large-6</div>
<div class="columns large-3 bg-grey">large-3</div>
</div>
<div class="row">
<div class="columns small-6 large-2">small-6 large-2</div>
<div class="columns small-6 large-8">small-6 large-8</div>
<div class="columns small-12 large-2">small-12 large-2</div>
</div>
Copy

Small Grids

Small grids expand to large screens easier than large grids cram into small screens. Medium and Large sized screens will inherit styles from small grid.
2
10
3
9


<div class="row">
<div class="columns small-2">2</div>
<div class="columns small-10">10</div>
</div>
<div class="row">
<div class="columns small-3">3</div>
<div class="columns small-9">9</div>
</div>
Copy

Medium Grids

Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.
2
10
3
9


<div class="row">
<div class="columns medium-2">2</div>
<div class="columns medium-10">10</div>
</div>
<div class="row">
<div class="columns medium-3">3</div>
<div class="columns medium-9">9</div>
</div>
Copy

Advanced Grid

Advanced grid options include Gutters between 2 columns in a row, collapse/uncollapse rows, Centered Columns, Block grid (shorthand way to create equally-sized columns). Please refer to Foundation Docs for more information on the grid system and advanced grid options