Core Framework Cheatsheet

Columns Classes

Create a columns layout using our CSS grid classes

Desktop and below

6 columns

c-columns-6

5 columns

c-columns-5

4 columns

c-columns-4

3 columns

c-columns-3

2 columns

c-columns-2

1400px and less

5 columns

c-columns-xl-5

4 columns

c-columns-xl-4

3 columns

c-columns-xl-3

2 columns

c-columns-xl-2

2 columns

c-columns-xl-1

992px and less

4 columns

c-columns-l-4

3 columns

c-columns-l-3

2 columns

c-columns-l-2

1 column

c-columns-l-1

768px and less

3 columns

c-columns-m-3

2 columns

c-columns-m-2

1 column

c-columns-m-1

480px and less

2 columns

c-columns-s-2

1 column

c-columns-s-1

Special Columns

1 to 3 parts

c-columns-1-3

3 to 1 part

c-columns-3-1

1 to 2 parts

c-columns-1-2

2 to 1 part

c-columns-2-1

2 to 3 parts

c-columns-2-3

3 to 2 parts

c-columns-3-2

Column Sizing

Change the size of the column cells

Desktop Column Span

Span 6 columns

c-col-span-6

Span 5 columns

c-col-span-5

Span 4 columns

c-col-span-4

Span 3 columns

c-col-span-3

Span 2 columns

c-col-span-2

Span 1 column

c-col-span-1

1400px and less

Span 6 columns

c-col-span-xl-6

Span 5 columns

c-col-span-xl-5

Span 4 columns

c-col-span-xl-4

Span 3 columns

c-col-span-xl-3

Span 2 columns

c-col-span-xl-2

Span 1 column

c-col-span-xl-1

992px and less

Span 6 columns

c-col-span-l-6

Span 5 columns

c-col-span-l-5

Span 4 columns

c-col-span-l-4

Span 3 columns

c-col-span-l-3

Span 2 columns

c-col-span-l-2

Span 1 column

c-col-span-l-1

768px and less

Span 6 columns

c-col-span-m-6

Span 5 columns

c-col-span-m-5

Span 4 columns

c-col-span-m-4

Span 3 columns

c-col-span-m-3

Span 2 columns

c-col-span-m-2

Span 1 column

c-col-span-m-1

480px and less

Span 6 columns

c-col-span-s-6

Span 5 columns

c-col-span-s-5

Span 4 columns

c-col-span-s-4

Span 3 columns

c-col-span-s-3

Span 2 columns

c-col-span-s-2

Span 1 column

c-col-span-s-1

Row Sizing

Change the size of the row cells

Desktop Column Span

Span 6 rows

c-row-span-6

Span 5 rows

c-row-span-5

Span 4 rows

c-row-span-4

Span 3 rows

c-row-span-3

Span 2 rows

c-row-span-2

Span 1 row

c-row-span-1

1400px and less

Span 6 rows

c-row-span-xl-6

Span 5 rows

c-row-span-xl-5

Span 4 rows

c-row-span-xl-4

Span 3 rows

c-row-span-xl-3

Span 2 rows

c-row-span-xl-2

Span 1 row

c-row-span-xl-1

992px and less

Span 6 rows

c-row-span-l-6

Span 5 rows

c-row-span-l-5

Span 4 rows

c-row-span-l-4

Span 3 rows

c-row-span-l-3

Span 2 rows

c-row-span-l-2

Span 1 row

c-row-span-l-1

768px and less

Span 6 rows

c-row-span-m-6

Span 5 rows

c-row-span-m-5

Span 4 rows

c-row-span-m-4

Span 3 rows

c-row-span-m-3

Span 2 rows

c-row-span-m-2

Span 1 row

c-row-span-m-1

480px and less

Span 6 rows

c-row-span-s-6

Span 5 rows

c-row-span-s-5

Span 4 rows

c-row-span-s-4

Span 3 rows

c-row-span-s-3

Span 2 rows

c-row-span-s-2

Span 1 row

c-row-span-s-1

Column Start Position

Set a starting column position of the cell

Desktop Column Position

Start on 6th column

c-col-start-6

Start on 5th column

c-col-start-5

Start on 4th column

c-col-start-4

Start on 3rd column

c-col-start-3

Start on 2nd column

