Styleguide
Custom colors

Accent

Attention grabbing elements, bg’s

Accent darker

Accent hover, Links

Dark

Body, bg’s

Dark darker

Titles, bg’s

Light

Titles, bg’s

Light darker

Body, bg’s

Accent 2

Attention grabbing elements

Accent 2 darker

Accent 2 hover

Headings
Title 1

Lorem ipsum dolor sit anet consectetur adipiscing elit

Title 2

Lorem ipsum dolor sit anet consectetur adipiscing elit

Title 3

Lorem ipsum dolor sit anet consectetur adipiscing elit

Title 4

Lorem ipsum dolor sit anet consectetur adipiscing elit

Title 5
Lorem ipsum dolor sit anet consectetur adipiscing elit
Title 6
Lorem ipsum dolor sit anet consectetur adipiscing elit
Title 7
Lorem ipsum dolor sit anet consectetur adipiscing elit
Subheading
Lorem ipsum dolor sit anet consectetur adipiscing elit
Body texts & links
Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Body bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Body large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Body small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Content width of 1120px
Computer:

Padding 5%, 5%, 5%, 5%.

Tablet:

Padding 5%, 5%, 5%, 5%.

Mobile:

Padding 10%, 5%, 10%, 5%.

This is a light soft boxed container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is an accent boxed container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a dark soft boxed container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Flex grow same size containers

This is the perfect solution for wrapping, because you never have to use px, it’s the same on desktop, tablet and mobile and you can even change the element gap from 20 to 30px. Your backgrounds containers should be on boxed. Values used: 1120 for ultra wide & desktop, 90% for laptop, tablet extra, tablet, mobile extra, then mobile on 90%. Make sure to add the extra responsive breakpoints otherwise it’s not as my example.

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
1
2
3
4
5
1
2
3