Solid CSS
The core purpose of this library is to make you forget about writing css code but doing it in a clean way compared to other css frameworks, this is done through a procedural algorithm that builds the most used css properties.
How to install
You can get the latest version on npm/yarn, so to install it execute one of these:
npm install solid-cssyarn add solid-css
Then you'll need to import it along with whatever initializes your project, for example the most common one is probably webpack, so you will have something like this in a webpack dev config:
import SolidCss from 'solid-css'
// Initializes a new css construct with the black and white colors
const MyCss = new SolidCss([{ name: 'black', hex: '#000' }, { name: 'white', hex: '#FFF' }])
// Builds the minified css file based on your classes usage inside the project
MyCss.minify('./path-to-source-files', './name-of-the-minified-css.css)
With the same initializations as before, so you could just use the same config and use an if else depending on the environment.
How to use it
This may be a bit tricky at first but you'll get used to it once you understand the logic behind the class names, down below you'll find a guide for every property that this library currently supports.
The $ means that it works with dynamic numbers.
The & means that it works with dynamic colors.
Border
b-& => applies border-color with & colorbw$ => applies border-width on every corner with $ pxbwv$ => applies border-width on top and bottom sides with $ pxbwh$ => applies border-width on left and right sides with $ pxbwt$ => applies border-width on top side with $ pxbwb$ => applies border-width on bottom side with $ pxbwl$ => applies border-width on left side with $ pxbwr$ => applies border-width on right side with $ pxbr$ => applies border-radius on every corner with $ intensitybrt$ => applies border-radius on top corners with $ intensitybrb$ => applies border-radius on bottom corners with $ intensitybrl$ => applies border-radius on left corners with $ intensitybrr$ => applies border-radius on right corners with $ intensitybrtl$ => applies border-radius on top-left corner with $ intensitybrtr$ => applies border-radius on top-right corner with $ intensitybrbl$ => applies border-radius on bottom-left corner with $ intensitybrbr$ => applies border-radius on bottom-right corner with $ intensitybrf$ => applies border-radius on every corner with $ pxbrft$ => applies border-radius on top corners with $ pxbrfb$ => applies border-radius on bottom corners with $ pxbrfl$ => applies border-radius on left corners with $ pxbrfr$ => applies border-radius on right corners with $ pxbrftl$ => applies border-radius on top-left corner with $ pxbrftr$ => applies border-radius on top-right corner with $ pxbrfbl$ => applies border-radius on bottom-left corner with $ pxbrfbr$ => applies border-radius on bottom-right corner with $ pxbrp$ => applies border-radius on every corner with $ percentualbrpt$ => applies border-radius on top corners with $ percentualbrpb$ => applies border-radius on bottom corners with $ percentualbrpl$ => applies border-radius on left corners with $ percentualbrpr$ => applies border-radius on right corners with $ percentualbrptl$ => applies border-radius on top-left corner with $ percentualbrptr$ => applies border-radius on top-right corner with $ percentualbrpbl$ => applies border-radius on bottom-left corner with $ percentualbrpbr$ => applies border-radius on bottom-right corner with $ percentual
Color
bg-& => applies background-color with & color& => applies color with & color
Container
cn$ => applies width and height with $ pxmncn$ => applies min-width and min-height with $ pxmxcn$ => applies max-width and max-height with $ pxcnp$ => applies width and height with $ percentualmncnp$ => applies min-width and min-height with $ percentualmxcnp$ => applies max-width and max-height with $ percentualcnd$ => applies width with $ vw and height with $ vhmncnd$ => applies min-width with $ vw and min-height with $ vhmxcnd$ => applies max-width with $ vw and max-height with $ vh
Display
df => applies display: flexdn => applies display: nonepen => applies pointer-events: nonepea => applies pointer-events: all
Flex
fr => applies flex-direction: rowfrr => applies flex-direction: row-reversefc => applies flex-direction: columnfcr => applies flex-direction: column-reversefw => applies flex-wrap: wrapff => applies flex: 1ffr => applies flex: initialjcfs => applies justify-content: flex-startjcfe => applies justify-content: flex-endjcc => applies justify-content: centerjcsb => applies justify-content: jcsbjcsa => applies justify-content: space-aroundaifs => applies align-items: flex-startaife => applies align-items: flex-endaic => applies align-items: centerais => applies align-items: stretchasfs => applies align-self: flex-startasfe => applies align-self: flex-endasc => applies align-self: center
Height
h$ => applies height with $ pxmnh$ => applies min-height with $ pxmxh$ => applies max-height with $ pxhp$ => applies height with $ percentualmnhp$ => applies min-height with $ percentualmxhp$ => applies max-height with $ percentualhd$ => applies height with $ vhmnhd$ => applies min-height with $ vhmxhd$ => applies max-height with $ vhha => applies height: auto
Margin
m$ => applies margin on every side with $ intensitymv$ => applies margin on top and bottom sides with $ intensitymh$ => applies margin on left and right sides with $ intensitymt$ => applies margin on top side with $ intensitymb$ => applies margin on bottom side with $ intensityml$ => applies margin on left side with $ intensitymr$ => applies margin on right side with $ intensitymtn$ => applies margin on top side with negative $ intensitymbn$ => applies margin on bottom side with negative $ intensitymln$ => applies margin on left side with negative $ intensitymrn$ => applies margin on right side with negative $ intensityfm$ => applies margin on every side with $ pxfmv$ => applies margin on top and bottom sides with $ pxfmh$ => applies margin on left and right sides with $ pxfmt$ => applies margin on top side with $ pxfmb$ => applies margin on bottom side with $ pxfml$ => applies margin on left side with $ pxfmr$ => applies margin on right side with $ pxfmtn$ => applies margin on top side with negative $ pxfmbn$ => applies margin on bottom side with negative $ pxfmln$ => applies margin on left side with negative $ pxfmrn$ => applies margin on right side with negative $ px
Opacity
o$ => applies opacity with $ / 100 intensity
Overflow
ofa => applies overflow: autoofh => applies overflow: hiddenofs => applies overflow: scrollofv => applies overflow: visibleofxa => applies overflow-x: autoofxh => applies overflow-x: hiddenofxs => applies overflow-x: scrollofxv => applies overflow-x: visibleofya => applies overflow-y: autoofyh => applies overflow-y: hiddenofys => applies overflow-y: scrollofyv => applies overflow-y: visible
Padding
p$ => applies padding on every side with $ intensitypv$ => applies padding on top and bottom sides with $ intensityph$ => applies padding on left and right sides with $ intensitypt$ => applies padding on top side with $ intensitypb$ => applies padding on bottom side with $ intensitypl$ => applies padding on left side with $ intensitypr$ => applies padding on right side with $ intensityfp$ => applies padding on every side with $ pxfpv$ => applies padding on top and bottom sides with $ pxfph$ => applies padding on left and right sides with $ pxfpt$ => applies padding on top side with $ pxfpb$ => applies padding on bottom side with $ pxfpl$ => applies padding on left side with $ pxfpr$ => applies padding on right side with $ px
Placeholder
ph-& => applies placeholder color with & color
Position
dp => applies position: staticrp => applies position: relativeap => applies position: absolutesp => applies position: stickyfp => applies position: fixedat$ => applies top with $ pxab$ => applies bottom with $ pxal$ => applies left with $ pxar$ => applies right with $ pxatn$ => applies top with negative $ pxabn$ => applies bottom with negative $ pxaln$ => applies left with negative $ pxarn$ => applies right with negative $ pxapt$ => applies top with $ percentualapt$ => applies bottom with $ percentualapt$ => applies left with $ percentualapt$ => applies right with $ percentualaptn$ => applies top with negative $ percentualapbn$ => applies bottom with negative $ percentualapln$ => applies left with negative $ percentualaprn$ => applies right with negative $ percentualadt$ => applies top with $ intensityadb$ => applies bottom with $ intensityadl$ => applies left with $ intensityadr$ => applies right with $ intensityadtn$ => applies top with negative $ intensityadbn$ => applies bottom with negative $ intensityadln$ => applies left with negative $ intensityadrn$ => applies right with negative $ intensity
Shadow
s$ => applies box-shadow with $ px radiuss-& => applies & color to the box-shadow
Text
ts$ => applies font-size with $ pxtfl => applies font-weight: 300 (thin)tfr => applies font-weight: 400 (regular)tfm => applies font-weight: 500 (medium)tfsb => applies font-weight: 600 (semi-bold)tfb => applies font-weight: 700 (bold)tal => applies text-align: lefttac => applies text-align: centertar => applies text-align: righttoe => applies text-overflow: ellipsistdu => applies text-decoration: underline
Width
w$ => applies width with $ pxmnw$ => applies min-width with $ pxmxw$ => applies max-width with $ pxwp$ => applies width with $ percentualmnwp$ => applies min-width with $ percentualmxwp$ => applies max-width with $ percentualwd$ => applies width with $ vhmnwd$ => applies min-width with $ vhmxwd$ => applies max-width with $ vhwa => applies width: auto
zIndex
zi$ => applies z-index with $ value
