Utility classes

Helpers classes to help build components without adding extra css. Default values can be changed via CSS or LESS @variables.

Margin
.m0Clear all margins
.ml0Clear left margin
.mr0Clear right margin
.mt0Clear top margin
.mb0Clear bottom margin
.mAll margins to 16px
.mlMargin left to 16px
.mrMargin right to 16px
.mtMargin top to 16px
.mbMargin bottom to 16px
.m-smSmall margins of 8px
.ml-smSmall margin left of 8px
.mr-smSmall margin right of 8px
.mt-smSmall margin top of 8px
.mb-smSmall margin bottom of 8px
.m-lgLarge margins of 24px
.ml-lgLarge margin left of 24px
.mr-lgLarge margin right of 24px
.mt-lgLarge margin top of 24px
.mb-lgLarge margin bottom of 24px
.m-xlExtra large margins of 32px
.ml-xlExtra large margin left of 32px
.mr-xlExtra large margin right of 32px
.mt-xlExtra large margin top of 32px
.mb-xlExtra large margin bottom of 32px
.mvVertical margins of 16px
.mhHorizontal margins of 16px
.mv-lgLarge vertical margins of 24px
.mh-lgLarge horizontal margins of 24px
.mv-smSmall vertical margins of 8px
.mh-smSmall horizontal margins of 8px
Padding
.p0Clear all paddings
.pl0Clear left padding
.pr0Clear right padding
.pt0Clear top padding
.pb0Clear bottom padding
.pAll paddings to 16px
.plpadding left to 16px
.prpadding right to 16px
.ptpadding top to 16px
.pbpadding bottom to 16px
.p-smSmall paddings of 8px
.pl-smSmall padding left of 8px
.pr-smSmall padding right of 8px
.pt-smSmall padding top of 8px
.pb-smSmall padding bottom of 8px
.p-lgLarge paddings of 24px
.pl-lgLarge padding left of 24px
.pr-lgLarge padding right of 24px
.pt-lgLarge padding top of 24px
.pb-lgLarge padding bottom of 24px
.p-xlExtra large paddings of 32px
.pl-xlExtra large padding left of 32px
.pr-xlExtra large padding right of 32px
.pt-xlExtra large padding top of 32px
.pb-xlExtra large padding bottom of 32px
.pvVertical paddings of 16px
.phHorizontal paddings of 16px
.pv-lgLarge vertical paddings of 24px
.ph-lgLarge horizontal paddings of 24px
.pv-smSmall vertical paddings of 8px
.ph-smSmall horizontal paddings of 8px
Sizes
.fh / .fwHeight or Width at 100%
.fh-sm / .fw-smHeight or Width at 100% above 768px
.fh-md / .fw-mdHeight or Width at 100% above 992px
.fh-lg / .fw-lgHeight or Width at 100% above 1200px
.thumb8Set width and height of 8px
.thumb16Set width and height of 16px
.thumb24Set width and height of 24px
.thumb32Set width and height of 32px
.thumb40Set width and height of 40px
.thumb48Set width and height of 48px
.thumb64Set width and height of 64px
.thumb80Set width and height of 80px
.thumb96Set width and height of 96px
.thumb128Circle with radius 128px
.initial8Circle with radius 8px
.initial16Circle with radius 16px
.initial24Circle with radius 24px
.initial32Circle with radius 32px
.initial40Circle with radius 40px
.initial48Circle with radius 48px
.initial64Circle with radius 64px
.initial80Circle with radius 80px
.initial96Circle with radius 96px
.initial128Circle with radius 128px
.wd-xxsSet width of 60px
.wd-xsSet width of 90px
.wd-smSet width of 150px
.wd-sdSet width of 200px
.wd-mdSet width of 240px
.wd-lgSet width of 280px
.wd-xlSet width of 320px
.wd-xxlSet width of 360px
.wd-wideSet width of 100%
.wd-autoSet width auto
.wd-zeroSet width of 0px
Material Shadows
Miscellaneous
.table-fixedMake table layout fixed
.ohOverflow hidden (clear floats)
.oaOverflow auto (adds scrollbars)
.shadow-clearRemove box shadow
.radius-clearRemove border radius
.link-unstyledRemove underline and outline styles
.reader-blockMakes paragraphs more readable
.image-listA list of images links overlap to the previous
textarea.no-resizeRemove resize option from Texareas
.inlineForces display: inline
.blockForces display: block
Text & Font icons
.text-whiteMake text color white
.text-alphaMake text color white 50% opacity
.text-alpha-inverseMake text color dark 50% opacity
.text-gray-darkerMake text color @gray-darker
.text-gray-darkMake text color @gray-dark
.text-grayMake text color @gray
.text-gray-lightMake text color @gray-light
.text-gray-lighterMake text color @gray-lighter
.text-inheritMake text color inherit
.text-softMake text color black 26% opacity
.text-lightMake text color white 74% opacity
.text-smMake text 85% smaller
.text-mdMake text 90% bigger
.text-lgMake text 3x bigger
.text-nowrapMake text no wrap
.text-thinMake text font weight 100
.text-boldMake text font weight bold
.text-normalMake text font weight normal
.icon-18Make icon at font size 18px
.icon-24Make icon at font size 24px
.icon-36Make icon at font size 36px
.icon-48Make icon at font size 48px
.icon-2xMake icon 2x bigger
.icon-3xMake icon 3x bigger
.icon-4xMake icon 4x bigger
.icon-5xMake icon 5x bigger
.icon-lgMake icon 33% bigger
.icon-fwMake icon fixed width
.icon-darkMake icon dark for light backgrounds
.icon-lightMake icon light for dark backgrounds
Material Colors
Backgrounds
.bg-whiteMake background color white
.bg-primaryMake background color @primary
.bg-successMake background color @success
.bg-infoMake background color @info
.bg-warningMake background color @warning
.bg-dangerMake background color @danger
.bg-gray-darkerMake background color @gray-darker
.bg-gray-darkMake background color @gray-dark
.bg-grayMake background color @gray
.bg-gray-lightMake background color @gray-light
.bg-gray-lighterMake background color @gray-lighter
.bg-transparentMake background color transparent
.bg-fadeMake background dark faded from bottom
.bg-coverMake background image cover
.bg-fullMake background image cover and no-repeat
.bg-centerMake background image cover and centered