Styleguide

Colors

Brand Colors

foreground --color-foreground

background --color-background

dark --color-dark

lime --color-lime

blue --color-blue

light --color-light

Secondary Colors

black --color-black

white --color-white

text dark --color-text-dark

Color Schemes

Use .color-{scheme-id} class.

scheme-1
.color-scheme-1

Scheme 1

This is the default color scheme.

scheme-2
.color-scheme-2

Scheme 2

This is the second scheme option.

scheme-3
.color-scheme-3

Scheme 3

This is the thirth scheme option.

scheme-4
.color-scheme-4

Scheme 4

This is the fourth scheme option.

scheme-5
.color-scheme-5

Scheme 5

This is the fifth scheme option.

Typography

Headings

These are the default styles fore headings, will be applied in the whole website.
You can set a class to a different heading tag. Eg.
We can set .h2 styles to an H1 element: <h1 class=".h2">Heading<h1> class.

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.

Small

Ordered List

List Item 1
List Item 2
1. List Item 1
2. List Item 2
3. List Item 3
4. List Item 4
  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
List Item 3
List Item 4

Unordered List

List Item 1
List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 4
  - List Item 1
  - List Item 2
  - List Item 3
  - List Item 4
List Item 3
List Item 4

Definition List

Definition list: Consectetur adipisicing 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.
Lorem ipsum dolor sit amet: Consectetur adipisicing 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.

Text Helpers

Use .text-{property} class.

Text Center

Text Right

Text Justify

Tables

Table

head1	head2	head3	head4	head5
cell1_1	cell2_1	cell3_1	cell4_1	cell5_1
cell1_2	cell2_2	cell3_2	cell4_2	cell5_2
cell1_3	cell2_3	cell3_3	cell4_3	cell5_3
cell1_4	cell2_4	cell3_4	cell4_4	cell5_4
cell1_5	cell2_5	cell3_5	cell4_5	cell5_5
cell1_6	cell2_6	cell3_6	cell4_6	cell5_6

Button

Buttons by Color Scheme