@contentful/forma-36-fcss

Forma 36 FCSS

Forma 36 FCSS - Utility CSS classes for applying spacing, colors, typography, shadows, and transitions to elements.

Getting started

Install the package to your project

yarn add @contentful/forma-36-fcss

Or for NPM

npm i @contentful/forma-36-fcss

Import the styles.css file into your stylesheet.

@import '@contentful/forma-36-fcss/dist/styles.css'

Naming convention

The class names consist out of the prefix (e.g. .f36-) the attribute (e.g. margin-bottom) and the scale or modifier (--xs). See a list of all class names below

Spacing

Margin

margin-top
margin-bottom
margin-right
margin-left
margin
margin-horizontal
margin-vertical

Scale:
xs, s, m, l, xl, 2xl, 3xl, 4xl

Class name composition example:

 .f36-margin-top--xs

Padding

padding-top
padding-bottom
padding-right
padding-left
padding
padding-horizontal
padding-vertical

Scale:
xs, s, m, l, xl, 2xl, 3xl, 4xl

Class name composition example:

 .f36-padding-top--xs

Typography

Font Families

.f36-font-family--sans-serif
.f36-font-family--monospace

Typography Scale

font-size

Scale:
s, m, l, xl, 2xl, 3xl

Class name composition example:

 .f36-font-size--s

Weights

font-weight

Scale:
normal, medium, demi-bold

Class name composition example:

.f36-font-weight--normal

Line Height

line-height

Scale:
default, condensed

Classname composition example:

.f36-line-height--default

Colors

Text Colors & Backgrounds

Semantic Colors:

Color	Background
.f36-color--primary,	.f36-background-color--primary
.f36-color--positive	.f36-background-color--positive
.f36-color--negative	.f36-background-color--negative
.f36-color--warning	.f36-background-color--warning

Text Colors:

Color
.f36-color--text-dark
.f36-color--text-mid
.f36-color--text-light
.f36-color--text-lightest

Element Colors

Color	Background
.f36-color--element-darkest	.f36-background-color--element-darkest
.f36-color--element-dark	.f36-background-color--element-dark
.f36-color--element-mid	.f36-background-color--element-mid
.f36-color--element-light	.f36-background-color--element-light
.f36-color--element-lightest	.f36-background-color--element-lightest

Contast Colors

Color	Background
.f36-color--contrast-dark	.f36-background-color--contrast-dark
.f36-color--contrast-mid	.f36-background-color--contrast-mid
.f36-color--contrast-light	.f36-background-color--contrast-light

Colors:

Color	Background
.f36-color--blue	.f36-background-color--blue
.f36-color--green	.f36-background-color--green
.f36-color--red	.f36-background-color--red
.f36-color--orange	.f36-background-color--orange
.f36-color--coral	.f36-background-color--coral

Secondary Colors:

Color	Background
.f36-color--mint	.f36-background-color--mint
.f36-color--ice	.f36-background-color--ice

White:

Color	Background
.f36-color--white	.f36-background-color--white

Shadows

box-shadow

Scale:
default, heavy

Class name composition example:

.f36-box-shadow--default

Glows

box-shadow

Scale:
primary, negative, positive

Class name composition example:

.f36-glow--primary

Transitions

transition-duration

Scale:
short, default, long

Class name composition example:

.f36-transition-duration--short

Easing

transition-easing

Scale:
default, cubic-bezier

Class name composition example:

.f36-transition-easing--default