Responsive

HTML

Using breakpoints is as easy as in any css framework.

Every registered breakpoints in the $asterix-vars breakpoints group is available in built-in specifiers and custom specifiers created with the --spe() $responsively parameter set to true.

To use a breakpoint, add its key between the chaining string -- and the specifier's name

<div data-layout="--block--mgrid">...</div>

SCSS

You can use the --mq($bps[, $media]) mixin to build media queries.

$bps must contain one or two breakpoints, space separated.

Those breakpoints can be keys of registered breakpoint, or any pixel value.

@include --mq(xs){...} // @media screen and (min-width:480px){...}
@include --mq(521px){...} // @media screen and (min-width:521px){...}

When only one breakpoint is provided, the mixin creates a media query with a min-width set to the breakpoint value.

@include --mq(xs){
    .container{
        padding: 48px;
    }
}
/* 
@media screen and (min-width:480px){...}
*/

When two breakpoints are provided, the mixin creates a media query with a min-width using the lowest provided value, and a max-width using the highest value, minus 1.

@include --mq(xs 620px){
    .container{
        padding: 48px;
    }
}
/* 
@media screen and (min-width:480px) and (max-width:619px){...}
*/

Optional parameters

$media

default: screen

Allow to use another media string into media queries.

@include --mq(xs, print){...}
// @media print and (min-width:480px){...}