concisecss 0.0.1

data/app/assets/stylesheets/generic/_mixins.scss

@@ -0,0 +1,122 @@
+//
+// Passing in a single value will create font-sizing in 
+// pixels, rems as well as a proper line-height.
+// 
+//    `@include font-size(24px);`
+// 
+// 
+@mixin font-size($font-size, $line-height:true) {
+    font-size: $font-size;
+    font-size: ($font-size / $base-font-size) * 1rem;
+    
+    @if $line-height == true {
+        line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+    }
+}
+
+
+// 
+// Proper vendor prefixes are created just by 
+// passing a property value and size value.
+// 
+//    `@include vendor(border-radius, 4px);`
+// 
+// 
+@mixin vendor($property, $value...) {
+    -webkit-#{$property}: $value;
+    -moz-#{$property}: $value;
+    -ms-#{$property}: $value;
+    -o-#{$property}: $value;
+    #{$property}: $value;
+}
+
+
+//
+// By passing in one of the pre-defined media queries that 
+// are packaged with Concise by default, you can easily 
+// create styles that are built from the ground-up to be 
+// mobile friendly.
+// 
+//    `@include breakpoint(extra-small) { [styles here] }`
+// 
+// 
+@mixin breakpoint($point) {
+    @if $point == extra-small {
+        @media (min-width: $extra-small-start)  { @content; }
+    }
+    
+    @else if $point == small {
+        @media (min-width: $small-start)  { @content; }
+    }
+    
+    @else if $point == medium {
+        @media (min-width: $medium-start) { @content; }
+    }
+    
+    @else if $point == large {
+        @media (min-width: $large-start) { @content; }
+    }
+    
+    @else if $point == extra-large {
+        @media (min-width: $extra-large-start) { @content; }
+    }
+    
+    @else if $point == high-density { 
+        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+               only screen and (min--moz-device-pixel-ratio: 1.5),
+               only screen and (-o-min-device-pixel-ratio: 3/2),
+               only screen and (min-device-pixel-ratio: 1.5) { @content; }
+    }
+}
+
+
+//
+// Create variable-number grid columns given the value
+// for variable `$column-number` 
+// 
+@mixin grid-setup($number: $column-number) {
+    // Assign percentage-based widths for columns
+    @for $i from 1 through $number {
+        .#{$column-prefix + $i} { width: 100% / $number * $i; }
+    }
+    
+    @for $i from 1 through $number { 
+        // Style all but the last column
+        @if $i != $column-number {
+            .gutters .#{$column-prefix + $i} { width: 100% / $number * $i - $gutters; }
+        } @else {
+        // Ensure the last column has a width of 100%
+            .gutters .#{$column-prefix + $i} { width: 100% }
+        }
+    }
+}
+
+
+//
+// Create proper `.push-` classes given the value
+// for variable `$column-number`
+// 
+@mixin push-setup($number: $column-number) {
+    @for $i from 1 to $number {
+        .push-#{$i} { left: 100% / $number * $i; }
+    }
+    
+    @for $i from 1 to $number { 
+        .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
+    }
+}
+
+
+//
+// Create proper `.pull-` classes given the value
+// for variable `$column-number`
+// 
+@mixin pull-setup($number: $column-number) {
+    @for $i from 1 to $number {
+        .pull-#{$i} { right: 100% / $number * $i; }
+    }
+    
+    @for $i from 1 to $number { 
+        .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
+    }
+}

data/app/assets/stylesheets/generic/_normalize.scss

