@contentful/forma-36-fcss NPM

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

@contentful/forma-36-tokens

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont search-selection smartling-frontend @imgix/contentful cfeditorreact2 cceditorreact contentful-content-repeater @contentful/forma-36-react-components

0.3.5

4 years ago

0.2.13-next-v4-9086.404

4 years ago

0.2.13-next-v4-9075.403

4 years ago

0.2.13-next-v4-9049.402

4 years ago

0.2.13-next-v4-9126.406

4 years ago

0.2.13-next-v4-8986.398

4 years ago

0.2.13-next-v4-8971.397

4 years ago

0.2.13-next-v4-9019.400

4 years ago

0.2.13-next-v4-8879.390

4 years ago

0.2.13-next-v4-8904.392

4 years ago

0.2.13-next-v4-8947.395

4 years ago

0.2.13-next-v4-8846.388

4 years ago

0.2.13-next-v4-8955.396

4 years ago

0.2.13-next-v4-8942.394

4 years ago

0.2.13-next-v4-8833.387

4 years ago

0.2.13-next-v4-8753.384

4 years ago

0.2.13-next-v4-8739.383

4 years ago

0.2.13-next-v4-8514.380

4 years ago

0.2.13-next-v4-8804.386

4 years ago

0.2.13-next-v4-8733.382

4 years ago

0.2.13-next-v4-8499.378

4 years ago

0.2.13-next-v4-8377.373

4 years ago

0.2.13-next-v4-8455.377

4 years ago

0.2.13-next-v4-8206.371

4 years ago

0.2.13-next-v4-8286.372

4 years ago

0.2.13-next-v4-8101.368

4 years ago

0.2.13-next-v4-8093.367

4 years ago

0.2.13-next-v4-8125.369

4 years ago

0.2.13-next-v4-8060.366

4 years ago

0.2.13-next-v4-8053.365

4 years ago

0.2.13-next-v4-8006.363

4 years ago

0.2.13-next-v4-7985.362

4 years ago

0.2.13-next-v4-7963.361

4 years ago

0.2.13-next-v4-8039.364

4 years ago

0.2.13-next-v4-7936.360

4 years ago

0.2.13-next-v4-7926.359

4 years ago

0.2.13-next-v4-7911.358

4 years ago

0.2.13-next-v4-7712.353

4 years ago

0.2.13-next-v4-7888.356

4 years ago

0.2.13-next-v4-7774.355

4 years ago

0.2.13-next-v4-7654.352

4 years ago

0.2.13-next-v4-7604.351

4 years ago

0.2.13-next-v4-6831.322

4 years ago

0.2.13-next-v4-6795.318

4 years ago

0.2.13-next-v4-6854.323

4 years ago

0.2.13-next-v4-6811.321

4 years ago

0.2.13-next-v4-6754.316

4 years ago

0.2.13-next-v4-6748.315

4 years ago

0.2.13-next-v4-6763.317

4 years ago

0.2.13-next-v4-6859.324

4 years ago

0.2.13-next-v4-6714.313

4 years ago

0.2.13-next-v4-6664.310

4 years ago

0.2.13-next-v4-6652.306

4 years ago

0.2.13-next-v4-6660.309

4 years ago

0.2.13-next-v4-6685.312

4 years ago

0.2.13-next-v4-6682.311

4 years ago

0.2.13-next-v4-6507.302

4 years ago

0.2.13-next-v4-6548.303

4 years ago

0.2.13-next-v4-6443.299

4 years ago

0.2.13-next-v4-6436.298

4 years ago

0.2.13-next-v4-6465.300

4 years ago

0.2.13-next-v4-6471.301

4 years ago

0.2.13-next-v4-6423.297

4 years ago

0.2.13-next-v4-6408.296

4 years ago

0.2.13-next-v4-6289.284

4 years ago

0.2.13-next-v4-6391.295

4 years ago

0.2.13-next-v4-6381.294

4 years ago

0.2.13-next-v4-6313.286

4 years ago

0.2.13-next-v4-6321.288

4 years ago

0.2.13-next-v4-6317.287

4 years ago

0.2.13-next-v4-6254.281

4 years ago

0.2.13-next-v4-6282.283

4 years ago

0.2.13-next-v4-6330.290

