#at-breakpoint easy media queries for stylus
Config
define your breakpoints in the breakpoints hash $BPS inside at-breakpoint.styl, breakpoints has a name and are defined by a string indicating the feature and a value establishing when the condition will trigger. There are two shortcuts for common media features like min and max width.
$BPS = {
'xs': 349px, // (min-width: 349px)
'sm': 350px 779px, // (min-width: 350px) and (max-width: 779px)
'md': in-resolution 2dppx 780px // (in-resolution: 2dppx) and (min-width: 780px)
}
another way to add custom breakpoints us using the add-bp func.
add-bp('lg', 1024px)
if you want to print all your css classes with a suffix indicating the breakpoint name set $SUFFIX-MODE to true or to false otherwise.
$SUFFIX-MODE = true
Usage
at-breakpoint is very easy to use, just call the mixin as a block inside any css selector width the name of the breakpoint as paremeter.
.foo
margin: 0
padding: 0
+at-breakpoint('sm')
display: block
renders
.foo {
margin: 0;
padding: 0;
};
@media screen and (min-width: 350px) and (max-width: 779px) {
.foo {
display: block;
}
};
create new breakpoints on the flow
you don't need to define a new breakpoint in the $bps hash, you can do it when you want to use that new breakpoint, at-breakpoint will add it for you to the $bps hash, the only thing you need is pass the name of the breakpoint and a features string.
.foo
margin: 0
padding: 0
+at-breakpoint('xl', 1560px)
display: table
print classes with breakpoint suffix
here is where at-breakpoint is slighty different for other media querie libraries, it allows you to output a css class with a suffix representing the breakpoint name of the media querie, just pass suffix:true to at-breakpoint.
.foo
+at-breakpoint('xs', suffix:true)
display: block
renders
@media screen and (min-width: 349px) {
.foo-xs {
display: block;
};
};
additionaly you can print a class inside all breakpoints, if don't want to print a particular breakpoint add it to the excludes param as follows.
.foo
+at-breakpoint('all', suffix:true, excludes: 'md')
display: inline-block;
vertical-align: top
renders
@media screen and (min-width: 349px) {
.foo-xs {
display: inline-block;
vertical-align: top;
};
};
@media screen and (min-width: 350px) and (max-width: 779px) {
.foo-sm {
display: inline-block;
vertical-align: top;
};
};
License
MIT