Foundation-5 Cheat sheet

Fork me on github

Default colors

Structure

Media Queries

  • @media only screen { }
  • @media only screen and (max-width: 40em) { }
  • @media only screen and (min-width: 40.063em) { }
  • @media only screen and (min-width: 90.063em) { }
  • @media only screen and (min-width: 90.063em) and (max-width: 120em) { }
  • @media only screen and (min-width: 40.063em) and (max-width: 64em) { }
  • @media only screen and (min-width: 64.063em) { }
  • @media only screen and (min-width: 64.063em) and (max-width: 90em) { }
  • @media only screen and (min-width: 120.063em) { }
  • @media only screen and (min-width: 90.063em) { }
  • @media only screen and (min-width: 90.063em) and (max-width: 120em) { }
  • @media only screen and (min-width: 120.063em) { }

Basic

  • div class="small-6 columns"
  • div class="small-6 large-3 columns"
  • div class="small-6 medium-4 large-1 columns"

Offsets

  • div class="small-10 small-offset-2 medium-6 columns"
  • div class="small-7 small-offset-5 medium-6 medium-offset-3 large-10 large-offset-2 columns"

Incomplete Rows

your row doesn't have a count that adds up to 12 columns, you can add class end to ovveride default behaviour of last column floating to right

  • div class="row"
  • div class="medium-3 columns"
  • div class="medium-3 columns end"

Centered Columns

  • div class="small-10 small-centered columns"
  • div class="small-10 large-centered columns"
  • div class="small-9 small-centered large-uncentered columns"

Source Rendering

  • div class="large-9 large-push-3 columns"
  • div class="medium-6 medium-push-6 columns"
  • small-5 small-push-7 medium-7 medium-push-5 columns

Block Grid

Evenly split the contents of a list within the grid

  • ul class="small-block-grid-2"
  • ul class="small-block-grid-2 large-block-grid-4"

Visibilty Classes

Show Classes

  • class="show-for-small-only"
  • class="show-for-medium-up"
  • class="show-for-medium-only"
  • class="show-for-large-down"
  • class="show-for-large"
  • class="show-for-large-up"
  • class="show-for-xlarge"
  • class="show-for-xxlarge"

Hide Classes

  • class="hide-for-small-only"
  • class="hide-for-medium-up"
  • class="hide-for-medium-only"
  • class="hide-for-large-down"
  • class="hide-for-large"
  • class="hide-for-large-up"
  • class="hide-for-xlarge"
  • class="hide-for-xxlarge"

Orientation Detection

  • class="show-for-landscape"
  • class="show-for-portrait"

Touch Detection

  • class="show-for-touch"
  • class="hide-for-touch"

Accessibility

If you want to hide some content but still make it accessible for screen readers, use the hidden visibility classes.To reverse the rules defined by hidden, use the visible visibility classes.

  • class="hidden-for-small-only"
  • class="visible-for-small-only"

Buttons

Basic

Tiny Button

a class="button tiny"

Small Button

a class="button small"

Default Button

a class="button"

Large Button

a class="button large"

Expanded Button

a class="button expand"

Alert Button

a class="button alert"

Success Button

a class="button success"

Disabled Button

a class="button disabled"

Secondary Button

a class="button secondary"

Radius Button

a class="button radius"

Round Button

a class="button round"

Button Groups

  • ul class="button-group"
  • li a class="button"

Button Bars

  • div class="button-bar"
  • ul class="button-group"
  • li a class="button"

Split Buttons

Split Button
  • a href="#" class="button split" span data-dropdown="drop">../span../a../br
  • ul id="drop" class="f-dropdown" data-dropdown-content
  • li a href="#"

Dropdown

Dropdown Button
  • a href="#" data-dropdown="drop1" class="button dropdown" ../br
  • ul id="drop1" data-dropdown-content class="f-dropdown"
  • li a href="#"

Utility Classes

Float Classes

You can change the float behavior of an element by adding .left or .right to an HTML element. To clear floats, add the class .clearfix to the parent element.

Float Right Float Left
  • div class="clearfix"
  • a class="button right"
  • a class="button left"

Radius and Rounded

The .radius and .round classes allow you to easily apply a border-radius to a UI-element. Adding the class to a button group will apply the border radius only to the outside corners.

Round Button Radius Button
  • class="button round"
  • a class="button radius"

Text Align Classes

You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

This text is left aligned

This text is right aligned

This text is center aligned

More text alignment classes
.text-left .text-right .text-center .text-justify
.small-text-left .small-text-right .small-text-center .small-text-justify
.small-only-text-left .small-only-text-right .small-only-text-center .small-only-text-justify
.medium-text-left .medium-text-right .medium-text-center .medium-text-justify
.medium-only-text-left .medium-only-text-right .medium-only-text-center .medium-only-text-justify
.large-text-left .large-text-right .large-text-center .large-text-justify
.large-only-text-left .large-only-text-right .large-only-text-center .large-only-text-justify
.xlarge-text-left .xlarge-text-right .xlarge-text-center .xlarge-text-justify
.xlarge-only-text-left .xlarge-only-text-right .xlarge-only-text-center .xlarge-only-text-justify
.xxlarge-text-left .xxlarge-text-right .xxlarge-text-center .xxlarge-text-justify
Align Left Align Right Align Center Justify
×

