concisecss 0.0.5 → 2.0.0

data/app/assets/stylesheets/{generic → helpers}/_normalize.scss

@@ -1,10 +1,10 @@
 @if $use-normalize == true {
   //------------------------------------
-  //  NORMALIZE  
-  //------------------------------------ 
+  //  NORMALIZE
+  //------------------------------------
   html {
     font-size: 100%;
-    @include vendor(text-size-adjust, 100%);
+    @include vendor(text-size-adjust, 100%, webkit moz ms o official);
   }
 
   article,
@@ -20,9 +20,9 @@
   section,
   summary { display: block; }
 
-  audio, 
-  canvas, 
-  progress, 
+  audio,
+  canvas,
+  progress,
   video {
     display: inline-block;
     vertical-align: baseline;
@@ -33,21 +33,21 @@
     height: 0;
   }
 
-  [hidden], 
+  [hidden],
   template { display: none; }
 
   a {
     background: transparent;
-    
+
     &:focus { outline: thin dotted; }
-    
-    &:active, 
+
+    &:active,
     &:hover { outline: 0; }
   }
 
   abbr[title] { border-bottom: 1px dotted; }
 
-  b, 
+  b,
   strong { font-weight: bold; }
 
   dfn { font-style: italic; }
@@ -69,8 +69,8 @@
 
   sub { bottom: -0.25em; }
 
-  img { 
-    border: 0; 
+  img {
+    border: 0;
     -ms-interpolation-mode: bicubic;
   }
 
@@ -83,8 +83,8 @@
     border-width: 1px 0 0;
     clear: both;
     height: 0;
-    
-    @include vendor(box-sizing, content-box);
+
+    @include vendor(box-sizing, content-box, official);
   }
 
   pre {
@@ -93,9 +93,9 @@
     word-wrap: break-word;
   }
 
-  code, 
-  kbd, 
-  pre, 
+  code,
+  kbd,
+  pre,
   samp {
     font-family: monospace, monospace;
     @include font-size($base-font-size);
@@ -103,7 +103,7 @@
 
   q {
     quotes: none;
-    
+
     &:before,
     &:after {
       content: '';
@@ -113,10 +113,10 @@
 
   form { margin: 0; }
 
-  button, 
-  input, 
-  optgroup, 
-  select, 
+  button,
+  input,
+  optgroup,
+  select,
   textarea {
     color: inherit;
     font: inherit;
@@ -137,7 +137,7 @@
     cursor: pointer;
   }
 
-  button[disabled], 
+  button[disabled],
   html input[disabled] { cursor: default; }
 
   button::-moz-focus-inner,
@@ -148,23 +148,23 @@
 
   input {
     line-height: normal;
-    
-    &[type="checkbox"], 
+
+    &[type="checkbox"],
     &[type="radio"] {
       box-sizing: border-box;
       padding: 0;
     }
-    
+
     &[type="number"] {
-      &::-webkit-inner-spin-button, 
+      &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button { height: auto; }
     }
-    
+
     &[type="search"] {
-      -webkit-appearance: textfield;    
-      @include vendor(box-sizing, content-box);
-      
-      &::-webkit-search-cancel-button, 
+      -webkit-appearance: textfield;
+      @include vendor(box-sizing, content-box, official);
+
+      &::-webkit-search-cancel-button,
       &::-webkit-search-decoration { -webkit-appearance: none; }
     }
   }
@@ -186,6 +186,6 @@
     border-spacing: 0;
   }
 
-  td, 
+  td,
   th { padding: 0; }
-}
+}

data/app/assets/stylesheets/{_defaults.scss → helpers/_variables.scss}

@@ -1,22 +1,28 @@
-// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss)
-// for the inspiration to create a default file for variables
+//------------------------------------
+//  BASE
+//------------------------------------
 
+// Website background (can use color or image)
+$website-bg-color: #ffffff !default;
 
 
+// Enable font smoothing?
+$enable-font-smoothing: true !default;
 
-//------------------------------------
-//  BASE
-//------------------------------------
 
 // Base font sizes and colors
-$base-font-size:    16px !default;
-$base-line-height:  24px !default;
-$base-font-color:   #333333 !default;
-$base-link-color:   #62b3e7 !default;
+$base-font-size:     16px !default;
+$base-line-height:   24px !default;
+$base-font-color:    #333333 !default;
+$base-link-color:    #62b3e7 !default;
+$base-heading-color: #181818 !default;
+$base-sub-heading-color: #808080 !default;
 
 
 // Base font-family
 $base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default;
+$base-heading-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default;
+$base-print-font-family: Georgia, "Times New Roman", Times, serif !default;
 
 
 // Element spacing and line-height ratio
@@ -32,33 +38,13 @@ $line-height-ratio: $base-line-height / $base-font-size;
 //------------------------------------
 
 // Breakpoints
-$extra-small-start: 30em !default;
-$small-start:       48em !default;
-$medium-start:      60em !default;
-$large-start:       70em !default;
-$extra-large-start: 80em !default;
-
-
-
-
-//------------------------------------
-//  FONT-SIZES
-//------------------------------------
-
-// Font-sizes (in pixels)
-$giga-size: 96px !default;
-$mega-size: 72px !default;
-$kilo-size: 64px !default;
-
-$h1-size: 36px !default;
-$h2-size: 30px !default;
-$h3-size: 24px !default;
-$h4-size: 20px !default;
-$h5-size: 16px !default;
-$h6-size: 14px !default;
-
-$small-size: 12px !default;
-$micro-size: 10px !default;
+$breakpoint-map: (
+  "extra-small": 30em,
+  "small":       48em,
+  "medium":      60em,
+  "large":       70em,
+  "extra-large": 80em
+);
 
 
 
@@ -68,47 +54,59 @@ $micro-size: 10px !default;
 //------------------------------------
 
 // Background colors
-$bg-white:        #ffffff !default;
-$bg-black:        #222222 !default;
-$bg-light-gray:   #f9f9f9 !default;
-$bg-gray:         #999999 !default;
-$bg-light-green:  #dff0d8 !default;
-$bg-green:        #5cb85c !default;
-$bg-light-blue:   #d9edf7 !default;
-$bg-blue:         #5bc0de !default;
-$bg-light-yellow: #fcf8e3 !default;
-$bg-yellow:       #ed9c28 !default;
-$bg-light-red:    #f2dede !default;
-$bg-red:          #d9534f !default;
+$bg-colors: (
+  "white":  #ffffff,
+  "black":  #222222,
+  "gray":   #999999,
+  "green":  #5cb85c,
+  "blue":   #5bc0de,
+  "yellow": #ed9c28,
+  "red":    #d9534f
+);
 
 
 // Type colors
-$color-white:  #ffffff !default;
-$color-black:  #222222 !default;
-$color-gray:   #999999 !default;
-$color-green:  #468847 !default;
-$color-blue:   #3a87ad !default;
-$color-red:    #d2322d !default;
-$color-yellow: #c09853 !default;
+$type-colors: (
+  "white":  #ffffff,
+  "black":  #222222,
+  "gray":   #999999,
+  "green":  #468847,
+  "blue":   #3a87ad,
+  "yellow": #c09853,
+  "red":    #d2322d
+);
 
 
 // Selection colors
-$selection-background: #666666 !default;
-$selection-color:      #ffffff !default;
+$selection-background:  #666666 !default;
+$selection-color:       #ffffff !default;
 
 
 // Form placeholder colors
-$placeholder-color: #bbbbbb !default;
+$placeholder-color:     #bbbbbb !default;
 
 
 // Colors used for our objects' borders, etc
-$object-ui-color: #ededed !default;
+$object-ui-color:       #cccccc !default;
+
+
+// Dropdown colors
+$dropdown-bg-color:     #ffffff !default;
+$dropdown-border-color: #ededed !default;
+$dropdown-hover-color:  #f3f8f8 !default;
+$dropdown-header-color: #aaaaaa !default;
+
+
+
+// Button font color
+$button-font-color:       #ffffff !default;
+$button-hover-font-color: #ffffff !default;
 
 
 
 
 //------------------------------------
-//  OBJECTS
+//  Components
 //------------------------------------
 
 // Gutter size
@@ -122,11 +120,7 @@ $column-prefix: 'column-' !default;
 
 // Dictate how many columns you would like your
 // grid system to use. Default is 16.
-$column-number:  16 !default;
-
-
-// Border radius value for `.border-radius` class
-$border-radius: 4px !default;
+$column-number: 16 !default;
 
 
 
@@ -143,11 +137,10 @@ $border-radius: 4px !default;
 // for the idea to use feature switches in a framework. It's an absolutely brilliant idea
 // that makes customization so much easier.
 
-
 // Utility
-$use-normalize:   true !default;
-$use-clearfix:    true !default;
-$use-shared:      true !default;
+$use-normalize:       true !default;
+$use-clearfix:        true !default;
+$use-vertical-rhythm: true !default;
 
 
 // Base
@@ -156,29 +149,26 @@ $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-list-styles:  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;
+  $use-push:	       true !default;
+  $use-pull:	       true !default;
 
 
-// Objects
+// Components
 $use-type-colors:             true !default;
 $use-bg-colors:               true !default;
 $use-buttons:                 true !default;
-$use-groups:                  true !default;
+  $use-button-bg-colors:      true !default;  
+  $use-button-styles:         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/layout/_container.scss

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

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

@@ -0,0 +1,103 @@
+@if $use-forms == true {
+  //------------------------------------
+  //  FORMS
+  //------------------------------------
+  input {
+    &[type="checkbox"],
+    &[type="file"],
+    &[type="image"],
+    &[type="radio"] {
+      background: auto;
+      border: auto;
+      height: auto;
+      width: auto;
+    }
+  }
+
+  input[disabled],
+  select[disabled],
+  textarea[disabled] {
+    background-color: #f6f6f6;
+    cursor: not-allowed;
+  }
+
+  label { display: block; }
+
+  textarea { height: auto; }
+
+
+  @if $use-form-styles == true {
+    // Form styling
+    .form {
+      input,
+      select,
+      textarea {
+        border: 1px solid $object-ui-color;
+        height: 37px;
+        padding: 5px;
+        width: 100%;
+
+        @include vendor(box-sizing, border-box, official);
+
+        @include breakpoint(extra-small) {
+          & { width: 300px; }
+        }
+      }
+
+      textarea { height: auto; }
+
+      @include breakpoint(extra-small) {
+        input[type="submit"] {
+          display: block;
+          width: auto;
+        }
+      }
+
+      input:focus,
+      select:focus,
+      textarea:focus,
+      button:focus,
+      [contenteditable="true"]:focus { outline: 1px solid darken($object-ui-color, 15%); }
+
+      fieldset {
+        border: 1px solid $object-ui-color;
+        padding: 10px 25px;
+
+        legend {
+          font-weight: bold;
+          @include font-size(13px);
+          padding: 0 10px;
+        }
+      }
+    }
+
+
+    // Block-level form items
+    .form-item { display: block; }
+
+
+    // Inline Form
+    .form-inline {
+      label { width: auto; }
+
+      @include breakpoint(small) {
+        label {
+          display: inline-block;
+          width: 100px;
+        }
+
+        textarea { width: auto; }
+      }
+    }
+
+
+    // Placeholder text
+    ::-webkit-input-placeholder { color: $placeholder-color; }
+
+    :-ms-input-placeholder { color: $placeholder-color; }
+
+    ::-moz-placeholder { color: $placeholder-color; }
+
+    :-moz-placeholder { color: $placeholder-color; }
+  }
+}