4 years ago

0.2.13-next-v4-6265.282

4 years ago

0.2.13-next-v4-6179.280

4 years ago

0.2.13-next-v4-6174.278

4 years ago

0.3.4

4 years ago

0.2.13-next-v4-5803.262

4 years ago

0.2.13-next-v4-5782.260

4 years ago

0.2.13-next-v4-5823.263

4 years ago

0.2.13-next-v4-5794.261

4 years ago

0.2.13-next-v4-5860.264

4 years ago

0.2.13-next-v4-5719.258

4 years ago

0.2.13-next-v4-5635.254

4 years ago

0.2.13-next-v4-5664.255

4 years ago

0.2.13-next-v4-5670.256

4 years ago

0.2.13-next-v4-5566.252

4 years ago

0.2.13-next-v4-5449.251

4 years ago

0.2.13-next-v4-5359.247

4 years ago

0.3.3

4 years ago

0.2.13-next-v4-5419.249

4 years ago

0.2.13-next-v4-5343.246

4 years ago

0.2.13-next-v4-5428.250

4 years ago

0.2.13-next-v4-5363.248

4 years ago

0.2.13-next-v4-5318.245

4 years ago

0.2.13-next-v4-5171.243

4 years ago

0.3.3-next-v3-new-tokens.56

4 years ago

0.3.3-next-v3-new-tokens.58

4 years ago

0.2.13-next-v4-5052.239

4 years ago

0.2.13-next-v4-5106.241

4 years ago

0.2.13-next-v4-5114.242

4 years ago

0.2.13-next-v4-4961.238

4 years ago

0.2.13-next-v4-4945.237

4 years ago

0.2.13-next-v4-4931.235

4 years ago

0.2.13-next-v4-4940.236

4 years ago

0.2.13-next-v4-4835.234

4 years ago

0.2.13-next-v4-4759.233

4 years ago

0.2.13-next-v4-4531.229

4 years ago

0.2.13-next-v4-4528.228

4 years ago

0.2.13-next-v4-4019.207

5 years ago

0.2.13-next-v4-4389.217

4 years ago

0.2.13-next-v4-4068.208

5 years ago

0.3.2

4 years ago

0.2.13-next-v4-4479.226

4 years ago

0.2.13-next-v4-4009.206

5 years ago

0.2.13-next-v4-4229.212

5 years ago

0.2.13-next-v4-4466.225

4 years ago

0.2.13-next-v4-4197.210

5 years ago

0.2.13-next-v4-4324.216

4 years ago

0.2.13-next-v4-4460.224

4 years ago

0.2.13-next-v4-4279.215

4 years ago

0.2.13-next-v4-4270.214

4 years ago

0.2.13-next-v4-4488.227

4 years ago

0.2.13-next-v4-4216.211

5 years ago

0.2.13-next-v4-4168.209

5 years ago

0.2.13-next-v4-4252.213

4 years ago

0.2.13-next-v4-4457.223

4 years ago

0.2.13-next-v4-3902.204

5 years ago

0.2.13-next-v4-3889.203

5 years ago

0.2.13-next-v4-3855.198

5 years ago

0.2.13-next-v4-3873.202

5 years ago

0.2.13-next-v4-3858.199

5 years ago

0.2.13-next-v4-3869.201

5 years ago

0.2.13-next-v4-3834.195

5 years ago

0.2.13-next-v4-3719.194

5 years ago

0.2.13-next-v4-3678.192

5 years ago

0.2.13-next-v4-3626.190

5 years ago

0.2.13-next-v4-3683.193

5 years ago

0.2.13-next-v4-3608.189

5 years ago

0.2.13-next-v4-3595.188

5 years ago

0.2.13-next-v4-3661.191

5 years ago

0.2.13-next-v4-3567.187

5 years ago

0.2.13-next-v4-3534.181

5 years ago

0.2.13-next-v4-3549.182

5 years ago

0.2.13-next-v4-3554.184

5 years ago

0.2.13-next-v4-3500.180

5 years ago

0.2.13-next-v4-3479.177

5 years ago

0.2.13-next-v4-3454.175

5 years ago

0.2.13-next-v4-3486.179

5 years ago

0.2.13-next-v4-3417.173

5 years ago

