Atomizer

Breakpoints

Learn how to build responsively designed websites with Atomizer.

On this page

You can define your breakpoints as media or container queries in the config object and then apply those breakpoints to your Atomizer classes through the breakpoint suffix or automatic breakpoints.

Setting up Breakpoints

Pick the breakpoint names and whichever media or container queries you want, for example:

breakPoints: {
    sm: '@media screen and (min-width: 700px)',
    md: '@media screen and (min-width: 999px)',
    lg: '@media screen and (min-width: 1200px)',
}

Breakpoints may be named anything you want, as long as the characters are valid for use in classnames.

Media Queries

There are two ways to make use of breakpoints in your Atomizer classes: explicitly and automatically.

Explicit Breakpoints

Append --<breakpoint name> to any Atomic class to associate that styling with the breakpoint of your choice. For example, D(b)--sm and C(#000)--md will create the following rules in the related media queries:

@media screen and (min-width:700px) {
    #atomic .D(b)--sm {
        display: block;
    }
}

@media screen and (min-width:999px) {
    #atomic .C(#000)--md {
        color: #000;
    }
}

Automatic Breakpoints

Variable values and custom classes may also be mapped to breakpoints in configuration to simplify the process of applying styles. In this case, you would not be required to use the breakpoint identifier suffix on your class.

Simply set the value of your variable or custom class identifier to an object containing breakpoint names as the keys:

custom: {
    'P(logo)': {
        default: '10px',
        sm: '12px',
        md: '14px',
        lg: '20px'
    },
    gutter: {
        default: '1em',
        sm: '3em',
    }
}

In this example, the class P(logo) will style a box with a padding of 10px below the first breakpoint, but then this padding will become:

Likewise, any class that uses the variable gutter will receive different values depending on the currently active breakpoint.

Examples

When using explicit breakpoints, use multiple classes to have styles applied in the context of various breakpoints, for example:

<div class="D(f)--sm Fxw(w)">
    <div class="W(50%)--sm W(25%)--lg">1</div>
    <div class="W(50%)--sm W(25%)--lg">2</div>
    <div class="W(50%)--sm W(25%)--lg">3</div>
    <div class="W(50%)--sm W(25%)--lg">4</div>
</div>

The breakpoints for the example below have been chosen so you can see the changes within this page. Give it a try, resize your viewport!

1
2
3
4

Container Queries

We have added support for container queries using the same syntax as media queries, since you are able to define what the rule is, just ensure the names are different to the media query rules.

breakPoints: {
    sm: '@media screen and (min-width: 700px)',
    mw300: '@container (max-width: 300px)',
},

Same logic as above - append --<breakpoint name> to any Atomizer class to associate that styling with the breakpoint of your choice. For example, Fz(1rem)--mw300 will create the following rule in the related container query:

@container (max-width: 300px) {
    #atomic .Fz(1rem)--mw300 {
        font-size: 1rem;
    }
}

Named containers

It requires an additional config step if you are using named containers which is better suited to atomic anyway.

the custom value of `width300` matches the named container

breakPoints: {
    contmw300: '@container width300 (max-width: 300px)',
},
custom: {
    width300: 'width300',
},

You can define a container and its type by using ContType() & ContName(), using the named container above, your markup would look something like this:

<div class="ContType(is) ContName(width300)">
    <h2 class="Fz(2rem) Fz(1rem)--contmw300">Heading</h2>

This will output the following CSS

@container width300 (max-width: 300px) {
  .Fz(1rem)--contmw300 {
    font-size: 1rem;
  }
}

This example shows how you could change layout and properties in a named container.

<div class="ContType(is) ContName(width300)">
    <div class="D(f) Fxd(r) Fxd(c)--contmw300 Gp(20px)">
        <div class="W(75%) W(100%)--contmw300">
            <h1 class="Fz(2.5rem) Fz(1.5rem)--contmw300 ">Resize me</h1>
            ...
        </div>
    </div>
</div>

The example below is resizable Give it a try, resize by dragging the bottom right corner of the rounded box

Resize me