vxsx / evil-front

Helpers for frontend from Evil Martians

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.