Text alignment

The align classes set the text-align styles.

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

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

How to import into your CSS

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

typography/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-justify {
    text-align: justify;
}

3xs styles

typography/3xs/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-3xs) {
    .text-center-3xs {
        text-align: center;
    }

    .text-start-3xs {
        text-align: start;
    }

    .text-end-3xs {
        text-align: end;
    }

    .text-justify-3xs {
        text-align: justify;
    }
}

2xs styles

typography/2xs/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-2xs) {
    .text-center-2xs {
        text-align: center;
    }

    .text-start-2xs {
        text-align: start;
    }

    .text-end-2xs {
        text-align: end;
    }

    .text-justify-2xs {
        text-align: justify;
    }
}

xs styles

typography/xs/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-xs) {
    .text-center-xs {
        text-align: center;
    }

    .text-start-xs {
        text-align: start;
    }

    .text-end-xs {
        text-align: end;
    }

    .text-justify-xs {
        text-align: justify;
    }
}

sm styles

typography/sm/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-sm) {
    .text-center-sm {
        text-align: center;
    }

    .text-start-sm {
        text-align: start;
    }

    .text-end-sm {
        text-align: end;
    }

    .text-justify-sm {
        text-align: justify;
    }
}

md styles

typography/md/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-md) {
    .text-center-md {
        text-align: center;
    }

    .text-start-md {
        text-align: start;
    }

    .text-end-md {
        text-align: end;
    }

    .text-justify-md {
        text-align: justify;
    }
}

lg styles

typography/lg/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-lg) {
    .text-center-lg {
        text-align: center;
    }

    .text-start-lg {
        text-align: start;
    }

    .text-end-lg {
        text-align: end;
    }

    .text-justify-lg {
        text-align: justify;
    }
}

xl styles

typography/xl/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-xl) {
    .text-center-xl {
        text-align: center;
    }

    .text-start-xl {
        text-align: start;
    }

    .text-end-xl {
        text-align: end;
    }

    .text-justify-xl {
        text-align: justify;
    }
}

2xl styles

typography/2xl/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-2xl) {
    .text-center-2xl {
        text-align: center;
    }

    .text-start-2xl {
        text-align: start;
    }

    .text-end-2xl {
        text-align: end;
    }

    .text-justify-2xl {
        text-align: justify;
    }
}

3xl styles

typography/3xl/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-3xl) {
    .text-center-3xl {
        text-align: center;
    }

    .text-start-3xl {
        text-align: start;
    }

    .text-end-3xl {
        text-align: end;
    }

    .text-justify-3xl {
        text-align: justify;
    }
}

4xl styles

typography/4xl/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-4xl) {
    .text-center-4xl {
        text-align: center;
    }

    .text-start-4xl {
        text-align: start;
    }

    .text-end-4xl {
        text-align: end;
    }

    .text-justify-4xl {
        text-align: justify;
    }
}

5xl styles

typography/5xl/align.css

/* =========================================================================== *\
    Text align utilities
\* =========================================================================== */

@media (--m-5xl) {
    .text-center-5xl {
        text-align: center;
    }

    .text-start-5xl {
        text-align: start;
    }

    .text-end-5xl {
        text-align: end;
    }

    .text-justify-5xl {
        text-align: justify;
    }
}