Breakpoints

Learn how to build responsively designed websites with Atomizer.

You can define your breakpoints as Media Queries 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 class names.

Usage

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

Explicit Breakpoints

Append --<breakpoint name> to any Atomizer 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:

• 12px inside the sm breakpoint
• 14px inside the md breakpoint
• 20px inside the lg breakpoint

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

Media Queries

You can 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>

• Below 700px, the boxes are displayed on top of each other (D(f)--sm on applies over this width)
• Above 999px, the boxes are displayed on 2 rows, 2 by 2 (W(50%)--sm)
• Above 1200px, the boxes are displayed side-by-side, on a single row (W(25%)--lg)

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!

Container Queries

Container queries use 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

named containers require an additional config step.

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 the ContType() and ContName() classnames, 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>
</div>

This will output the following CSS

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

This example shows how you could change the 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>

• Below 300px on the container div, the boxes are displayed on top of each other (Fxd(c)--contmw300)
• Below 300px on the container div, the headline size will be (Fz(1.5rem))

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