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-css
• yarn 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(['black', 'white'])


// Builds the development files which contain all the classes

MyCss.build()

In the production webpack config you just have to replace the build command with minify, like this:

MyCss.minify('./path-to-source-files')

With the same initializations as before, so you could just use the same config and use an if else depending on the environment.

The production files will end up in a folder called "dist", there you will find all the css files that you can import.

To make the filters that use the intensity coefficient you have to define it in your main css file, along with the colors, for example:

@import url('./dist/solid.css')


:root {

--intensity: 5px;

--black: #000000;

--white: #FFFFFF;

--shadow: rgba(0,0,0,0.1);

}

You can also choose a different path than dist for building the css files, by doing this:

const MyCss = new SolidCss(['black', 'white'], './my-folder/my-subfolder')

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 & color
• bw$ => applies border-width on every corner with $ px
• bwv$ => applies border-width on top and bottom sides with $ px
• bwh$ => applies border-width on left and right sides with $ px
• bwt$ => applies border-width on top side with $ px
• bwb$ => applies border-width on bottom side with $ px
• bwl$ => applies border-width on left side with $ px
• bwr$ => applies border-width on right side with $ px
• br$ => applies border-radius on every corner with $ intensity
• brt$ => applies border-radius on top corners with $ intensity
• brb$ => applies border-radius on bottom corners with $ intensity
• brl$ => applies border-radius on left corners with $ intensity
• brr$ => applies border-radius on right corners with $ intensity
• brtl$ => applies border-radius on top-left corner with $ intensity
• brtr$ => applies border-radius on top-right corner with $ intensity
• brbl$ => applies border-radius on bottom-left corner with $ intensity
• brbr$ => applies border-radius on bottom-right corner with $ intensity
• brf$ => applies border-radius on every corner with $ px
• brft$ => applies border-radius on top corners with $ px
• brfb$ => applies border-radius on bottom corners with $ px
• brfl$ => applies border-radius on left corners with $ px
• brfr$ => applies border-radius on right corners with $ px
• brftl$ => applies border-radius on top-left corner with $ px
• brftr$ => applies border-radius on top-right corner with $ px
• brfbl$ => applies border-radius on bottom-left corner with $ px
• brfbr$ => applies border-radius on bottom-right corner with $ px
• brp$ => applies border-radius on every corner with $ percentual
• brpt$ => applies border-radius on top corners with $ percentual
• brpb$ => applies border-radius on bottom corners with $ percentual
• brpl$ => applies border-radius on left corners with $ percentual
• brpr$ => applies border-radius on right corners with $ percentual
• brptl$ => applies border-radius on top-left corner with $ percentual
• brptr$ => applies border-radius on top-right corner with $ percentual
• brpbl$ => applies border-radius on bottom-left corner with $ percentual
• brpbr$ => 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 $ px
• mncn$ => applies min-width and min-height with $ px
• mxcn$ => applies max-width and max-height with $ px
• cnp$ => applies width and height with $ percentual
• mncnp$ => applies min-width and min-height with $ percentual
• mxcnp$ => applies max-width and max-height with $ percentual
• cnd$ => applies width with $ vw and height with $ vh
• mncnd$ => applies min-width with $ vw and min-height with $ vh
• mxcnd$ => applies max-width with $ vw and max-height with $ vh

Display

• df => applies display: flex
• dn => applies display: none
• pen => applies pointer-events: none
• pea => applies pointer-events: all

Flex

• fr => applies flex-direction: row
• frr => applies flex-direction: row-reverse
• fc => applies flex-direction: column
• fcr => applies flex-direction: column-reverse
• fw => applies flex-wrap: wrap
• ff => applies flex: 1
• ffr => applies flex: initial
• jcfs => applies justify-content: flex-start
• jcfe => applies justify-content: flex-end
• jcc => applies justify-content: center
• jcsb => applies justify-content: jcsb
• jcsa => applies justify-content: space-around
• aifs => applies align-items: flex-start
• aife => applies align-items: flex-end
• aic => applies align-items: center
• ais => applies align-items: stretch
• asfs => applies align-self: flex-start
• asfe => applies align-self: flex-end
• asc => applies align-self: center

Height

• h$ => applies height with $ px
• mnh$ => applies min-height with $ px
• mxh$ => applies max-height with $ px
• hp$ => applies height with $ percentual
• mnhp$ => applies min-height with $ percentual
• mxhp$ => applies max-height with $ percentual
• hd$ => applies height with $ vh
• mnhd$ => applies min-height with $ vh
• mxhd$ => applies max-height with $ vh
• ha => applies height: auto

