Styleguide

Colors

Base

  • $black

  • $white

Brand

    $brand-1

Grays

    $gray

    $gray-light

    $gray-lighter

Grid

Basics

12 / 12
6 / 12
6 / 12
4 / 12
4 / 12
4 / 12
3 / 12
3 / 12
3 / 12
3 / 12

Notes

The grid uses a combination of elements with row and col classes. These classes can be applied to any element, but div elements are most common. It's crucial to add not add any other styling to these grid elements.

The first descendant of a row has to be a col. This order is strict and no other combination of the two can exist.

Columns create gutters via padding. That padding is offset in nested rows via negative margin on the parent row.

The grid uses 12 columns per row. The default class for a 12 column element is col

By using the col-[number] class any combination that adds up to 12 can be made.

Mobile first

12 / 12
6 / 12
6 / 12
4 / 12
4 / 12
4 / 12
3 / 12
3 / 12
3 / 12
3 / 12

Notes

The grid scales up from mobile to larger screen sizes.

It's possible to define different widths for a column, based on the screen size by applying specific classes for those sizes.

For example; an element with col-small-6 col-medium-4 as classes will take up 12 columns on mobile, 6 columns on small widths and 4 columns on medium widths.

The following breakpoints have been defined; tiny (480px), small (600px), medium (960px) and large(1140px).

Resize the browser to see the media query specific column sizes in action.

Nesting

12 / 12
6 / 12
6 / 12
8 / 12
6 / 12
6 / 12
4 / 12

Notes

It's possible to endlessly nest grid elements. This can be achieved by following the rules set in the basic section.

It's important to note that every new row element adds 12 columns to be used within the parent element. To split up an 8 column wide element in two equal sections the nested columns would both need a col-6 class.

It's possible to create different offsets per media query by using the breakpoints that are defined in the mobile first section.

Offsets

5 / 12
5 / 12
2 / 12
2 / 12
2 / 12
7 / 12
2 / 12

Notes

By applying the col-offset-[number] class to a column it's possible to create an offset to the right. Each number equals the width of 1 column, so col-offset-2 would move the column two column widths to the right.

This behaviour is created by applying margin-left to the column.

It's possible to create different offsets per media query by using the breakpoints that are defined in the mobile first section.

For example; an element with col-small-6 col-small-offset-2 col-medium-offset-4 as classes will have no offset on mobile devices, will have an offset of 2 columns on small screen sizes and will have an offset of 4 columns on medium screen sizes.

Push and pull

8 / 12
4 / 12

Notes

The col-push-[number] and col-pull-[number] classes are similar to the col-offset-[number] class.

Instead of using margin-left to offset the columns, push and pull use relative positioning. This allows more flexibility when it comes to seperating semantic order and visual order.

The code example shows that although the 4 columns wide element appears first in the page, it actually comes last in the code.

The push class moves elements to the right and the pull class moves elements to the left.

It's possible to create different offsets per media query by using the breakpoints that are defined in the mobile first section.

For example; col-medium-push-4 would move the element 4 column widths to the right on medium screen sizes and up.

Typefaces

Work Sans

Uppercase

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Lowercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

Numerals

0 1 2 3 4 5 6 7 8 9

Punctuation

. , : ; … “ ” ‘ ’ ! ? # & % – — _ « » [ ] { } ( ) • *

Math symbols

+ − × ÷ = ≠ ≈ ∼ ¬ < > ± ≤ ≥ ∞ / |

Currency

¤ € ¢ £ $ ¥

Ligatures

fb ffb ff fh ffh fi ffi fj ffj fk ffk fl ffl ft fft rf rff rt tf tt

Notes

Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei. The Regular weight and others in the middle of the family are optimised for on-screen text usage at medium-sizes (14px-48px) and can also be used in print design. The fonts closer to the extreme weights are designed more for display use both on the web and in print. Overall, features are simplified and optimised for screen resolutions; for example, diacritic marks are larger than how they would be in print. A version optimised for desktop applications is available from the Work Sans github project page.

Inconsolata

Uppercase

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Lowercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

Numerals

0 1 2 3 4 5 6 7 8 9

Punctuation

. , : ; … “ ” ‘ ’ ! ? # & % – — _ « » [ ] { } ( ) • *

Math symbols

+ − × ÷ = ≠ ≈ ∼ ¬ < > ± ≤ ≥ ∞ / |

Currency

¤ € ¢ £ $ ¥

Ligatures

fb ffb ff fh ffh fi ffi fj ffj fk ffk fl ffl ft fft rf rff rt tf tt

Notes

Inconsolata was Raph Levien's first serious original font release. It is a monospace font, designed for printed code listings and the like. There are a great many “programmer fonts,” designed primarily for use on the screen, but in most cases do not have the attention to detail for high resolution rendering.

Buttons

Basic

Notes

The button element represents a button labeled by its contents.

The type attribute controls the behaviour of the button when it is activated.

Favicons

Collection

Notes

A favicon is an icon associated with a URL that is variously displayed, as in a browser's address bar or next to the site name in a bookmark list.

Form elements

Text fields

Notes

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

The type attribute controls the data type (and associated control) of the element.

The textarea element represents a multiline plain text edit control for the element's raw value.

Selects

Notes

The select element represents a control for selecting amongst a set of options.

Checkboxes

Select

Notes

The checkbox input type attribute represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection.

Radio buttons

Choose

Notes

The radio input type attribute represents a control that, when used in conjunction with other input elements, forms a radio button group in which only one control can have its checkedness state set to true.

Logos

Collection

Notes

A logo is a graphic mark, emblem or symbol commonly used by commercial enterprises, organizations and even individuals to aid and promote instant public recognition.

Typography

headers

Lynx c.q. vos prikt bh: dag zwemjuf!

Lynx c.q. vos prikt bh: dag zwemjuf!

Lynx c.q. vos prikt bh: dag zwemjuf!

Lynx c.q. vos prikt bh: dag zwemjuf!

Lynx c.q. vos prikt bh: dag zwemjuf!

Lynx c.q. vos prikt bh: dag zwemjuf!

Notes

The h1h6 elements are headings.

The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

Paragraphs

Typography is the art and technique of arranging type to make written language readable and beautiful. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).

Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern times, typography has been put in film, television and online broadcasts to add emotion to communication.

The HTML Small Element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Notes

The p element represents a paragraph.

The small element represents side comments such as small print.

Header

Notes

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.