Adaptive Evil Blocks¶ ↑
Adaptive Evil Blocks is a filter that adds adaptivity to Evil Blocks. The matchMedia.js polyfill is used for old browsers.
The adaptivity is provided by the @media
method powered by underlying matchMedia API. So you can use media queries syntax.
Installation¶ ↑
Ruby on Rails¶ ↑
Add the adaptive-evil-blocks-rails
gem to Gemfile
:
gem "adaptive-evil-blocks-rails"
Add adaptive-evil-blocks
to your scripts:
//= require adaptive-evil-blocks
Others¶ ↑
Add the pkg/adaptive-evil-blocks.js
file to your project or install the bower package:
bower install adaptive-evil-blocks
If you support old browsers, you may want to use the pkg/adaptive-evil-blocks.polyfilled.js
file.
Usage¶ ↑
Run code once only if it matches a media query:
evil.block '@@block', init: -> ... @media '(max-width: 399px)', -> ... @media '(min-width: 400px)', -> ...
The match
callback is executed every time on query match, the mismatch
callback is executed every time on query mismatch.
evil.block '@@block', init: -> ... @media '(max-width: 399px)', match: -> ... @media '(min-width: 400px)', match: -> ... @media '(max-width: 399px)', match: -> ... , mismatch: -> ... @media '(min-width: 400px)', match: -> ... , mismatch: -> ...
Also you can omit brackets for properties like max-width
and min-width
:
evil.block '@@block', init: -> ... @media 'max-width: 399px', -> ...