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 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

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.

“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.

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

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.

Medium Grids

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

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