✨ For this demo utility classes are generated only for padding. But the possibilities are endless; using this demo you can extend it even further as much as you want.
👨💻 The classes are named using the format {property}{sides}-{size}
for default (xs) and {property}{sides}-{breakpoint}-{size}
for sm, md, lg, xl, and xxl.
To enable responsive utility just put "responsive": true
for that particular property.
e.g. The classes are, .p-5
, .p-sm-5
, .p-md-5
, .p-lg-5
, p-xl-5
, .p-xxl-5
and so on.
Classes follow a 5-grid structure.
.p-* = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,.... and etc.
* = 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 in 'px'