archetype-utilities 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d737ce0ef3db1e2d9649b1b38e8f546356ebbba8
+  data.tar.gz: 6e76b3cfc110ca9cbfba8172d1c1fcaf7591c286
+SHA512:
+  metadata.gz: 7a08cb9d135e5ecfd3c11f224c1283c24e3adcffa29d353b3e54a20136c1a2475786b0ba1958b334e1d7d09df11d0f512f8774cc202975e8a4895dcdaa89b50f
+  data.tar.gz: bda8b1c7ee274ab0c9e1b924ead1e6bd3cca2e7abe37a637b788916756ce9d5041ac857c36c99994434442dfced0941a584a8c46080269dbb423755fef96237f

data/lib/archetype-utilities.rb

@@ -0,0 +1,4 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('archetype-extension', :path => extension_path)
+

data/stylesheets/_archetype-utilities.scss

@@ -0,0 +1,20 @@
+/**
+ * Archetype Utilities
+ */
+@import "archetype-utilities/helpers";
+@import "archetype-utilities/accessibility";
+@import "archetype-utilities/clearfix";
+@import "archetype-utilities/triangles";
+@import "archetype-utilities/units";
+@import "archetype-utilities/pseudo";
+@import "archetype-utilities/align";
+@import "archetype-utilities/normalize";
+@import "archetype-utilities/media";
+@import "archetype-utilities/typography";
+@import "archetype-utilities/print";
+@import "archetype-utilities/links";
+@import "archetype-utilities/lists";
+@import "archetype-utilities/ie";
+//@import "archetype-utilities/pe";
+@import "archetype-utilities/sass-lists";
+

data/stylesheets/archetype-utilities/_accessibility.scss

@@ -0,0 +1,110 @@
+/**
+ * Accessibility
+ * 
+ */
+
+
+/**
+ * Focus state for keyboard and accessibility
+ *
+ * https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_mixins.scss
+ * ex: &:focus { @include tab-focus(); }
+ */
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted #333;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+/**
+ * Image Replacement
+ */
+@mixin ir() {
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 150%;
+  }
+}
+
+%ir {
+  @include ir;
+}
+
+/**
+ * Hidden
+ * 
+ * http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+ * same as compass: @include hide-text(); which includes a hide-left argument
+ */
+@mixin hidden {
+  overflow: hidden;
+  text-indent: 110%;
+  white-space: nowrap;
+}
+
+%hidden {
+  @include hidden;  
+}
+
+/**
+ * Invisable
+ *
+ * Hide from both screenreaders and browsers: h5bp.com/u 
+ * http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone
+ * http://a11yproject.com/posts/how-to-hide-content
+ * 
+ * also consider adding: aria-hidden="true" attribute
+ */
+@mixin invisable {
+  display: none !important;
+  visibility: hidden;
+}
+
+%hidden {
+  @include hidden;
+}
+
+/**
+ * Visually Hidden
+ * 
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v 
+ * 
+ * $focus-state argument extends the .visuallyhidden class
+ * allows the element to be focusable when navigated to via the keyboard: h5bp.com/p 
+ */
+@mixin visually-hidden($focus-state: null) {
+  border: 0; 
+  clip: rect(0 0 0 0); 
+  height: 1px; 
+  margin: -1px; 
+  overflow: hidden; 
+  padding: 0; 
+  position: absolute; 
+  width: 1px; 
+  @if $focus-state == "focusable" {   
+    &:active, 
+    &:focus { 
+      clip: auto; 
+      height: auto; 
+      margin: 0; 
+      overflow: visible; 
+      position: static; 
+      width: auto; 
+    }
+  }
+}
+
+%visuallyhidden {
+  @include visually-hidden;
+}
+%visuallyhidden-focusable {
+  @include visually-hidden(focusable);
+}
+

data/stylesheets/archetype-utilities/_align.scss

@@ -0,0 +1,32 @@
+/**
+ * Alignment
+ * 
+ */
+
+/**
+ * Center-align a block level element
+ * 
+ */
+@mixin horizontal-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+%horizontal-center {
+  @include horizontal-center;
+}
+
+/**
+ * Vertical Align of content
+ * 
+ * http://css-tricks.com/vertically-center-multi-lined-text/
+ */
+@mixin vertical-center {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+%vertical-center {
+  @include vertical-center;
+}

data/stylesheets/archetype-utilities/_clearfix.scss

@@ -0,0 +1,26 @@
+/**
+ * Clearfix
+ * 
+ */
+
+
+/**
+ * Modern Clearfix
+ *
+ * no legacy support, but works well for modern browsers and border-box
+ * http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+ *
+ * see compass docs for legacy clearfix options
+ */
+@mixin a-clearfix() {
+  &:after {
+  content: "";
+  display: table;
+  clear: both;
+  }
+}
+
+%cf {
+  @include a-clearfix();
+}
+

data/stylesheets/archetype-utilities/_helpers.scss

@@ -0,0 +1,45 @@
+/**
+ * Helper Utilities
+ *
+ */
+
+
+
+/**
+ * Apply capital case to an element (usually a `strong`).
+ */
+.caps {
+  text-transform: uppercase;
+}
+
+
+
+/**
+ * Text Overflow
+ * 
+ * Requires inline-block or block for proper styling
+ */
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * Drupal Unpublished Node / Comment
+ *
+ * The word "Unpublished" displayed underneath unpublished nodes and comments.
+ * http://drupal.org/project/zen
+ */
+@mixin unpublished-div {
+  height: 0;
+  overflow: visible;
+  color: #d8d8d8;
+  font-size: 75px;
+  line-height: 1;
+  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  word-wrap: break-word; // A very nice CSS3 property
+}

data/stylesheets/archetype-utilities/_ie.scss

@@ -0,0 +1,32 @@
+/**
+ * IE
+ * 
+ */
+
+/**
+ * nth-child() support for IE7 and 8
+ *
+ * https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_children-of-ie.scss
+ */
+@function nth-child($n) {
+
+  // If a single number for nth.
+  @if type-of($n) == number {
+    $nth-child: first-child;
+    @for $i from 2 through $n {
+      $nth-child: append($nth-child, #{"+*"});
+    }
+    @return #{":"}$nth-child;
+  }
+
+  // If a nth-child string, need to parse the string.
+  @else {
+    $n: nth(children-of-ie-nth($n), 1);
+    $nth-child: first-child;
+    @for $i from 2 through $n {
+      $nth-child: append($nth-child, #{"~*"});
+    }
+    @return #{":"}$nth-child;
+  }
+}
+

data/stylesheets/archetype-utilities/_links.scss

@@ -0,0 +1,13 @@
+/**
+ * Link Mixins
+ * 
+ */
+
+
+/**
+ * fade between default and hover colors
+ */
+@mixin link-transition($time: 0.5s, $easing: "ease-out", $property: "all") {
+  @include transition($property, $time, $easing);
+}
+

data/stylesheets/archetype-utilities/_lists.scss

@@ -0,0 +1,16 @@
+/**
+ * List Numbers
+ * 
+ * replace OL > LI numbers so they can be styled
+ */
+
+@mixin replace-list-numbers($decimal: null) {
+  counter-reset: li;
+  list-style-type: none;
+  li {
+    &:before {
+      content: counter(li) $decimal;
+      counter-increment: li;
+    }
+  }
+}

data/stylesheets/archetype-utilities/_media.scss

@@ -0,0 +1,123 @@
+/**
+ * Media
+ * 
+ * intrinsic ratio, and hifi
+ */
+
+
+/**
+ * hidpi
+ *
+ * media query syntax: http://css-tricks.com/snippets/css/retina-display-media-query/
+ *
+ * 1. recommended values for $resolution: 1, 1.3, 1.5, 2;
+ */
+$default-hidpi-ratio:                         1.3 !default;       /* 1 */
+
+@mixin hidpi($resolution: $default-hidpi-ratio) {
+  @media 
+    only screen and (-webkit-min-device-pixel-ratio: $resolution),
+    only screen and (min-resolution: #{round($resolution * 96 )}dpi) {
+      @content;
+  }
+}
+
+
+/**
+ * Fluid Ratios
+ * 
+ * Force an element and its children to hold a fluid ratio
+ * http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+ * https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss
+ *
+ * also see: jquery solution: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
+ *
+ * @include fluid-ratio([$ratio, $width, $children])
+ * $ratio:      16/9, 4/3, 3/2
+ * $width:      Fluid width
+ * $children:   Child elements to keep within the ratio
+ *
+ * 1. Default fluid ratio
+ * 2. Default fluid ratio width
+ * 3. Child elements to keep within the ratio
+ */
+$default-fluid-ratio:                         16/9 !default;      /* 1 */
+$default-fluid-ratio-width:                   100% !default;      /* 2 */
+$default-fluid-ratio-children:                '*'  !default;      /* 3 */
+
+@mixin fluid-ratio(
+  $ratio: $default-fluid-ratio,
+  $width: $default-fluid-ratio-width,
+  $children: $default-fluid-ratio-children) {
+  position: relative;
+  height: 0;
+  padding-top: (1 / $ratio) * $width;
+  width: $width;
+  @if $children {
+    > #{$children} {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+ 
+/**
+ * Fluid Scaling 
+ * 
+ * https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_intrinsic-ratio.scss
+ */
+
+$intrinsic-ratio:           16/9 !default;
+$intrinsic-ratio-width:     100% !default;
+$intrinsic-ratio-elements:  '> *' !default;
+$intrinsic-ratio-extend:    true !default;
+
+@mixin intrinsic-ratio-parent {
+    position: relative;
+    height: 0;
+}
+
+@mixin intrinsic-ratio-child {
+  display: block;
+  position: absolute;
+  width: 100% !important; // Nuke the external styles
+  height: 100% !important; // Nuke the external styles
+  top: 0;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
+  @if not $extend {
+    @include intrinsic-ratio-parent;
+  }
+  @else {
+    @extend %intrinsic-ratio-parent;
+  }
+  padding-top: (1 / $ratio) * $width;
+  width: $width;
+  @each $element in $elements {
+    #{$element} {
+      @if not $extend {
+  @include intrinsic-ratio-child;
+      }
+      @else {
+  @extend %intrinsic-ratio-child;
+      }
+    }
+  }
+}
+
+%intrinsic-ratio-parent {
+  @include intrinsic-ratio-parent;
+}
+
+%intrinsic-ratio-child {
+  @include intrinsic-ratio-child;
+}
+

data/stylesheets/archetype-utilities/_normalize.scss

@@ -0,0 +1,454 @@
+/**
+ * Normalize
+ *
+ * normalize.css v2.1.1 | MIT License | git.io/normalize 
+ */
+
+
+/**
+ * HTML5 Display Definitions
+ */
+@mixin normalize-display {
+
+/**
+ * Corrects `block` display not defined in IE 8/9.    
+ */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  nav,
+  section,
+  summary {
+    display: block; 
+  }
+ 
+/**
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */ 
+  audio,
+  canvas,
+  video {
+    display: inline-block;
+  }
+ 
+/**
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */ 
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+ 
+/**
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+  [hidden] {
+    display: none;
+  }
+}
+ 
+/**
+ * Page
+ *
+ */
+ 
+@mixin normalize-page() {
+ 
+/**
+ * 1. Prevent system color scheme's background color being used in Firefox, IE,
+ *    and Opera.
+ * 2. Prevent system color scheme's text color being used in Firefox, IE, and
+ *    Opera.
+ * 3. Set default font family to sans-serif
+ * 4. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+ 
+  html {
+    background: #fff; /* 1 */
+    color: #000; /* 2 */
+    font-family: sans-serif; /* 3 */
+    -ms-text-size-adjust: 100%; /* 4 */
+    -webkit-text-size-adjust: 100%; /* 4 */
+  }
+ 
+/**
+ * Removes default margin.
+ */
+  body {
+    margin: 0;
+  }
+}
+ 
+/**
+ * Links
+ */
+ 
+@mixin normalize-links {
+ 
+/**
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+  a:focus {
+    outline: thin dotted;
+  }
+ 
+/**
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+  a:active,
+  a:hover {
+    outline: 0;
+  }
+}
+ 
+/**
+ * Typography
+ */
+
+@mixin normalize-typography() {
+ 
+/**
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome.
+ */
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+ 
+/**
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+  abbr[title] {
+    border-bottom: 1px dotted;
+  }
+ 
+/**
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+  b,
+  strong {
+    font-weight: bold;
+  }
+ 
+/**
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+  dfn {
+    font-style: italic;
+  }
+ 
+/**
+ * Address differences between Firefox and other browsers.
+ */
+  hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+  }
+ 
+/**
+ * Addresses styling not present in IE 8/9.
+ */
+  mark {
+    background: #ff0;
+    color: #000;
+  }
+ 
+/**
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: monospace;
+    font-size: 1em;
+  }
+ 
+/**
+ * Improves readability of pre-formatted text in all browsers.
+ */
+  pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+ 
+/**
+ * Sets consistent quote types.
+ */
+  q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+  }
+ 
+/**
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+  small {
+    font-size: 80%;
+  }
+ 
+/**
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+ 
+  sup {
+    top: -0.5em;
+  }
+ 
+  sub {
+    bottom: -0.25em;
+  }
+}
+ 
+/**
+ * Embeded Content
+ */
+ 
+@mixin normalize-embeds {
+ 
+/**
+ * Removes border when inside `a` element in IE 8/9.
+ */
+  img {
+    border: 0;
+  }
+ 
+/**
+ * Corrects overflow displayed oddly in IE 9.
+ */
+  svg:not(:root) {
+    overflow: hidden;
+  }
+}
+ 
+/**
+ * Figures 
+ */
+@mixin normalize-figures {
+/**
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+  figure {
+    margin: 0;
+  }
+}
+ 
+/**
+ * Forms
+ */
+@mixin normalize-forms() {
+ 
+/**
+ * Define consistent border, margin, and padding.
+ */
+  fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.62em 0.75em;
+  }
+ 
+/**
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+  legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+  }
+ 
+/**
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+  }
+ 
+/**
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+ */
+  button,
+  input {
+    line-height: normal;
+  }
+ 
+/**
+ * Address inconsistent 'text-transform' inheritance for 'button' and 'select'.
+ * All lother form control elements do not inherit 'text-transform' values.
+ * Correct 'button' style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct 'select' style inheritance in Firefox 4+ and Opera
+ */
+button,
+select {
+  text-transform: none;
+}
+ 
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type `input` and others.
+ */
+  button,
+  html input[type="button"], /* 1 */
+  input[type="reset"],
+  input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+  }
+ 
+/**
+ * Re-set default cursor for disabled elements.
+ */
+  button[disabled],
+  input[disabled] {
+    cursor: default;
+  }
+/**
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+  input[type="checkbox"],
+  input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+/**
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).
+ */
+  input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+  }
+ 
+/**
+ * Removes inner padding and search cancel button in Safari 5 and Chrome on OS X.
+ */
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+ 
+/**
+ * Removes inner padding and border in Firefox 4+.
+ */
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+ 
+/**
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+  textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+  }
+}
+ 
+/**
+ * Tables
+ *
+ */
+@mixin normalize-tables {
+ 
+/**
+ * Remove most spacing between table cells.
+ */
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+}
+ 
+ 
+/**
+ * non-Normalize additions
+ *
+ */
+
+/**
+ * Box Model
+ *
+ * Apply natural box-model to all elements (ie8+ only)
+ * http://paulirish.com/2012/box-sizing-border-box-ftw/ 
+ */
+@mixin normalize-box-model {
+    *,
+    *:after,
+    *:before { 
+        -moz-box-sizing: border-box; 
+        -webkit-box-sizing: border-box; 
+        box-sizing: border-box;
+    }
+}
+
+
+@mixin normalize-highlights() {
+
+/**
+ * Tap Highlight Color
+ * 
+ * https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+ */
+    html {
+        -webkit-tap-highlight-color: #fe57a1;
+    }
+/**
+ * Text Selection
+ *
+ * Remove text-shadow in selection highlight. These selection declarations have to be separate
+ * https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+ */
+    ::-moz-selection { 
+        background: #fe57a1; 
+        color: white; 
+        text-shadow: none; 
+    }
+    ::selection { 
+        background: #fe57a1; 
+        color: white; 
+        text-shadow: none; 
+    }
+}
+
+@mixin normalize-chromeframe() {
+
+/**
+ * Chrome Frame Prompt
+ * 
+ * https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+ */
+    .chromeframe {
+        margin: 0.2em 0;
+        background: #ccc;
+        color: #000;
+        padding: 0.2em 0;
+    }
+}
+