atomo.css

Minimal set of CSS classes as a boilerplate for new projects.

Get atomo.css

Spacing

Spaces

Space is the measure to set distances between elements. Change the variable --space-multiplier to edit the scale.

2xs

space

2xl

3xl

4xl

Margins

Use the class .m to set margins between elements. .mt is for the top margin, .ml for the left margin, .mr for the right margin and .mb for the bottom margin.


        .m -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .mt -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .ml -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .mr -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .mb -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

Paddings

Use the class .p to set paddings inside elements.


        .p -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .pt -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .pl -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .pr -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

        .pb -2xs / -xs / -s / -l / -xl / -2xl / -3xl / -4xl

Typography

Sizes

Small text

Normal text

Font size L (H5)

Font size XL (H4)

Font size 2XL (H3)

Font size 3XL (H2)

Font size 4XL (H1)


        .font-size -s / -l / -xl / -2xl / -3xl / -4xl

Styles


        .bold

        .italic

Color

Greyscale

Colors are automatically generated from one HSL color. Change the variable --color-l-multiplier to edit the color scale.


        .color-grey-l3 / .bg-color-grey-l3

        .color-grey-l2 / .bg-color-grey-l2

        .color-grey-l1 / .bg-color-grey-l1

        .color-grey / .bg-color-grey

        .color-grey-d1 / .bg-color-grey-d1

        .color-grey-d2 / .bg-color-grey-d2

        .color-grey-d3 / .bg-color-grey-d3