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'] ] |
Utility Classes
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
Post a Comment