Website Style Guide

This is a guide to the global styles on the TileShop.com website. Note that any individual template or component can override these styles as needed.

See Design Style Guide

Colors

Fonts

Lato is the main font. Available in font weights: 300, 400, 700, 900

Typography - Body Text

Normal Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. BOLD TEXT sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ITALIC TEXT quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Typography - Headlines

Note that the headline sizes change between desktop and mobile.

Default Headline Styles

Heading 1 Lorem ipsum dolor sit amet.

Heading 2 Lorem ipsum dolor sit amet

Heading 3 Lorem ipsum dolor sit amet

Heading 4 Lorem ipsum dolor sit amet

Heading 5 Lorem ipsum dolor sit amet

Styled Headline Styles

Heading Jumbo Lorem ipsum dolor sit amet.

Heading 1 Lorem ipsum dolor sit amet.

Heading 2 Lorem ipsum dolor sit amet

Heading 3 Lorem ipsum dolor sit amet

Heading 4 Lorem ipsum dolor sit amet

Heading 5 Lorem ipsum dolor sit amet

Styled Alt Headline Styles

Heading Jumbo Alt Lorem ipsum dolor sit amet.

Heading 1 Alt Lorem ipsum dolor sit amet.

Heading 2 Alt Lorem ipsum dolor sit amet

Heading 3 Alt Lorem ipsum dolor sit amet

Heading 4 Alt Lorem ipsum dolor sit amet

Heading 5 Alt Lorem ipsum dolor sit amet

Links and Buttons

This is an inline link

Text Hyper Links

Normal	Small	Large
Black Button	Black Button	Black Button
Outline Black Button	Outline Black Button	Outline Black Button
White Button	White Button	White Button

Action Buttons

Normal	Small	Large
Black Button	Black Button	Black Button
Outline Black Button	Outline Black Button	Outline Black Button
White Button	White Button	White Button

Disabled

Black Button

Outline Black Button

White Button

BlackButton

Outline Black Button

White Button

Default button Styles (Not to be used)

Default Button
(should not be used)

Default Button
(should not be used)

Default Button
(should not be used)

Breakpoints

Mobile = - 0-767px
Tablet = 768-991px
Desktop = 992-1199px
(not shown) XL Desktop = 1200px+
Note: individual components may use additional breakpoints, but this is the recommended values

Responsive Grid

Code may dictate how thigns break, but here is an example:
Mobile: 1 Column.
Tablet: 2 Column.
Desktop: 3 column.
XL Desktop: 6 column.

Gutter width: 30px (15px per side). No Padding on the top/bottom. (assumes top/bottom spacing is built into the component)

Containers

Spacing

Can use classes for spacing. For Padding and Margin, for Top,Bottom,Left,Right, and sizing of 0-4 (use Use as Small=2, Medium=3, Large=4)
Classes are structured as [p,m][t,b,l,r]-[0,1,2,3,4] eg: pt-4