@contentful/forma-36-fcss
Advanced tools
Comparing version 0.0.1 to 0.0.2
{ | ||
"name": "@contentful/forma-36-fcss", | ||
"description": "Forma 36 FCSS", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"main": "dist/styles.css", | ||
@@ -15,6 +15,6 @@ "license": "MIT", | ||
"dependencies": { | ||
"@contentful/forma-36-tokens": "^0.0.2", | ||
"postcss": "^7.0.6", | ||
"postcss-calc": "^7.0.1", | ||
"postcss-css-variables": "^0.11.0", | ||
"@contentful/forma-36-tokens": "^0.0.1" | ||
"postcss-css-variables": "^0.11.0" | ||
}, | ||
@@ -27,3 +27,4 @@ "scripts": { | ||
"access": "public" | ||
} | ||
}, | ||
"gitHead": "2fd1b6c3c098d16d2b196b83697a4ec1854abc8f" | ||
} |
# Forma 36 FCSS | ||
Forma 36 CSS Utilities are a functional css utility toolbelt. | ||
This package provides classnames for colors, shadows, spacing, transitions and typography. | ||
Forma 36 FCSS - Utility CSS classes for applying spacing, colors, typography, shadows, and transitions to elements. | ||
## Class name naming convention | ||
## Getting started | ||
Import the stlyes.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). | ||
@@ -29,5 +36,3 @@ See a list of all class names below | ||
.f36-margin-top--xs { | ||
margin-top: var(--vertical-spacing-xs) | ||
} | ||
.f36-margin-top--xs | ||
``` | ||
@@ -47,9 +52,7 @@ | ||
Scale: | ||
xs, s, m, l, xl, 2xl | ||
xs, s, m, l, xl, 2xl, 3xl, 4xl | ||
Class name composition example: | ||
.f36-padding-top--xs { | ||
padding-top: var(--vertical-spacing-xs) | ||
} | ||
.f36-padding-top--xs | ||
``` | ||
@@ -76,5 +79,3 @@ | ||
.f36-font-size--s { | ||
font-size: var(--font-size-s) | ||
} | ||
.f36-font-size--s | ||
``` | ||
@@ -92,5 +93,3 @@ | ||
.f36-font-weight--normal { | ||
font-weight: var(--font-weight-normal) | ||
} | ||
.f36-font-weight--normal | ||
``` | ||
@@ -108,5 +107,3 @@ | ||
.f36-line-height--default { | ||
line-height: var(--line-height-default) | ||
} | ||
.f36-line-height--default | ||
``` | ||
@@ -168,8 +165,60 @@ | ||
| .f36-color--mint | .f36-background-color--mint | | ||
| .f36-color--ice | .f36-bg-ice | | ||
| .f36-color--ice | .f36-background-color--ice | | ||
White: | ||
| Color | Background | | ||
| ----------------- | :------------ | | ||
| .f36-color--white | .f36-bg-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 | ||
``` |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
16328
4
219
41
+ Added@contentful/forma-36-tokens@0.0.2(transitive)
- Removed@contentful/forma-36-tokens@0.0.1(transitive)