archetype 0.0.1.pre.13 → 1.0.0.alpha.1

data/stylesheets/archetype/_core.scss

@@ -0,0 +1,15 @@
+// this is the harness file for Archetype's core functionality
+
+// register pre-maturely so the dependencies know the context has been set
+$a-blackhole: register-archetype-module(archetype/core);
+
+@import "required";         // any required dependencies
+@import "util/core";        // utility mixins and helper functions
+@import "hacks/core";       // browser hacks
+@import "ui/core";          // UI mixins
+@import "styleguide/core";  // styleguide framework
+
+// decide whether or not we are going to auto-reset
+@if not $CONFIG_RESET_AUTO {
+  $a-blackhole: skip-archetype-init() !global;
+}

data/stylesheets/archetype/_hacks.scss

@@ -1,121 +1,5 @@
+// TODO - verify this works standalone via `@import 'archetype/hacks'`
 // @category  hacks
-@import "util";
-
-// hack to support negative margins in legacy IE
-// @mixin     hack-negative-margin
-@mixin hack-negative-margin() {
-  @if($legacy-support-for-ie6 or $legacy-support-for-ie7) {
-    @include has-layout();
-    position: relative;
-  }
-}
-
-// max-height hack
-// @mixin     max-height
-// @param     $value {String} the height
-@mixin max-height($value) {
-  @include hacked-maximum(height, $value);
-}
-
-// max-width hack
-// @mixin     max-width
-// @param     $value {String} the width
-@mixin max-width($value) {
-  @include hacked-maximum(width, $value);
-}
-
-// generic max-* hack wrapper
-// @mixin     hacked-maximum
-// @param     $property {String} property [height|width]
-// @param     $value {String} the value
-@mixin hacked-maximum($property, $value) {
-  max-#{$property}: $value;
-  @include bang-hack($property, auto, $value);
-}
-
-// proxy for ie-pseudo
-// @mixin     ie-pseudo-before
-// @param     $styles {String} the styles to apply to the pseudo-element
-// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param     $name {String} the name of the element
-// @content
-@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
-  @include ie-pseudo($styles, $content, before, $name) {
-    @content;
-  }
-}
-
-// proxy for ie-pseudo
-// @mixin     ie-pseudo-after
-// @param     $styles {String} the styles to apply to the pseudo-element
-// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param     $name {String} the name of the element
-// @content
-@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
-  @include ie-pseudo($styles, $content, after, $name) {
-    @content;
-  }
-}
-
-// this creates a one-type executing expression that inserts an element relative to `this` element.
-// this allows some level of support for :before/:after in IE6/7
-// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
-// @mixin     ie-pseudo
-// @param     $styles {String} the styles to apply to the pseudo-element
-// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param     $placement {String} [before|after] simulate :before or :after behavior
-// @param     $name {String} the name of the element
-// @param     $uid {String} a custom, unique identifier for the generate element
-// @content
-@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
-  $archetype-pseudo-selector: false;
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    $uid: if($uid, $uid, unique('ie-pseudo-'));
-    $archetype-pseudo-selector: '& ##{$uid}';
-    $this: 't';
-    $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")'));
-    $method: if($placement == before, insertBefore, appendChild);
-    @if $content and $content != nil {
-      $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma);
-    }
-    @if $CONFIG_GENERATED_TAG_CSS {
-      $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
-    }
-    @if $styles and $styles != nil and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
-      // sets the icon styles on the node
-      $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma);
-    }
-    // if we're using the insertBefore method, we need to specify the node reference to the first childNode
-    $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
-    $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma);
-    $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once
-
-    // we execute in a setTimeout to decouple from the current UI thread
-    //  this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
-    //  http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
-    *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
-
-    // if we're NOT using inline styles...
-    @if not $CONFIG_GENERATED_TAG_INLINE {
-      // output it on the generated selector
-      #{$archetype-pseudo-selector} {
-        @include to-styles(-style-string-to-list(unquote($styles)));
-        @if archetype-version('Sass >= 3.2') {
-          @content;
-        }
-      }
-    }
-  }
-}
-
-// a hack that allows elements with transparent backgrounds to be focusable in IE
-// @mixin     transparent-focusable
-// @param     $url {String} an optional URL to point to an image (not required)
-// @param     $data {String} an optional data URI for a transparent image (not required)
-@mixin transparent-focusable($url: url(https://), $data: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') {
-  $bg: (transparent);
-  background: append($bg, $data);
-  @if $url {
-    @include target-browser(ie lte 7, background, append($bg, $url));
-  }
-}
+@import "required";
+@import "util/core"; // required for `to-style` mixin
+@import "hacks/core";

data/stylesheets/archetype/_init.scss

@@ -1,23 +1,5 @@
-// include configs
-@import "archetype/config";
+@import "core";
 
-// include Compass mixins
-@import "compass";
-
-// utility mixins and helper functions
-@import "archetype/util";
-
-// custom hacks
-@import "archetype/hacks";
-
-// ui
-@import "archetype/ui";
-
-// grids
-@import "archetype/grid";
-
-// styleguide
-@import "archetype/styleguide";
-
-// base
-@import "archetype/base";
+@import "ui/init";
+@import "hacks/init";
+@import "styleguide/init";

data/stylesheets/archetype/_required.scss

@@ -0,0 +1,3 @@
+// these files are required by all Archetype modules
+@import "compass";      // include Compass
+@import "config/core";  // configuration

data/stylesheets/archetype/_reset.scss

@@ -0,0 +1,3 @@
+$CONFIG_RESET_AUTO: true;
+
+@import "init";

data/stylesheets/archetype/_styleguide.scss

@@ -1,6 +1,2 @@
-@import "config";
-@import "util";
-@import "styleguide/styleguide";
-@import "styleguide/primitives";
-@import "styleguide/helpers";
-@import "styleguide/components";
+// styleguide is loaded as part of core
+@import "core";

data/stylesheets/archetype/_ui.scss

@@ -1,360 +1,4 @@
 // @category   ui
-@import "hacks";
-@import "compass/layout/stretching";
+@import "required";
 
-// computes the border position to use
-// @function  _getTriangleBorderDirection
-// @private
-// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
-// @return    {List} the computed border position (e.g. top, left, bottom)
-@function _getTriangleBorderDirection($direction) {
-  @if(length($direction) == 1) {
-    @return opposite-position($direction);
-  }
-  @return if(index($direction, top), bottom, top);
-}
-
-// computes the border width for the triangle
-// @function  _getTriangleBorderWidth
-// @private
-// @param     $width {Number} the width of the arrow
-// @param     $height {Number} the height of the arrow
-// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
-// @return    {List} the computed border widths
-@function _getTriangleBorderWidth($width, $height, $direction) {
-  @if(length($direction) == 1) {
-    // TOP
-    @if($direction == top) {
-      @return 0 ($width/2) $height;
-    }
-    // BOTTOM
-    @else if($direction == bottom) {
-      @return $height ($width/2) 0;
-    }
-    // LEFT
-    @else if($direction == left) {
-      @return ($height/2) $width ($height/2) 0;
-    }
-    // RIGHT
-    @else if($direction == right) {
-      @return ($height/2) 0 ($height/2) $width;
-    }
-  }
-  @else if(index($direction, top)) {
-    // TOP LEFT
-    @if(index($direction, left)) {
-      @return 0 $width $height 0;
-    }
-    // TOP RIGHT
-    @else {
-      @return 0 0 $height $width;
-    }
-  }
-  @else if(index($direction, bottom)) {
-    // BOTTOM LEFT
-    @if(index($direction, left)) {
-      @return $height $width 0 0;
-    }
-    // BOTTOM RIGHT
-    @else {
-      @return $height 0 0 $width;
-    }
-  }
-  @return 0;
-}
-
-// generates a cross-browser triangle using borders
-// @mixin     triangle
-// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
-// @param     $width {Number} the width of the arrow
-// @param     $height {Number} the height of the arrow
-// @param     $color {Color} the color of the arrow
-@mixin triangle($direction: bottom, $width: 1em, $height: false, $color: #aaa) {
-  $direction: rtl($direction);
-  // if no height was specified, assume it's identitcal to width
-  @if(not $height) {
-    $height: $width;
-  }
-  // zero out it's content
-  height: 0;
-  width : 0;
-  // IE6 needs some extra love
-  @include target-browser(ie 6, font-size, 0);
-  @include target-browser(ie 6, line-height, 0);
-  border: {
-    // for IE6, transparent borders are simulated using `dashed` styles instead of a chroma filter
-    // IE won't render a `dashed` border-style unless (width * 5) >= border-width
-    // since width is always 0, dashed borders aren't rendered
-    // @link http://hedgerwow.appspot.com/demo/arrows
-    style: dashed;
-    // transparent for all other browsers
-    color: transparent;
-    width: _getTriangleBorderWidth($width, $height, $direction);
-    #{_getTriangleBorderDirection($direction)}: {
-      color: $color;
-      style: solid;
-    }
-  }
-}
-
-// makes your element centered vertically and horizontally in a parent element
-// @mixin   centered-box
-@mixin centered-box() {
-  @include stretch();
-  margin: auto;
-}
-
-// hide element visibly but preserve screen-reader support
-// @mixin     hide-element
-// @credit    Jonathan Snook
-// @link      http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-@mixin hide-element() {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  @include target-browser(ie lte 7, clip, rect(1px 1px 1px 1px));
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-// reverse hide-element and make the element visible again
-// @mixin     unhide-element
-// @see       hide-element
-// @param     $position {String} value for the position property
-// @param     $height {String} value for the height property
-// @param     $width {String} value for the width property
-// @param     $overflow {String} value for the overflow property
-@mixin unhide-element($position: static, $height:auto, $width:auto, $overflow:visible) {
-  position: $position !important;
-  height: $height;
-  width: $width;
-  overflow: $overflow;
-  clip: auto;
-}
-
-// mixin for generating a fade box which fades from transparent to white
-// @mixin     fade-box
-// @param     $width {String} the width of the overlay
-// @param     $height {String} the height of the overlay
-// @param     $direction {String} top=vertical left=horizontal
-@mixin fade-box($width: 100%, $height: 100%, $direction: top) {
-  $direction: rtl($direction);
-  // TODO - update this when Compass supports IE alpha channels
-  @if $direction == left {
-    @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1));
-  }
-  @else {
-    @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff'));
-  }
-  @include background-image(linear-gradient($direction, rgba(255,255,255,0.4), rgba(255,255,255,1)) );
-  @include pseudo-element($width: $width, $height: $height, $position: absolute);
-  text-align: center;
-  bottom: 0;
-  #{if($direction == left, right, left)}: 0;
-}
-
-// create a stroke line around text (or font icon)
-// @mixin     stroke
-// @param     $width {Number} the width of the stroke
-// @param     $color {Color} the color of the stroke
-// @param     $shadow {List} an additional drop shadow to attach
-@mixin glyph-stroke($width: 1px, $color: black, $shadow: false) {
-  @include box-shadow(compact(0 $width 0 $color, 0 -1*$width 0 $color, $width 0 0 $color, -1*$width 0 0 $color, $shadow));
-}
-
-// create a glyph icon
-// @mixin     glyph-icon
-// @param     $icon {String} the icon name
-// @param     $size {Number} the size of the icon
-// @param     $color {Color} the color of the font
-// @param     $placement {String} where to place the icon [before|after|inline]
-// @param     $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extendable)
-// @param     $ie-uid {String} a custom, unique identifier for the generate IE6/7 element
-// @content
-@mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false, $ie-uid: false) {
-  $archetype-glyph-selector: false;
-  $char-mapping: nil;
-  $char-code: nil;
-  @if $icon {
-    $char-mapping: -compass-list(associative($CONFIG_GLYPHS_MAPPINGS, $icon, $strict: true));
-    $char-code: nth($char-mapping, 1);
-  }
-  @if $char-code == nil and $icon != false {
-    @warn "could not find character mapping for `#{icon}`";
-  }
-  @else {
-    @if $size == default {
-      $default-size: nil;
-      @if $icon {
-        $default-size: nth-cyclic($char-mapping, 2);
-      }
-      $size: if(type-of($default-size) == number, $default-size, 100%);
-    }
-    // if the size is under a given threshold, use a halfling, if available
-    @if $icon {
-      $char-code: nth(-compass-list($char-code), 1);
-    }
-    $selector: if(index(before after, $placement), '&:#{$placement}', '&');
-    #{$selector} {
-      font-family: '#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';
-      font-weight: $CONFIG_GLYPHS_WEIGHT;
-      font-style: $CONFIG_GLYPHS_STYLE;
-      text-decoration: inherit;
-      speak: none;
-      @include if-set(font-size, $size);
-      @include if-set(color, $color);
-      @if $icon {
-        content: $char-code;
-      }
-    }
-    $archetype-glyph-selector: $selector;
-    @if($selector != '&' and $ie-styles != nil) {
-      // support for IE6/7
-      $styles: "font-family:'#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
-      @if($size != nil) {
-        $styles: $styles + "font-size:#{$size};"
-      }
-      @if($color != nil) {
-        $styles: $styles + "color:#{$color};"
-      }
-      @if($ie-styles) {
-        $styles: $styles + $ie-styles;
-      }
-
-      @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph, $uid: $ie-uid);
-      @if $archetype-pseudo-selector {
-        $archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}';
-      }
-    }
-    #{$archetype-glyph-selector} {
-      @content;
-    }
-  }
-}
-
-// generate rotational and position keyframes for loading spinners
-// @mixin     generate-loader-keyframes
-@mixin generate-loader-keyframes() {
-  @if not $CONFIG_DISABLE_STYLEGUIDE_SPRITES {
-    // generate rotating keyframes
-    @include -generate-loader-keyframes-360();
-    // generate specific keyframes
-    @each $size in $CONFIG_LOADERS {
-      @if $size != nil {
-        $values: nth($size, 2);
-        $size: nth($size, 1);
-        @each $context in (1 2) {
-          $name: unquote('#{$size}-#{$context}');
-          $icon: nth-cyclic(associative($values, default), $context);
-          $position: styleguide-sprite-position($CONFIG_SPRITE_LOADERS, $icon);
-          $sprite-file: styleguide-sprite-file($CONFIG_SPRITE_LOADERS, $icon);
-          $width: styleguide-image-width($sprite-file);
-          $height: styleguide-image-height($sprite-file);
-          @include -generate-loader-keyframes-position($name, $position, $width, $height);
-        }
-      }
-    }
-  }
-}
-
-// generate rotational keyframes for loading spinners
-// @mixin     -generate-loader-keyframes-360
-// @private
-@mixin -generate-loader-keyframes-360() {
-  @if do-once("archetype/ui/generate-keyframe/#{$CONFIG_KEYFRAME_LOADERS}") {
-    @if archetype-version('compass >= 0.13') {
-      @include keyframes($CONFIG_KEYFRAME_LOADERS) {
-        from { @include rotate(0deg); }
-        to { @include rotate(360deg); }
-      }
-    }
-    @else {
-      @if $experimental-support-for-webkit {
-          @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-          from { -webkit-transform: rotate(0deg); }
-          to { -webkit-transform: rotate(360deg); }
-          }
-      }
-      @if $experimental-support-for-mozilla {
-          @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-          from { -moz-transform: rotate(0deg); }
-          to { -moz-transform: rotate(360deg); }
-          }
-      }
-      @if $experimental-support-for-microsoft {
-          @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-          from { -ms-transform: rotate(0deg); }
-          to { -ms-transform: rotate(360deg); }
-          }
-      }
-      @if $experimental-support-for-opera {
-          @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-          from { -o-transform: rotate(0deg); }
-          to { -o-transform: rotate(360deg); }
-          }
-      }
-      @keyframes #{$CONFIG_KEYFRAME_LOADERS} {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-      }
-    }
-  }
-}
-
-// generate position keyframes for loading spinners
-// @mixin     -generate-loader-keyframes-position
-// @private
-// @param     $name {String} the name for this keyframe
-// @param     $position {List} the background-position of the spinner image
-// @param     $width {Number} the width of the spinner image
-// @param     $height {Number} the height of the spinner image
-@mixin -generate-loader-keyframes-position($name, $position, $width, $height) {
-  $name: unquote('#{$CONFIG_KEYFRAME_LOADERS}-position-#{$name}');
-  @if do-once("archetype/ui/generate-keyframe/#{$name}") {
-    @if archetype-version('compass >= 0.13') {
-      @include keyframes($name) {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-    }
-    @else {
-      @-webkit-keyframes #{$name} {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-      @-moz-keyframes #{$name} {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-      @-ms-keyframes #{$name} {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-      @-o-keyframes #{$name} {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-      @keyframes #{$name} {
-        from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
-      }
-    }
-  }
-}
-
-// a helper to generate the required CSS for the position keyframe
-// @mixin     -generate-loader-keyframes-position-css
-// @private
-// @param     $position {List} the background-position of the spinner image
-// @param     $width {Number} the width of the spinner image
-// @param     $height {Number} the height of the spinner image
-@mixin -generate-loader-keyframes-position-css($position, $width, $height) {
-  background-position: $position;
-  width: $width;
-  height: $height;
-  margin-left: $width / -2;
-  margin-top: $height / -2;
-}
-
-// a method for removing default styling from a button
-// @mixin     unstyled-button
-@mixin unstyled-button() {
-  background: none;
-  border: none;
-  padding: 0;
-  @include appearance(none);
-}
+@import "ui/core";