Skip to main content

Nifty Modal Window Effects Sass

··1 min

I’ve compiled the css from Nifty Modal Window Effects (Thanks Mary Lou) and rewrote it with sass. You can add which modal effects you want to use, as well as customize the modals easily with sass variables.

The modal effects classes were renamed, but otherwise the code remains the same.

Here is the repo: Nifty Modal Window Effects Sass.

Install #

You’ll need to run bower install nifty-modal-sass and then npm install in the bower_components if you need to compile the css. You can compile the sass into css after installing gulp by running gulp styles.

Otherwise import the sass scss/modal.scss into your own project.

Setup #

Customize your modals in scss/helpers/_settings.scss. You can disable and enable which modal effects you want to use by adding a false or true value to the $use-* variables. Disabled modal effect styles won’t be added to the stylesheet.