- Get it:
npm i atomic.css --save - Import it:
import 'atomic.css'
Prior Art
Tachyons, Basscss, and other like-minded CSS systems have led the way in creating a new approach to doing CSS, where selectors are shallow, immutable, and atomic. In this sense, when reading a list of classes on an element, WYSIWYG. This approach spares teams from the dreadful monolistic main.css.
Why bother?
Writing your own version of an atomic css stylesheet is tedious. Atomic.css uses a combination of scales and SASS functions to alleviate this tedium.
How do you even do that?
SASS maps, @each, @if, and @mixin/@include. Black magic can be found at @_utilities.scss.
E.g.: hey, create a series of margin selectors derived from a golden-ratio scale.
Here's your scale:
$scale: (
'ma0': 1rem,
'ma1': 1.618rem,
'ma2': 2.618rem,
);Here's your mapper:
@each $selector, $property-value in $scale {
.#{$selector} {
margin: $property-value;
}
}Here's your output:
.ma0 { margin: 1rem; }
.ma1 { margin: 1.618rem; }
.ma2 { margin: 2.618rem; }These are derived from SASS maps in _variables.scss and module files
Given that these account for the majority of the LOC in atomic.css, refer to the _variables.scss and the files in the /modules directory.
Example: where n is the step and i is the associated value in the scale.
.wx { width: i rem; }
.wx-ns { @media #{$vars-from-map} { width: i rem; } }
Scales used
margin&padding: steps (n) from-5to5: perfect fourth1 / (1.25 ^ n)> 0 > Golden ratio1.618 ^ nwidth,height, &max-width: 9 steps[0, 9]:2 ^ nfont-size:[-1, 5]: approximately adjusted perfect fourth from1 + 1.25 * n
These are not dependent on scales or media queries, and are therefore implemented as is.
Positions
'relative': (position: relative),
'absolute': (position: absolute),
'fixed': (position: fixed),
Borders
'br0': (border-radius: 0),
'br1': (border-radius: 0.125rem),
'br2': (border-radius: 0.25rem),
'br3': (border-radius: 0.5rem),
'br4': (border-radius: 1rem),
'br-100': (border-radius: 100%),
'br-pill': (border-radius: 9999px),
'brtl0': (border-top-left-radius: 0),
'brtr0': (border-top-right-radius: 0),
'brbl0': (border-bottom-left-radius: 0),
'brbr0': (border-bottom-right-radius: 0),
'ba': (border-style: solid, border-width: 1px),
'bt': (border-top-style: solid, border-top-width: 1px),
'br': (border-right-style: solid, border-right-width: 1px),
'bb': (border-bottom-style: solid, border-bottom-width: 1px),
'bl': (border-left-style: solid, border-left-width: 1px),
'bn': (border-style: none, border-width: 0),
'bw0': (border-width: 0),
'bw1': (border-width: 0.125rem),
'bw2': (border-width: 0.5rem),
'bw3': (border-width: 1rem),
'bt-0': (border-top-width: 0),
'br-0': (border-right-width: 0),
'bb-0': (border-bottom-width: 0),
'bl-0': (border-left-width: 0),
Box Shadows
'shadow-1': (box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5)),
'shadow-2': (box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2)),
'shadow-3': (box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2)),
'shadow-4': (box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2)),
'shadow-5': (box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2)),
Text
// font-families
'ff1': (font-family: 'system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif'),
'ff2': (font-family: '"Roboto", sans-serif'),
// font-style, transforms, variants, shadows
'ttc': (text-transform: capitalize),
'ttl': (text-transform: lowercase),
'ttu': (text-transform: uppercase),
'ttn': (text-transform: none),
'strike': (text-decoration: line-through),
'underline': (text-decoration: underline),
'no-underline': (text-decoration: none),
'i': (font-style: italic),
'fs-normal': (font-style: normal),
'small-caps': (font-variant: small-caps),
'text-shadow-1': (text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5)),
'text-shadow-2': (text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7)),
// font-weight
'normal': (font-weight: normal),
'b': (font-weight: bold),
'fw3': (font-weight: 300),
'fw4': (font-weight: 400),
'fw5': (font-weight: 500),
'fw7': (font-weight: 700),
'fw9': (font-weight: 900),
// letter-spacing
'tracked': (letter-spacing: 0.1em),
'tracked-tight': (letter-spacing: -0.05em),
'tracked-mega': (letter-spacing: 0.25em),
// line-height
'lh-solid': (line-height: 1),
'lh-title': (line-height: 1.25),
'lh-copy': (line-height: 1.5),
Opacities
// opacities
'o-100': (opacity: 1),
'o-90': (opacity: 0.9),
'o-80': (opacity: 0.8),
'o-70': (opacity: 0.7),
'o-60': (opacity: 0.6),
'o-50': (opacity: 0.5),
'o-40': (opacity: 0.4),
'o-30': (opacity: 0.3),
'o-20': (opacity: 0.2),
'o-10': (opacity: 0.1),
'o-05': (opacity: 0.05),
'o-025': (opacity: 0.025),
'o-0': (opacity: 0),
Others
// overflows
'overflow-visible': (overflow: visible),
'overflow-hidden': (overflow: hidden),
'overflow-scroll': (overflow: scroll),
'overflow-auto': (overflow: auto),
// z-index
'z-0': (z-index: 0),
'z-1': (z-index: 1),
'z-2': (z-index: 2),
'z-3': (z-index: 3),
'z-max': (z-index: 2147483647),
'z-inherit': (z-index: inherit),
'z-initial': (z-index: initial),
'z-unset': (z-index: unset),
// utilities
'center': (margin-right: auto, margin-left: auto),
'list': (list-style-type: none),
'pointer': (cursor: pointer),
'pointer:hover': (cursor: pointer),
'flex-center': (display: flex, justify-content: center, align-items: center)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent