archetype-utilities 0.1.0

data/stylesheets/archetype-utilities/_pe.scss

@@ -0,0 +1,135 @@
+/**
+ * Progressive Enhancement
+ *
+ * https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_pe.scss
+ * http://snugug.com/musings/progressive-enhancement-code-pattern-using-sass-and-modernizr
+ */
+
+/**
+ * Enhance With
+ *
+ * $feature: Modernizr feature (base CSS class name)
+ */
+@mixin enhance-with($feature) {
+  .#{$feature} & {
+    @content;
+  }
+}
+
+/**
+ * Degrade From
+ *
+ * $feature: Modernizr feature (base CSS class name)
+ */
+@mixin degrade-from($feature, $no-js: true) {
+  @if $feature == 'js' or not $no-js {
+    .no-#{$feature} & {
+      @content;
+    }
+  }
+  @else {
+    .no-#{$feature} &,
+    .no-js & {
+      @content;
+    }
+  }
+}
+
+/**
+ * Progressive Enhancement Text Replace Mixin
+ * 
+ * $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
+ * $sprite: The name of the sprite you want to use (this is the file name without extension)
+ * $inline-svg: Switches between a Base64 encoded SVG or a normal url() for the SVG. Default to true
+ * $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not -
+ * defaults to true.
+ * $inline: Whether or not the containing selector is an inline element. Defaults to false.
+ */
+
+@mixin replace-text-pe($img-path, $sprite, $inline-svg: true, $with-dimensions: true, $inline-element: false) {
+  // Map Out the Sprite
+  $png-path: $img-path + '/*.png';
+  $sprite-map: sprite-map($png-path);
+  
+  // Build SVG file name
+//  $svg-file: str-replace('*.png', '#{$sprite}.svg', $png-path);
+  $svg-file: $img-path + '/#{$sprite}.svg';
+  
+  // Default Sprite File
+  $sprite-file: '' !default;
+  
+  @if $with-dimensions {
+    // Get Sprite File for Height/Width
+    $sprite-file: sprite-file($sprite-map, $sprite);
+
+    // Put the height/width of the image in
+    width: image-width($sprite-file);
+    height: image-height($sprite-file);
+  }
+  
+  // Hide text. Use squish-text() if the element is inline
+  @if $inline-element {
+    @extend %replace-text-pe-squish;
+  }
+  @else {
+    @extend %replace-text-pe-hide;
+  }
+  
+  // Enhance with SVG
+  @include enhance-with('svg') {
+    // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
+    @if $inline-svg {
+      background-image: inline-image($svg-file);
+    }
+    @else {
+      background-image: image-url($svg-file);
+    }
+    // No repeating backgrounds, please
+    background-repeat: no-repeat;
+    // Set background size to ensure that our SVG is the right size.
+    @if $with-dimensions {
+      background-size: image-width($sprite-file) image-height($sprite-file);
+    }
+  }
+  
+  // Degrade from SVG 
+  @include degrade-from('svg') {
+    // Extend the Sprite Background
+    @extend %#{sprite-map-name($sprite-map)}-image-map;
+    // Call the Sprite'd image's position.
+    @include sprite($sprite-map, $sprite);
+  }
+}
+
+//////////////////////////////
+/**
+ * Sprite Map Generator
+ * 
+ * Need a custom mixin to create extendable classes classes for background image for sprites because dynamic mixin names don't work.
+ * $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
+ */
+@mixin sprite-map-generator($img-path) {
+  $png-path: $img-path + '/*.png';
+  $png-path: sprite-map($png-path);
+  %#{sprite-map-name($png-path)}-image-map {
+    background: {
+      image: $png-path;
+      repeat: no-repeat;
+    }
+  }
+}
+
+/**
+ * Extendable Class for Squish Text mixin
+ */
+%replace-text-pe-squish {
+  @include squish-text();
+}
+
+/**
+ * Extendable Class for Hide Text mixin
+ */
+%replace-text-pe-hide {
+  @include hide-text();
+}
+

data/stylesheets/archetype-utilities/_print.scss

@@ -0,0 +1,12 @@
+//compass stitch
+//
+//  Adds URLs and abbreviations to the end of links in printed documents
+//
+@mixin append-content {
+  a:after {
+    content:" (" attr(href) ")";
+  }
+  abbr:after {
+    content: " (" attr(title) ")";
+  }
+}

data/stylesheets/archetype-utilities/_pseudo.scss

