Style guide

Documentation on how we want to style things, why we decided things should be that way, and copy-pastable code snippets.

Usage

Whenever content cannot be shown immediately insert a loading placeholder, placeholder should be the width/height of the section being loaded (as much as possible to predict).

Reasoning

Code

<p class="loading"><i class="icon-cog icon-spin"></i> Loading...</p>

Example

Loading...

Usage

Actions (buttons, links or labels) related to a heading, just add a .hX-right to a div before the heading.

Reasoning

Code

<div class="h2-right"><button class="btn">Action</button></div>
<h2>Test</h2>

<div class="h2-right"><span class="label label-important">label</span></div>
<h2>Test</h2>

Example

Test

Content here, this is in a narrow box to make things more clear.

label

Test

Content here, this is in a narrow box to make things more clear.


Usage

When would I use this feature?

Reasoning

Code

Something I can copy paste to get going

Example

How does it look?