Forms

Input Forms

  • div class="small-3 columns"
  • label for="right-label" class="right inline"
  • div class="small-9 columns
  • input type="text" id="right-label" placeholder="Inline Text Input"
Go
  • div class="row collapse"
  • div class="small-10 columns"
  • input type="text" placeholder="Hex Value"
  • div class="small-2 columns"
  • a href="#" class="button postfix"

Switches

  • div class="switch"
  • input id="exampleCheckboxSwitch" type="checkbox"
  • label for="exampleCheckboxSwitch"

Error States

Invalid entry
  • label class="error"
  • input type="text" class="error"
  • small class="error"
Invalid entry
  • textarea class="error" placeholder="Message..."
  • small class="error"

Sliders

  • div class="range-slider" data-slider
  • span class="range-slider-handle" role="slider"
  • span class="range-slider-active-segment"
  • input type="hidden"

Typography

Headers

h1.

h2.

h3.

h4.

h5.
h6.

Sub Headers

h1.

h2.

h3.

h4.

h5.
h6.

Small Header Segments

h1.

h2.

h3.

h4.

h5.
h6

List items

  • Unordered list
    • circle as bullet -div class="circle"
    • disc as bullet -div class="disc"
    • sqaure as bullet -div class="square"
    • no bullet -div class="no-bullet"
  • Ordered list
    1. this is an ordered list

keystroke

For example, to close your browser hit Cmd+Q 

<p><kbd>Cmd</kbd>+<kbd>Q</kbd></p>

V-Card

  • ul class="vcard"
  • li class="fn"
  • li class="street-address"
  • li class="locality"
  • li span class="state"
  • li span class="zip"
  • li class="email"

Blockquotes

blockquote QUOTE cite AUTHOR /cite /blockquote

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Description List

dl..dt..dd
Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh .

Labels

Regular Label

class="label"

Radius Secondary Label

class="radius secondary label"

Round Alert Label

class="round alert label"

Warning Label

class="warning label"

Success Label

class="success label"

Inlinelist

ul class="inline-list"

Navigation

Pagnition

  • ul class="pagination"
  • li class="arrow unavailable"
  • li class="current"
  • li class="unavailable"
  • li class="arrow"

Sub-Nav

Filter:
All
Active
Pending
  • dl class="sub-nav"
  • dt
  • dd class="active" a href=""
  • dd a href=""

Icon Bars

Specifying the number of items one-up through six-up will ensure the items are evenly spaced.

  • div class="icon-bar five-up"
  • a class="item"
  • img src=""

Breadcrumbs

  • ul class="breadcrumbs"
  • li class="unavailable"
  • li class="current"
  • nav class="breadcrumbs"
  • a class="unavailable"
  • a class="current"

Side Nav

  • ul class="side-nav"
  • li class="active"

Top-Bar

  • nav class="top-bar"
  • ul class="title-area"
  • li class="name"
  • li class="toggle-topbar menu-icon ... a span Menu"
  • section class="top-bar-section"
  • ul class="left"
  • li class="active"

Media

Flex Video

  • div class="flex-video"
  • iframe width="420" height="315" src="//www..com/embed/aiBt44rrslw" frameborder="0" allowfullscreen

Thumbnails

  • a class="th" href="path/to/your/img"
  • img src="path/to/your/img-th"

Clearing Lightbox

  • ul class="clearing-thumbs" data-clearing
  • li..a href="path/to/your/img"..img src="path/to/your/img-th"../a>../li

Callouts

Alerts

This is a standard alert box ×
This is a success alert with a radius. ×

Alert boxes take 100% width and you can add .radius, .success, .alert, .round, .secondary or .close to create close box

  • div data-alert class="alert-box"
  • a href="#" class="close"

Panels

This is a regular panel.
div class="panel"
This is a callout panel.
div class="panel callout radius"

Tooltips

  • Default Tool-tipclass='has-tip'
  • Top Tool-tip class='has-tip tip-top'
  • left Tool-tip class='has-tip tip-left'
  • right Tool-tipclass='has-tip tip-right'

Reveal Modal

Click Me For A Modal

Awesome. I have it.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

×
  • a href="#" data-reveal-id="myModal"
  • div id="myModal" class="reveal-modal" data-reveal
  • a class="close-reveal-modal" >×

Content

Pricing Tables

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • Buy Now
  • ul class="pricing-table"
  • li class="title"
  • li class="price"
  • li class="description"
  • li class="bullet-item"
  • li class="cta-button"

Progress Bars

  • div class="progress"
  • span class="meter" style="width: [1 - 100]%"

Tables

Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non . Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id . Content Goes Here
  • table thead tr th tbody tr td

Data Equalizer

Pellentesque habitant morbi ultricies eget, tempor sit amet

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • div class="row" data-equalizer
  • div data-equalizer-watch

JavaScript

Cheat sheet created by Sudheer