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 0

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5
Heading 5
Heading 6
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
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.
Ordered List
  1. List Item 1
  2. 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
  3. List Item 3
  4. 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

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.

Text Right

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.

Text Justify

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.

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

scheme-1
.color-scheme-1
scheme-2
.color-scheme-2
scheme-3
.color-scheme-3
scheme-4
.color-scheme-4
scheme-5
.color-scheme-5

Button Modifiers

NOTE: Button Modifiers only works for all buttons.

Full Width
Large
Small
Square
Rounded

Input fields

Default input