c-col-start-2

Start on 1st column

c-col-start-1

1400px and less

Start on 6th column

c-col-start-xl-6

Start on 5th column

c-col-start-xl-5

Start on 4th column

c-col-start-xl-4

Start on 3rd column

c-col-start-xl-3

Start on 2nd column

c-col-start-xl-2

Start on 1st column

c-col-start-xl-1

992px and less

Start on 6th column

c-col-start-l-6

Start on 5th column

c-col-start-l-5

Start on 4th column

c-col-start-l-4

Start on 3rd column

c-col-start-l-3

Start on 2nd column

c-col-start-l-2

Start on 1st column

c-col-start-l-1

768px and less

Start on 6th column

c-col-start-m-6

Start on 5th column

c-col-start-m-5

Start on 4th column

c-col-start-m-4

Start on 3rd column

c-col-start-m-3

Start on 2nd column

c-col-start-m-2

Start on 1st column

c-col-start-m-1

480px and less

Start on 6th column

c-col-start-s-6

Start on 5th column

c-col-start-s-5

Start on 4th column

c-col-start-s-4

Start on 3rd column

c-col-start-s-3

Start on 2nd column

c-col-start-s-2

Start on 1st column

c-col-start-s-1

Row Start Position

Set a starting row position of the cell

Desktop Row Position

Start on 6th row

c-row-start-6

Start on 5th row

c-row-start-5

Start on 4th row

c-row-start-4

Start on 3rd row

c-row-start-3

Start on 2nd row

c-row-start-2

Start on 1st row

c-row-start-1

1400px and less

Start on 6th row

c-row-start-xl-6

Start on 5th row

c-row-start-xl-5

Start on 4th row

c-row-start-xl-4

Start on 3rd row

c-row-start-xl-3

Start on 2nd row

c-row-start-xl-2

Start on 1st row

c-row-start-xl-1

992px and less

Start on 6th row

c-row-start-l-6

Start on 5th row

c-row-start-l-5

Start on 4th row

c-row-start-l-4

Start on 3rd row

c-row-start-l-3

Start on 2nd row

c-row-start-l-2

Start on 1st row

c-row-start-l-1

768px and less

Start on 6th row

c-row-start-m-6

Start on 5th row

c-row-start-m-5

Start on 4th row

c-row-start-m-4

Start on 3rd row

c-row-start-m-3

Start on 2nd row

c-row-start-m-2

Start on 1st row

c-row-start-m-1

480px and less

Start on 6th row

c-row-start-s-6

Start on 5th row

c-row-start-s-5

Start on 4th row

c-row-start-s-4

Start on 3rd row

c-row-start-s-3

Start on 2nd row

c-row-start-s-2

Start on 1st row

c-row-start-s-1

Padding Classes

Create a fully responsive padding by adding one class

Padding All Sides

c-padding-xs

c-padding-s

c-padding-m

c-padding-l

c-padding-xl

XXL

c-padding-xxl

Padding Left

c-padding-left-xs

c-padding-left-s

c-padding-left-m

c-padding-left-l

c-padding-left-xl

XXL

c-padding-left-xxl

Padding Right

c-padding-right-xs

c-padding-right-s

c-padding-right-m

c-padding-right-l

c-padding-right-xl

XXL

c-padding-right-xxl

Padding Top

c-padding-top-xs

c-padding-top-s

c-padding-top-m

c-padding-top-l

c-padding-top-xl

XXL

c-padding-top-xxl

Padding Bottom

c-padding-bottom-xs

c-padding-bottom-s

c-padding-bottom-m

c-padding-bottom-l

c-padding-bottom-xl

XXL

c-padding-bottom-xxl

Margin Classes

Create a fully responsive margin by adding one class

Margin All Sides

c-margin-xs

c-margin-s

c-margin-m

c-margin-l

c-margin-xl

XXL

c-margin-xxl

Margin Left

c-margin-left-xs

c-margin-left-s

c-margin-left-m

c-margin-left-l

c-margin-left-xl

XXL

c-margin-left-xxl

Margin Right

c-margin-right-xs

c-margin-right-s

c-margin-right-m

c-margin-right-l

c-margin-right-xl

XXL

c-margin-right-xxl

Margin Top

c-margin-top-xs

