Purecss for Ruby on Rails

Pure is a set of small, responsive CSS modules that you can use in every web project realized by the yahoo developer team. This gem adds Pure CSS 0.1.0 to the Assets Pipeline of Rails 3.2.

Additionally this gem provides

• a jQuery function that automatically enables the dropdown menu without the need of additional rails packages/frameworks (YUI or others).
• a small optional set of css for right-aligned horizontal menus, CSS carets (font-independent), vertical separators, alerts, ...

I cite directly from purecss.io

CSS with a minimal footprint.

Pure is ridiculously tiny. The entire set of modules clocks in at 5.7KB minified and gzipped, without forgoing responsive styles, design, or ease of use. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

Note: will_paginate is integrated with purecss pagination style using the purecss-will_paginate gem.

Installation

Add this line to your application's Gemfile:

gem 'purecss'

And then execute:

$ bundle

Then you can add the following directives to your css manifest file (application.css):

*= require purecss

for the responsive bundle, or

*= require purecss-nr

for the non-responsive one.

If you want to include just an individual module (see purecss.io) add instead

*= require purecss/<module>

If it is too long for you, you can avoid touching the manifest files and run the generator (with optional parameter responsive/nonresponsive):

$ rails generate purecss:install

Usage

After the installation you can simply go to purecss.io and use their styles.

Custom CSS

Add to your css manifest file, under the require purecss line:

*= require purecss-addons

It provides the CSS classes

• pure-custom-caret for the dropdown menu
• pure-custom-close for nicer x to close eventual modal views (to display modals, bootstrap-modal works quite well with Pure)
• pure-custom-alert, pure-custom-alert-error, pure-custo-alert-success, pure-custom-alert-warning
• pure-menu-pull-right to align the menu to the right (must be in the same tag of pure-menu, see this example). Thanks to msweeney for this workaround.

Dropdown Menu

For dropdown menu I developed a small workaround based on the code of bootstrap-dropdown.js. It is enough to add the following directive to your js manifest file (application.js):

//= require purecss-dropdown

and then use the class pure-menu-has-children for the li that will contain the submenu, add data-toggle="dropdown" to its label element (tipically an anchor), and use the class pure-menu-children for the ul that contains the submenu.

I hope it is clear with the following example:

<header class="header pure-u-1"> 
  <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
      <div class="pure-menu-heading"><%= link_to "sample app", root_path, id: "logo" %></div>
        <ul>
          <li><%= link_to "Home", root_path %></li>
          <li><%= link_to "Help", help_path %></li>
          <% if signed_in? %>
            <li><%= link_to "Users", users_path %></li>
            <li class="pure-menu-can-have-children pure-menu-has-children">
              <a href="#" data-toggle="dropdown">Account <span class="pure-custom-caret"></span></a>
              <ul class="pure-menu-children">
                <li><%= link_to "Profile", current_user %></li>
                <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                <li class="pure-menu-separator"></li>
                <li>
                  <%= link_to "Sign Out", signout_path, method: "delete" %>
                </li>
              </ul>
            </li>
          <% else %>
            <li><%= link_to "Sign In", signin_path %></li>
          <% end %>
        </ul>
      </div>
</header>

The actual dropdown menu code do not support dropdown submenus, for that you can use YUI as in purecss.io example, or pull me a workaround :)