@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 cfeditorreact2 @contentful/forma-36-react-components @imgix/contentful contentful-content-repeater search-selection smartling-frontend

0.3.5

2 years ago

0.2.13-next-v4-9086.404

3 years ago

0.2.13-next-v4-9075.403

3 years ago

0.2.13-next-v4-9049.402

3 years ago

0.2.13-next-v4-9126.406

3 years ago

0.2.13-next-v4-8986.398

3 years ago

0.2.13-next-v4-8971.397

3 years ago

0.2.13-next-v4-9019.400

3 years ago

0.2.13-next-v4-8879.390

3 years ago

0.2.13-next-v4-8904.392

3 years ago

0.2.13-next-v4-8947.395

3 years ago

0.2.13-next-v4-8846.388

3 years ago

0.2.13-next-v4-8955.396

3 years ago

0.2.13-next-v4-8942.394

3 years ago

0.2.13-next-v4-8833.387

3 years ago

0.2.13-next-v4-8753.384

3 years ago

0.2.13-next-v4-8739.383

3 years ago

0.2.13-next-v4-8514.380

3 years ago

0.2.13-next-v4-8804.386

3 years ago

0.2.13-next-v4-8733.382

3 years ago

0.2.13-next-v4-8499.378

3 years ago

0.2.13-next-v4-8377.373

3 years ago

0.2.13-next-v4-8455.377

3 years ago

0.2.13-next-v4-8206.371

3 years ago

0.2.13-next-v4-8286.372

3 years ago

0.2.13-next-v4-8101.368

3 years ago

0.2.13-next-v4-8093.367

3 years ago

0.2.13-next-v4-8125.369

3 years ago

0.2.13-next-v4-8060.366

3 years ago

0.2.13-next-v4-8053.365

3 years ago

0.2.13-next-v4-8006.363

3 years ago

0.2.13-next-v4-7985.362

3 years ago

0.2.13-next-v4-7963.361

3 years ago

0.2.13-next-v4-8039.364

3 years ago

0.2.13-next-v4-7936.360

3 years ago

0.2.13-next-v4-7926.359

3 years ago

0.2.13-next-v4-7911.358

3 years ago

0.2.13-next-v4-7712.353

3 years ago

0.2.13-next-v4-7888.356

3 years ago

0.2.13-next-v4-7774.355

3 years ago

0.2.13-next-v4-7654.352

3 years ago

0.2.13-next-v4-7604.351

3 years ago

0.2.13-next-v4-6831.322

3 years ago

0.2.13-next-v4-6795.318

3 years ago

0.2.13-next-v4-6854.323

3 years ago

0.2.13-next-v4-6811.321

3 years ago

0.2.13-next-v4-6754.316

3 years ago

0.2.13-next-v4-6748.315

3 years ago

0.2.13-next-v4-6763.317

3 years ago

0.2.13-next-v4-6859.324

3 years ago

0.2.13-next-v4-6714.313

3 years ago

0.2.13-next-v4-6664.310

3 years ago

0.2.13-next-v4-6652.306

3 years ago

0.2.13-next-v4-6660.309

3 years ago

0.2.13-next-v4-6685.312

3 years ago

0.2.13-next-v4-6682.311

3 years ago

0.2.13-next-v4-6507.302

3 years ago

0.2.13-next-v4-6548.303

3 years ago

0.2.13-next-v4-6443.299

3 years ago

0.2.13-next-v4-6436.298

3 years ago

0.2.13-next-v4-6465.300

3 years ago

0.2.13-next-v4-6471.301

3 years ago

0.2.13-next-v4-6423.297

3 years ago

0.2.13-next-v4-6408.296

3 years ago

0.2.13-next-v4-6289.284

3 years ago

0.2.13-next-v4-6391.295

3 years ago

0.2.13-next-v4-6381.294

3 years ago

0.2.13-next-v4-6313.286

3 years ago

0.2.13-next-v4-6321.288

3 years ago

0.2.13-next-v4-6317.287

3 years ago

0.2.13-next-v4-6254.281

3 years ago

0.2.13-next-v4-6282.283

3 years ago

0.2.13-next-v4-6330.290

3 years ago

0.2.13-next-v4-6265.282

3 years ago

