Headings

Lorem ipsum dolor h2

Lorem ipsum dolor h3

Lorem ipsum dolor h4

Lorem ipsum dolor h5
Lorem ipsum dolor h6
Sass variables: $h2-size, $h3-size, $h4-size, $h5-size and $h6-size. h6 equals to $font-size.

Small & smaller

.small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a malesuada orci, a dignissim neque.

.smaller In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis.

Sass variables: $small-size and $smaller-size.

Unorphan

Ent unorphans the following elements on medium or higher resolutions: h1, h2, h3, h4, h5, h6, blockquote. If you want to unorphan an element that it's not on the previous list, just add data-unorphan HTML attribute to the element. If you do not want to unorphan an element add data-dont-unorphan attribute.


Anchors

Add .anchor class to an anchor to offset for the fixed header. Change $anchor-offset SASS variable to control the offset.

Example: jump to "Small & smaller"


HTML elements

p.lead In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam.

p In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin. Phasellus et nisi eleifend, rhoncus ante et, consectetur urna. Sed congue sapien sed volutpat sagittis. In in faucibus orci. Suspendisse eros nibh, posuere ut risus ut, maximus bibendum mi.

Sass variables: use 1rem for the base font-size.

Text columns

.text-columns.text-columns--2 In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.

.text-columns.text-columns--3 In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.

.text-columns.text-columns--4 In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.


Icon list

.icon-list

.icon-list.icon-list--middle

.small.icon-list

.smaller.icon-list.icon-list--middle


Foundation palette
$primary-color
$secondary-color
$black
$white

$light-gray
$medium-gray
$dark-gray
Sass helper functions tint() and shade() available. Example: border-bottom: 1px solid shade($ligth-gray);.

Background
.bg--light-gray
.bg--medium-gray
.bg--dark-gray

Boxed section

.row > .small-12.columns > .boxed > .row > .small-12.columns

In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.

In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.

In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.

section.boxed > .row > .small-12.columns

In a lobortis enim. Sed nec nibh et lorem molestie suscipit. Cras sem tortor, bibendum a vestibulum sagittis, molestie eu justo. Quisque ut nibh non lectus consequat tempor ac in quam. Vivamus malesuada porta sapien eu lacinia. Donec feugiat tincidunt nulla non sollicitudin.


Edge image section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Media popup

Add data-media-popup to an anchor to define a media popup. The href from the anchor is used as source for the media. To show a video add the mfp-iframe class to the anchor and just define the Youtube/Vimeo link as href.


Media gallery

Add data-media-gallery to an element wrapping some anchors with href pointing to the media (see "Media popup").


unit

Use following SASS vars for margins & paddings:

  • $unit (equals to column gutter)
  • $unit-05 (half)
  • $unit-025 (quarter)
  • $unit-2 (double)

z-index

Define the z-index in scss/_vars.scss:

$z-index: (
    foo: 10,
    bar: 1,
);
            

Then use z-index function to get the value:

.foo {
    z-index: z-index(foo);
}