Chota µCSS Framework
A micro CSS framework for rapid prototyping.
Some Text Styles of Choṭā µCSS
Examples from the Chota MicroCSS project website.
- .text-[color]
-
Text Colors
.text-primary
.text-light
.text-white
.text-dark
.text-grey
.text-error
.text-success
- bg-[color]:
-
Background Colors
.bg-primary .text-white
.bg-light .text-dark
.bg-dark .text-light
.bg-grey .text-white
.bg-error .text-light
.bg-success .text-dark
Full Utilities #fullutilities-section.is-horizontal-align
Chota has a set of utility classes that can be used to style elements quickly and easily. Here are some examples:
Primary text -
text-primaryLight text -
text-lightWhite text -
text-whiteDark text -
text-darkGrey text -
text-greyError text -
text-errorSuccess text -
text-successprimary background -
bg-primaryLight background -
bg-lightDark background -
bg-darkGrey background -
bg-greyError background -
bg-errorSuccess background -
bg-successprimary border -
bd-primaryLight border -
bd-lightDark border -
bd-darkGrey border -
bd-greyError border -
bd-errorSuccess border -
bd-successfloats an element to the right -
pull-rightfloats an element to the left -
pull-leftcenter aligns text -
text-centerleft aligns text -
text-leftright aligns text -
text-rightjustify aligns text -
text-justifytext to uppercase -
text-uppercasetext to lowercase -
text-lowercasecapitalizes text -
text-capitalizemake the element 100% width -
is-full-widthvertically centers element using flex -
is-vertical-alignhorizontal centers element using flex -
is-horizontal-aligncenters element using flex -
is-centerright aligns element using flex -
is-rightleft aligns element using flex -
is-leftfixed positioned element -
is-fixedremoves any padding -
is-paddinglessremoves any margin -
is-marginlessmake the element round -
is-roundedclears the floats -
clearfixhides the element completely -
is-hiddenLast but not least -
is-half-screen - makes the element 50% view height Note: this is a user adaptation of Chota .is-full-screen