CSS-Props-utils

Util based approach of styling your elements fast and in a reliable way

Example:

<div class="p-display--flex p-justify-content--center">
 <h1>Hello World<h1>
</div>

Class names syntax: p-{prop}--{value}

display.css:

.p-display--inline {
  display: inline;
}
.p-display--block {
  display: block;
}
.p-display--contents {
  display: contents;
}
.p-display--flex {
  display: flex;
}
.p-display--grid {
  display: grid;
}
.p-display--inline-block {
  display: inline-block;
}
.p-display--inline-flex {
  display: inline-flex;
}
.p-display--inline-grid {
  display: inline-grid;
}
.p-display--inline-table {
  display: inline-table;
}
.p-display--list-item {
  display: list-item;
}
.p-display--run-in {
  display: run-in;
}
.p-display--table {
  display: table;
}
.p-display--table-caption {
  display: table-caption;
}
.p-display--table-column-group {
  display: table-column-group;
}
.p-display--table-header-group {
  display: table-header-group;
}
.p-display--table-footer-group {
  display: table-footer-group;
}
.p-display--table-row-group {
  display: table-row-group;
}
.p-display--table-cell {
  display: table-cell;
}
.p-display--table-column {
  display: table-column;
}
.p-display--table-row {
  display: table-row;
}
.p-display--none {
  display: none;
}
.p-display--initial {
  display: initial;
}
.p-display--inherit {
  display: inherit;
}