Skip to content

Latest commit

 

History

History
125 lines (95 loc) · 2.73 KB

responsive-classes.md

File metadata and controls

125 lines (95 loc) · 2.73 KB
Raw

ds.utils.responsiveClasses

Add responsive classes to html and changes when window resizes. Used in combination with css, which set content on body:after.

Content in body:after should always be one of the following:

  • is-media-xs
  • is-media-sm
  • is-media-md
  • is-media-lg

Dependencies:

In browser:

<script src="scripts/libs/lodash.js"></script>
<script src="scripts/libs/jquery.js"></script>
<script src="scripts/libs/eventemitter.js"></script>
<script src="scripts/libs/ds-frontend/scripts/utils/responsive-classes.js"></script>
<script>
    ds.utils.responsiveClasses;
</script>

With browserify:

var responsiveClasses = require('ds-frontend/scripts/utils/responsive-classes');

Example css

body:after {
    position: fixed;
    left: -99999px;
    content: "is-media-xs";
}
@media (min-width: 768px) {
    body:after { content: "is-media-sm"; }
}
@media (min-width: 992px) {
    body:after { content: "is-media-md"; }
}
@media (min-width: 1200px) {
    body:after { content: "is-media-lg"; }
}

#.init()

Set class on <body> and updates on window resize and orientation change.

#.on('media:changed', callback)

Name Type Description
callback function Callback when class/media has changed

Example

ds.utils.responsiveClasses.on('media:changed', function() {
    if (ds.utils.responsiveClasses.isXs()) {
        // Collapsed menu
    } else {
        // Full menu
    }
});

#.isXs(), #.isSm(), #.isMd(), #.isLg()

Checks if media size is of type.

Return

boolean: Whether the media size is of type.

Example

ds.utils.responsiveClasses.on('media:changed', function() {
    if (ds.utils.responsiveClasses.isXs()) {
        // Collapsed menu
    } else {
        // Full menu
    }
});

#.isGtXs(), #.isGtSm(), #.isLtMd(), #.isLtLg()

Checks if media size is greater/less than.

Return

boolean: Whether the media size is greater/less than.

Example

ds.utils.responsiveClasses.on('media:changed', function() {
    if (ds.utils.responsiveClasses.isGtXs()) {
        // Full menu for sm, md and lg
    }
});