Unison.js | Responsive Web Design

Unison.js

Unison JS
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>

  • Resource Name

    Unison.js

  • Resource Creator

    Dan Chilton

Description

Sync your media queries across your CSS, JS and markup with this simple JS plugin.

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.