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.5.0 to the Assets Pipeline of Rails 3.2.
Additionally it provides
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.
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
To add the viewport meta in the head of your application.html.erb it is enough to append --add_viewport_meta
when you run the generator.
After the installation you can simply go to purecss.io and use their styles.
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 (to use if you are not using FontAwsome)pure-menu-custom-separator-vertical
to add a vertical separator to the horizontal menupure-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-custom-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.For dropdown menu I developed a small workaround based on 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 becomes 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>
My dropdown menu code do not support dropdown submenus, for that you can use YUI as in purecss.io example, or pull me a workaround :)
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)