c-margin-top-s

c-margin-top-m

c-margin-top-l

c-margin-top-xl

XXL

c-margin-top-xxl

Margin Bottom

c-margin-bottom-xs

c-margin-bottom-s

c-margin-bottom-m

c-margin-bottom-l

c-margin-bottom-xl

XXL

c-margin-bottom-xxl

Other Spacing & Sizing

More spacing and sizing classes

Gaps Between Columns

c-columns-gap-xs

c-columns-gap-s

c-columns-gap-m

c-columns-gap-l

c-columns-gap-xl

XXL

c-columns-gap-xxl

Element Max Width

320px

c-max-width-320

480px

c-max-width-480

640px

c-max-width-640

960px

c-max-width-960

1120px

c-max-width-1120

Owl Spacing

c-owl-xs

c-owl-s

c-owl-m

c-owl-l

c-owl-xl

XXL

c-owl-xxl

Typography Classes

Combine size + color class to create a heading or paragraph

Heading Size

Bold H1

c-h1-fat

c-h1

c-h2

c-h3

c-h4

c-h5

Heading Color

Light

c-heading-light

Light Alt

c-heading-light-alt

Dark

c-heading-dark

Dark Alt

c-heading-dark-alt

Accent

c-heading-accent

Accent Alt

c-heading-accent-alt

Text Size

Small

c-text-s

Medium

c-text-m

Large

c-text-l

X-Large

c-text-xl

Text Color

Light

c-text-light

Dark

c-text-dark

Accent

c-text-accent

Text Styles

Uppercase

c-uppercase

Lowercase

c-lowercase

Underline

c-underline

Bold

c-bold

Italic

c-italic

Alignment Classes

Align items by using one these classes

Self Alignment In The Container

Align self to center

c-center-self

Align self to left

c-left-self

Align self to right

c-right-self

Basic Alignment

Align to center

c-center

Align to left

c-left

Align to right

c-right

Top Alignment

Align to Top / Center

c-top-center

Align to Top / Left

c-top-left

Align to Top / Right

c-top-right

Middle Alignment

Align to Middle / Center

c-middle-center

Align to Middle / Left

c-middle-left

Align to Middle / Right

c-middle-right

Bottom Alignment

Align to Bottom / Center

c-bottom-center

Align to Bottom / Left

c-bottom-left

Align to Bottom / Right

c-bottom-right

Design Classes

More classes to use when designing layouts

Useful

Global Transition

c-transition

Position: relative

c-relative

Box Shadow

c-shadow

Border Radius

c-rounded

Light Border

c-border-light

Dark Border

c-border-dark

Button style

Main

c-btn-main

Alt

c-btn-alt

Transparent

c-btn-transparent

Button size

Small

c-btn-s

Medium

c-btn-m

Large

c-btn-l

X-Large

c-btn-xl

Backgrounds

Light

c-bg-light

Light Alt

c-bg-light-alt

Dark

c-bg-dark

Dark Alt

c-bg-dark-alt

Accent

c-bg-accent

Accent Alt

c-bg-accent-alt

Link style

Accent Link

c-link-accent

Light Link

c-link-light

Dark Link

c-link-dark

Link size

c-link-s

c-link-m

c-link-l

c-link-xl

Opacity

.25

c-opacity-25

.50

c-opacity-50

.75

c-opacity-75

Blur the background

Small

c-bg-blur-s

Medium

c-bg-blur-m

Large

c-bg-blur-l

X-Large

c-bg-blur-xl

Cards

Light Card

c-card-light

Dark Card

c-card-dark

Accent Color Card

c-card-accent

Avatars

Small

c-avatar-s

Medium

c-avatar-m

Large

c-avatar-l

X-Large

c-avatar-xl

Icon Classes

Use our predefined classes for icon element

Accent Icons

Small Accent Icon

c-icon-accent-s

Medium Accent Icon

c-icon-accent-m

Large Accent Icon

c-icon-accent-l

Dark Icons

Small Dark Icon

c-icon-dark-s

Medium Dark Icon

c-icon-dark-m

Large Dark Icon

c-icon-dark-l

Light Icons

Small Light Icon

c-icon-light-s

Medium Light Icon

c-icon-light-m

Large Light Icon

c-icon-light-l