Unison.js
Sync your media queries across your CSS, JS and markup with this simple JS plugin.
Unison requires that you are using a preprocessor of some description for declaring your CSS, and it works with Sass, Less and Stylus.
To get started you need to declare your media queries in your preprocess files
// SASS
$usn-x-small : 200px;
$usn-small : 400px;
$usn-small-medium : 600px;
$usn-medium : 800px;
$usn-large-medium : 1000px;
$usn-large : 1200px;
$usn-x-large : 1400px;
// LESS
@usn-x-small : 200px;
@usn-small : 400px;
@usn-small-medium : 600px;
@usn-medium : 800px;
@usn-large-medium : 1000px;
@usn-large : 1200px;
@usn-x-large : 1400px;
// STYLUS
$usn-x-small = 200px
$usn-small = 400px
$usn-small-medium = 600px
$usn-medium = 800px
$usn-large-medium = 1000px
$usn-large = 1200px
$usn-x-large = 1400px
Now that you’ve declared the widths you need to give them names to use as hooks for your JS.
// SASS
$mq-sync:
usn-x-small $usn-x-small,
usn-small $usn-small,
usn-small-medium $usn-small-medium,
usn-medium $usn-medium,
usn-large-medium $usn-large-medium,
usn-large $usn-large,
usn-x-large $usn-x-large
;
// LESS
@breakpoints: "usn-x-small @{usn-x-small}",
"usn-small @{usn-small}",
"usn-small-medium @{usn-small-medium}",
"usn-medium @{usn-small-medium}",
"usn-large-medium @{usn-large-medium}",
"usn-large @{usn-large}",
"usn-x-large @{usn-x-large}";
// STYLUS
$mq-sync = usn-x-small $usn-x-small,
usn-small $usn-small,
usn-small-medium $usn-small-medium,
usn-medium $usn-medium,
usn-large-medium $usn-large-medium,
usn-large $usn-large,
usn-x-large $usn-x-large
The final thing you need to do is include your js file into your page and you’re away.
<script src="unison.min.js"></script>
