Evil Front
Helpers, shortcuts and my common frontend workflows from Evil Martians.
The project is separated into 3 gems:
- Evil Front only contains helpers and doesn’t change the application environment.
- Evil Front All loads the workflow gems: Autoprefixer, Csso, Slim, JqueryCdn, Evil Blocks, Uglifier.
- Evil Front Rails loads the workflow gems and changes
Rails settings to create my common frontend workflow with a single line of code.
You can safely use Evil Front Core, but the other two gems have side effects, so I recommend to only use them for new projects.
Some of the view helpers from Evil Front Core may require Rails, but most of them work with any Ruby application.
Helpers
The Evil Front Core gem contains assets and view helpers:
View Helpers
Typography
- russian_typograph to add typographical symbols (like Russian quotes, em-dash), non-breaking spaces.
- english_typograph to add typographical symbols (like quotes, ellipsis), non-breaking spaces.
- typograph_by_locale
uses
russian_typograph
orenglish_typograph
depend on current locale. - auto_flying_quotes add tags to quotes to move it from text left horizontal line.
- ruble to insert the Russian currency character.
- capitalize_first to capitalize only first letter.
Head Tags
- title to set page title in view file and title_tag to use title from view in layout.
- standard_assets
shortcut to add
application.css
, jQuery from CDN andapplication.js
. - head_content to add some tags to head from view and head_tag to use views head tags in layout.
- disable_mobile_zoom shortcut for common viewport usage.
Other
- tel to insert phone numbers as
links with the
tel:
protocol.
Sass Helpers
black(alpha)
andwhite(alpha)
shortcut functions.- +import-ruble
mixin to enable
ruble
helper. - +flying-quotes
mixin to enable
auto_flying_quotes
helper. - +no-hover, +hover and +styled-taps mixin to work with hover/tap styles on touch devices.
- Variables with easings.
- CSS Media Queries shortcuts.
- +stroke-text(color) shortuct to add text shadow for every side of text.
- +height(size)
shortcut to set
height
andline-height
properties. - +size(width, height) shortcut.
- Compact and nice +sticky-footer mixin.
- +clearfix
by
::after
withclear: both
.
JS Helpers
- after(ms, callback)
and
every(ms, callback)
syntax sugar to clean up
setTimeout
andsetInterval
in CoffeeScript. - Script to prevent
default behavior for AJAX links with
href="#"
to clean event listeners from noisyreturn false
. - $.fn.evil.outside to listen click outside element.
- $.fn.evil.ajax(opts) to create AJAX forms.
- evil.queue(name, callback) to synchronizate animations.
- Script to enable tapped styles for touch devices.
- Script to detect 3D support.
evil.post
,evil.del
andevil.put
shortcuts.evil.win
,evil.body
andevil.doc
shortcuts.
Workflow
The Evil Front All gem loads my must-have tools:
- Sass to write pretty styles.
- Slim to write pretty views.
- CoffeeScript to write pretty scripts.
- Uglifier to compress JS.
- CSSO to compress CSS.
- Sprockets to work with assets in best way.
- jQueryCDN to load latest jQuery in best way.
- Autoprefixer to add CSS3 prefixes.
- Rails Sass Images to inline images and get their sizes from Sass.
- Evil Blocks to manage your scripts.
Rails Settings
The Evil Front Rails gem changes default Rails settings:
- Autoprecompile adds all files in root of
app/assets/stylesheets
andapp/assets/javascripts
to precompile. You should only store loadable files in subdirs. - Disable assets generation on controller and action generation.