@@ -0,0 +1,49 @@
+/**
+ * Pseudo Elements
+ * 
+ * https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_pseudo-elements.scss
+ */
+
+/**
+ * Before
+ * 
+ * Add content before an element
+ *
+ * @include before($content)
+ * $content: The string to add before
+ */
+@mixin before($content) {
+  &:before {
+    content: $content;
+    @content;
+  }
+}
+
+/**
+ * After
+ * 
+ * Add content after an element
+ * @include after($content)
+ * $content: The string to add after
+ */
+@mixin after($content) {
+  &:after {
+    content: $content;
+    @content;
+  }
+}
+
+/**
+ * Wrap
+ * 
+ * Wrap content before and after an element
+ *
+ * @include wrap($content)
+ * $content: The strings to add before and after
+ */
+@mixin wrap-content($content: "“" "”") {
+  $content: if(length($content) < 2, $content $content, $content);
+  @include before(nth($content,1)) { @content; };
+  @include after(nth($content,2)) { @content; };
+}
+

data/stylesheets/archetype-utilities/_sass-lists.scss

@@ -0,0 +1,51 @@
+/**
+ * Sass List Utilities
+ * 
+ * https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_sass-lists.scss
+ */
+
+
+/**
+ * Return a list with items in reverse order
+ * 
+ * reverse($list)
+ * $list: The list to reverse.
+ */
+@function reverse($list) {
+  $l: length($list);
+  $reverse: compact();
+  @for $i from 0 to $l { $reverse: append($reverse,nth($list,$l - $i)); }
+  @return $reverse;
+}
+
+/**
+ * Return a list with all duplicates removed
+ * 
+ * remove-duplicates($list)
+ * $list: The list to clean up
+ */
+@function remove-duplicates($list) {
+  $clean: compact();
+  @each $item in $list {
+    @if not index($clean, $item) { $clean: append($clean, $item) }
+  }
+  @return $clean;
+}
+
+/**
+ * Return a list with specific items removed
+ * 
+ * filter($list, $target)
+ * $list: The list to filter
+ * $target: An item to be removed from the list
+ */
+@function filter($list, $target) {
+  $clean: compact();
+  @if index($list, $target) {
+    @each $item in $list {
+      $clean: if($item == $target, $clean, append($clean, $item));
+    }
+  } @else { $clean: $list; }
+  @return $clean;
+}
+

data/stylesheets/archetype-utilities/_triangles.scss

@@ -0,0 +1,83 @@
+/**
+ * CSS Triangles 
+ * 
+ */
+
+/**
+ * Simple Triangle
+ * 
+ * .example { @include simple-triangle(5px, #fff, bottom); }
+ */
+@mixin simple-triangle($size, $color, $direction) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: solid   $size;
+  @if ($direction == down) {
+    border-color: $color transparent transparent transparent;
+  }
+  @if ($direction == up) {
+    border-color: transparent transparent $color transparent;
+  }
+  @if ($direction == right) {
+    border-color: transparent transparent transparent $color;
+  }
+  @if ($direction == left) {
+    border-color: transparent $color transparent transparent;
+  }
+}
+
+/**
+ * Triangles
+ * 
+ * https://github.com/Snugug/toolkit/blob/master/compass/stylesheets/toolkit/_triangle.scss
+ */
+@mixin triangle($color: #000, $height: 1em, $width: 1em, $angle: 0) {
+  @if unit($height) == "" or unit($height) == "%" {
+    @debug "in triangle #{$height} is not a compatable unit for height."
+  }
+  @if unit($width) == "" or unit($width) == "%" {
+    @debug "in triangle #{$width} is not a compatable unit for width."
+  }
+
+  // offset 45deg to make each side start at 0
+  $deg: $angle + 45;
+  // if units, remove units
+  @if unit($deg) == deg {
+    $deg: $deg / 1deg;
+  }
+  // shift to be on a scale from 0 to 90.
+  @while $deg > 90 {
+    $deg: $deg - 90;
+  }
+  @while $deg < 0 {
+    $deg: $deg + 90;
+  }
+  // Get a ratio of 90 to multiply by.
+  $deg: $deg / 90;
+
+  // make sure metrics are reset
+  display: block;
+  width: 0;
+  height: 0;
+  border: 0 solid transparent;
+
+  // run through sides
+  @if $angle <= 45 or $angle > 315 {
+    border-bottom-color: $color;
+    border-width: 0 ($width * abs($deg - 1)) $height ($width * $deg);
+  }
+  @if $angle > 45 and $angle <= 135 {
+    border-left-color: $color;
+    border-width: ($height * $deg) 0 ($height * abs($deg - 1)) $width;
+  }
+  @if $angle > 135 and $angle <= 225 {
+    border-top-color: $color;
+    border-width: $height ($width * $deg) 0 ($width * abs($deg - 1));
+  }
+  @if $angle > 225 and $angle <= 315 {
+    border-right-color: $color;
+    border-width: ($height * abs($deg - 1)) $width ($height * $deg) 0;
+  }
+}

