craigmcn

Style Guide

Colours

Default

#222
rgb(34, 34, 34)
hsl(0, 0%, 13%)

Primary

#005b99
rgb(0, 91, 153)
hsl(204, 100%, 30%)

Secondary

#993d00
rgb(153, 61, 0)
hsl(24, 100%, 30%)

Information

#03607d
rgb(3, 96, 125)
hsl(194, 95%, 25%)

Success

#036803
rgb(3, 104, 3)
hsl(120, 94%, 21%)

Warning

#695802
rgb(105, 88, 2)
hsl(50, 96%, 21%)

Danger

#b60202
rgb(182, 2, 2)
hsl(0, 98%, 36%)

Dark mode

A dark mode is available by adding data-mode="dark" to the <html> tag or class="theme--dark" to the <body> tag.

Typography

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

Paragraphs

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie. Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

You can add a <span class="lede"/> for emphasis of the first part of a paragraph.

Maecenas commodo malesuada eros vitae pellentesque. In suscipit finibus molestie. Sed in ultricies dolor. Vivamus quis varius nisl, at fringilla felis. Sed faucibus ullamcorper arcu in commodo. Cras euismod lacus id volutpat porta. Etiam vel posuere enim, eu accumsan sem. Mauris ante purus, mattis quis ante vel, iaculis mattis nulla. Donec finibus sem nec dictum vestibulum. Sed vitae augue quis ligula efficitur fermentum non eu nulla. Proin tincidunt ullamcorper blandit.

Pellentesque efficitur et orci nec lacinia. Integer congue justo in libero eleifend ullamcorper. Nullam rutrum, lorem eget efficitur placerat, turpis libero faucibus est, at aliquam arcu justo sit amet nibh. Sed mollis enim tristique tortor pulvinar bibendum. Nullam vel maximus dolor, at ornare velit. Nunc efficitur elit at felis pulvinar, vel fermentum justo gravida. Proin volutpat quam neque, in porta elit cursus at. Nam id velit semper, finibus sem id, fermentum sapien. Aliquam lobortis nisl a libero fringilla sollicitudin.

Links

Heading 2 link

Heading 3 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nulla tempus massa eu est ullamcorper, luctus pellentesque leo molestie.

Etiam ipsum magna, egestas ac massa gravida, condimentum scelerisque leo.

Remove :hover, :active and :visited styles by adding the permanent class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text variants

Primary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary lorem ipsum dolor sit amet, consectetur adipiscing elit.

Information lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted lorem ipsum dolor sit amet, consectetur adipiscing elit.

Forms

Some help text for this input.

Checkbox group
Radio group

Inline

Buttons

Button classes can be applied to <a>, <button> or <input type="button|submit|reset"> tags.

Link

Buttons also come in a -dark variant.

Buttons also come in three sizes: default, button--sm and button--lg.

Alerts

Alerts come in a few flavours: default, information (info), success, warning and error. Links within the message will inherit the alert text colour, losing the hover, active and visited states.

Alerts with an alert__close button:

<button type="button" class="alert__close" aria-label="Close"><span class="fa-light fa-xl fa-xmark"></i></button>

will be hidden (display: none;) when closed. Alerts with the alert--removable class will be removed from the DOM when closed.

The alert--overlay class will overlay the alert at the top of its position: relative container.

The alert--sm class is intended to be used inside a component, and generally not at a page level.

Lists

Lists are default-styled, with a little extra margin and line-spacing. The bullets are outside, allowing the text to align with other body text.

Classes can be applied at the ol and ul level to specify the type of number or bullet to be applied: list list--alpha (a, b, c), list list--roman (i, ii, iii), list list--circle, list list--disc, list list--square, list list--none.

Ordered lists

List 1

  1. List item
    multi-line
  2. List item
    1. Nested ordered item
    2. Nested ordered item
    3. Nested ordered item
  3. List item

List 2

  1. List item
  2. List item
    • Nested unordered item
    • Nested unordered item
    • Nested unordered item
  3. List item

Unordered lists

List 1

List 2

Plain lists

List

Cards

Already used as an example for Colours, cards have a title and body.

Default

The default card style.

Primary

The primary colour card.

Secondary

The secondary colour card.

Information

The information colour card.

Success

The success colour card.

Warning

The warning colour card.

Danger

The danger colour card.

Dark variants

As with buttons, cards also come in a -dark variant.

Primary dark

The dark variant of the primary colour card.

Secondary

The dark variant of the secondary colour card.

Information

The dark variant of the information colour card.

Success

The dark variant of the success colour card.

Warning

The dark variant of the warning colour card.

Danger

The dark variant of the danger colour card.

Images

Only a few classes exist to display images, and they’re only to apply a little style around images:

img img--default
img img--round. A circle requires a square image.
img img--rounded
img img--padded
img img--round img--padded
img img--border img--padded
img img--border img--rounded
img

Images from placebeard.it.

Utilities

Some utility classes are available to handle specific needs, not handled by other components.

Spacing

Spacing utilities can be used to apply margins and padding on inline-block or block-level elements. Margin classes use the m- prefix and padding uses p-.

Spacing can be applied on each side (top, right, bottom, left), horizontally (left, right), vertically (top, bottom) or on all sides.

Spacing has six sizes: 0 (0px), xs (0.25rem), sm (0.5rem), md (1rem), lg (1.5rem), xl (2rem).

For example:

Text

Text utilities can be used on both block-level and inline elements.

Text colour utilities match the alerts, buttons and cards colours:

Primary colour text using class="text--primary".

Secondary colour text using class="text--secondary".

Information colour text using class="text--info".

Success colour text using class="text--success".

Warning colour text using class="text--warning".

Danger colour text using class="text--danger".

Muted colour text using class="text--muted".

Text size

Text size utilities are relative to the containing element (em not rem):

Small text using class="text--small". This size matches the <small> tag.

Large text using class="text--large".

Other text utilities

“Normal” weight h4 heading with class="text--normal". It can be used to reset font weight in headings or bold text.

Bold text using class="text--bold". It’s not quite as bold as <strong> .
Strong text, for reference.

Light text using class="text--light".

Uppercase text using class="text--upper". For example, use it with text--small and text--light for fun variations.