concisecss 0.0.1

data/app/assets/stylesheets/_defaults.scss

@@ -0,0 +1,190 @@
+//------------------------------------//
+//  $BORDER-BOX
+//------------------------------------//
+// Set to `false` if you do not wish to adopt 
+// global `box-sizing: border-box;`
+$global-border-box: true !default;
+
+
+
+
+//------------------------------------//
+//  $DEBUG
+//------------------------------------//
+// Enabling debug mode allows for potential issues 
+// to be visually displayed in the browser. 
+$debug-mode: false !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-family
+$base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default;
+
+
+// Element spacing and line-height ratio
+$base-spacing-unit: $base-line-height !default;
+$half-spacing-unit: $base-spacing-unit / 2 !default;
+$line-height-ratio: $base-line-height / $base-font-size;
+
+ 
+
+
+//------------------------------------//
+//  $RESPONSIVE
+//------------------------------------//
+// 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;
+
+
+
+
+//------------------------------------//
+//  $COLORS
+//------------------------------------//
+// 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;
+
+
+// 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;
+
+
+// Selection colors
+$selection-background: #666666 !default;
+$selection-color:      #ffffff !default;
+
+
+// Form placeholder colors
+$placeholder-color: #bbbbbb !default;
+
+
+// Colors used for our objects' borders, etc
+$object-ui-color: #ededed !default;
+ 
+
+
+
+//------------------------------------//
+//  $OBJECTS
+//------------------------------------//
+// Gutter size 
+$gutters: 2% !default;
+
+
+// Prefix for grid columns. By default columns
+// are formatted as `.column-8`
+$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;
+
+
+
+
+//------------------------------------//
+//  $INCLUDE
+//------------------------------------//
+// Set whatever components you want included
+// in your project to `true` and any components
+// you do not wish to be included to `false`
+
+
+// Utility
+$use-normalize:   true !default;
+$use-clearfix:    true !default;
+$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;
+
+  
+// 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;
+
+
+// Helpers
+$use-helper:      true !default;
+$use-conditional: true !default;
+$use-print:       true !default;

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

@@ -0,0 +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;
+        
+        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;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,125 @@
+@if $use-forms == true {
+    //------------------------------------//
+    //  $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 { 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[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;
+        }
+    }
+
+
+    // Validation
+    input.required:required:valid, 
+    textarea.required:required:valid { border-color: #2ecc71; }
+
+    input.required:focus:invalid, 
+    textarea.required:focus:invalid { border-color: #e74c3c; }
+
+
+    // Block-level form items
+    .form-item {
+        display: block;
+        padding: 14px 0;
+    }
+
+
+    // Rounded corners
+    form.border-radius {
+        input, 
+        select, 
+        textarea, 
+        fieldset { border-radius: $border-radius; }
+    }
+
+
+    // Inline Form
+    .form-inline label { width: auto; }
+
+    @include breakpoint(small) {
+        .form-inline {
+            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; }
+}

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

@@ -0,0 +1,67 @@
+@if $use-grid == true {
+    //------------------------------------//
+    //  $GRID
+    //------------------------------------//
+    .row {
+        width: 100%;
+        
+        &:after {
+            clear: both;
+            content: " ";
+            display: table;
+        }
+    }
+
+    [class*='#{$column-prefix}'] {
+        @include vendor(background-clip, padding-box !important);
+        
+        &.right { float: right; }
+        
+        img { max-width: 100%; }
+    }
+
+    @include breakpoint(small) {
+        [class*='#{$column-prefix}'] { float: left; }
+        
+        .gutters [class*='#{$column-prefix}'] {
+            margin-left: $gutters;
+            
+            &:first-child { margin-left: 0; }
+        }
+        
+        
+        // Row columns        
+        @include grid-setup();
+        
+        
+        // Push
+        @if $use-push == true {
+            [class*='push-'] { position: relative; }
+            
+            @include push-setup(); 
+        }
+        
+        
+        // Pull
+        @if $use-pull == true {
+            [class*='pull-'] { position: relative; }
+            
+            @include pull-setup();
+        }
+    }
+
+
+    // Non-responsive grid
+    .non-responsive {
+        [class*='#{$column-prefix}'] {
+            float: left;
+            width: auto !important; 
+        }
+        
+        .gutters [class*='#{$column-prefix}'], 
+        &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; }
+        
+        .gutters [class*='#{$column-prefix}']:first-child, 
+        &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; }
+    }
+}

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

