concisecss 0.0.5 → 2.0.0

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

@@ -3,10 +3,6 @@
   //  CLEARFIX
   //------------------------------------
   .clearfix {
-     &:after{
-      content: "";
-      display: table;
-      clear: both;
-    }
+     @include clearfix();
   }
-}
+}

data/app/assets/stylesheets/helpers/_conditional.scss

@@ -0,0 +1,128 @@
+//------------------------------------
+//  CONDITIONAL
+//------------------------------------
+
+// Silent Classes
+// (mixins have to be used instead of proper silent classes
+//  because of the scope of `@include` inside of media queries.)
+@mixin show-conditional {
+  display: block;
+  visibility: visible;
+}
+
+@mixin hide-conditional {
+  display: none;
+  visibility: hidden;
+}
+
+
+@if $use-conditional == true {
+  // Thanks to Bootstrap for having a good method of
+  // showing/hiding content via breakpoints
+  // (http://getbootstrap.com/css/#responsive-utilities)
+  .show-extra-small,
+  .hide-small,
+  .hide-medium,
+  .hide-large,
+  .hide-extra-large,
+  .hide-print,
+  .hide-hd {
+    @include show-conditional;
+  }
+
+  .hide-extra-small,
+  .show-small,
+  .show-medium,
+  .show-large,
+  .show-extra-large,
+  .show-print,
+  .show-hd {
+    @include hide-conditional;
+  }
+
+  @include breakpoint(small) {
+    .show-small,
+    .hide-extra-small,
+    .hide-medium,
+    .hide-large,
+    .hide-extra-large {
+      @include show-conditional;
+    }
+
+    .hide-small,
+    .show-extra-small,
+    .show-medium,
+    .show-large,
+    .show-extra-large {
+      @include hide-conditional;
+    }
+  }
+
+  @include breakpoint(medium) {
+    .show-medium,
+    .hide-small,
+    .hide-extra-small,
+    .hide-large,
+    .hide-extra-large {
+      @include show-conditional;
+    }
+
+    .hide-medium,
+    .show-small,
+    .show-extra-small,
+    .show-large,
+    .show-extra-large {
+      @include hide-conditional;
+    }
+  }
+
+  @include breakpoint(large) {
+    .show-large,
+    .hide-extra-small,
+    .hide-small,
+    .hide-medium,
+    .hide-extra-large {
+      @include show-conditional;
+    }
+
+    .hide-large,
+    .show-extra-small,
+    .show-small,
+    .show-medium,
+    .show-extra-large {
+      @include hide-conditional;
+    }
+  }
+
+  @include breakpoint(extra-large) {
+    .show-extra-large,
+    .hide-extra-small,
+    .hide-small,
+    .hide-medium,
+    .hide-large {
+      @include show-conditional;
+    }
+
+    .hide-extra-large,
+    .show-extra-small,
+    .show-small,
+    .show-medium,
+    .show-large {
+      @include hide-conditional;
+    }
+  }
+
+  // HiDPI and retina
+  @media only screen and (-moz-min-device-pixel-ratio: 1.5),
+         only screen and (-o-min-device-pixel-ratio: 3 / 2),
+         only screen and (-webkit-min-device-pixel-ratio: 1.5),
+         only screen and (min-device-pixel-ratio: 1.5) {
+    .show-hd {
+      @include show-conditional;
+    }
+
+    .hide-hd {
+      @include hide-conditional;
+    }
+  }
+}

data/app/assets/stylesheets/helpers/_functions.scss

@@ -0,0 +1,32 @@
+//------------------------------------
+//  FUNCTIONS
+//------------------------------------
+
+//
+// Calculates proper rem font-size given
+// a pixel amount.
+//
+@function calculate-rem($font-size) {
+  $rem-size: ($font-size / $base-font-size) * 1rem;
+
+  @return $rem-size;
+}
+
+
+//
+// Calculates proper line-height given a
+// font-size to maintain vertical rhythm.
+//
+@function calculate-line-height($font-size) {
+  $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+
+  @return $line-height-size;
+}
+
+
+//
+// Strips the units from a value (px, em, etc).
+//
+@function strip-units($value) {
+  @return $value / ($value * 0 + 1);
+}

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

@@ -2,42 +2,47 @@
   //------------------------------------
   //  HELPER
   //------------------------------------
+
   // Add/remove floats
-  .float-left { float: left !important; }
+  .float-left { float: left; }
 
-  .float-right { float: right !important; }
+  .float-right { float: right; }
 
-  .float-none { float: none !important; }
+  .float-none { float: none; }
 
 
   // Position elements
-  .align-center {
+  .align-center,
+  %align-center {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
 
-  .no-margin { margin: 0 !important; }
-
-  .icon-alone { display: inline-block; }
+  .no-margin { margin: 0; }
 
 
   // Displaying content
-  .inline { display: block; }
-
-  @include breakpoint(extra-small) { .inline { display: inline; } }
+  .inline { display: inline; }
 
-  .show {
+  .show,
+  %show {
     display: block;
     visibility: visible;
   }
 
-  .hide {
+  .hide,
+  %hide {
     display: none;
     visibility: hidden;
   }
 
-  .screen-reader {
+
+  // Hide text
+  .screen-reader,
+  %screen-reader,
+  .text-hide,
+  %text-hide {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -50,9 +55,10 @@
 
 
   // Full-width elements
-  .full { width: 100%; }
+  .full-width { width: 100%; }
 
-  img.full { 
+  img.full-width,
+  %full-width-image {
     max-width: 100%;
     height: auto;
     display: block;
@@ -71,11 +77,14 @@
 
 
   // Font weights
-  .weight-light { font-weight: 300 !important; }
+  .weight-light,
+  %weight-light { font-weight: 300; }
 
-  .weight-normal { font-weight: 400 !important; }
+  .weight-normal,
+  %weight-normal { font-weight: 400; }
 
-  .weight-semibold { font-weight: 600 !important; }
+  .weight-semibold,
+  %weight-semibold { font-weight: 600; }
 
 
   // All-caps text
@@ -83,17 +92,7 @@
 
 
   // Stylized ampersand
-  .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
-
-
-  // Hide text 
-  .text-hide {
-    border: 0;
-    background-color: transparent;
-    color: transparent;
-    font: 0 / 0 a;
-    text-shadow: none;
-  }
+  .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; }
 
 
   // Caret icon
@@ -106,12 +105,4 @@
     vertical-align: middle;
     width: 0;
   }
-
-
-  // Border radius
-  .border-radius { border-radius: $border-radius; }
-  
-  
-  // Pill style
-  .pill { border-radius: 25px; }
-}
+}

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

@@ -0,0 +1,315 @@
+//------------------------------------
+//  MIXINS
+//------------------------------------
+
+//
+// Uses `calculate-rem()` to calculate rem font-size and px
+// fallback. line-height is calculated with `calculate-line-height()`
+// but passing `false` will prevent that.
+//
+// Parameters:
+//  $font-size: the font size (in pixels) to be converted to rem
+//  $rem-sizing: if you want to convert the font-size to rem or not (default is true)
+//  $line-height: set to false if you wish not to output a calculated line-height (defalt is true)
+//
+// Example:
+//  `@include font-size(24px);`
+//
+//
+// Big thanks to inuitcss for inspiration behind this
+// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
+@mixin font-size($font-size, $rem-sizing: true, $line-height: true) {
+  font-size: $font-size;
+
+  @if $rem-sizing == true {
+    font-size: calculate-rem($font-size);
+  }
+
+  @if $line-height == true {
+    line-height: calculate-line-height($font-size);
+  }
+}
+
+
+//
+// Proper vendor prefixes are created by passing
+// a property, property value, and browser
+// vendor (webkit, moz, ms, o, etc).
+//
+// Parameters:
+//  $property: what CSS property to generate vendor prefixes for
+//  $value: the value of what was defined in `$property`
+//  $vendors: what vendor prefixes to generate (default is none)
+//
+// Example:
+//  `@include vendor(border-radius, 4px, webkit moz ms)`
+//
+//
+@mixin vendor($property, $value, $vendors: "") {
+  @each $vendor in $vendors {
+    @if $vendor != "" {
+      -#{$vendor}-#{$property}: $value;
+    }
+  }
+
+  #{$property}: $value;
+}
+
+
+//
+// Loops through all of the values in the `$breakpoints`
+// map and outputs conditional statements used to generate
+// media query code.
+//
+// When calling the mixin, if the parameter matches a key
+// from the `breakpoints` map, a media query is output with
+// that key's value. If an explicit value is set (ex: 360px)
+// then a media query is output with that value.
+//
+// Parameters:
+//  $point: the breakpoint value for the media query output
+//
+// Example:
+//  `@include breakpoint(extra-small) { ... }`
+//
+//  `@include breakpoint(360px) { ... }`
+//
+//
+@mixin breakpoint($point) {
+  @if type-of($point) == string {
+    @each $breakpoint-name, $breakpoint-value in $breakpoint-map {
+      @if $point == $breakpoint-name {
+        @media (min-width: $breakpoint-value) {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @media (min-width: $point) {
+      @content;
+    }
+  }
+}
+
+
+//
+// Generates property media queries for any CSS property,
+// value, and set of breakpoints. Allows you to easily change
+// property values based a set of breakpoints.
+//
+// Parameters:
+//  $properties: what CSS property to output inside of the media queries (can have multiple)
+//  $values: the value for each property (can have multiple)
+//  $responsive-values: what breakpoints to generate media queries for
+//  $use-available-mixins: whether or not to use mixin outputs for properties like `font-size` or `line-height` (default is true)
+//
+// Example:
+//  @include responsive("font-size", 11px,
+//    (
+//      "small" : 12px,
+//        450px : 13px,
+//       1100px : 14px,
+//      "large" : 15px,
+//       1600px : 16px,
+//    )
+//  );
+//
+//
+@mixin responsive($properties, $values, $responsive-values, $use-available-mixins: true) {
+  @each $property in $properties {
+    @if $property == "font-size" and $use-available-mixins == true {
+      #{$property}: $values;
+      #{$property}: ($values / $base-font-size) * 1rem;
+    } @else if $property == "line-height" and $use-available-mixins == true {
+      #{$property}: ceil($values / $base-line-height) * ($base-line-height / $values);
+    } @else {
+      #{$property}: $values;
+    }
+  }
+
+  @each $breakpoint, $value in $responsive-values {
+    @if type-of($breakpoint) == string {
+      @if(map-has-key($breakpoint-map, $breakpoint)) {
+        $breakpoint: map-get($breakpoint-map, $breakpoint);
+      } @else {
+        $breakpoint: "null";
+        @warn "Couldn't find breakpoint: " + $breakpoint;
+      }
+    }
+
+    @if $breakpoint != "null" {
+      @media (min-width: $breakpoint) {
+        @each $property in $properties {
+          @if $property == "font-size" and $use-available-mixins == true {
+            #{$property}: #{$value};
+            #{$property}: ($value / $base-font-size) * 1rem;
+          } @else if $property == "line-height" and $use-available-mixins == true {
+            #{$property}: ceil($value / $base-line-height) * ($base-line-height / $value);
+          } @else {
+            #{$property}: #{$value};
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Generates CSS to wrap semantic columns
+// in a row.
+//
+// Example:
+//  `@include row()`
+//
+//
+@mixin row() {
+  width: 100%;
+
+  &:after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+
+
+//
+// Generates CSS for semantic columns.
+//
+// Parameters:
+//   $column: the number of this particular column (determines width)
+//   $number-columns: number of columns in the row (default is `$column-number`)
+//   $first-column: set to `true` if it's the first column in a row (default is false)
+//   $use-gutters: set to `true` if you want column gutters (default is false)
+//   $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable)
+//
+// Example:
+//  `@include column(16, 4, false, true, 4)`
+//
+//
+@mixin column($column, $number-columns: $column-number, $first-column: false, $use-gutters: false, $gutter-value: strip-units($gutters)) {
+  @include vendor(background-clip, padding-box, webkit);
+
+  @include breakpoint(small) {
+    @if $use-gutters == true {
+      $gutter-size: percentage($gutter-value) * 0.01;
+      $width-of-column: (100% - $gutter-size * ($number-columns - 1)) / $number-columns;
+
+      float: left;
+      @if $first-column == false {
+        margin-left: $gutter-size;
+      }
+      width: $width-of-column * $column + $gutter-size * ($column - 1);
+    } @else {
+      float: left;
+      width: percentage(100 / $number-columns * $column) * .01;
+    }
+  }
+}
+
+
+//
+// Generates CSS for pushing a semantic column left or right.
+//
+// Parameters:
+//   $option: set to `push` or `pull` to generate proper styles
+//   $column: the column number
+//   $number-columns: the number of columns in the row (default is $column-number)
+//   $use-gutters: set to `true` if your column has gutters (default is false)
+//   $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable)
+//
+// Example:
+//  `@include push-pull(push, 4, 16, true)`
+//
+//
+@mixin push-pull($option, $column, $number-columns: $column-number, $use-gutters: false, $gutter-value: strip-units($gutters)) {
+  $property: "";
+
+  @if $option == "push" {
+    $property: "left";
+  } @else {
+    $property: "right";
+  }
+
+  @if $use-gutters == true {
+    #{$property}: 100% / $number-columns * $column - $gutter-value;
+  } @else {
+    #{$property}: 100% / $number-columns * $column;
+  }
+}
+
+
+//
+// Generates CSS that will clear both left
+// and right floats.
+//
+// Example:
+//  `@include clearfix()`
+//
+//
+@mixin clearfix() {
+  & {
+    &:after{
+     content: "";
+     display: table;
+     clear: both;
+    }
+  }
+}
+
+
+//
+// Create variable-number grid columns given the value
+// for variable `$column-number`.
+//
+// NOTE:
+//   This is a setup mixin for the Concise grid. If you
+//   wish to set up a grid, please use the `row()` and
+//   `column()` mixins.
+//
+@mixin grid-setup($number: $column-number) {
+  @for $i from 1 through $number {
+    $column-width-gutters: (100% - $gutters * ($number - 1)) / $number;
+
+    .#{$column-prefix + $i} {
+      width: 100% / $number * $i;
+
+      .gutters & {
+        width: $column-width-gutters * $i + $gutters * ($i - 1);
+      }
+    }
+  }
+}
+
+
+//
+// Create `.push-` and `.pull-` classes given
+// the value for variabls `$option` and
+// `$column-number`.
+//
+// NOTE:
+//   This is a setup mixin for the push and pull
+//   functionality in the Concise grid. If you wish
+//   to use that functionality, please use the
+//   `push-pull()` mixin.
+//
+@mixin push-pull-setup($option, $number: $column-number) {
+  $property: "";
+
+  @if $option == "push" {
+    $property: "left";
+  } @else {
+    $property: "right";
+  }
+
+  @for $i from 1 to $number {
+    .#{$option}-#{$i} {
+      #{$property}: 100% / $number * $i;
+
+      .gutters & {
+        #{$property}: 100% / $number * $i - $gutters;
+      }
+    }
+  }
+}