Styleguide
General guidelines
Philosophy
One page = one task
Wherever possible pages should be simple, satisfying a clearly defined single customer task.
Layout
Preferred page layout is to centre all elements on the page (titles, tables, etc.). Text within paragraphs should be left-aligned.
Canvas Republic is built around the Skeleton CSS framework.
Typography & house style
All fonts are sized in rem, on a base of html { font-size: 62.5% }.
Default text size is 1.8rem (equivalent to 18px) for general text. Fonts below 1.6rem should only used sparingly.
Two font families are available:
- A serif font, Roboto, for headings, main navigation and prices. Weighting is either regular or bold.
- A sans-serif font, Roboto Sans, for everything else. Weighting is either light or regular
Titles should be initial cap only (i.e. "Heading text" not "Heading Text").
Main / page heading
An h1 tag. When used within a .page-title content block, text is centred and with top/bottom padding added.
Main page heading
Secondary heading
An h2 tag.
Secondary heading
Tertiary heading
An h3 tag, it should be used rarely. As per the site design philosophy, a page that requires an h3 should be an indicator that it is becoming too complicated (um, like this page).
Tertiary heading
Side heading
Used in two-column layouts (heading left, content right), for example the customer account pages. An h2 tag within a .side-title block.
Side heading
Lists
To remove list styling completely from a list element, use the .plain class.
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3