@@ -0,0 +1,191 @@
+@if $use-normalize == true {
+    //------------------------------------//
+    //  $NORMALIZE  
+    //------------------------------------// 
+    html {
+        font-size: 100%;
+        @include vendor(text-size-adjust, 100%);
+    }
+
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    main,
+    nav,
+    section,
+    summary { display: block; }
+
+    audio, 
+    canvas, 
+    progress, 
+    video {
+        display: inline-block;
+        vertical-align: baseline;
+    }
+
+    audio:not([controls]) {
+        display: none;
+        height: 0;
+    }
+
+    [hidden], 
+    template { display: none; }
+
+    a {
+        background: transparent;
+        
+        &:focus { outline: thin dotted; }
+        
+        &:active, 
+        &:hover { outline: 0; }
+    }
+
+    abbr[title] { border-bottom: 1px dotted; }
+
+    b, 
+    strong { font-weight: bold; }
+
+    dfn { font-style: italic; }
+
+    mark {
+        background: #ff0;
+        color: #000;
+    }
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sup { top: -0.5em; }
+
+    sub { bottom: -0.25em; }
+
+    img { 
+        border: 0; 
+        -ms-interpolation-mode: bicubic;
+    }
+
+    svg:not(:root) { overflow: hidden; }
+
+    figure { margin: 1em 40px; }
+
+    hr {
+        border: solid #eee;
+        border-width: 1px 0 0;
+        clear: both;
+        height: 0;
+        
+        @include vendor(box-sizing, content-box);
+    }
+
+    pre {
+        white-space: pre;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+
+    code, 
+    kbd, 
+    pre, 
+    samp {
+        font-family: monospace, monospace;
+        @include font-size($base-font-size);
+    }
+
+    q {
+        quotes: none;
+        
+        &:before,
+        &:after {
+            content: '';
+            content: none;
+        }
+    }
+
+    form { margin: 0; }
+
+    button, 
+    input, 
+    optgroup, 
+    select, 
+    textarea {
+        color: inherit;
+        font: inherit;
+        margin: 0;
+        vertical-align: baseline;
+    }
+
+    button { overflow: visible; }
+
+    button,
+    select { text-transform: none; }
+
+    button,
+    html input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        -webkit-appearance: button;
+        cursor: pointer;
+    }
+
+    button[disabled], 
+    html input[disabled] { cursor: default; }
+
+    button::-moz-focus-inner,
+    input::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    input {
+        line-height: normal;
+        
+        &[type="checkbox"], 
+        &[type="radio"] {
+            box-sizing: border-box;
+            padding: 0;
+        }
+        
+        &[type="number"] {
+            &::-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-search-decoration { -webkit-appearance: none; }
+        }
+    }
+
+    fieldset { margin: 0 2px; }
+
+    legend {
+        border: 0;
+        padding: 0;
+        white-space: normal;
+    }
+
+    textarea { overflow: auto; }
+
+    optgroup { font-weight: bold; }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    td, 
+    th { padding: 0; }
+}

data/app/assets/stylesheets/generic/_print.scss

