tp-solid-css
Advanced tools
Readme
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.
You can get the latest version on npm/yarn, so to install it execute one of these:
npm install solid-cssyarn add solid-cssThen 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')
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.
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 $ percentualbg-& => applies background-color with & color& => applies color with & colorcn$ => 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 $ vhdf => applies display: flexdn => applies display: nonepen => applies pointer-events: nonepea => applies pointer-events: allfr => 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: centerh$ => 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: autom$ => 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 $ pxo$ => applies opacity with $ / 100 intensityofa => 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: visiblep$ => 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 $ pxph-& => applies placeholder color with & colordp => 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 $ intensitys$ => applies box-shadow with $ px radiuss-& => applies & color to the box-shadowts$ => 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: underlinew$ => 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: autozi$ => applies z-index with $ valueFAQs
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.
The npm package tp-solid-css receives a total of 0 weekly downloads. As such, tp-solid-css popularity was classified as not popular.
We found that tp-solid-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.