@@ -0,0 +1,155 @@
+@if $use-headings == true {
+    //------------------------------------//
+    //  $HEADINGS
+    //------------------------------------//
+    h1, h2, h3, h4, h5, h6, 
+    .h1, .h2, .h3, .h4, .h5, .h6,
+    .giga, .mega, .kilo {
+        color: #181818;
+        font-weight: normal;
+        text-rendering: optimizeLegibility;
+    }
+
+    h1, .h1 {
+        @include font-size(24px); 
+    }
+
+    h2, .h2 {
+        @include font-size(20px); 
+    }
+
+    h3, .h3 {
+        @include font-size(18px); 
+    }
+
+    h4, .h4 {
+        @include font-size(16px); 
+    }
+
+    h5, .h5 {
+        @include font-size(14px); 
+    }
+
+    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;
+    }
+
+
+    // Extra-large heading classes
+    .giga {
+        @include font-size(48px); 
+    }
+
+    .mega {
+        @include font-size(40px); 
+    }
+
+    .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); 
+        }
+    }
+}

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

@@ -0,0 +1,125 @@
+@if $use-lists == true {
+    //------------------------------------//
+    //  $LISTS
+    //------------------------------------//   
+    ul {
+        margin-left: 20px;
+        padding-left: 0px;
+    }
+
+    ol {
+        margin-left: 0px;
+        padding-left: 20px;
+    }
+
+    ul li, 
+    ol li {
+        line-height: 1.75em;
+        position: relative;
+    }
+
+    ul ul {
+        list-style-type: circle;
+        margin-bottom: auto;
+        
+        ul { list-style-type: square; }
+    }
+
+    ol ol {
+        list-style-type: lower-latin;
+        margin-bottom: auto;
+        
+        ol { list-style-type: lower-roman; }
+    }
+
+    @include breakpoint(small) { ul li ul { margin-left: 20px; } }
+
+
+    // Unstyled
+    .list-unstyled {
+        margin-left: 0px;
+        list-style: none;
+        
+        li ul {
+            list-style: none;
+            
+            li ul { list-style: none; }
+        }
+    }
+
+
+    // Line
+    .list-line li {
+        border-bottom: 1px solid #eee;
+        padding: 5px 0;
+        
+        &:last-child, 
+        li { border-bottom: none; }
+    }
+
+
+    // Inline
+    .list-inline {
+        display: block;
+        margin-left: 0px;
+        
+        li {
+            border-bottom: none;
+            
+            &:last-child { margin-right: 0px; }
+        }
+    }
+
+    @include breakpoint(extra-small) {
+        .list-inline li {
+            display: inline;
+            margin-right: 25px;
+            
+            &:last-child { margin-right: 0px; }
+        }
+        
+        .list-line.list-inline li {
+            margin-right: 15px;
+            
+            &:after {
+                color: #e6e8ea;
+                content: "|";
+                margin-left: 15px;
+            }
+            
+            &:last-child:after { content: ""; }
+        }
+    }
+
+
+    // Fills
+    .list-fill-even li, 
+    .list-fill-odd li { padding-left: 5px; }
+
+    .list-fill-even li:nth-child(even), 
+    .list-fill-odd li:nth-child(odd) { background-color: #f9f9f9; }
+
+
+    // Definition Lists
+    dt { font-weight: bold; }
+
+    dd { margin-left: 0px; }
+
+    @include breakpoint(small) {
+        dl.dl-horizontal {
+            overflow: hidden;
+            > {
+                dt {
+                    width: 160px;
+                    float: left;
+                    clear: both;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                
+                dd { margin-left: 180px; }
+            }
+        }
+    }
+}