Components

Basic Structure

Views

Views are simple. .rowand .sectionclasses are core. Example usage:

.row
  .section
    p Hello World

Grid

Usage

Example usage: .col-1-2 means 1 of 2 columns. .col-2-3 means 2 of 3 columns and so fourth. You can create most basic layouts with these grid classes.

.col-1-2

.col-1-3

.col-2-3

.col-1-3

.col-1-4

.col-3-4

.col-1-5 and .col-1-8 Do not have accompanying classes. They are designed to be equally sized.

.col-1-5

.col-1-8

Grid Padding

The grid is not padded by default, but if you choose, you can pad the grid evenly on the left and right sides by nesting your grid elements under: .padded padding.

.col-2-3

.col-1-3

If your layouts are heavy on typography you can use the .right-padded class by nesting your .col-'s under .right-padded:

.col-2-3

.col-1-3

You can also use .rowto automatically clear .col-markup. Alternatively, you can also use .clearat the end of .col-to clear columns.

Empty grid columns need content within to work properly. In most cases you'll want to hide them on your handheld breakpoint. Add .spaceto your .col-markup if you'd like an empty column to exist. The .spaceclass hides those empty columns automatically within the $handheld media query.

.col-1-3.space

.col-1-3 Some content.

.col-1-3.space

Some content.

Automatic Grid

Use the automatic grid if you don't need to be specific about your columns and only need equally sized columns. You can create an unlimited amount of columns automatically:

.col

Navigation Header

The navigation bar is fully responsive and can host an unlimited amount of sub-menu items.

.row.header
  .section
    nav
      = link_to '/', class: 'logo' do
        = image_tag 'logo.svg'
      label#menu-toggle-label for='menu-toggle'
      input#menu-toggle type='checkbox'
      .icon-menu
      ul.menu
        li = link_to 'Link', '#'
        li
          = link_to 'Menu Label', '#'
          ul
            li = link_to 'Menu Item', '#'
            li = link_to 'Menu Item', '#'

Typography

h1 - This is some text

h2 - This is some text

h3 - This is some text

h4 - This is some text

h5 - This is some text

h6 - This is some text

consecutive paragraph tag

This is a p with an inlined anchor inside this is the inlined anchor

strong b .bold

span

small

This is a blockquote

Some blocks of text using autogrid and right-padded :

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

Notice

The standard notification bar is relative in position:

This is a notice. Slot me anywhere.

.row.notice
  .section
    .notice-message
      .notice-text
        | This is a notice. Slot me anywhere.
      .notice-dismiss
        = image_tag 'icons/icon-close-outline.svg'

Loaders

.load.large

.load

.load.small

.load.smallest

Buttons

Size options

Large:

.btn.large

btn large

Default:

.btn

btn

Small:

.btn.small

btn small

Tiny:

.btn.tiny

btn tiny

Full width:

.btn.full

btn full

Shape and fill options

Grays

Other Colors

no-outline gray-light

solid round gray-light

solid round

solid round gray-dark

Forms

Cross-platform consistency is important when Vital was created, so we created form elements that will look and feel consistent on most platforms while retaining the ability to gracefully degrade.

Form fields that are nested under the .full-width-forms

Anchor

We developed custom radios and checkboxes because standard checkboxes didn't scale well. As a side benefit, you can customize the look and feel to be more in line with your application's branding.

Radio

Checkbox

Tabs

Traditional

Tab

Square

Round

Tables

Header	Header	Header
1	2	3
4	5	6
7	8	9
Footer

Pagination

← Previous 123 4 5 6 7 8...9 Next →

Sizing

Scale any element quickly and easily by using these multiplier classes.

.x5

x5

.x4

x4

.x3

x3

.x2

x2

Iconography

Vital comes with a small set of icons. Some components such as the select box, checkboxes and the alert bar rely on these icons, but you can modify or remove them as needed.

icon-arrow-updown