0.2.13-next-v4-6179.280

3 years ago

0.2.13-next-v4-6174.278

3 years ago

0.3.4

3 years ago

0.2.13-next-v4-5803.262

3 years ago

0.2.13-next-v4-5782.260

3 years ago

0.2.13-next-v4-5823.263

3 years ago

0.2.13-next-v4-5794.261

3 years ago

0.2.13-next-v4-5860.264

3 years ago

0.2.13-next-v4-5719.258

3 years ago

0.2.13-next-v4-5635.254

3 years ago

0.2.13-next-v4-5664.255

3 years ago

0.2.13-next-v4-5670.256

3 years ago

0.2.13-next-v4-5566.252

3 years ago

0.2.13-next-v4-5449.251

3 years ago

0.2.13-next-v4-5359.247

3 years ago

0.3.3

3 years ago

0.2.13-next-v4-5419.249

3 years ago

0.2.13-next-v4-5343.246

3 years ago

0.2.13-next-v4-5428.250

3 years ago

0.2.13-next-v4-5363.248

3 years ago

0.2.13-next-v4-5318.245

3 years ago

0.2.13-next-v4-5171.243

3 years ago

0.3.3-next-v3-new-tokens.56

3 years ago

0.3.3-next-v3-new-tokens.58

3 years ago

0.2.13-next-v4-5052.239

3 years ago

0.2.13-next-v4-5106.241

3 years ago

0.2.13-next-v4-5114.242

3 years ago

0.2.13-next-v4-4961.238

3 years ago

0.2.13-next-v4-4945.237

3 years ago

0.2.13-next-v4-4931.235

3 years ago

0.2.13-next-v4-4940.236

3 years ago

0.2.13-next-v4-4835.234

3 years ago

0.2.13-next-v4-4759.233

3 years ago

0.2.13-next-v4-4531.229

3 years ago

0.2.13-next-v4-4528.228

3 years ago

0.2.13-next-v4-4019.207

3 years ago

0.2.13-next-v4-4389.217

3 years ago

0.2.13-next-v4-4068.208

3 years ago

0.3.2

3 years ago

0.2.13-next-v4-4479.226

3 years ago

0.2.13-next-v4-4009.206

3 years ago

0.2.13-next-v4-4229.212

3 years ago

0.2.13-next-v4-4466.225

3 years ago

0.2.13-next-v4-4197.210

3 years ago

0.2.13-next-v4-4324.216

3 years ago

0.2.13-next-v4-4460.224

3 years ago

0.2.13-next-v4-4279.215

3 years ago

0.2.13-next-v4-4270.214

3 years ago

0.2.13-next-v4-4488.227

3 years ago

0.2.13-next-v4-4216.211

3 years ago

0.2.13-next-v4-4168.209

3 years ago

0.2.13-next-v4-4252.213

3 years ago

0.2.13-next-v4-4457.223

3 years ago

0.2.13-next-v4-3902.204

3 years ago

0.2.13-next-v4-3889.203

3 years ago

0.2.13-next-v4-3855.198

3 years ago

0.2.13-next-v4-3873.202

3 years ago

0.2.13-next-v4-3858.199

3 years ago

0.2.13-next-v4-3869.201

3 years ago

0.2.13-next-v4-3834.195

3 years ago

0.2.13-next-v4-3719.194

3 years ago

0.2.13-next-v4-3678.192

3 years ago

0.2.13-next-v4-3626.190

3 years ago

0.2.13-next-v4-3683.193

3 years ago

0.2.13-next-v4-3608.189

3 years ago

0.2.13-next-v4-3595.188

3 years ago

0.2.13-next-v4-3661.191

3 years ago

0.2.13-next-v4-3567.187

3 years ago

0.2.13-next-v4-3534.181

3 years ago

0.2.13-next-v4-3549.182

3 years ago

0.2.13-next-v4-3554.184

3 years ago

0.2.13-next-v4-3500.180

3 years ago

0.2.13-next-v4-3479.177

3 years ago

0.2.13-next-v4-3454.175

3 years ago

0.2.13-next-v4-3486.179

3 years ago

0.2.13-next-v4-3417.173

3 years ago

0.2.13-next-v4-3420.174

3 years ago

