media-query-mixins
NOW WITH JAVASCRIPT BREAKPOINTS (see below)
Extremely lightweight, very basic mixin set for responsive MOBILE FIRST SCSS and Stylus development. Currently, there are the following breakpoints:
- sm: 568px
- md: 768px
- lg: 1024px
- xl: 1280px
And orientations:
- portrait
- landscape
Future functionalities:
- Configurable breakpoints
- Parametric breakpoints
- ...
To use it, @import the _mixin.scss or _mixin.styl file and just call as regular mixins without parameters
SCSS
} } }}
Stylus
.responsive ) width: 50%; ) width: 100%; ) width: 50%;
Will compile to
{}{}{}
JAVASCRIPT
Import media-query-mixins/_mixins.js Every function breakpoint accepts a function and parameters to be passed to it. It returns an object with { result: "result of the callback", match: "Breakpoint Name (sm, md, lg, xl)" } OR null if doesnt match That way you can fallback the callbacks from max to min
|| || || ||
This would return { result: "it's all fine, md", match: 'md' } for medium screens
There are methods for desktop first aproach, where instead of testing min-width of the screen, it tests the max width. The fallback method calling would look like:
|| || || ||