Stylesheet

This is the stylesheet where the developers grow, nurture and style the blocks . You can follow their progress below.
Once the blocks are ready, they get made into design patterns. Go check them out.
Finally, these design patterns then get used across the pages in the population stage.

Colours

Here are the colours available in the editor, for backgrounds colours (page sections/cards/buttons) and foreground colours (text/headers).

TBC

Typography

First, let’s check out our friends bold, italic, underline and ~~strikethrough~~. ~~All the things~~. And next, our typography all together as one big happy font family.

Heading 1 Large

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Copy Large

Body Copy Medium

Body Copy Small

Body Copy Extra Small

Next up, we have links. Links might also be bold or italic or both. (Check that the hover, active, visited and focus states look ok.)

And next we have headers but this time insitu, with a paragraph above and under each one to check for margins and paddings. Exciting!

Heading 1 Large and a link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 1 but it ends in italic and not bold

Heading 1 and a link

Heading 2 and a link

Heading 3 and a link

Heading 4 and a link

Heading 5 and a link

Heading 6 and a link

Large Body Copy:

Normal Body Copy:

Small Body Copy:

X-Small Body Copy

Buttons

Now, don’t get me wrong. Text and links are great, but nothing says “click me” like good old buttons. Let’s take a look:

Elevations

Just a fancy word for shadows really, innit?

Shadow 1

Keep your face to the sunshine and you cannot see a shadow.

Shadow 2

Time flies over us, but leaves its shadow behind.

Shadow 3

I decided long ago never to walk in anyone’s shadow; if I fail, or if I succeed at least I did as I believe.

Shadow 4

Loss and possession, death and life are one, There falls no shadow where there shines no sun.

Shadow 5

To light a candle is to cast a shadow.

Borders

No one can get bored of borders.

Rounded

I’ve learned that borders are where the actual ends, but also where the imagination and the story begins.

Misc Blocks

Here follows the other types of blocks. They don’t like being put into a category, so let’s categorise them as miscellaneous. (Ssshhh – don’t tell them.)

Below is a separator block. It separates things. Bask in its glory.

Below is a spacer block. Honestly.

And now we come to lists, unordered and ordered with sub lists. Everyone likes a good old-fashioned list.

UL

Bullet list item
Bullet list item with a link and text that spans over two lines of text at least hopefully it does
- Sub bullet list item
- Sub bullet list item
Bullet list item

OL

Ordered list item
Ordered list item with a link
1. Sub ordered list item
2. Sub ordered list item
Ordered list item

Tables

Tables next, but no chairs. Sad.

Text Table	Column title	Column title	Column title
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Footer label	Footer label	Footer label	Footer label

* And this is a table’s caption. It sits happily at the bottom of the table, biding its time.

Mixed Table	Column title	Column title	Column title
Lorem ipsum
Lorem ipsum			Lorem ipsum
Lorem ipsum		Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum
Footer label	Footer label	Footer label	Footer label

* And this is a table’s caption. It sits happily at the bottom of the table, biding its time.

Striped Table	Column title	Column title	Column title
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Footer label	Footer label	Footer label	Footer label

* And this is a table’s caption. It sits happily at the bottom of the table, biding its time.

Tabs

Just keeping tabs on these:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu.

Sociis natoque penatibus et magnis dis parturient montes. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Vestibulum sed arcu non odio euismod lacinia. Felis eget velit aliquet sagittis id consectetur purus ut. Elementum tempus egestas sed sed risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis magna etiam tempor orci eu.

Rows

A few rows sprinkled with different widths:

Row

Normal width

Row

Wide width

Row

Full width

Row

Normal width. Rounded and shadow class applied.

Video

Do not play. This will become your nightmare.

You played it didn’t you? Well, all I have to say is that you were warned.

Code

Sometimes used on API pages etc:

h1 {
    font-family: 'flexolight';
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    color: #f9981c;
    text-align: center;
}
    /* Tablet */
    h1 {
        font-size: 25px;
    }
        /* Mobile */
        h1 {
            font-size: 16px;
        }

Stylesheet

Colours

Typography

Heading 1 Large

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 Large and a link

Heading 1 but it ends in italic and not bold

Heading 1 and a link

Heading 2 and a link

Heading 3 and a link

Heading 4 and a link

Heading 5 and a link

Heading 6 and a link

Buttons

Elevations

Borders

Misc Blocks

UL

OL

Tables

Tabs

Rows

Row

Row

Row

Row

Video

Code

Form

Checkbox:

Radio Group: