purecss 0.0.2 → 0.0.3

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    OTNmOWVkYmMzMWMwNzg4ZThkMWNkMmJiY2NhMmU0YjY2YzhlYjEwMA==
+    ZGRlZWVmZGY4NGIyMDgwYzg0MjZjNTJlYTZjMzI5MTA1OGFhZGFiOQ==
   data.tar.gz: !binary |-
-    OTg2YmI4YWY2ZGQ3ZDI5ZTQzODRlYjIwMDNkNzFmOWRhNmUzMzEwYQ==
+    NjQyMDQxNTVlYjllNWY0MDUwOGFjNjc0MDFiNzVlNDlmM2IyOTNiNQ==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    MzRiNDFmMzYyNzMxMGFlMWQ3NmRmOThlMWNlMDE0ZTA0NDUzMjI3ZjQxZjZk
-    MTk3NjBjODEwM2E2YTNkNDViZDIyYTFhYzUzZWZlNTM5Yzc2N2IwOGI2MjQ1
-    YjFmMzlmYTBiNjZjMGZkNmQxZWY5YzMyOTU3YjM4ZDA4MWJmNmQ=
+    N2QyODljYzVmNjE2YzZlZDVlODUxYmRjZDdjMmQ1NjgwOTEwNmE2MDVmMzVk
+    NzdmOTJhZGQ5OWUzNDNiN2UzYzExOGQyOThkOGU5OTAzZjVkMGMzYzYyODli
+    YWQ2MTdiNDQzMzEwNWJhMWRhNzFmMDIwOTNjODZiYWQzMzQyYWY=
   data.tar.gz: !binary |-
-    YmQxOGQ4MjRkOWQ0MTc5ZDZhNzNlMzdjYjU1ZWU2ZGQ4OGI3M2M3MDY2OWI5
-    NDFmYWM3ZjQyMjYwMDRjNjkxNmNlZTc5MTQ0OTJmMjRhNzc2YTZiZjkzNmFk
-    MjFlOTI4MGNmNDVlMjQ5Yzg1MDAxODE4MjJjNTkyZTlkOWIxNWE=
+    NjM4M2IwZGQ1M2ZjZjA0Yzc4NWZhMzgxZDg5OWRhNWVlN2M4MmFhZThhNjk3
+    YWRmOGRjODgyMmM4NmU1ZDBkOWJhMzBhMWRkOWQ2NThkZjhiZmQwZDNhNDk0
+    NzU2OWIzMWRhZDg4NGNhYzg4ZjU4NDg3MWQ4MjMxYTZmZjZiZDA=

data/README.md

@@ -8,17 +8,6 @@ I cite directly from [purecss.io](http://purecss.io)
  >
  > 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.
 
-## TODO
-
-I liked the idea of the light and functional Pure CSS and I think it is worthwile to create a gem for it.
-I'd like to make something like [twitter-bootstrap-rails](https://github.com/seyhunak/twitter-bootstrap-rails) (and compatible with it)
-
-I'd like to add
-- Helpers for navigation bars, menus, forms, grids, ...
-- Toolkit to set up website palette in an easy way
-- Integration wit Rails SCSS
-- System to keep the css updated
-- Any ideas?
 
 ## Installation
 
@@ -33,18 +22,18 @@ And then execute:
 
 Then you can add the following directives to your css manifest file (application.css):
 
-    //= require purecss
+    *= require purecss
 
 for the responsive bundle, or
 
-    //= require purecss-nr
+    *= require purecss-nr
 
 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>.js
 
 
 
@@ -57,9 +46,58 @@ If it is too long for you, you can avoid touching the manifest files and run the
 
 After the installation you can simply go to [purecss.io](http://purecss.io) and use (or extend) their predefined styles.
 
-
 Enjoy!
 
+### Dropdown Menu
+
+For dropdown menu I developed a small workaround based on [bootstrap-dropdown.js](https://github.com/twitter/bootstrap/blob/master/js/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">
+        <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><%= 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>
+```
+
+## TODO
+
+I liked the idea of the light and functional Pure CSS and I think it is worthwile to create a gem for it.
+
+I'd like to add
+- Helpers for navigation bars, menus, forms, grids, ...
+- Integration wit Rails SCSS
+- Toolkit to set up website palette in an easy way using SCSS
+- Way to keep the css updated
+- Any other ideas?
+
 
 ## Contributing
 
@@ -68,3 +106,8 @@ Enjoy!
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
+
+## Changelog
+
+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

@@ -0,0 +1,172 @@
+/* ============================================================
+ * purecss-dropdown.js v2.3.2
+ * ============================================================
+ * Copyright 2013 Marcello Seri
+ * Based on Twitter Bootstrap
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* DROPDOWN CLASS DEFINITION
+  * ========================= */
+
+  var toggle = '[data-toggle=dropdown]'
+    , Dropdown = function (element) {
+        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"})
+        })
+      }
+
+  Dropdown.prototype = {
+
+    constructor: Dropdown
+
+  , toggle: function (e) {
+      var $this = $(this)
+        , $parent
+        , isActive
+
+      if ($this.is('.pure-menu-disabled, :disabled')) return
+
+      $parent = getParent($this)
+
+      isActive = $parent.hasClass('pure-menu-open')
+
+      clearMenus()
+
+      if (!isActive) {
+        if ('ontouchstart' in document.documentElement) {
+          // if mobile we we use a backdrop because click events don't delegate
+          $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
+        }
+        $parent.toggleClass('pure-menu-open')
+        $parent.children('.pure-menu-children').css({"left":"0px", "top":"36px"})
+      }
+
+      $this.focus()
+
+      return false
+    }
+
+  , keydown: function (e) {
+      var $this
+        , $items
+        , $active
+        , $parent
+        , isActive
+        , index
+
+      if (!/(38|40|27)/.test(e.keyCode)) return
+
+      $this = $(this)
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      if ($this.is('.pure-menu-disabled, :disabled')) return
+
+      $parent = getParent($this)
+
+      isActive = $parent.hasClass('pure-menu-open')
+
+      if (!isActive || (isActive && e.keyCode == 27)) {
+        if (e.which == 27) $parent.find(toggle).focus()
+        return $this.click()
+      }
+
+      $items = $('[role=menu] li:not(.divider):visible a', $parent)
+
+      if (!$items.length) return
+
+      index = $items.index($items.filter(':focus'))
+
+      if (e.keyCode == 38 && index > 0) index--                                        // up
+      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
+      if (!~index) index = 0
+
+      $items
+        .eq(index)
+        .focus()
+    }
+
+  }
+
+  function clearMenus() {
+    $('.dropdown-backdrop').remove()
+    $(toggle).each(function () {
+      getParent($(this)).removeClass('pure-menu-open')
+      getParent($(this)).children('.pure-menu-children').css({"left":"0px", "top":"36px"})
+    })
+  }
+
+  function getParent($this) {
+    var selector = $this.attr('data-target')
+      , $parent
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+    }
+
+    $parent = selector && $(selector)
+
+    if (!$parent || !$parent.length) $parent = $this.parent()
+
+    return $parent
+  }
+
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  var old = $.fn.dropdown
+
+  $.fn.dropdown = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('dropdown')
+      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.dropdown.Constructor = Dropdown
+
+
+ /* DROPDOWN NO CONFLICT
+  * ==================== */
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  $(document)
+    .on('click.dropdown.data-api', clearMenus)
+    .on('click.dropdown.data-api', '.puren-menu-has-children form', function (e) { e.stopPropagation() })
+    .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
+    .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
+
+}(window.jQuery);

data/lib/purecss/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: purecss
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - mseri
@@ -59,6 +59,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/assets/javascripts/purecss-dropdown.js
 - lib/purecss/engine.rb
 - lib/purecss/generators/install_generator.rb
 - lib/purecss/generators/templaets/application.css