Bricks Design Set

Colors

Primary

Primary dark 1

Primary dark 2

Primary dark 3

Primary dark 4

Primary dark 5

Primary light 1

Primary light 2

Primary light 3

Primary light 4

Primary light 5

Secondary

Secondary dark 1

Secondary dark 2

Secondary dark 3

Secondary dark 4

Secondary dark 5

Secondary light 1

Secondary light 2

Secondary light 3

Secondary light 4

Secondary light 5

Tertiary

Tertiary dark 1

Tertiary dark 2

Tertiary dark 3

Tertiary dark 4

Tertiary dark 5

Tertiary light 1

Tertiary light 2

Tertiary light 3

Tertiary light 4

Tertiary light 5

Accent

Accent dark 1

Accent dark 2

Accent dark 3

Accent dark 4

Accent dark 5

Accent light 1

Accent light 2

Accent light 3

Accent light 4

Accent light 5

Border radius

Use utilities like radius-xs, radius-l, radius-xl to apply different border radius sizes to an element.

var(–radius-xs)

var(–radius-s)

var(–radius-m)

var(–radius-l)

var(–radius-xl)

var(–radius-full)

Buttons

I am a button

.btn-primary

I am a button

.btn-primary-outline

I am a button

.btn-secondary

I am a button

.btn-xl

I am a button

.btn-l

I am a button

.btn-m

I am a button

.btn-s

Fluid Font Size

var(--text-xs)The quick brown fox jumps over the lazy dog

var(--text-s)The quick brown fox jumps over the lazy dog

var(--text-m)The quick brown fox jumps over the lazy dog

var(--text-l)The quick brown fox jumps over the lazy dog

var(--text-xl)The quick brown fox jumps over the lazy dog

var(--text-2xl)The quick brown fox jumps over the lazy dog

var(--text-3xl)The quick brown fox jumps over the lazy dog

var(--text-4xl)The quick brown fox jumps over the lazy dog

Fluid Spacing

Once you have customized the desired spacing, copy the generated variable and paste it into the bricks builder.

var(--space-4xs)

var(--space-3xs)

var(--space-2xs)

var(--space-xs)

var(--space-s)

var(--space-m)

var(--space-l)

var(--space-xl)

var(--space-2xl)

var(--space-3xl)

var(--space-4xl)

Shadows

shadow-xs

.shadow-s

.shadow-m

.shadow-l

.shadow-xl

Grid

By default, on all breakpoints, we have added numerous classes which you can use to create your CSS grids. As for the amount of columns you can have, by default, we have added 8 which are as follows:

.column .columns-2 .columns-3 .columns-4 .columns-5 .columns-6 .columns-7 .columns-8

.columns-4 .columns-2-on-l .gap-m .full-width

Here is a basic example, a container with 8 elements inside of it. To display this as 4 columns, we can simply apply the .columns-4 class.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

Grid Item 7

Grid Item 8

Next, let’s say we want this to collapse to two columns on the tablet device, and then to one column on smartphones. First, let’s take a look at the breakpoints available to us: X-Small (xs), Small (s), Medium (m), Large (l), X-Large (xl)

We have conveniently added suffixes to our classes for each breakpoint: --on-xs, --on-s, --on-m, --on-l, --on-xl

.row-span-2 .row-span-1-on-l

Next, let’s say we want to span an element across two rows. To achieve this, simply add the .row-span-2 class to the element you would like to span.

Let’s say we want to set it back to default (no spanning) on tablets and below. We can simply add a new class to our first column. In this case, let’s add the .row-span-1--on-l class. We are once again using the suffixes here.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

Grid Item 7

Now, let’s imagine we would like the element labelled “2” to span across 2 columns, then we can simply add the .col-span-2 to the element:

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

Grid Item 7

Now, let’s go one step further and make the same element span across 2 rows as well. We can add the same class as in the previous section; .row-span-2 to the same element:

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

To fix mobile, we can add some classes for the L breakpoint. In essence, we will simply reset that element for the large breakpoint. Add the following classes to the element: .col-span-1--on-l and .row-span-1--on-l

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus. Aenean pulvinar nisl et vestibulum commodo. Quisque euismod tempus dignissim. Quisque dictum luctus velit, eu viverra urna tristique non. Vivamus at dolor tellus. Cras congue sapien non turpis dapibus, et vestibulum ante ultrices. Mauris eu nisi non sapien fermentum fermentum in eu odio. Fusce congue elit et tortor sagittis, sit amet auctor risus sagittis.

This line contains _subscript text.

This line contains ^superscript text.

This line contains code.

This line contains small text.

This line contains highlighted text

.preformatted-code { background-color: #FFF; }

Unordered list item
Unordered list item
Unordered list item
Unordered list item

First ordered list item
Second ordered list item
Third ordered list item
Fourth ordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus. Aenean pulvinar nisl et vestibulum commodo. Quisque euismod tempus dignissim.

Tables

.table .table-hover

Header column one	Header column two	Header column three
Row one column one	Row one column two	Row one column three
Row two column one	Row two column two	Row two column three
Row three column one	Row three column two	Row three column three
Row four column one	Row four column two	Row four column three

.table .table-bordered

Header column one	Header column two	Header column three
Row one column one	Row one column two	Row one column three
Row two column one	Row two column two	Row two column three
Row three column one	Row three column two	Row three column three
Row four column one	Row four column two	Row four column three

.table .table-bordered .table-striped

Header column one	Header column two	Header column three
Row one column one	Row one column two	Row one column three
Row two column one	Row two column two	Row two column three
Row three column one	Row three column two	Row three column three
Row four column one	Row four column two	Row four column three

Animations

Fade In

fadeIn

fadeInUp

fadeInRight

fadeInDown

fadeInLeft

Zoom In

zoomIn