Skip to main content

Text transform

The text transform classes set the text-transform style for an element.

Each text transform base class has a class to go with each of the media query viewport sizes. For example:

text-upper-3xs
text-upper-2xs
text-upper-xs
text-upper-sm
text-upper-md
text-upper-lg
text-upper-xl
text-upper-1xl
text-upper-3xl
text-upper-4xl
text-upper-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/typography/transform.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/typography/3xs/transform.css';
@import 'cacao-css/dist/typography/2xs/transform.css';
@import 'cacao-css/dist/typography/xs/transform.css';
@import 'cacao-css/dist/typography/sm/transform.css';
@import 'cacao-css/dist/typography/md/transform.css';
@import 'cacao-css/dist/typography/lg/transform.css';
@import 'cacao-css/dist/typography/xl/transform.css';
@import 'cacao-css/dist/typography/2xl/transform.css';
@import 'cacao-css/dist/typography/3xl/transform.css';
@import 'cacao-css/dist/typography/4xl/transform.css';
@import 'cacao-css/dist/typography/5xl/transform.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

typography/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

.text-lower {
    text-transform: lowercase;
}

.text-upper {
    text-transform: uppercase;
}

.text-capital {
    text-transform: capitalize;
}

3xs styles​

typography/3xs/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-3xs) {
    .text-lower-3xs {
        text-transform: lowercase;
    }

    .text-upper-3xs {
        text-transform: uppercase;
    }

    .text-capital-3xs {
        text-transform: capitalize;
    }
}

2xs styles​

typography/2xs/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-2xs) {
    .text-lower-2xs {
        text-transform: lowercase;
    }

    .text-upper-2xs {
        text-transform: uppercase;
    }

    .text-capital-2xs {
        text-transform: capitalize;
    }
}

xs styles​

typography/xs/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-xs) {
    .text-lower-xs {
        text-transform: lowercase;
    }

    .text-upper-xs {
        text-transform: uppercase;
    }

    .text-capital-xs {
        text-transform: capitalize;
    }
}

sm styles​

typography/sm/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-sm) {
    .text-lower-sm {
        text-transform: lowercase;
    }

    .text-upper-sm {
        text-transform: uppercase;
    }

    .text-capital-sm {
        text-transform: capitalize;
    }
}

md styles​

typography/md/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-md) {
    .text-lower-md {
        text-transform: lowercase;
    }

    .text-upper-md {
        text-transform: uppercase;
    }

    .text-capital-md {
        text-transform: capitalize;
    }
}

lg styles​

typography/lg/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-lg) {
    .text-lower-lg {
        text-transform: lowercase;
    }

    .text-upper-lg {
        text-transform: uppercase;
    }

    .text-capital-lg {
        text-transform: capitalize;
    }
}

xl styles​

typography/xl/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-xl) {
    .text-lower-xl {
        text-transform: lowercase;
    }

    .text-upper-xl {
        text-transform: uppercase;
    }

    .text-capital-xl {
        text-transform: capitalize;
    }
}

2xl styles​

typography/2xl/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-2xl) {
    .text-lower-2xl {
        text-transform: lowercase;
    }

    .text-upper-2xl {
        text-transform: uppercase;
    }

    .text-capital-2xl {
        text-transform: capitalize;
    }
}

3xl styles​

typography/3xl/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-3xl) {
    .text-lower-3xl {
        text-transform: lowercase;
    }

    .text-upper-3xl {
        text-transform: uppercase;
    }

    .text-capital-3xl {
        text-transform: capitalize;
    }
}

4xl styles​

typography/4xl/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-4xl) {
    .text-lower-4xl {
        text-transform: lowercase;
    }

    .text-upper-4xl {
        text-transform: uppercase;
    }

    .text-capital-4xl {
        text-transform: capitalize;
    }
}

5xl styles​

typography/5xl/transform.css
/* =========================================================================== *\
    Text transform utilities
\* =========================================================================== */

@media (--m-5xl) {
    .text-lower-5xl {
        text-transform: lowercase;
    }

    .text-upper-5xl {
        text-transform: uppercase;
    }

    .text-capital-5xl {
        text-transform: capitalize;
    }
}