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