concisecss 0.0.3 → 0.0.4

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

@@ -1,23 +1,23 @@
 (function($){	
-	/**
-	 * Determine if responsive navigation text needs to be added.
-	 *
-	 * @method responsiveNav
-	 * @return {Object} naver A naver plugin instantiation
-	 */
-	$.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
-            });
-        });
-    };
+  /**
+   * Determine if responsive navigation text needs to be added.
+   *
+   * @method responsiveNav
+   * @return {Object} naver A naver plugin instantiation
+   */
+  $.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
+      });
+    });
+  };
 }(jQuery));
 
 jQuery(document).ready(function() {	
-    jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
+  jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
 });

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

@@ -1,51 +1,51 @@
-(function($){		
-	/**
-	 * Calculate object width
-	 *
-	 */
-	$.fn.calculateWidth = function() { 
-		return $(this).width();
-    };
+(function($){  
+  /**
+   * Calculate object width
+   *
+   */
+  $.fn.calculateWidth = function() { 
+    return $(this).width();
+  };
 
-	/**
-	 * Calculates proper widths for non-responsive websites.
-	 *
-	 * @method nonResponsive
-	 * @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")) {
-            
-                // Get container width
-                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++ ) {            
-                        // Column width for row with gutters
-                        var columnWidth = ($('.column-'+i).calculateWidth()),
-							gutterWidth = columnWidth * 0.02;
+  /**
+   * Calculates proper widths for non-responsive websites.
+   *
+   * @method nonResponsive
+   * @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")) {
+        // Get container width
+        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++ ) {      
+            // Column width for row with gutters
+            var columnWidth = ($('.column-'+i).calculateWidth()),
+            gutterWidth = columnWidth * 0.02;
 
-                        $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px");
-                    }
-                } else {
-					for (; i <= max ; i++ ) {
-                        // Column width for normal row
-                        var columnWidth = ($('.column-'+i).calculateWidth() - 1);
-                        $('.column-'+i).css("width", columnWidth + "px");
-                    }
-                }
-            }
-        });
-    };
+            $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px");
+          }
+        } else {
+          for (; i <= max ; i++ ) {
+            // Column width for normal row
+            var columnWidth = ($('.column-'+i).calculateWidth() - 1);
+            
+            $('.column-'+i).css("width", columnWidth + "px");
+          }
+        }
+      }
+    });
+  };
 }(jQuery));
 
-jQuery(document).ready(function() {	
-    jQuery("body, .row").nonResponsive();
+jQuery(document).ready(function() {  
+  jQuery("body, .row").nonResponsive();
 });

data/app/assets/stylesheets/_defaults.scss

@@ -1,26 +1,13 @@
-//------------------------------------//
-//  $BORDER-BOX
-//------------------------------------//
-// Set to `false` if you do not wish to adopt 
-// global `box-sizing: border-box;`
-$global-border-box: true !default;
+// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) 
+// for the inspiration to create a default file for variables
 
 
 
 
-//------------------------------------//
-//  $DEBUG
-//------------------------------------//
-// Enabling debug mode allows for potential issues 
-// to be visually displayed in the browser. 
-$debug-mode: false !default;
+//------------------------------------
+//  BASE
+//------------------------------------
 
-
-
-
-//------------------------------------//
-//  $BASE
-//------------------------------------//
 // Base font sizes and colors
 $base-font-size:    16px !default;
 $base-line-height:  24px !default;
@@ -40,9 +27,10 @@ $line-height-ratio: $base-line-height / $base-font-size;
  
 
 
-//------------------------------------//
-//  $RESPONSIVE
-//------------------------------------//
+//------------------------------------
+//  RESPONSIVE
+//------------------------------------
+
 // Breakpoints
 $extra-small-start: 30em !default;
 $small-start:       48em !default;
@@ -53,9 +41,10 @@ $extra-large-start: 80em !default;
 
 
 
-//------------------------------------//
-//  $FONT-SIZES
-//------------------------------------//
+//------------------------------------
+//  FONT-SIZES
+//------------------------------------
+
 // Font-sizes (in pixels)
 $giga-size: 96px !default;
 $mega-size: 72px !default;
@@ -74,9 +63,10 @@ $micro-size: 10px !default;
 
 
 
-//------------------------------------//
-//  $COLORS
-//------------------------------------//
+//------------------------------------
+//  COLORS
+//------------------------------------
+
 // Background colors
 $bg-white:        #ffffff !default;
 $bg-black:        #222222 !default;
@@ -117,9 +107,10 @@ $object-ui-color: #ededed !default;
 
 
 
-//------------------------------------//
-//  $OBJECTS
-//------------------------------------//
+//------------------------------------
+//  OBJECTS
+//------------------------------------
+
 // Gutter size 
 $gutters: 2% !default;
 
@@ -140,12 +131,17 @@ $border-radius: 4px !default;
 
 
 
-//------------------------------------//
-//  $INCLUDE
-//------------------------------------//
+//------------------------------------
+//  INCLUDE
+//------------------------------------
+
 // Set whatever components you want included
 // in your project to `true` and any components
 // you do not wish to be included to `false`
+// 
+// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) 
+// for the idea to use feature switches in a framework. It's an absolutely brilliant idea
+// that makes customization so much easier.
 
 
 // Utility
@@ -155,33 +151,34 @@ $use-shared:      true !default;
 
 
 // Base
-$use-main:        true !default;
-$use-selection:   true !default;
-$use-container:   true !default;
-$use-typography:  true !default;
-$use-headings:    true !default;
-$use-blockquotes: true !default;
-$use-lists:       true !default;
-$use-tables:      true !default;
-$use-forms:       true !default;
-$use-grid:        true !default;
-  // Using push and pull classes for grid
-  // columns takes a lot of code. Set to
-  // `true` if needed.
-  $use-push:	  false !default;
-  $use-pull:	  false !default;
+$use-main:           true !default;
+$use-selection:      true !default;
+$use-container:      true !default;
+$use-typography:     true !default;
+$use-headings:       true !default;
+$use-blockquotes:    true !default;
+$use-lists:          true !default;
+$use-tables:         true !default;
+  $use-table-styles: true !default;
+$use-forms:          true !default;
+  $use-form-styles:  true !default;
+$use-grid:           true !default;
+  $use-push:	       false !default;
+  $use-pull:	       false !default;
 
   
-// Objects and abstractions
-$use-colors:      true !default;
-$use-buttons:     true !default;
-$use-groups:      true !default;
-$use-dropdowns:   true !default;
-$use-navigation:  true !default;
-$use-breadcrumbs: true !default;
-$use-wells:       true !default;
-$use-badges:      true !default;
-$use-progress:    true !default;
+// Objects
+$use-type-colors:             true !default;
+$use-bg-colors:               true !default;
+$use-buttons:                 true !default;
+$use-groups:                  true !default;
+$use-dropdowns:               true !default;
+$use-navigation:              true !default;
+  $use-responsive-navigation: true !default;
+$use-breadcrumbs:             true !default;
+$use-wells:                   true !default;
+$use-badges:                  true !default;
+$use-progress:                true !default;
 
 
 // Helpers

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

@@ -1,36 +1,36 @@
 @if $use-blockquotes == true {
-    //------------------------------------//
-    //  $BLOCKQUOTES
-    //------------------------------------//
-    blockquote {
-        border-left: 1px solid #ddd;
-        color: #777;
-        font-style: italic;
-        margin: 1em 2em;
-        padding-left: 1em;
-        text-align: left;
+  //------------------------------------
+  //  BLOCKQUOTES
+  //------------------------------------
+  blockquote {
+    border-left: 1px solid #ddd;
+    color: #777;
+    font-style: italic;
+    margin: 1em 2em;
+    padding-left: 1em;
+    text-align: left;
+    
+    cite {
+      color: #555;
+      display: block;
+      @include font-size(14px);
+      
+      &:before { content: "\2014 \0020"; }
+      
+      a {
+        color: #555;
         
-        cite {
-            color: #555;
-            display: block;
-            @include font-size(14px);
-            
-            &:before { content: "\2014 \0020"; }
-            
-            a {
-                color: #555;
-                
-                &:visited { color: #555; }
-            }
-        }
-        
-        
-        // Reversed blockquote
-        &.blockquote-reverse {
-            border-left: none;
-            border-right: 1px solid #ddd;
-            padding: 0 1em 0 0;
-            text-align: right;
-        }
+        &:visited { color: #555; }
+      }
+    }
+    
+    
+    // Reversed blockquote
+    &.blockquote-reverse {
+      border-left: none;
+      border-right: 1px solid #ddd;
+      padding: 0 1em 0 0;
+      text-align: right;
     }
+  }
 }

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

@@ -1,14 +1,14 @@
 @if $use-container == true {
-    //------------------------------------//
-    //  $CONTAINER
-    //------------------------------------//
-    .container { width: 90%; }
+  //------------------------------------
+  //  CONTAINER
+  //------------------------------------
+  .container { width: 90%; }
 
-    @include breakpoint(small) { .container { width: 620px; } }
+  @include breakpoint(small) { .container { width: 620px; } }
 
-    @include breakpoint(medium) { .container { width: 768px; } }
+  @include breakpoint(medium) { .container { width: 768px; } }
 
-    @include breakpoint(large) { .container { width: 960px; } }
+  @include breakpoint(large) { .container { width: 960px; } }
 
-    @include breakpoint(extra-large) { .container { width: 1140px; } }
+  @include breakpoint(extra-large) { .container { width: 1140px; } }
 }

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

@@ -1,80 +1,81 @@
 @if $use-forms == true {
-    //------------------------------------//
-    //  $FORMS
-    //------------------------------------//
-    label { display: block; }
-
+  //------------------------------------
+  //  FORMS
+  //------------------------------------
+  label { display: block; }
+
+  input, 
+  select, 
+  textarea {
+    border: 1px solid #ddd;
+    height: 37px;
+    padding: 5px;
+    width: 100%;
+    
+    @include vendor(box-sizing, border-box);
+  }
+
+  @include breakpoint(extra-small) { 
     input, 
     select, 
-    textarea {
-        border: 1px solid #ddd;
-        height: 37px;
-        padding: 5px;
-        width: 100%;
-        
-        @include vendor(box-sizing, border-box);
-    }
-
-    @include breakpoint(extra-small) { 
-        input, 
-        select, 
-        textarea { width: 90%; } 
-    }
+    textarea { width: 90%; } 
+  }
 
-    @include breakpoint(small) { 
-        input, 
-        select { width: 300px; } 
-    }
-
-    input:focus, 
-    select:focus, 
-    textarea:focus, 
-    button:focus, 
-    [contenteditable="true"]:focus { 
-        outline: none; 
-        outline: thin dotted \9;
-    }
-
-    textarea { height: auto; }
-
-    input {
-        &[type="checkbox"], 
-        &[type="file"], 
-        &[type="image"], 
-        &[type="radio"] {
-            background: auto !important;
-            border: auto !important;
-            height: auto !important;
-            width: auto !important;
-        }
-        
-        &[disabled] { 
-            cursor: not-allowed;
-            background-color: #f6f6f6; 
-        }
+  @include breakpoint(small) { 
+    input, 
+    select { width: 300px; } 
+  }
+
+  input:focus, 
+  select:focus, 
+  textarea:focus, 
+  button:focus, 
+  [contenteditable="true"]:focus { 
+    outline: none; 
+    outline: thin dotted \9;
+  }
+
+  textarea { height: auto; }
+
+  input {
+    &[type="checkbox"], 
+    &[type="file"], 
+    &[type="image"], 
+    &[type="radio"] {
+      background: auto !important;
+      border: auto !important;
+      height: auto !important;
+      width: auto !important;
     }
-
-    @include breakpoint(small) {	
-        input[type="submit"] { width: auto; }
-        
-        textarea { width: 400px; }
+    
+    &[disabled] { 
+      cursor: not-allowed;
+      background-color: #f6f6f6; 
     }
-
-    select[disabled], 
-    textarea[disabled] { background-color: #f6f6f6; }
-
-    fieldset {
-        border: 1px solid #ededed;
-        padding: 10px 25px;
-        
-        legend {
-            font-weight: bold;
-            @include font-size(13px);
-            padding: 0 10px;
-        }
+  }
+
+  @include breakpoint(small) {	
+    input[type="submit"] { width: auto; }
+    
+    textarea { width: 400px; }
+  }
+
+  select[disabled], 
+  textarea[disabled] { background-color: #f6f6f6; }
+
+  fieldset {
+    border: 1px solid #ededed;
+    padding: 10px 25px;
+    
+    legend {
+      font-weight: bold;
+      @include font-size(13px);
+      padding: 0 10px;
     }
+  }
 
 
+  @if $use-form-styles == true {
     // Validation
     input.required:required:valid, 
     textarea.required:required:valid { border-color: #2ecc71; }
@@ -85,17 +86,17 @@
 
     // Block-level form items
     .form-item {
-        display: block;
-        padding: 14px 0;
+      display: block;
+      padding: 14px 0;
     }
 
 
     // Rounded corners
     form.border-radius {
-        input, 
-        select, 
-        textarea, 
-        fieldset { border-radius: $border-radius; }
+      input, 
+      select, 
+      textarea, 
+      fieldset { border-radius: $border-radius; }
     }
 
 
@@ -103,14 +104,14 @@
     .form-inline label { width: auto; }
 
     @include breakpoint(small) {
-        .form-inline {
-            label {
-                display: inline-block;
-                width: 100px;
-            }
-            
-            textarea { width: auto; }
+      .form-inline {
+        label {
+          display: inline-block;
+          width: 100px;
         }
+        
+        textarea { width: auto; }
+      }
     }
 
 
@@ -122,4 +123,5 @@
     ::-moz-placeholder { color: $placeholder-color; }
 
     :-moz-placeholder { color: $placeholder-color; }
+  }
 }