purecss 0.0.3 → 0.0.5

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZGRlZWVmZGY4NGIyMDgwYzg0MjZjNTJlYTZjMzI5MTA1OGFhZGFiOQ==
+    OWQ5ZGRiNjYwMjdjYWY3N2EwY2Q2Y2Q4MDM0OTMzYjA5NWRjYWJmYw==
   data.tar.gz: !binary |-
-    NjQyMDQxNTVlYjllNWY0MDUwOGFjNjc0MDFiNzVlNDlmM2IyOTNiNQ==
+    MTE1MzhiMmVjZTk2M2VmY2QxNTQ5NjQwYzgwNzY3ZTA4YjU5OGU1Mg==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    N2QyODljYzVmNjE2YzZlZDVlODUxYmRjZDdjMmQ1NjgwOTEwNmE2MDVmMzVk
-    NzdmOTJhZGQ5OWUzNDNiN2UzYzExOGQyOThkOGU5OTAzZjVkMGMzYzYyODli
-    YWQ2MTdiNDQzMzEwNWJhMWRhNzFmMDIwOTNjODZiYWQzMzQyYWY=
+    N2IzMDYyNTFmODhiOWI2YTNjZDU3ZmM2MDhiYjg2YTgyMDA1NDEwMjA0YTQ2
+    YmViNDRkMzQ3ZjMzNDViZTY3MzZjMDUwZTlmMDFlNGUxNmNmYTVkYjBjMDcz
+    M2EyZmJjZmFlNzhjM2Y0MDRmZmQ2YTFiMWIzMDc2Y2JjNDFmMDI=
   data.tar.gz: !binary |-
-    NjM4M2IwZGQ1M2ZjZjA0Yzc4NWZhMzgxZDg5OWRhNWVlN2M4MmFhZThhNjk3
-    YWRmOGRjODgyMmM4NmU1ZDBkOWJhMzBhMWRkOWQ2NThkZjhiZmQwZDNhNDk0
-    NzU2OWIzMWRhZDg4NGNhYzg4ZjU4NDg3MWQ4MjMxYTZmZjZiZDA=
+    ODhkNDk5ZTUwNzRjNGJmNDNiYWJiZWZiMWYwODBlODc4ZWIzNTg2Mzg5ZDM5
+    YTI3ZTFkOTc3YTJmYjA3MTM1YjMyNDVjNDdmNjhhMmI4OTg3NWYzMjk4ZWYw
+    MDkyODllYTBkMzQ4NjUzNTg5MTY5Mzk0MzE1MTYwNjU0NzZkNDg=

data/README.md

@@ -1,7 +1,11 @@
 # Purecss
 
-Pure (purecss.io) 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 it to the Assets Pipeline of Rails 3.2.
+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 it 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, ...
 
 I cite directly from [purecss.io](http://purecss.io)
  > CSS with a minimal footprint.
@@ -33,7 +37,7 @@ for the non-responsive one.
 
 If you want to include just an individual module (see [purecss.io](http://purecss.io)) add instead
 
-    *= require purecss/<module>.js
+    *= require purecss/<module>
 
 
 
@@ -44,9 +48,22 @@ If it is too long for you, you can avoid touching the manifest files and run the
 
 ## Usage
 
-After the installation you can simply go to [purecss.io](http://purecss.io) and use (or extend) their predefined styles.
+After the installation you can simply go to [purecss.io](http://purecss.io) and use their styles.
+
+### Custom CSS
+
+Add to your css manifest file, under the ```require purecss``` line:
+
+    *= require purecss-addons
 
-Enjoy!
+It provides the CSS classes 
+
+- ```pure-custom-caret``` for the dropdown menu
+- ```pure-menu-custom-separator-vertical``` to add a vertical separator to the horizontal menu
+- ```pure-custom-close``` for nicer ```x``` to close eventual modal views (to display modals, bootstrap-modal works quite well with Pure)
+- *EXPERIMENTAL* ```pure-menu-custom-pull-right``` to align the menu to the right (must be in the same tag of ```pure-menu```. _Bug: the height of the header is sligtly bigger using this class._)
+
+The flag *EXPERIMENTAL* means that the functionality is not fully functional, you can try it and use it but its syntax/use could change in a next release. If you have a fix please add a pull request!
 
 ### Dropdown Menu
 
@@ -59,18 +76,20 @@ and then use the class ```pure-menu-has-children``` for the ```li``` that will c
 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:
+I hope it is clear with the following example (that includes the custom css too):
 ```
 <header class="header pure-u-1"> 
-  <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
+  <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal pure-custom-menu-pull-right">
+      <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="puren-menu-has-children">
-              <a href="#" data-toggle="dropdown">Account</a>
-              <ul class="pure-menu-children" role="menu">
+            <li class="pure-menu-custom-separator-vertical"></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>
@@ -87,9 +106,11 @@ I hope it is clear with the following example:
 </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 :)
+
 ## TODO
 
-I liked the idea of the light and functional Pure CSS and I think it is worthwile to create a gem for it.
+Fix the pull-right menu CSS.
 
 I'd like to add
 - Helpers for navigation bars, menus, forms, grids, ...
@@ -98,7 +119,6 @@ I'd like to add
 - Way to keep the css updated
 - Any other ideas?
 
-
 ## Contributing
 
 1. Fork it
@@ -109,5 +129,7 @@ I'd like to add
 
 ## Changelog
 
-0.0.2 GEM restructured following [Gemify Assets for Rails](http://prioritized.net/blog/gemify-assets-for-rails/), added individual modules, improved size
+- 0.0.4 Slightly improved dropdown (now it works even with different menu font), added purecss-custom.css
+- 0.0.3 Added Dropdown script on top of jQuery, corrected README
+- 0.0.2 Gem restructured following [Gemify Assets for Rails](http://prioritized.net/blog/gemify-assets-for-rails/), added individual modules, improved size
 

data/app/assets/javascripts/purecss-dropdown.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * purecss-dropdown.js v2.3.2
+ * purecss-dropdown.js v0.0.2
  * ============================================================
  * Copyright 2013 Marcello Seri
  * Based on Twitter Bootstrap
@@ -31,7 +31,7 @@
         var $el = $(element).on('click.dropdown.data-api', this.toggle)
         $('html').on('click.dropdown.data-api', function () {
           $el.parent().removeClass('pure-menu-open')
-          $el.parent().children('.pure-menu-children').css({"left":"-10710px", "top":"-12216px"})
+          $el.parent().children('.pure-menu-children').css({"left":"-10000px", "top":"-10000px"})
         })
       }
 
@@ -58,7 +58,7 @@
           $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
         }
         $parent.toggleClass('pure-menu-open')
-        $parent.children('.pure-menu-children').css({"left":"0px", "top":"36px"})
+        $parent.children('.pure-menu-children').css({"left":"0px", "top":(getParent($(this)).height()-2)+'px'})
       }
 
       $this.focus()
@@ -113,7 +113,7 @@
     $('.dropdown-backdrop').remove()
     $(toggle).each(function () {
       getParent($(this)).removeClass('pure-menu-open')
-      getParent($(this)).children('.pure-menu-children').css({"left":"0px", "top":"36px"})
+      getParent($(this)).children('.pure-menu-children').css({"left":"0px", "top":(getParent($(this)).height()-2)+'px'})
     })
   }
 

data/app/assets/stylesheets/purecss-addons.css

@@ -0,0 +1,57 @@
+.pure-custom-close {
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+
+.pure-custom-close:hover,
+.pure-custom-close:focus {
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+}
+
+.pure-custom-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border-top: 4px solid #777;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  content: "";
+  margin-left: 2px;
+}
+
+.pure-menu-custom-separator-vertical {
+  background-color:#dfdfdf;
+  display:block;
+  width: 1px;
+  height: 20px;
+  font-size:0;
+  overflow:hidden
+}
+
+/* *************************************
+Experimental! The syntax/use could change 
+in the near future
+************************************** */
+.pure-menu-custom-pull-right {
+  text-align: justify;
+}
+
+.pure-menu-custom-pull-right:after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  font-size:0;
+  line-height:0;
+  margin: 0;
+  padding: 0;
+}

data/lib/purecss/version.rb

@@ -1,3 +1,3 @@
 module Purecss
-  VERSION = "0.0.3"
+  VERSION = "0.0.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: purecss
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
 platform: ruby
 authors:
 - mseri
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-01 00:00:00.000000000 Z
+date: 2013-06-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -54,12 +54,13 @@ dependencies:
         version: '0'
 description: Pure CSS (purecss.io) for Rails 3.1 Asset Pipeline
 email:
-- seriedivergente@gmail.com
+- marcello.seri@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - app/assets/javascripts/purecss-dropdown.js
+- app/assets/stylesheets/purecss-addons.css
 - lib/purecss/engine.rb
 - lib/purecss/generators/install_generator.rb
 - lib/purecss/generators/templaets/application.css