Facades

Facades is a gem designed to assist with front-end development and misc design. It includes a compass plugin / mixins, and various Rails view helpers to help with common development tasks.

CSS / SASS

Facades includes several mixins and includes for setting up a few defaults within your css.

Reset

A HTML5-friendly reset is included to ensure elements like aside, section etc are setup properly. It also sets up a few typography defaults using Compass' vertical-rhythm format. To configure, assign the variables to $font-size and $line-height. These will default to 12px / 24px. Vertical-rhythm is defaulted to relative font sizes.

$font-size:12px;
$line-height:24px;

@import 'facades/reset';  // Will automatically setup the vertical rhythm

Layout

Mixins are provided for a fixed grid, forms, and grid debugging.

Grid Setup

$grid-width: 960px;         // Full width of the container
$grid-columns: 24;          // Total number of columns
$grid-gutter-width: 10px;   // Spacing between each column

@import 'facades/layout/grid'; /( or include 'facades/layout')
#wrapper{ @include container; }

To debug grid alignment, a shortcut to the Compass' grid background is provided.

#wrapper{ @include debug-grid; }

Mixins

Below is a list of available mixins

Interface
-----------------------
tool-tip
flash-message
flash-message-colors

Forms
----------------------
form-field-list
form-split-field-list
form-field
form-input
form-select
form-textarea
form-errors
form-error-message
form-field-hint

Grid (based off of the blueprint grid)
---------------------
column
push
pull
append
prepend
span (function) // width:span(2);

Text
----------------------
leading (shortcut to Compass adjust-leading-to)
font-size (shortcut to Compass adjust-font-size-to)
inset-text (text-shadow text insetting)

Utility
----------------------
position (shorthand position relative/fixed/absolute)
luminance ( return a colors lightness in terms of 'light' or 'dark' )
tint (tint a color with white)
shade (darken a color with black)

Helpers

Layout Helpers

Variables Setup variables via templates to be used within your layout.

  • page_id The id of the current page, useful for targeting with CSS. Defaults to "controller_action" in Rails
  • page_title Used to populate the title of the page
  • keywords Used to populate the keywords meta tag
  • description Used to populate the description meta tag

To assign variables, pass their value to the method. To display, use the method without any arguments

# index.html.erb
<%= page_id('home') %>

# In your layout
body id="<%= page_id %>"

Misc

meta_tag A shortcut for creating HTML meta tags.

<%= meta_tag('name', 'content') %> #=> <meta name="name" content="content" />

robot_meta_tag A shortcut for defining a robot meta tag based on the Rails.env. Useful to keep spiders out of your staging environments

# In any environment but production
<%= robot_meta_tag %> #=> <meta name="robots" content="noindex, nofollow" />

# In production
<%= robot_meta_tag %> #=> <meta name="robots" content="index, follow" />

button_link Shortcut for creating a link class="button" with an optional icon

<%= button_link 'Link Text', some_path, icon: 'image.png' %>  #=> <a href='#' class='button'><img src='image.png' /></a>

Pagination Helper

Any model which responds to current_page and total_pages can utilize the pagination helper.

<%= paginate(collection) %>

Will render a link based list with the current collection pagination. If Facades.enable_html5 is set to true items will be wrapped in a HTMl5 <nav> tag, otherwise a div will be used. The class 'pagination' is added to that top level element. By default the included partial facades/pagination is rendered. To customize output simply override this in your application. See app/views/facades/_pagination.html.erb for more info.

Facades provides a navigation helper for creating nested navigation lists.

<%= nav do %>
    <%= nav_link 'About Me', about_path %>
    <%= nav_link 'Top Level', some_path do %>
        <%= nav_link 'Sub Item', some_sub_path %>
    <% end %>
<% end %>

Will output

<nav>
    <ol>
        <li><a href='/about-path'>About Me</a></li>
        <li><a href='/some-path'>Top Level</a>
            <ol>
                <li><a href="/some-sub-path">Sub Item</a></li>
            </ol>
        </li>
    </ol>
</nav>

Note: The <nav> tag is only included if Facades.enable_html5 is set to true.

As a convenience, the class on will be added to a link when the current url matches that link. This can be overridden by using the matcher or proc attributes when calling nav_link. When using a proc/lambda, returning true will set the on class.

# Current path /home
<%= nav_link 'Path', some_path, proc: lambda{ |current_path| true } %> #=> <a href='/anything' class='on'>Path</a>

When using :matcher, pass a string or regular expression in which the request.path should match to be on.

# Current path /somewhere
<%= nav_link 'Path', '/something-else', matcher: /somewhere/ %> #=> <a href='/something-else' class='on'>Path</a>