compass-aura 0.1.0 → 0.1.1

data/compass-aura.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-aura}
-  s.version = "0.1.0"
+  s.version = "0.1.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
   s.authors = ["Sam Richard"]
@@ -13,7 +13,10 @@ Gem::Specification.new do |s|
   s.files = [
     "compass-aura.gemspec",
     "lib/compass-aura.rb",
-    "stylesheets/_aura.scss"
+    "sass/_aura.scss",
+    "sass/aura/_functions.scss",
+    "sass/aura/_mixins.scss",
+    "sass/aura/_variables.scss"
   ]
   s.homepage = %q{https://github.com/Snugug/Aura}
   s.require_paths = ["lib"]

data/sass/aura/_functions.scss

@@ -0,0 +1,122 @@
+//////////////////////////////
+// Converting between px and em
+//////////////////////////////
+@function px-em($px) {
+  @return $px / $body-font-size-px * 1em;
+}
+
+@function em-em($em, $base: 14px) {
+  @return $em * $base / $body-font-size-px;
+}
+
+@function em-px($em) {
+  @return $em / $body-font-size-em * $body-font-size-px;
+}
+
+//////////////////////////////
+// Find Base Font Size from Input Font Size;
+//////////////////////////////
+@function base-font-size() {
+  $unit: unit($body-font-size);
+  @if $unit == 'px' {
+    @return $body-font-size / 16px * 1em;
+  }
+  @else if $unit == '%' {
+    @return $body-font-size / 100% * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $body-font-size;
+  }
+  @else if $unit == 'pt' {
+    @return $body-font-size / 12pt * 1em;
+  }
+  @else {
+    @warn 'Variable $body-font-size does not have a valid font unit';
+  }
+}
+
+//////////////////////////////
+// Generates Body Font Sizes for each unit
+//////////////////////////////
+@function bfs($unit) {
+  @if $unit == 'px' {
+    @return $body-font-size-em / 1em * 16px;
+  }
+  @else if $unit == '%' {
+    @return $body-font-size-em / 1em * 100%;
+  }
+  @else if $unit == 'em' {
+    @return $body-font-size-em;
+  }
+  @else if $unit == 'pt' {
+    @return $body-font-size-em / 1em * 12pt;
+  }
+  @else {
+    @warn 'Invalid unit passed in.';
+  }
+}
+
+//////////////////////////////
+// Find Breakpoints for Non Modular-Scale
+//////////////////////////////
+@function responsive-ratio() {
+  $full: columns-width();
+  $breakpoints: $full;
+  
+  @for $i from 1 through 3 {
+    $bsize: nth($breakpoints, $i) / $responsive-ratio;
+    $breakpoints: join($breakpoints, $bsize);
+  }
+  @return $breakpoints;
+}
+
+//////////////////////////////
+// Find Breakpoints for Modular Scale
+//////////////////////////////
+@function responsive-scale() {
+  @if $modular-scale-loaded == false {
+    @warn 'the responsive-scale function requires modular-scale to be loaded. The responsive-ratio value was returned.';
+    @return responsive-ratio();
+  }
+  $full: columns-width();
+  $breakpoints: $full;
+  $scale-relation: -1 !default;
+  @for $i from 1 through 3 {
+    $measure: $measure-width;
+    $scale-ratio: ms($scale-relation, $body-font-size-em, $responsive-ratio) / 1em;
+    $scale-relation: $scale-relation - 1;
+    
+    $col-total: col-total();
+    $gutter-col-grid: gutter-col-grid($col-total);
+    $col-width: col-width($gutter-col-grid);
+    $gutter-width: gutter-width($gutter-col-grid);
+    $side-gutter-width: $gutter-width;
+    
+    $breakpoints: join($breakpoints, columns-width() * $scale-ratio);
+    
+  }
+  @return $breakpoints;
+}
+//////////////////////////////
+// Aura Grid Functions
+//////////////////////////////
+// Returns Total Column Width
+@function col-total() {
+  @return $measure / $main-content-cols * 1em;
+}
+// Returns Total Number of Sub Column Pieces
+@function gutter-col-total() {
+  @return nth($gutter-to-col, 1) + nth($gutter-to-col, 2);
+}
+// Returns Width of One Full Column + Gutter
+@function gutter-col-grid($col-total) {
+  @return $col-total / $gutter-col-total;
+}
+// Returns Width of One Column
+@function col-width($gutter-col-grid) {
+  @return $gutter-col-grid * nth($gutter-to-col, 2);
+}
+// Returns Width of One Gutter
+@function gutter-width($gutter-col-grid) {
+  @return $gutter-col-grid * nth($gutter-to-col, 1);
+}

data/sass/aura/_mixins.scss

@@ -0,0 +1,135 @@
+//////////////////////////////
+// Aura Setup Mixin
+//////////////////////////////
+@mixin aura-setup {
+  // Hard sets font-scale to false if width is set
+  @if $width {
+    $font-scale: false;
+  }
+  // Calculate HTML font size in Em
+  $body-font-size-em: base-font-size();
+  $body-font-size-px: bfs('px');
+  $body-font-size-percent: bfs('%');
+  $body-font-size-pt: bfs('pt');
+  
+  // Default Responsive Ratio if none is set
+  @if not $responsive-ratio {
+    @if $font-scale {
+      $responsive-ratio: $major-third;
+    }
+    @else {
+      $responsive-ratio: $golden;
+    }
+  }
+  
+  // Define Initial Grid Dimensions
+  @if $font-scale {
+    $measure: $measure-width + 1/2 * $alphabet-count;
+  }
+  @else {
+    $measure: $measure-width;
+  }
+  // Set UP Grid
+  // If there's a width, figure out body-font-size for width
+  @if $width {
+    $width-em: px-em($width);
+    $sub-col: $width-em / ($total-cols * gutter-col-total() + nth($gutter-to-col, 1));
+    $col-width: $sub-col * nth($gutter-to-col, 2);
+    $gutter-width: $sub-col * nth($gutter-to-col, 1);
+    $side-gutter-width: $gutter-width;
+  }
+  @else {
+    $col-total: col-total();
+    $gutter-col-total: gutter-col-total();
+    $gutter-col-grid: gutter-col-grid($col-total);
+    $col-width: col-width($gutter-col-grid);
+    $gutter-width: gutter-width($gutter-col-grid);
+    $side-gutter-width: $gutter-width;
+  }
+  
+  // Set Root Em
+  html {
+    // If Font Scale is enabled, set up root font scaling
+    @if $font-scale {
+      // Set base Root Font to -2 Modular Scale
+      @include font-scale(-2);
+      
+      // At Small Responsive Scale, increase Modular Scale by 1
+      @include respond-to('small') {
+        @include font-scale(-1);
+      }
+      @include respond-to('medium') {
+        @include font-scale(0);
+      }
+      // At Large Responsive Scale, increase Modular Scale by 2 to base
+      @include respond-to('large') {
+        @include font-scale(1);
+      }
+      @include respond-to('full') {
+        @include font-scale(2);
+      }
+    }
+    // If Font Scale is disabled, set root font to base font size
+    @else {
+      font-size: $body-font-size-em;
+      line-height: $body-font-size-em + $lh-addition;
+    }
+  }
+  // If Object Scaling is enabled, set up object scaling
+  @if $obj-scale {
+    img, object, embed, iframe, video, audio {
+      max-width: 100%;
+    }
+  }
+  
+  // Create Measure class to be extended
+  %measure {
+    @include full;
+    @include respond-to('small') {
+      @include columns($main-content-cols);
+    }
+  }
+  
+  %aura-container {
+    @include container;
+  }
+}
+
+$modular-scale-loaded: false !default;
+
+//////////////////////////////
+// Aura Font Scale Font
+//////////////////////////////
+@mixin font-scale($scale) {
+  $ms: ms($scale, $body-font-size-em, $responsive-ratio);
+  font-size: $ms;
+  line-height: $ms + (1em - (.5 * $ms));
+  @if $modular-scale-loaded == false {
+    @warn 'the font-scale mixin requires modular-scale to be loaded.';
+  }
+}
+
+//////////////////////////////
+// Aurora Respond-To
+//////////////////////////////
+@mixin respond-to($context) {
+  @if $font-scale and not $breakpoints {
+    $breakpoints: responsive-scale();
+  }
+  @else if not $font-scale and not $breakpoints {
+    $breakpoints: responsive-ratio();
+  }
+  $i: 1 !default;
+  @each $size in $sizes {
+    @if $context == $size {
+      $respond: nth($breakpoints, $i);
+      @media screen and (min-width: $respond) {
+        @content;
+      }
+    }
+    $i: $i + 1;
+  }
+  @if $modular-scale-loaded == false {
+    @warn 'the font-scale mixin requires modular-scale to be loaded.';
+  }
+}

data/sass/aura/_variables.scss

@@ -0,0 +1,33 @@
+//////////////////////////////
+// User-Defined Variables for Aurora
+//////////////////////////////
+// Basic Options.
+$body-font-size:        16px                        !default;
+$total-cols:            12                          !default;
+$main-content-cols:     9                           !default;
+$font-scale:            true                        !default;
+$obj-scale:             true                        !default;
+// Advanced Options
+$gutter-to-col:         1, 4                        !default;
+$alphabet-count:        26                          !default;
+$measure-width:         $alphabet-count* $fourth    !default;
+$lh-addition:           .3em                        !default;
+$responsive-ratio:      false                       !default;
+// If using font-scale, suggest $major-third ratio. If not, suggest $golden ratio
+// Bad Options
+$width:                 false                       !default;
+// Optionally can set width for main grid which will override all other options.
+
+//////////////////////////////
+// Internal Variables for Aurora
+//////////////////////////////
+$measure:                 false                           !default;
+$gutter-col-total:        5                               !default;
+$breakpoints:             false                           !default;
+$body-font-size-em:       false                           !default;
+$body-font-size-px:       false                           !default;
+$body-font-size-percent:  false                           !default;
+$body-font-size-pt:       false                           !default;
+$width-em:                false                           !default;
+$modular-scale-loaded:    false                           !default;
+$sizes:             'full' 'large' 'medium' 'small';

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 1
-  - 0
-  version: 0.1.0
+  - 1
+  version: 0.1.1
 platform: ruby
 authors: 
 - Sam Richard
@@ -42,7 +42,10 @@ extra_rdoc_files: []
 files: 
 - compass-aura.gemspec
 - lib/compass-aura.rb
-- stylesheets/_aura.scss
+- sass/_aura.scss
+- sass/aura/_functions.scss
+- sass/aura/_mixins.scss
+- sass/aura/_variables.scss
 has_rdoc: true
 homepage: https://github.com/Snugug/Aura
 licenses: []