Skip to content

Handy utility mixins for easier Modernizr.js feature detection in your Stylus stylesheets

License

Notifications You must be signed in to change notification settings

zspecza/modernizr-stylus

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Modernizr-Stylus

npm tests

Modernizr-Stylus is a handy utility plugin for the Stylus CSS preprocessor that makes feature detection with Modernizr.js a lot easier.

It turns this...:

.test
  +yep(csstransforms, csstransforms3d)
    transform: translate3d(100px, 0, 0)
  +nope(csstransforms, csstransforms3d)
    left: 100px

...into this:

.csstransforms.csstransforms3d .test
  transform: translate3d(100px, 0, 0)
.no-js .test,
.no-csstransforms .test,
.no-csstransforms3d .test
  left: 100px

Installation

You can install Modernizr-Stylus through NPM:

$ npm install modernizr-stylus

Usage

Modernizr-Stylus is a Stylus plugin, and can be integrated in any way that Stylus plugins normally are. If you are curious how to use Stylus plugins, feel free to check out this guide.

By default, Modernizr-Stylus' mixins will be included automatically into all parsed stylesheets when included as above. If you'd like to import Modernizr-Stylus manually in Stylus when you want to use it, you can pass { implicit: false } to the Modernizr-Stylus call:

modernizr({ implicit: false })

If you do it this way, you'll need to @import Modernizr-Stylus manually wherever you'd like access to the mixins:

@import 'modernizr-stylus'

.test, .test2
  +yep(boxshadow)
    box-shadow: 0 0 3px #000;

...etc...

Miscellaneous

Credits

Daniel Guillan - initial idea / scss mixins

About

Handy utility mixins for easier Modernizr.js feature detection in your Stylus stylesheets

Resources

License

Stars

Watchers

Forks

Packages

No packages published