data/stylesheets/archetype-utilities/_typography.scss

@@ -0,0 +1,62 @@
+/**
+ * Font-Face
+ * 
+ * base on:
+ * https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss
+ */
+@mixin font-face($font-stack, $file-path, $weight: normal, $style: normal ) {
+  @font-face {
+      font-family: $font-stack;
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+           url('#{$file-path}.woff') format('woff'),
+           url('#{$file-path}.ttf') format('truetype'),
+           url('#{$file-path}.svg##{$font-family}') format('svg');
+      font-weight: $font-weight;
+      font-style: $font-style;
+  }
+}
+
+/**
+ * Box Emboss
+ * 
+ * example:  .box{ @include box-emboss(0.8, 0.05); }
+ */
+@mixin box-emboss($opacity, $opacity2){
+  box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
+}
+
+/**
+ * Text Emboss (letterpress)
+ *
+ * makes the text more readable by providing a sharper separation between letters and background
+ * example: .letterpress { @include text-emboss(0.7); }
+ */
+@mixin text-emboss($opacity){
+  text-shadow:white($opacity) 0 1px 0;
+}
+
+/**
+ * CSS Hyphens
+ * 
+ * word wrapping for skinny boxes:
+ * http://trentwalton.com/2011/09/07/css-hyphenation
+ *
+ * $value: none | manual | auto
+ */
+@mixin hyphen($value) {
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+//  Compass Stich
+//  Nicer text rendering in webkit and gecko
+//  @see http://www.aestheticallyloyal.com/public/optimize-legibility/
+//  @see http://files.christophzillgens.com/webkit-font-smoothing.html
+//
+@mixin improve-text-rendering {
+  text-rendering:optimizeLegibility;
+  -webkit-font-smoothing:antialiased;
+}

data/stylesheets/archetype-utilities/_units.scss

@@ -0,0 +1,46 @@
+/**
+ * Units
+ * 
+ */
+
+
+/**
+ * Percentage 
+ * 
+ * calculate a percentage based on values independant of Susy
+ */
+@function calc-percent($target, $container) {
+  @return $target / $container * 100%;
+}
+
+/**
+ * Ems
+ * 
+ * calculate an em value based on values independant of Susy
+ */
+@function calc-em($target, $container) {
+  @return $target / $container * 1em;
+}
+
+/**
+ * Convert to Ems
+ * 
+ * convert given value to em units
+ */
+@function convert-to-em($value) {
+  $unit: unit($value);
+  
+  @if $unit == 'px' {
+    @return $value / $base-font-size * 1em;
+  }
+  @else if $unit == '%' {
+    @return $value / 100% * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $value;
+  }
+  @else {
+    @return $value;
+  }
+}
+

metadata

@@ -0,0 +1,89 @@
+--- !ruby/object:Gem::Specification
+name: archetype-utilities
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Sam Ashley
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-08-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+description: A collection of Sass mixins for Archetype
+email:
+- sam@kwaledesign.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/archetype-utilities.rb
+- stylesheets/_archetype-utilities.scss
+- stylesheets/archetype-utilities/_accessibility.scss
+- stylesheets/archetype-utilities/_align.scss
+- stylesheets/archetype-utilities/_clearfix.scss
+- stylesheets/archetype-utilities/_helpers.scss
+- stylesheets/archetype-utilities/_ie.scss
+- stylesheets/archetype-utilities/_links.scss
+- stylesheets/archetype-utilities/_lists.scss
+- stylesheets/archetype-utilities/_media.scss
+- stylesheets/archetype-utilities/_normalize.scss
+- stylesheets/archetype-utilities/_pe.scss
+- stylesheets/archetype-utilities/_print.scss
+- stylesheets/archetype-utilities/_pseudo.scss
+- stylesheets/archetype-utilities/_sass-lists.scss
+- stylesheets/archetype-utilities/_triangles.scss
+- stylesheets/archetype-utilities/_typography.scss
+- stylesheets/archetype-utilities/_units.scss
+homepage: https://github.com/kwaledesign/archetype-utilities
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: A collection of Sass mixins for Archetype
+test_files: []