concisecss 0.0.5 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 844d9f983926cf8459ac3f66bed3abcd73493a6b
-  data.tar.gz: d37e0525ca8ce09672b127070886618a1fd05e0f
+  metadata.gz: 10c61f3f483dad0adab83788e58ad6901aad2bdc
+  data.tar.gz: 28d4da196838dc77e8932fe8229ecd102fb69972
 SHA512:
-  metadata.gz: fc1aeeae747c9d10416cc93b92be83b5ba09c2bcfc6042f0b7bd35c2f48b4699ba89e67ff51b524b3714c2af7d88907fdbef3ea5cb55d894d79815cdf5a18459
-  data.tar.gz: cf55f1616652974a8f12fb610749dca0a41ea4f0a65139c3758a5826947c365d68b6d8e1b19813cdb107c43e0f62146d0150cd291478092fa78461f7dc981eb0
+  metadata.gz: 973c6dc8ac896a547071ce85a47ccf195a61e8fca329d0cff8e50fd7b382c9a2c6a78807179c58a74325cb8cc8726efa9e2731a8c7e637327173d2785121a39d
+  data.tar.gz: 24ad5e69c645f70e4373e16d12fda7e3797a28630b344b58d3ab5e683a5cebdb8101fbc25e249e691800547d42cadf186ac4afee7f739faec0404b2df232cb1d

data/README.md

@@ -1,15 +1,16 @@
 # [<img src="http://i.imgur.com/4t1ClRx.png">](http://concisecss.com/)
 
-[![Gitter chat](https://badges.gitter.im/concisecss.png)](https://gitter.im/concisecss) 
+[![Gitter chat](https://badges.gitter.im/concisecss.png)](https://gitter.im/concisecss)
+[![Code Climate](https://codeclimate.com/github/ConciseCSS/concise.css-gem.png)](https://codeclimate.com/github/ConciseCSS/concise.css-gem)
 [![Gem Version](https://badge.fury.io/rb/concisecss.svg)](http://badge.fury.io/rb/concisecss)
 
-Concise is a lightweight, front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve, but a high level of customization.
+Concise is a lightweight, front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve, and a high level of customization.
 
 ## Installation Instructions
 
 Add this line to your application's Gemfile:
 
-    gem 'concisecss', '~> 0.0.5'
+    gem 'concisecss', '~> 2.0.0'
 
 And then execute:
 
@@ -21,7 +22,7 @@ Or install it yourself as:
 
 ## Usage
 
-Not every single project you are  working needs all the ConciseCss javascripts files , you will need to update application.js with the files you need
+Not every single project you are  working needs all of the Concise JavaScript files. You can update your `application.js` with the files you need
    ```js
     //= require concisecss/navigation
     //= require concisecss/non-responsive
@@ -29,11 +30,11 @@ Not every single project you are  working needs all the ConciseCss javascripts f
     //= require concisecss/dropdown
     //= require concisecss/close
    ```
-To add the css just require 
+To add the CSS just require
    ```css
-    *= require concise 
+    *= require concise
    ```
-If you intend to extend or override concise. You might want to create an override file, for example app/assets/stylesheets/custom.css.scss and then import concise
+If you intend to extend or override Concise, you might want to create an override file. For example: `app/assets/stylesheets/custom.scss` and then import concise
    ```css
     @import "concise";
    ```
@@ -49,9 +50,13 @@ Check out our documentation here: [http://concisecss.com/documentation](http://c
 You can keep up-to-date with the changes that we have made via our [releases page](https://github.com/ConciseCSS/concise.css-gem/releases).
 
 ## Versioning
-   
+
 Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/).
 
+## Acknowledgments
+
+There are acknowledgements spread throughout the source code if you look around, and you can also view a list of credits [here](http://concisecss.com/credits/).
+
 ## Elsewhere
 
 [![Like Concise on Facebook](http://i.imgur.com/4dy5UUK.png)](https://facebook.com/ConciseCSS)

data/app/assets/javascripts/concisecss/dropdown.js

@@ -9,25 +9,34 @@
     this.dd = el;
     this.initEvents();
   }
-  
+
   DropDown.prototype = {
-    initEvents : function() {			
+    initEvents : function() {
       // Toggle .dropdown-active on click
       this.dd.on('click', function(event){
         $(this).toggleClass('dropdown-active');
         event.stopPropagation();
       });
+
+      // Toggle .dropdown-active on hover
+      $(".dropdown-hover").mouseenter(function(event) {
+        $(this).addClass("dropdown-active");
+        event.stopPropagation();
+      });
     }
-  }
-  
+  };
+
   $(function(){
     var dropdown = $('.dropdown');
-    
+
     new DropDown(dropdown);
-    
+
     $(document).click(function() {
-      // Remove class from all dropdowns
       dropdown.removeClass('dropdown-active');
     });
+
+    $(".dropdown-menu").mouseleave(function() {
+      dropdown.removeClass("dropdown-active");
+    });
   });
-}(jQuery));
+}(jQuery));

data/app/assets/javascripts/concisecss/naver.js

@@ -1,10 +1,10 @@
-/* 
- * Naver v3.0.8 - 2014-05-06 
- * A jQuery plugin for responsive navigation. Part of the Formstone Library. 
- * http://formstone.it/naver/ 
- * 
- * Copyright 2014 Ben Plum; MIT Licensed 
- */ 
+/*
+ * Naver v3.0.8 - 2014-05-06
+ * A jQuery plugin for responsive navigation. Part of the Formstone Library.
+ * http://formstone.it/naver/
+ *
+ * Copyright 2014 Ben Plum; MIT Licensed
+ */
 
 ;(function ($, window) {
   "use strict";
@@ -355,4 +355,4 @@
       pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
     }
   };
-})(jQuery, window);
+})(jQuery, window);

data/app/assets/javascripts/concisecss/navigation.js

@@ -1,15 +1,15 @@
-(function($){	
+(function($){
   /**
    * Determine if responsive navigation text needs to be added.
    *
    * @method responsiveNav
    * @return {Object} naver A naver plugin instantiation
    */
-  $.fn.responsiveNav = function() { 
+  $.fn.responsiveNav = function() {
     // Loop through each instance of responsive navigation
     this.each(function(index) {
       var labelState = $(this).hasClass( "nav-responsive-text" );
-      
+
       return $(this).naver({
         maxWidth: "768px",
         label: labelState
@@ -18,6 +18,6 @@
   };
 }(jQuery));
 
-jQuery(document).ready(function() {	
+jQuery(document).ready(function() {
   jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
-});
+});

data/app/assets/javascripts/concisecss/non-responsive.js

@@ -1,9 +1,9 @@
-(function($){  
+(function($){
   /**
    * Calculate object width
    *
    */
-  $.fn.calculateWidth = function() { 
+  $.fn.calculateWidth = function() {
     return $(this).width();
   };
 
@@ -14,7 +14,7 @@
    * @note Only necessary for non-responsive websites.
    */
   $.fn.nonResponsive = function() {
-    
+
     // Loop through each instance of the `.non-responsive` class
     this.each(function(index) {
       if ($(this).hasClass("non-responsive")) {
@@ -22,11 +22,11 @@
         var containerWidth = $(".container").width(),
         i = 1,
         max = 24;
-        
+
         // Set pixel-based alternatives for grid styles
         // But first we need to know if our row has class `gutters`
         if($(this).hasClass("gutters")) {
-          for (; i <= max; i++ ) {      
+          for (; i <= max; i++ ) {
             // Column width for row with gutters
             var columnWidth = ($('.column-'+i).calculateWidth()),
             gutterWidth = columnWidth * 0.02;
@@ -37,7 +37,7 @@
           for (; i <= max ; i++ ) {
             // Column width for normal row
             var columnWidth = ($('.column-'+i).calculateWidth() - 1);
-            
+
             $('.column-'+i).css("width", columnWidth + "px");
           }
         }
@@ -46,6 +46,6 @@
   };
 }(jQuery));
 
-jQuery(document).ready(function() {  
+jQuery(document).ready(function() {
   jQuery("body, .row").nonResponsive();
-});
+});

data/app/assets/stylesheets/base/_headings.scss

@@ -2,157 +2,167 @@
   //------------------------------------
   //  HEADINGS
   //------------------------------------
-  
-  // Thanks to Harry Roberts' article on pragmatic
-  // font sizing (http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/)
-  h1, h2, h3, h4, h5, h6, 
+
+  // Variables
+  $giga-sizes: (
+    "extra-small": 48px,
+    "small":       64px,
+    "large":       80px,
+    "extra-large": 96px
+  );
+
+  $mega-sizes: (
+    "extra-small": 40px,
+    "small":       48px,
+    "large":       64px,
+    "extra-large": 72px
+  );
+
+  $kilo-sizes: (
+    "extra-small": 32px,
+    "small":       32px,
+    "large":       48px,
+    "extra-large": 64px
+  );
+
+  $h1-sizes: (
+    "extra-small": 24px,
+    "small":       32px,
+    "medium":      36px
+  );
+
+  $h2-sizes: (
+    "extra-small": 20px,
+    "small":       24px,
+    "medium":      30px
+  );
+
+  $h3-sizes: (
+    "extra-small": 18px,
+    "small":       20px,
+    "medium":      24px
+  );
+
+  $h4-sizes: (
+    "extra-small": 16px,
+    "small":       18px,
+    "medium":      20px
+  );
+
+  $h5-sizes: (
+    "extra-small": 14px,
+    "small":       16px,
+    "medium":      18px
+  );
+
+  $h6-sizes: (
+    "extra-small": 12px,
+    "small":       14px,
+    "medium":      16px
+  );
+
+
+  // Font sizing
+  h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6,
   .giga, .mega, .kilo {
-    color: #181818;
+    color: $base-heading-color;
+    font-family: $base-heading-font-family;
     font-weight: normal;
     text-rendering: optimizeLegibility;
+
+    a { font-weight: inherit; }
+
+    small {
+      color: $base-sub-heading-color;
+      font-size: 60%;
+      line-height: 1;
+    }
   }
 
   h1, .h1 {
-    @include font-size(24px); 
+    @include responsive("font-size" "line-height", map-get($h1-sizes, extra-small),
+      (
+         "small" : map-get($h1-sizes, small),
+        "medium" : map-get($h1-sizes, medium)
+      )
+    );
   }
 
   h2, .h2 {
-    @include font-size(20px); 
+    @include responsive("font-size" "line-height", map-get($h2-sizes, extra-small),
+      (
+         "small" : map-get($h2-sizes, small),
+        "medium" : map-get($h2-sizes, medium)
+      )
+    );
   }
 
   h3, .h3 {
-    @include font-size(18px); 
+    @include responsive("font-size" "line-height", map-get($h3-sizes, extra-small),
+      (
+         "small" : map-get($h3-sizes, small),
+        "medium" : map-get($h3-sizes, medium)
+      )
+    );
   }
 
   h4, .h4 {
-    @include font-size(16px); 
+    @include responsive("font-size" "line-height", map-get($h4-sizes, extra-small),
+      (
+         "small" : map-get($h4-sizes, small),
+        "medium" : map-get($h4-sizes, medium)
+      )
+    );
   }
 
   h5, .h5 {
-    @include font-size(14px); 
+    @include responsive("font-size" "line-height", map-get($h5-sizes, extra-small),
+      (
+         "small" : map-get($h5-sizes, small),
+        "medium" : map-get($h5-sizes, medium)
+      )
+    );
   }
 
   h6, .h6 {
-    @include font-size(12px); 
-  }
-
-  @include breakpoint(small) {
-    h1, .h1 {
-      @include font-size(32px); 
-    }
-    
-    h2, .h2 {
-      @include font-size(24px); 
-    }
-    
-    h3, .h3 {
-      @include font-size(20px); 
-    }
-    
-    h4, .h4 {
-      @include font-size(18px); 
-    }
-    
-    h5, .h5 {
-      @include font-size(16px); 
-    }
-    
-    h6, .h6 {
-      @include font-size(14px); 
-    }
-  }
-
-  @include breakpoint(medium) {
-    h1, .h1 {
-      @include font-size($h1-size); 
-    }
-    
-    h2, .h2 {
-      @include font-size($h2-size); 
-    }
-    
-    h3, .h3 {
-      @include font-size($h3-size); 
-    }
-    
-    h4, .h4 {
-      @include font-size($h4-size); 
-    }
-    
-    h5, .h5 {
-      @include font-size($h5-size); 
-    }
-    
-    h6, .h6 {
-      @include font-size($h6-size); 
-    }
-  }
-
-  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
-  .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
-  .giga a, .mega a, .kilo a { font-weight: inherit; }
-
-  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, 
-  .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, 
-  .giga small, .mega small, .kilo small {
-    font-size: 65% !important;
-    line-height: 1;
+    @include responsive("font-size" "line-height", map-get($h6-sizes, extra-small),
+      (
+         "small" : map-get($h6-sizes, small),
+        "medium" : map-get($h6-sizes, medium)
+      )
+    );
   }
 
 
   // Extra-large heading classes
   .giga {
-    @include font-size(48px); 
+    @include responsive("font-size" "line-height", map-get($giga-sizes, extra-small),
+      (
+              "small" : map-get($giga-sizes, small),
+              "large" : map-get($giga-sizes, large),
+        "extra-large" : map-get($giga-sizes, extra-large)
+      )
+    );
   }
 
   .mega {
-    @include font-size(40px); 
+    @include responsive("font-size" "line-height", map-get($mega-sizes, extra-small),
+      (
+              "small" : map-get($mega-sizes, small),
+              "large" : map-get($mega-sizes, large),
+        "extra-large" : map-get($mega-sizes, extra-large)
+      )
+    );
   }
 
   .kilo {
-    @include font-size(32px); 
-  }
-
-  @include breakpoint(small) {
-    .giga {
-      @include font-size(64px); 
-    }
-    
-    .mega {
-      @include font-size(48px); 
-    }
-    
-    .kilo {
-      @include font-size(32px); 
-    }
-  }
-
-  @include breakpoint(large) {
-    .giga {
-      @include font-size(80px); 
-    }
-    
-    .mega {
-      @include font-size(64px); 
-    }
-    
-    .kilo {
-      @include font-size(48px); 
-    }
-  }
-
-  @include breakpoint(extra-large) {
-    .giga {
-      @include font-size($giga-size); 
-    }
-    
-    .mega {
-      @include font-size($mega-size); 
-    }
-    
-    .kilo {
-      @include font-size($kilo-size); 
-    }
+    @include responsive("font-size" "line-height", map-get($kilo-sizes, extra-small),
+      (
+              "small" : map-get($kilo-sizes, small),
+              "large" : map-get($kilo-sizes, large),
+        "extra-large" : map-get($kilo-sizes, extra-large)
+      )
+    );
   }
 }