@@ -0,0 +1,109 @@
+@if $use-print == true {
+    //------------------------------------//
+    //  $PRINT
+    //------------------------------------//
+    @media print {
+        @page { margin: 0.5cm; }
+
+        * {
+            background: transparent !important;
+            color: black !important;
+            text-shadow: none !important;
+            
+            @include vendor(filter, none !important);
+            
+            &:before, &:after {
+                background: transparent !important;
+                color: black !important;
+                text-shadow: none !important;
+                
+                @include vendor(filter, none !important);
+            }
+        }
+        
+        body {
+            background-color: #fff;
+            color: #000;
+            font: 0.57em / 1.3 Georgia, "Times New Roman", Times, serif;
+        }
+        
+        img { max-width: 100% !important; }
+        
+        .show-print {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-print, 
+        video, 
+        audio, 
+        object, 
+        embed, 
+        nav, 
+        footer, 
+        a[href^="#"]:after {
+            display: none;
+            visibility: hidden;
+        }
+        
+        p, 
+        h2, 
+        h3 {
+            orphans: 3;
+            widows: 3;
+        }
+        
+        h2, 
+        h3 { page-break-after: avoid; }
+        
+        a {
+            color: #000;
+            text-decoration: underline;
+            word-wrap: break-word;
+            
+            &:visited {
+                color: #000;
+                text-decoration: underline;
+                word-wrap: break-word;
+            }
+            
+            &[href]:after {
+                content: " (" attr(href) ")";
+                font-size: smaller;
+            }
+        }
+        
+        q:after { content: " (Source: " attr(cite) ")"; }
+        
+        abbr[title]:after { content: " (" attr(title) ")"; }
+        
+        a {
+            &:after, 
+            &[href^="javascript:"]:after, 
+            &[href^="#"]:after { content: ""; }
+        }
+        
+        pre,
+        blockquote {
+            border: 1px solid #ededed;
+            page-break-inside: avoid;
+        }
+        
+        thead { display: table-header-group; }
+        
+        tr, 
+        img { page-break-inside: avoid; }
+        
+        ul {
+            list-style: none;
+            
+            li { content: "» "; }
+        }
+        
+        .label, 
+        .badge {
+            border: 1px solid #000;
+            color: #000;
+        }
+    }
+}

data/app/assets/stylesheets/generic/_shared.scss

@@ -0,0 +1,37 @@
+@if $use-shared == true {
+    //------------------------------------//
+    //  $SHARED
+    //------------------------------------//
+    // Declare a common bottom margin for most elements 
+    // to maintain a consistent vertical rhythm.
+    h1, h2, h3, h4, h5, h6, 
+    .h1, .h2, .h3, .h4, .h5, .h6,
+    .giga, .mega, .kilo, 
+    hgroup,
+    ul, ol, dl,
+    blockquote, p, address,
+    table,
+    fieldset, figure,
+    pre,
+    .row,
+    .well {
+        margin-bottom: $base-spacing-unit;
+        margin-bottom: ($base-spacing-unit / $base-font-size) * 1rem;
+    }
+
+
+    // Spacing for <hr> tags
+    hr {
+        margin-bottom: $base-spacing-unit - 2px;
+        margin-bottom: (($base-spacing-unit - 2px) / $base-font-size) * 1rem;
+    }
+
+
+    // Left margin for lists
+    ul, 
+    ol, 
+    dd {
+        margin-left: 2 * $base-spacing-unit;
+        margin-left: (2 * $base-spacing-unit / $base-font-size) * 1rem;
+    }
+}

data/app/assets/stylesheets/objects/_badges.scss

@@ -0,0 +1,53 @@
+@if $use-badges == true {
+    //------------------------------------//
+    //  $BADGES
+    //------------------------------------//
+    .label, 
+    .badge {
+        background-color: #b5b5b5;
+        color: #fff;
+        @include font-size(12px); 
+        font-weight: bold;
+        padding: 3px 7px;
+        text-align: center;
+        vertical-align: baseline;
+        white-space: nowrap;
+    }
+
+    .label {
+        border-radius: 4px;
+        display: inline;
+    }
+
+    .badge {
+        border-radius: 10px;
+        display: inline-block;
+        padding: 1px 7px; 
+    }
+
+    .label[href] {
+        &:hover, &:focus {
+            color: #fff;
+            cursor: pointer;
+            text-decoration: none;
+        }
+    }
+
+    a.badge {
+        &:hover, &:focus {
+            color: #fff;
+            cursor: pointer;
+            text-decoration: none;
+        }
+    }
+
+    .label a, 
+    .badge a {
+        color: #fff;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .label:empty, 
+    .badge:empty { display: none; }
+}

data/app/assets/stylesheets/objects/_breadcrumbs.scss

@@ -0,0 +1,35 @@
+@if $use-breadcrumbs == true {
+    //------------------------------------//
+    //  $BREADCRUMBS
+    //------------------------------------//
+    .breadcrumbs {
+        @include font-size(13px);
+        margin: 12px 0;
+        padding: 5px 15px 5px 0;
+        
+        li {
+            display: inline;
+            margin-right: 10px;
+            
+            &:last-child { margin-right: 0px; }
+            
+            &:after {
+                content: "/";
+                color: #ccc;
+                padding-left: 12px;
+                vertical-align: middle;
+            }
+            
+            &:last-child {
+                color: #999;
+                
+                a { color: #999; }
+                
+                &:after { content: ""; }
+            }
+        }
+        
+        .well,
+        &.well { padding-left: 15px; }
+    }
+}