Explore St. Louis Starter Kit

Visual Style Guide

  1. Typography
  2. Buttons
  3. Icons
  4. Form Elements
  5. Lists
  6. Grid
  7. Colors
  8. Images
  9. WISYWIG Test
  10. Backgrounds

#01 Typography

H1: Roboto Slab Light 70pt

H2: Roboto Slab Light 40pt

H3: Roboto Slab Light 24pt

H4: Roboto Light 18pt

H5: Roboto Regular 16pt

H6: Roboto Regular 13pt

P: Roboto Light 16pt

Paragraph Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur scelerisque consequat. Curabitur lorem enim, semper non imperdiet vel, feugiat eget mi.

Link Header Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur scelerisque consequat. Curabitur lorem enim, semper non imperdiet vel, feugiat eget mi.

#02 Buttons

Primary

Read More

Secondary

1

Tags

Social

Icon

#03 Icons

Font Awesome Icons Used

#04 Form Elements

Text

Text - Required

Text Area

Radio Buttons & Checkboxes

(function() {
  var inputs = document.getElementsByTagName("input");
  console.log(inputs.length)
  var inputs_len = inputs.length;
  var addDirtyClass = function(evt) {
    //sampleCompleted("Forms-order-dirty");
    evt.srcElement.classList.toggle("dirty", true);
  };
  for (var i = 0; i < inputs_len; i++) {
    var input = inputs[i];
    input.addEventListener("blur", addDirtyClass);
    input.addEventListener("invalid", addDirtyClass);
    input.addEventListener("valid", addDirtyClass);
  }
})();

Select

// jQuery dependency
$(function() {
  $('#select-demo').selectize({
    create: false
  });
});

#05 Lists

Default lists

ul

  • Lorem ipsum dolor sit amet.
  • Dicta optio cumque dolore hic ea facilis
  • Minus, possimus, veniam, incidunt eligendi

ol

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi

Default lists of links

ul

ol

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Layout basics
  2. Basics layouts
  3. Layout patterns
  1. Layout basics
  2. Basics layouts
  3. Layout patterns

#06 Grid

col-3-12
col-3-12
col-3-12
col-3-12
col-3-12
col-9-12
col-9-12
col-3-12
col-4-12
col-4-12
col-4-12
col-12-12
col-9-12
col-6-12
col-4-12 col-shift-4-12
col-6-12 col-shift-6-12
col-9-12 col-shift-3-12
col-6-12 col-shift-3-12
col-6-12
col-6-12
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n
col-3-12 col-omega-4n

#07 Colors

#740102
#9c0204
#ae211b
#ec9306
#fab13d
#7ac4d5
#84cede
#000000
#4d4d4f
#aaaaaa
#e1e6e9
#f4f4f4
#ffffff

#08 Images

Large Image Popup

25 Things to Do in St. Louis

Lorem impsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

25 Things to Do in St. Louis

Lorem impsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

Small Image Popup

25 Things to Do in St. Louis

Lorem impsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

25 Things to Do in St. Louis

Lorem impsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

25 Things to Do in St. Louis

Lorem impsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

Large Image Card

Fair St. Louis Returns to Forest Park on July 2-4

 Friday, July 2 - Sunday, July 4, 2015

The 35th Annual Fair Saint Louis Celebration is back at Art Hill in Forest Park this year. America's biggest birthday party will return to Forest Park on July 2

Read More

Fair St. Louis Returns to Forest Park on July 2-4

 Friday, July 2 - Sunday, July 4, 2015

The 35th Annual Fair Saint Louis Celebration is back at Art Hill in Forest Park this year. America's biggest birthday party will return to Forest Park on July 2

Read More

Small Image Card

#09 WISYWIG Test

Bold

Italliacs

Strike Out

  • Bullet 1
  • Bullet 2
  • Bullet 3
  1. Number 1
  2. Number 2
  3. Number 3

Quote – This is a quote!

Horizontal Line Check

 

Align Left

Center

Align Right

Link

Read More

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Preformatted

Underline

Justify

Text Color

  • Ordered List and Indent Check
    • Item 1
      • a
    • b
      • c
        • Item 2
          • a
            • b
        • c

Aligned Left Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis. Aliquam erat volutpat. Proin euismod hendrerit risus sollicitudin efficitur. Duis tincidunt ligula arcu, sed mollis velit finibus id. Aliquam nec lacus ex. Praesent in ullamcorper dolor. Integer elementum nunc et vestibulum fermentum. Suspendisse porta ornare lacus. Etiam imperdiet quis orci id tempor. Fusce ac luctus nibh, eget aliquam sem. Vestibulum arcu odio, vulputate in velit dignissim, consequat aliquam lectus.

Aligned Center Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis. Aliquam erat volutpat. Proin euismod hendrerit risus sollicitudin efficitur. Duis tincidunt ligula arcu, sed mollis velit finibus id. Aliquam nec lacus ex. Praesent in ullamcorper dolor. Integer elementum nunc et vestibulum fermentum. Suspendisse porta ornare lacus. Etiam imperdiet quis orci id tempor. Fusce ac luctus nibh, eget aliquam sem. Vestibulum arcu odio, vulputate in velit dignissim, consequat aliquam lectus.

Aligned Right Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis. Aliquam erat volutpat. Proin euismod hendrerit risus sollicitudin efficitur. Duis tincidunt ligula arcu, sed mollis velit finibus id. Aliquam nec lacus ex. Praesent in ullamcorper dolor. Integer elementum nunc et vestibulum fermentum. Suspendisse porta ornare lacus. Etiam imperdiet quis orci id tempor. Fusce ac luctus nibh, eget aliquam sem. Vestibulum arcu odio, vulputate in velit dignissim, consequat aliquam lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis. Aliquam erat volutpat. Proin euismod hendrerit risus sollicitudin efficitur. Duis tincidunt ligula arcu, sed mollis velit finibus id. Aliquam nec lacus ex. Praesent in ullamcorper dolor. Integer elementum nunc et vestibulum fermentum. Suspendisse porta ornare lacus. Etiam imperdiet quis orci id tempor. Fusce ac luctus nibh, eget aliquam sem. Vestibulum arcu odio, vulputate in velit dignissim, consequat aliquam lectus.

  • Unordered List 1
  • Unordered List 2
  • Unordered List 3
    • Unordered List 3a
    • Unordered List 3b
  1. Ordered List One
  2. Ordered List Two
  3. Ordered List Three
    1. Ordered List 3.1
    2. Ordered List 3.2

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis.

Under the read more: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur purus a blandit convallis. Duis id risus quis augue molestie lobortis. Aliquam erat volutpat. Proin euismod hendrerit risus sollicitudin efficitur. Duis tincidunt ligula arcu, sed mollis velit finibus id. Aliquam nec lacus ex. Praesent in ullamcorper dolor. Integer elementum nunc et vestibulum fermentum. Suspendisse porta ornare lacus. Etiam imperdiet quis orci id tempor. Fusce ac luctus nibh, eget aliquam sem. Vestibulum arcu odio, vulputate in velit dignissim, consequat aliquam lectus.

#10 Backgrounds