Inagural Defiance Wine Country Art Festival
August 15Lorem ipsum dolor sit amet, nulla consectetur adipiscing elit.
Read More
Explore St. Louis Starter Kit
Visual Style Guide
#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.
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.
#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
- Lorem ipsum dolor sit amet
- Dicta optio cumque dolore hic ea facilis
- Minus, possimus, veniam, incidunt eligendi
Default lists of links
ul
ol
#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
Small Image Popup
Large Image Card
Fair St. Louis Returns to Forest Park on July 2-4
Friday, July 2 - Sunday, July 4, 2015The 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 MoreFair St. Louis Returns to Forest Park on July 2-4
Friday, July 2 - Sunday, July 4, 2015The 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 MoreSmall Image Card
Inagural Defiance Wine Country Art Festival
August 15Lorem ipsum dolor sit amet, nulla consectetur adipiscing elit.
Read MoreInagural Defiance Wine Country Art Festival
August 15Lorem ipsum dolor sit amet, nulla consectetur adipiscing elit.
Read MoreInagural Defiance Wine Country Art Festival
August 15Lorem ipsum dolor sit amet, nulla consectetur adipiscing elit.
Read More#09 WISYWIG Test
Bold
Italliacs
Strike Out
- Bullet 1
- Bullet 2
- Bullet 3
- Number 1
- Number 2
- Number 3
Quote – This is a quote!
Horizontal Line Check
Align Left
Center
Align Right
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
- a
- c
- Item 2
- c
- Item 1
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
- Ordered List One
- Ordered List Two
- Ordered List Three
- Ordered List 3.1
- 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.
