CSS Prop Utils ⚙️
Util based approach of styling your elements fast and in a reliable way
Setup
Import appropriate css-props classes
import "css-prop-utils/css/display.css";
import "css-prop-utils/css/flex-wrap.css";
import "css-prop-utils/css/justify-content.css";
Example:
<div class="u-display--flex u-flex-wrap--wrap u-justify-content--center">
<h1>Hello World<h1>
</div>
Class names syntax: u-{prop}--{value}
display.css:
.u-display--inline {
display: inline;
}
.u-display--block {
display: block;
}
.u-display--contents {
display: contents;
}
.u-display--flex {
display: flex;
}
.u-display--grid {
display: grid;
}
.u-display--inline-block {
display: inline-block;
}
.u-display--inline-flex {
display: inline-flex;
}
.u-display--inline-grid {
display: inline-grid;
}
.u-display--inline-table {
display: inline-table;
}
.u-display--list-item {
display: list-item;
}
.u-display--run-in {
display: run-in;
}
.u-display--table {
display: table;
}
.u-display--table-caption {
display: table-caption;
}
.u-display--table-column-group {
display: table-column-group;
}
.u-display--table-header-group {
display: table-header-group;
}
.u-display--table-footer-group {
display: table-footer-group;
}
.u-display--table-row-group {
display: table-row-group;
}
.u-display--table-cell {
display: table-cell;
}
.u-display--table-column {
display: table-column;
}
.u-display--table-row {
display: table-row;
}
.u-display--none {
display: none;
}
.u-display--initial {
display: initial;
}
.u-display--inherit {
display: inherit;
}
Currently following props exists
align-content
align-items
align-self
box-sizing
display
flex-direction
flex-flow
flex-wrap
flex
float
font-weight
hyphens
justify-content
justify-items
justify-self
line-break
object-fit
order
overflow-wrap
overflow-x
overflow-y
overflow
place-content
place-items
place-self
position
resize
text-align
text-decoration
text-overflow
vertical-align
visibility
white-space
word-break
word-wrap
For Developing 👨💻
The CSS is generated from the following file:
scripts/propertiesList.json
later on is the css scrapped from desired webpage,
and with the help of a customized query selector
Examples:
{
"name": "align-content",
"selector": ".w3-table-all.notranslate tr td:nth-child(1)",
"url": "https://www.w3schools.com/cssref/css3_pr_align-content.asp"
}
{
"name": "font-weight",
"selector": "#Values ~ dl dt > code:nth-child(1)",
"ignoreValues": [
"<number>"
],
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"
},
In some cases we can use a custom helper to generate the
classes
{
"name": "flex",
"from": 1,
"to": 5
},