//TODO: insert all the default css here. //Prob: I didn't include a whole lot of styles, just page layouts //Insert the actual class names to the table half. //Insert more stuff, like a complete, live product card via renderProduct() (or examples, like with the badges, swatches/buynow) This is a legit theme page, it should have full access to everything in theme.*, or the liquid. //TODO, maybe: create more default classes, see the header__1, etc., slap that throughout the theme. Probably best to do in conjuction with the turnkey theme. Demo my scroller thing, so people stop taking it out.
Here's a centered page with 1/2 col width gutters Nobody ever seems to use w11, in favor of the breakpoints. I think it is max responsive.

Typography

HEADER 1
HEADER 2
HEADER 3
SUBHEADER 1
SUBHEADER 2 / Subheader 2
SUBHEADER 3
Body copy 1
Body copy 2
Body copy 3
Body copy 3

Type Styles

Global Components

Typography

and such

diverse things
anon
Element Displays
h1

Heading 1

 Heading 1
h2

Heading 2

 Heading 2
h3

Heading 3

 Heading 3
h4

Heading 4

 Heading 4
h5
Heading 5
 Heading 5
h6
Heading 6
 Heading 6
Body Copy Body copy Body copy
Body Copy Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body Copy

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Input Label Label
Button - Primary
Button - Outline
Button - Inverse
Text Link Default Hover Pressed Disabled
Text Link - Inverse Default Hover Pressed Disabled
Tabs Default Active

Forms

Fieldset - Legend
Input TypeDisplayInput TypeDisplay
Informational subtext
Liquid error (templates/page.typography line 275): Could not find asset snippets/icon-search.liquid

tables

Table HeadingTable HeadingTable Heading
Table CellTable CellTable Cell
Table CellTable CellTable Cell

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Typography


This is an H1 Title

This is an H2 Title

This is an H3 Title

This is an H4 Title

This is an H5 Title
This is an H6 Title

This is body copy, all set in Montserrat - Regular . Letter spacing and leading is pre-defined in the styles.

Buttons and Links Variations

Use these classes for button color variations

View More This is an anchor tag Dark Button Light Button Outline Button Outline Dark Button Outline Light Button Full Width

Forms and elements