0.2.13-next-v4-3420.174

5 years ago

0.2.13-next-v4-3374.170

5 years ago

0.2.13-next-v4-3359.166

5 years ago

0.2.13-next-v4-3378.171

5 years ago

0.2.13-next-v4-3384.172

5 years ago

0.2.13-next-v4-3364.169

5 years ago

0.2.13-next-v4-3329.165

5 years ago

0.2.13-next-v4-3280.164

5 years ago

0.2.13-next-v4-3275.163

5 years ago

0.2.13-next-v4-3186.162

5 years ago

0.2.13-next-v4-3131.160

5 years ago

0.3.1

5 years ago

0.2.13-next-v4-3013.159

5 years ago

0.2.13-next-v4-2971.158

5 years ago

0.2.13-next-v4-2951.157

5 years ago

0.3.0

5 years ago

0.2.13-next-v3-2852.221

5 years ago

0.2.13-next-v3-2841.219

5 years ago

0.2.13-next-v3-2822.217

5 years ago

0.2.13-next-v3-2847.220

5 years ago

0.2.13-next-v3-2831.218

5 years ago

0.2.13-next-v3-2788.211

5 years ago

0.2.13-next-v3-2797.212

5 years ago

0.2.13-next-v3-2806.214

5 years ago

0.2.13-next-v3-2810.215

5 years ago

0.2.13-next-v3-2801.213

5 years ago

0.2.13-next-v3-2813.216

5 years ago

0.2.13-next-v3-2781.210

5 years ago

0.2.13-next-v3-2766.208

5 years ago

0.2.13-next-v3-2776.209

5 years ago

0.2.13-next-v3-2765.207

5 years ago

0.2.13-next-v3-2760.206

5 years ago

0.2.13-next-v3-2702.202

5 years ago

0.2.13-next-v3-2736.204

5 years ago

0.2.13-next-v3-2719.202

5 years ago

0.2.13-next-v3-2711.203

5 years ago

0.2.13-next-v3-2687.200

5 years ago

0.2.13-next-v3-2725.203

5 years ago

0.2.13-next-v3-2716.204

5 years ago

0.2.13-next-v3-2689.201

5 years ago

0.2.13-next-v3-2727.202

5 years ago

0.2.13-next-v3-2730.203

5 years ago

0.2.13-next-v3-2740.205

5 years ago

0.2.13-next-v3-2670.199

5 years ago

0.2.13-next-v3-2657.198

5 years ago

0.2.13-next-v3-2652.197

5 years ago

0.2.13-next-v3-2629.196

5 years ago

0.2.13-next-v3-2595.189

5 years ago

0.2.13-next-v3-2565.187

5 years ago

0.2.13-next-v3-2618.194

5 years ago

0.2.13-next-v3-2601.191

5 years ago

0.2.13-next-v3-2600.190

5 years ago

0.2.13-next-v3-2572.188

5 years ago

0.2.13-next-v3-2605.193

5 years ago

0.2.13-next-v3-2562.186

5 years ago

0.2.13-next-v3-2544.184

5 years ago

0.2.13-next-v3-2510.182

5 years ago

0.2.13-next-v3-2556.185

5 years ago

0.2.13-next-v3-2514.183

5 years ago

0.2.13-next-v3-2472.180

5 years ago

0.2.13-next-v3-2504.181

5 years ago

0.2.13-next-v3-2466.179

5 years ago

0.2.13-next-v3-2461.178

5 years ago

0.2.13-next-v3-2392.174

5 years ago

0.2.14

5 years ago

0.2.13-next-v3-2429.176

5 years ago

0.2.13-next-v4-2395.156

5 years ago

0.2.13-next-v3-2424.175

5 years ago

0.2.13-next-v3-2432.177

5 years ago

0.2.14-next-v3.2

5 years ago

0.2.13-next-v3-2362.173

5 years ago

0.2.13

5 years ago

0.2.13-next-v3-2347.172

5 years ago

0.2.14-next-v3-cbb165e9d331001811e86b481e7a20a55e65b277.4

5 years ago

0.2.13-next-v4-2364.155

5 years ago

0.2.14-next-v4.2

5 years ago

0.2.14-next-v3-66676ff4635acf4218e942b9713ef9b052b9b0de.4

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago