kentucky 0.2.0 → 0.3.0

data/app/assets/stylesheets/kentucky/_defaults.scss

@@ -1,19 +1,16 @@
 // ------------------------------------------------------------------- //
+// Default Kentucky Variables
+// ------------------------------------------------------------------- //
 // Project Settings
 // ------------------------------------------------------------------- //
 
-// Visually highlight any potential markup/accessibility quirks
-$debug-mode:          false !default;
-
-// Use media objects
-$use-media:           false !default;
-
-// Use sticky footer, if true, alter $footer-height to proper value
-$sticky-footer:       false !default;
-$footer-height:       60px;
+$debug-mode:        false !default;
+$use-media:         false !default;
+$use-sprite:        false !default;
+$use-breadcrumb:    false !default;
+$use-split:         false !default;
 
-// If sprite sheet required, input relative URL and sprite-grid
-// If not required, feel free to comment these out
+// If use-sprite is set to true, input relevant values
 $sprite-sheet-loc:    "sprite sheet url.png";
 $sprite-sheet-grid:   36px;
 
@@ -31,12 +28,12 @@ $giga-size:           96px !default;
 $mega-size:           72px !default;
 $kilo-size:           48px !default;
 
-$h1-size:             42px !default;
-$h2-size:             36px !default;
-$h3-size:             24px !default;
-$h4-size:             20px !default;
-$h5-size:             18px !default;
-$h6-size:             16px !default;
+$h1-size:             42px !default; // %alpha
+$h2-size:             36px !default; // %bravo
+$h3-size:             24px !default; // %charlie
+$h4-size:             20px !default; // %delta
+$h5-size:             18px !default; // %echo
+$h6-size:             16px !default; // %foxtrot
 
 $milli-size:          12px !default;
 $micro-size:          10px !default;
@@ -47,79 +44,28 @@ $micro-size:          10px !default;
 // ------------------------------------------------------------------- //
 
 $brand-font-family:   $helvetica !default;
-$brand-color:         #333 !default;;
-$brand-round:         3px !default;
+$brand-color:         #333 !default;
+$brand-round:         3px !default; // Used for rounded corners
 
 $link-color:          #bebebe !default;
 
 
 // ------------------------------------------------------------------- //
-// Typographic Variable Calls
+// Base Spacing Units
 // ------------------------------------------------------------------- //
 
-// Font-Size + Line Height
-// https://twitter.com/redclov3r/status/250301539321798657
-// Customized to allow unitless line-height
-
-html{
-  font: $base-font-size/$base-line-height $base-font-family;
-}
-
-%giga{
-  font-size: $giga-size;
-}
-%mega{
-  font-size: $mega-size;
-}
-%kilo{
-  font-size: $kilo-size;
-}
-
-h1, h2, h3, h4, h5, h6{
-  font-family: $brand-font-family;
-}
-h1,
-%alpha{
-  font-size: $h1-size;
-}
-h2,
-%bravo{
-  font-size: $h2-size;
-}
-h3,
-%charlie{
-  font-size: $h3-size;
-}
-h4,
-%delta{
-  font-size: $h4-size;
-}
-h5,
-%echo{
-  font-size: $h5-size;
-}
-h6,
-%foxtrot{
-  font-size: $h6-size;
-}
-
-%milli{
-  font-size: $milli-size;
-}
-%micro{
-  font-size: $micro-size;
-}
-
-a{
-  color: $link-color;
-  @include transition(all .3s linear);
-  
-  &:hover, &:focus{
-    color: lighten($link-color, 15%);
-  }
-}
+$base-spacing-unit: $base-line-height !default;
+$half-spacing-unit: $base-spacing-unit / 2 !default;
 
 
+// ------------------------------------------------------------------- //
+// Media Query Widths
+// ------------------------------------------------------------------- //
+
+$mobile: new-breakpoint(max-width 480px 4);
+$tablet: new-breakpoint(max-width 990px 8);
+$laptop: new-breakpoint(max-width 1440px 12);
+
 // ------------------------------------------------------------------- //
 // Single Direction Margins
 //
@@ -134,21 +80,4 @@ section, article, p,
 pre, table, fieldset, hr{
   margin-bottom: ($base-font-size / $base-line-height); // IE8 Fallback
   margin-bottom: 1rem;
-}
-
-// ------------------------------------------------------------------- //
-// Custom Selection Text
-// ------------------------------------------------------------------- //
-
-::selection,
-::-moz-selection {
-  background: $brand-color;
-  color: #fff;
-}
-img::selection,
-img::moz-selection{
-  background: transparent;
-}
-body{
-  -webkit-tap-highlight-color: $brand-color;
 }

data/app/assets/stylesheets/kentucky/_kentucky.scss

@@ -1,20 +1,83 @@
 // ------------------------------------------------------------------- //
-// Standard Imports
+// Kentucky.scss
+// 
+// The goal of Kentucky is to do a majority of the heavy lifting
+// for you at the very start of a project. The styles and organization
+// required at the beginning of every project is done for you, just
+// fill in the variables!
+// 
+// The table of contents below explains, briefly, what each import
+// does.
+// 
+// Kentucky aims to be heavily documented to help you learn why or how
+// it's pieces work. More complex portions come with implemenation
+// examples.
+// 
+// Copyright 2013 LookThink
+// Developed in part by:
+// Greg Bruening, Aaron Clemmer, and Chris Brinson
+// 
+// WARNING: Variables set now are being used throughout the entirety
+// of Kentucky. Any custom, project-related styles SHOULD NOT be added
+// or modified in Kentucky diretcly, but added via a separate theme
+// folder/files.
+// 
 // ------------------------------------------------------------------- //
+// Contents
+// ------------------------------------------------------------------- //
+
+// Imports             Begin importing the sections below
+
+// Defaults            All variable values set here
+// Normalize           Nicolas Gallagher's normalize.css, sassy style
+// Clearfix            Set some defaults
+// Mixins              Super-simple SCSS stuff
+
+// Main                High-level elements like `html`, `body`, etc.
+// Headings            Double-stranded heading hierarchy
+// Smallprint          Smaller text elements like `small`
+// Lists               Basic list styles and extends
+
+// Abstraction details here
+
+// Brand               Helper class to apply brand treatment to elements
+// Helpers             A series of helper classes to use arbitrarily
+// Debug               Enable to add visual flags for debugging purposes
 
-@import 'normalize';
-@import 'defaults';
-@import 'helpers';
 
 // ------------------------------------------------------------------- //
-// For those last minute changes you'll come back to later
+// Generic utility styles
 // ------------------------------------------------------------------- //
 
-@import 'shame';
+@import "defaults";
+@import "generic/normalize";
+@import "generic/clearfix";
+@import "generic/mixins";
+
+
+// ------------------------------------------------------------------- //
+// Base styles; unclassed HTML elements
+// ------------------------------------------------------------------- //
+
+@import "base/main";
+@import "base/headings";
+@import "base/smallprint";
+@import "base/lists";
+
+
+// ------------------------------------------------------------------- //
+// Objects and abstractions
+// ------------------------------------------------------------------- //
+
+@import "objects/media";
+@import "objects/breadcrumb";
+@import "objects/split";
+
 
 // ------------------------------------------------------------------- //
-// Conditional Imports
-// Only loaded if options in _defaults are set to TRUE
+// Style trumps; helper and brand classes
 // ------------------------------------------------------------------- //
 
-@import 'debug';
+@import "generic/brand";
+@import "generic/helpers";
+@import "generic/debug";

data/app/assets/stylesheets/kentucky/_shame.scss

@@ -1,3 +1,3 @@
 // ------------------------------------------------------------------- //
-// Get hacky in here...
+// We're up all night to get hacky...
 // ------------------------------------------------------------------- //

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

@@ -0,0 +1,72 @@
+// ------------------------------------------------------------------- //
+// Kentucky Headings
+// 
+// The goal here is to define headings and establish practical
+// font-sizing from the get go.
+//
+// Also includes a "double-stranded hierarchy" allowing you to use HTML
+// heading elements or the alternate extend included (based on the 
+// military alphabet).
+// ------------------------------------------------------------------- //
+
+@include headings(1,6){
+  font-family: $brand-font-family;
+}
+
+h1,
+%alpha{
+  @include font-size($h1-size);
+}
+
+h2,
+%bravo{
+  @include font-size($h2-size);
+}
+
+h3,
+%charlie{
+  @include font-size($h3-size);
+}
+
+h4,
+%delta{
+  @include font-size($h4-size);
+}
+
+h5,
+%echo{
+  @include font-size($h5-size);
+}
+
+h6,
+%foxtrot{
+  @include font-size($h6-size);
+}
+
+
+// ------------------------------------------------------------------- //
+// Heading Groups
+// 
+// Target a group of headers stacked together (such as title/subtitle)
+// ------------------------------------------------------------------- //
+
+%hgroup{
+  @include headings(1,6){
+    margin-bottom: 0;
+  }
+}
+
+
+// ------------------------------------------------------------------- //
+// A set of extends for massive type (heroes, mastheads, etc.)
+// ------------------------------------------------------------------- //
+
+%giga{
+  @include font-size($giga-size);
+}
+%mega{
+  @include font-size($mega-size);
+}
+%kilo{
+  @include font-size($kilo-size);
+}

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

@@ -0,0 +1,21 @@
+// ------------------------------------------------------------------- //
+// Lists
+// ------------------------------------------------------------------- //
+// Remove vertical spacing from nested lists
+// ------------------------------------------------------------------- //
+
+li{
+  > ul,
+  > ol{
+    margin-bottom: 0;
+  }
+}
+
+
+// ------------------------------------------------------------------- //
+// Enjoy numbered lists without the semantics implied by `ol`
+// ------------------------------------------------------------------- //
+
+/*ul*/%numbered-list{
+  list-style-type: decimal;
+}

data/app/assets/stylesheets/kentucky/base/_main.scss

@@ -0,0 +1,22 @@
+// ------------------------------------------------------------------- //
+// Main
+// ------------------------------------------------------------------- //
+
+html{
+  font: #{($base-font-size/16px)*1em} / #{$base-line-height} $base-font-family;
+  min-height: 100%;
+  overflow-y: scroll;
+} // END html
+
+body{
+  background: #fff;
+} // END body
+
+a{
+  color: $link-color;
+  @include transition(all .3s linear);
+  
+  &:hover, &:focus{
+    color: lighten($link-color, 15%);
+  }
+} // END a

data/app/assets/stylesheets/kentucky/base/_smallprint.scss

@@ -0,0 +1,13 @@
+// ------------------------------------------------------------------- //
+// Smallprint
+// ------------------------------------------------------------------- //
+// What is this? Type for ants?!
+// ------------------------------------------------------------------- //
+
+%milli{
+  @include font-size($milli-size);
+}
+
+%micro{
+  @include font-size($micro-size);
+}

data/app/assets/stylesheets/kentucky/generic/_brand.scss

@@ -0,0 +1,16 @@
+// ------------------------------------------------------------------- //
+// Brand extensions
+// ------------------------------------------------------------------- //
+
+%brand{
+  font-family: $brand-font-family !important;
+  color: $brand-color !important;
+}
+
+%brand-type{
+  font-family: $brand-font-family !important;
+}
+
+%brand-color{
+  color: $brand-color !important;
+}

data/app/assets/stylesheets/kentucky/generic/_clearfix.scss

@@ -0,0 +1,11 @@
+// ------------------------------------------------------------------- //
+// Clearfix
+// ------------------------------------------------------------------- //
+
+%cf{
+ &:after{
+   content: "";
+   display: table;
+   clear: both;
+ } 
+}

data/app/assets/stylesheets/kentucky/generic/_helpers.scss

@@ -0,0 +1,71 @@
+// ------------------------------------------------------------------- //
+// Kentucky Helper Extensions
+// ------------------------------------------------------------------- //
+// Show / Hide Elements
+// To be used in jQuery
+// ------------------------------------------------------------------- //
+
+.is-shown{
+  display: block;
+}
+.is-hidden{
+  display: none;
+}
+
+
+// ------------------------------------------------------------------- //
+// Add / Remove Floats
+// ------------------------------------------------------------------- //
+
+%float-left{
+  float: left;
+}
+%float-right{
+  float: right;
+}
+%float-none{
+  float: none;
+}
+
+
+// ------------------------------------------------------------------- //
+// Text Alignment
+// ------------------------------------------------------------------- //
+
+%text-left{
+  text-align: left;
+}
+%text-right{
+  text-align: right;
+}
+%text-center{
+  text-align: center;
+}
+
+
+// ------------------------------------------------------------------- //
+// Muted
+// ------------------------------------------------------------------- //
+
+%muted{
+  opacity: .5;
+  filter: alpha(opacity=50);
+}
+
+
+// ------------------------------------------------------------------- //
+// "Go" - Add right-facing arrow, indicating movement through site
+// ------------------------------------------------------------------- //
+
+%go:after{
+  content: "\00A0" "\OOBB";
+}
+
+
+// ------------------------------------------------------------------- //
+// Caps Lock - Calm down there, champ...
+// ------------------------------------------------------------------- //
+
+%caps{
+  text-transform: uppercase;
+}