Design Grid: Layout Specifications
-
Default Layout: 1140px Design Grid(header/footer, generic content, blog pages, 3-column grids)
-
3 x 360px design columns
-
30px gutters
-
-
Wide Layout: CSS 1440 Grid(wider home page content, 4-column grids for product listings etc)
-
4 x 330px columns
-
30px gutters
-
-
Tablet (iPad): 2 columns
-
Handheld (iPhone): 1 column
-
360px design columns from desktop layout may be pasted in and stacked
Colour Palette
Kournikova
#fdcb22
Conifer
#a6cf44
Elf Green
#198771
Scooter
#0888b0
Air Force Blue
#6192a8
Nile Blue
#123a5b
Schedule Colour Palette
Light Blue
#cadee9
[schedule]
Light Yellow
#fcf2b5
[schedule]
Light Green
#c8ded7
[schedule]
Light Pink
#e2d7e2
[schedule]
Lime Green
#e7f3c4
[schedule]
Light Grey
#e1e1e1
[schedule]
Typography: Font Pairing
Default Font: Open Sans
Font size: 1.5em
Font line height: 1.5em
Font weight: 400 (normal)
Managed in Appearance > Customize > Typography > Body
Heading Font: Raleway
Overriden in Appearance > Customize > Typography > Headings
For blogs that desire a special font for just the actual body of articles, fonts can be overridden in Appearance > Customize > Typography > Post Content and Appearance > Customize > Typography > Blog Entry Excerpt
H1 Heading goes here. H1 Heading goes here. H1 Heading goes here.
Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H1
H2 Heading goes here. H2 Heading goes here. H2 Heading goes here.
Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H2
H3 Heading goes here. H3 Heading goes here. H3 Heading goes here.
Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H3
H4 Heading goes here. H4 Heading goes here. H4 Heading goes here.
Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H4
This is a text block with a Drop Cap. It uses the “Extra class name “has-drop-cap”. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- List 1
- List 2
- Sub List 1
- Sub List 2
- Sub List 3
- List 3
- List 4
Body font: Nunito Sans. This is a link.
Managed in Customizing > Typography > General
Font size: 1.25em.
Managed in Customizing > Typography > Post Content
Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec3 ullamcorper2 mattis, pulvinar dapibus leo.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Kournikova
RGB: 253.203.34
HEX: #fdcb22
Conifer
RGB: 166.207.68
HEX: #a6cf44
Elf Green
RGB: 25.135.113
HEX: #198771
Scooter
RGB: 29.138.175
HEX: #0888b0
Air Force Blue
RGB: 97.146.168
HEX: #6192a8
Nile Blue
RGB: 18.58.91
HEX: #123a5b
- List 1
- List 2
- Sub List 1
- Sub List 2
- Sub List 3
- List 3
- List 4
Tables
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
To remove the banding add a class of “ruled” to your table