Learn how to build responsively designed websites with Atomizer.

You can define your breakpoints as media 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 media 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.


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.


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>

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!