0.2.13-next-v4-3374.170

3 years ago

0.2.13-next-v4-3359.166

3 years ago

0.2.13-next-v4-3378.171

3 years ago

0.2.13-next-v4-3384.172

3 years ago

0.2.13-next-v4-3364.169

3 years ago

0.2.13-next-v4-3329.165

3 years ago

0.2.13-next-v4-3280.164

3 years ago

0.2.13-next-v4-3275.163

3 years ago

0.2.13-next-v4-3186.162

3 years ago

0.2.13-next-v4-3131.160

3 years ago

0.3.1

3 years ago

0.2.13-next-v4-3013.159

3 years ago

0.2.13-next-v4-2971.158

3 years ago

0.2.13-next-v4-2951.157

3 years ago

0.3.0

3 years ago

0.2.13-next-v3-2852.221

3 years ago

0.2.13-next-v3-2841.219

3 years ago

0.2.13-next-v3-2822.217

3 years ago

0.2.13-next-v3-2847.220

3 years ago

0.2.13-next-v3-2831.218

3 years ago

0.2.13-next-v3-2788.211

3 years ago

0.2.13-next-v3-2797.212

3 years ago

0.2.13-next-v3-2806.214

3 years ago

0.2.13-next-v3-2810.215

3 years ago

0.2.13-next-v3-2801.213

3 years ago

0.2.13-next-v3-2813.216

3 years ago

0.2.13-next-v3-2781.210

3 years ago

0.2.13-next-v3-2766.208

3 years ago

0.2.13-next-v3-2776.209

3 years ago

0.2.13-next-v3-2765.207

3 years ago

0.2.13-next-v3-2760.206

3 years ago

0.2.13-next-v3-2702.202

3 years ago

0.2.13-next-v3-2736.204

3 years ago

0.2.13-next-v3-2719.202

3 years ago

0.2.13-next-v3-2711.203

3 years ago

0.2.13-next-v3-2687.200

3 years ago

0.2.13-next-v3-2725.203

3 years ago

0.2.13-next-v3-2716.204

3 years ago

0.2.13-next-v3-2689.201

3 years ago

0.2.13-next-v3-2727.202

3 years ago

0.2.13-next-v3-2730.203

3 years ago

0.2.13-next-v3-2740.205

3 years ago

0.2.13-next-v3-2670.199

3 years ago

0.2.13-next-v3-2657.198

3 years ago

0.2.13-next-v3-2652.197

3 years ago

0.2.13-next-v3-2629.196

3 years ago

0.2.13-next-v3-2595.189

3 years ago

0.2.13-next-v3-2565.187

3 years ago

0.2.13-next-v3-2618.194

3 years ago

0.2.13-next-v3-2601.191

3 years ago

0.2.13-next-v3-2600.190

3 years ago

0.2.13-next-v3-2572.188

3 years ago

0.2.13-next-v3-2605.193

3 years ago

0.2.13-next-v3-2562.186

3 years ago

0.2.13-next-v3-2544.184

3 years ago

0.2.13-next-v3-2510.182

3 years ago

0.2.13-next-v3-2556.185

3 years ago

0.2.13-next-v3-2514.183

3 years ago

0.2.13-next-v3-2472.180

3 years ago

0.2.13-next-v3-2504.181

3 years ago

0.2.13-next-v3-2466.179

3 years ago

0.2.13-next-v3-2461.178

3 years ago

0.2.13-next-v3-2392.174

3 years ago

0.2.14

3 years ago

0.2.13-next-v3-2429.176

3 years ago

0.2.13-next-v4-2395.156

3 years ago

0.2.13-next-v3-2424.175

3 years ago

0.2.13-next-v3-2432.177

3 years ago

0.2.14-next-v3.2

3 years ago

0.2.13-next-v3-2362.173

3 years ago

0.2.13

3 years ago

0.2.13-next-v3-2347.172

3 years ago

0.2.14-next-v3-cbb165e9d331001811e86b481e7a20a55e65b277.4

3 years ago

0.2.13-next-v4-2364.155

3 years ago

0.2.14-next-v4.2

3 years ago

0.2.14-next-v3-66676ff4635acf4218e942b9713ef9b052b9b0de.4

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 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

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