media-query-mixins/README.md

Usefull, very lightweight media query JAVASCRIPT, stylus and scss mixins for predefined responsive breakpoints and orientation

# 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
```sass
.responsive {
  @include landscape {
      width: 50%;
  }
  @include protrait {
      width: 100%;
  }
  @include sm {
    width: 50%;
  }
}
```
###### Stylus
```stylus
.responsive
  +landscape()
    width: 50%;
  
  +protrait()
      width: 100%;
  
  +sm()
    width: 50%;
```
Will compile to
```css
@media (orientation: landscape) {
  .responsive {
    width: 50%;
  }
}
@media (orientation: portrait) {
  .responsive {
    width: 100%;
  }
}
@media (min-width: 568px) {
  .responsive {
    width: 50%;
  }
}
```
###### 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

```javascript
xl(txt => `it's all fine, ${txt}`, 'xl') || 
lg(txt => `it's all fine, ${txt}`, 'lg') || 
md(txt => `it's all fine, ${txt}`, 'md') || 
sm(txt => `it's all fine, ${txt}`, 'sm') || 
min(txt => `it's all fine, ${txt}`, '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:

```javascript
rSm(txt => `it's all fine, ${txt}`, 'sm') ||
rMd(txt => `it's all fine, ${txt}`, 'md') || 
rLg(txt => `it's all fine, ${txt}`, 'xl') || 
rXl(txt => `it's all fine, ${txt}`, 'xl') || 
max(txt => `it's all fine, ${txt}`, 'max')
```