Grid System

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns, 12 total. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.

Rendered

3 Columns
6 Columns
3 Columns

HTML

Targetting display sizes

You can specify different column widths that target three different sizes: small (mobile), medium (tablet) and large (desktop). The classes can be combined such that for each display size, a different column width takes effect.

Rendered

Large 4, Small 2
Large 4, Small 4
Large 4, Small 6

HTML

Centered Columns

Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class.

Rendered

3 centered

HTML

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

Rendered

1
9, offset 2

HTML


Block Grid

Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.

Rendered

HTML

Use additional classes to specify a different number of items in a row for each screen size.

Rendered

HTML


Sticky Nav

This fixed-position navigation helps users keep track of where they are on a page without scrolling, after scrolling past the menu.

HTML

Sub-Nav

Rendered

HTML

Type

Rendered

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

HTML

Subheaders

Rendered

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

HTML

Small header segments

Rendered

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.

HTML


Text Align Classes

Basic

Left Aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.

Right Aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.

Center Aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.

Justified. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire.

HTML


Lists

Basic

  • 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

HTML

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

HTML

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

HTML

No Bullet

  • 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

HTML

Ordered/Numbered List

  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. List item

HTML


Blockquotes

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

HTML


Buttons

Default

Button

HTML

HTML

HTML

HTML

HTML

Centered

HTML

Button Groups

HTML


Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.

Basic

You can create a label using minimal markup.

Default

Regular Label

HTML

Advanced

Additional classes can be added to your labels to change their appearance.

Default

Success Round
Alert Radius
Secondary Label

HTML



Visibility

Visibility classes let you show or hide elements based on screen size. You can use visibility classes to control which elements users see depending on their browsing environment.

Show by Screen Size

In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

Default

This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen.

HTML


Hide by Screen Size

This example shows the opposite: It uses the hide visibility classes to state which elements should disappear based on your device's screen size or orientation. Users will see elements on every browser except those that meet these conditions.

Default

You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen.

HTML


Dropdown

a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.

Basic

You can create a dropdown using minimal markup.

Default

Has Dropdown Has Content Dropdown

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

HTML

Advanced

Additional classes can be added to your dropdown to change its appearance.

HTML

Hoverable Dropdown Option

If you'd rather have your dropdown be accessible by hover, you can add a data-option to the target element:

HTML


Progress Bars

Default

HTML


Accordion

You can create an accordion using minimal markup like so:

Rendered

Accordion 1
Panel 1. 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.
Accordion 2
Panel 2. 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.
Accordion 3
Panel 3. 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.

HTML


Tabs

You can create a group of horizontal tabs using minimal markup.

Rendered

Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...

HTML

Vertical Tabs

Rendered

Tab 1
Tab 2
Tab 3
Tab 4

Panel 1 content goes here.

Panel 2 content goes here.

Panel 3 content goes here.

Panel 4 content goes here.

HTML



Thumbnails

Add class "th" to an img or a element.

Rendered

HTML


Additional classes can be added to your thumbnails to change its appearance.

Rendered

HTML


Flex Video

Flex Video lets browsers automatically scale video objects in your webpages. If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

Rendered

HTML


Clearing Lightbox

Gather some images, decide on their order, and put them into an ul with a .clearing-thumbs class.

Rendered

HTML


Reveal Modal

You can create a reveal modal using minimal markup. To launch a modal, just add a data-reveal-id to the object which you want to fire the modal when clicked. The data-reveal-id needs to match the id of your reveal.

Rendered

Click Me For A Modal

Awesome. I have it.

Your couch. It is mine.

Im a cool paragraph that lives inside of an even cooler modal. Wins

×

HTML

A button that reveals a modal and links to a second modal example.

Rendered

Example Modal…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

HTML

Add class tiny, small, medium, large or xlarge to size the modal box.

Rendered

Click Me For A Tiny Modal

Awesome. I have it.

Your couch. It is mine.

Im a cool paragraph that lives inside of an even cooler modal. Wins

×

HTML


Panels

Regular

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

HTML

Callout

This is a callout panel.

It's a little ostentatious, but useful for important content.

HTML

Tan

This is a tan panel.

It's a little ostentatious, but useful for important content.

HTML

Tan Trans

This is a tan panel.

It's a little ostentatious, but useful for important content.

HTML

Brown

This is a brown panel.

h2 color

It's a little ostentatious, but useful for important content.

HTML

Brown Trans

This is a brown panel.

h2 color

It's a little ostentatious, but useful for important content.

HTML

V-card

HTML


Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top", "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full-width and bottom aligned.

Rendered

extended information

HTML


CTAs

HTML

HTML

HTML

HTML

more

HTML

A strong foundation for sustainable sobriety