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-2
.col-1-3
.col-2-3
.col-1-3
.col-1-3
.col-1-3
.col-1-4
.col-1-4
.col-1-4
.col-1-4
.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-5
.col-1-5
.col-1-5
.col-1-5
.col-1-8
.col-1-8
.col-1-8
.col-1-8
.col-1-8
.col-1-8
.col-1-8
.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
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.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

consecutive paragraph tag

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

strong b .bold

em

span

small

ol

  1. li
  2. li
  3. li

ul

  • li
  • li
  • li
  1. li
  2. li
  3. li

ul

  • li
  • li
  • li

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.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.
Icon close outline
.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


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

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.


Tabs

Traditional

Square

Round


Tables

HeaderHeaderHeader
123
456
789
Footer

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
icon-arrow-updown

Icon check
icon-check

Icon clock
icon-clock

Icon close
icon-close

Icon close empty
icon-close-empty

Icon close outline
icon-close-outline

Icon menu
icon-menu

Icon vital
icon-vital


Syntax Highlighting

Rouge syntax highlighting support is included with _syntax.sass