Skip to content

PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.

License

Notifications You must be signed in to change notification settings

notacouch/postcss-mqwidth-to-class

Repository files navigation

PostCSS mqwidth-to-class Build Status

PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.

Examples

/* Input example */
@media (min-width: 768px) and (max-width: 991px) {
    .foo {
        float: left;
    }
}
/* Output example */
.min-width-768px.max-width-991px .foo {
    float: left;
}

Usage

postcss([ require('postcss-mqwidth-to-class') ])

See PostCSS docs for examples for your environment.

Notes

  • Only supports px units.
  • Ignores anything else in the query, e.g. screen, print, orientation.
  • You'd need JavaScript to add the classes to the <html> or <body> tags. E.g. mqwidth-to-class.js.
  • For IE8, off the bat you can have the <html> tag via conditional comments.

Credit

I used the PostCSS Boilerplate and these two projects as a base:

About

PostCSS plugin converts min/max-width media queries to classes, useful for clients that do not support media queries e.g. IE8.

Resources

License

Stars

Watchers

Forks

Packages

No packages published