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 or english_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 and application.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) and white(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 and line-height properties.
• +size(width, height)
  shortcut.
• Compact and nice
  +sticky-footer
  mixin.
• +clearfix
  by ::after with clear: both.

JS Helpers

• after(ms, callback)
  and
  every(ms, callback)
  syntax sugar to clean up setTimeout and setInterval in CoffeeScript.
• Script to prevent
  default behavior for AJAX links with href="#" to clean event listeners from
  noisy return 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 and evil.put
  shortcuts.
• evil.win, evil.body and evil.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
  and app/assets/javascripts to precompile. You should only store loadable
  files in subdirs.
• Disable assets generation on controller and action generation.