Margin

• m$ => applies margin on every side with $ intensity
• mv$ => applies margin on top and bottom sides with $ intensity
• mh$ => applies margin on left and right sides with $ intensity
• mt$ => applies margin on top side with $ intensity
• mb$ => applies margin on bottom side with $ intensity
• ml$ => applies margin on left side with $ intensity
• mr$ => applies margin on right side with $ intensity
• mtn$ => applies margin on top side with negative $ intensity
• mbn$ => applies margin on bottom side with negative $ intensity
• mln$ => applies margin on left side with negative $ intensity
• mrn$ => applies margin on right side with negative $ intensity
• fm$ => applies margin on every side with $ px
• fmv$ => applies margin on top and bottom sides with $ px
• fmh$ => applies margin on left and right sides with $ px
• fmt$ => applies margin on top side with $ px
• fmb$ => applies margin on bottom side with $ px
• fml$ => applies margin on left side with $ px
• fmr$ => applies margin on right side with $ px
• fmtn$ => applies margin on top side with negative $ px
• fmbn$ => applies margin on bottom side with negative $ px
• fmln$ => applies margin on left side with negative $ px
• fmrn$ => applies margin on right side with negative $ px

Opacity

• o$ => applies opacity with $ / 100 intensity

Overflow

• ofa => applies overflow: auto
• ofh => applies overflow: hidden
• ofs => applies overflow: scroll
• ofv => applies overflow: visible
• ofxa => applies overflow-x: auto
• ofxh => applies overflow-x: hidden
• ofxs => applies overflow-x: scroll
• ofxv => applies overflow-x: visible
• ofya => applies overflow-y: auto
• ofyh => applies overflow-y: hidden
• ofys => applies overflow-y: scroll
• ofyv => applies overflow-y: visible

Padding

• p$ => applies padding on every side with $ intensity
• pv$ => applies padding on top and bottom sides with $ intensity
• ph$ => applies padding on left and right sides with $ intensity
• pt$ => applies padding on top side with $ intensity
• pb$ => applies padding on bottom side with $ intensity
• pl$ => applies padding on left side with $ intensity
• pr$ => applies padding on right side with $ intensity
• fp$ => applies padding on every side with $ px
• fpv$ => applies padding on top and bottom sides with $ px
• fph$ => applies padding on left and right sides with $ px
• fpt$ => applies padding on top side with $ px
• fpb$ => applies padding on bottom side with $ px
• fpl$ => applies padding on left side with $ px
• fpr$ => applies padding on right side with $ px

Placeholder

• ph-& => applies placeholder color with & color

Position

• dp => applies position: static
• rp => applies position: relative
• ap => applies position: absolute
• sp => applies position: sticky
• fp => applies position: fixed
• at$ => applies top with $ px
• ab$ => applies bottom with $ px
• al$ => applies left with $ px
• ar$ => applies right with $ px
• atn$ => applies top with negative $ px
• abn$ => applies bottom with negative $ px
• aln$ => applies left with negative $ px
• arn$ => applies right with negative $ px
• apt$ => applies top with $ percentual
• apt$ => applies bottom with $ percentual
• apt$ => applies left with $ percentual
• apt$ => applies right with $ percentual
• aptn$ => applies top with negative $ percentual
• apbn$ => applies bottom with negative $ percentual
• apln$ => applies left with negative $ percentual
• aprn$ => applies right with negative $ percentual
• adt$ => applies top with $ intensity
• adb$ => applies bottom with $ intensity
• adl$ => applies left with $ intensity
• adr$ => applies right with $ intensity
• adtn$ => applies top with negative $ intensity
• adbn$ => applies bottom with negative $ intensity
• adln$ => applies left with negative $ intensity
• adrn$ => applies right with negative $ intensity

Shadow

• s$ => applies box-shadow with $ px radius
• s-& => applies & color to the box-shadow

Text

• ts$ => applies font-size with $ px
• tfl => 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: left
• tac => applies text-align: center
• tar => applies text-align: right
• toe => applies text-overflow: ellipsis
• tdu => applies text-decoration: underline

Width

• w$ => applies width with $ px
• mnw$ => applies min-width with $ px
• mxw$ => applies max-width with $ px
• wp$ => applies width with $ percentual
• mnwp$ => applies min-width with $ percentual
• mxwp$ => applies max-width with $ percentual
• wd$ => applies width with $ vh
• mnwd$ => applies min-width with $ vh
• mxwd$ => applies max-width with $ vh
• wa => applies width: auto

zIndex

• zi$ => applies z-index with $ value