Utility Classes

June 08, 2024

Here's general utility classes that I find helpful when building a web app :

Obsoletes Features

To temporarily hide obsolete features. It set the dimension of the element to zero in case the `display:none!important;` is not enough to hide the element, e.g. loses to higher specificity of order of occurence.

css
.obsoletes{display:none!important;height:0!important;width:0!important;overflow:hidden!important;visibility:hidden!important;position:absolute!important}

Usage :

html
[ .obsoletes
  [btn 'Submit']
]

Void/Spacing Elements

A size to adjust the size of spacing elements. This example is for horizontal spacing, but you can apply vertical spacing too using padding-right.

css
.void{display:flex}
.void-tenth{padding-bottom:0.1rem}.void-quarter{padding-bottom:0.25rem}.void-half{padding-bottom:0.5rem}.void-full,.void-1x{padding-bottom:1rem}.void-2x{padding-bottom:2rem}

Usage :

html
[
  [btn 'Submit']
  [ .void .void-half]
]

Gap Spacing

Similar to void elements, but this one is to deal with spacing on flex or grid elements.

css
.gap-quarter{gap:0.25rem}.gap-half{gap:0.5rem}.gap-full{gap:1rem}

Usage :

html
[ .d-flex .gap-half
  [btn 'Submit']
  [btn 'Cancel']
]

Comments

Thank You

for your visit