accoutrement 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 24bd5bad1dac14124a58c4f07a65183dfa3748ea
-  data.tar.gz: 85a3674dd24f6bfd15f63da21d9a2f39d6d3f98f
+  metadata.gz: 0de296f8054bdf58731898019d63f302f14dc232
+  data.tar.gz: 2ab5a64d67cd46de387163e198f978980c1ed91c
 SHA512:
-  metadata.gz: 5241b7e5451f72d4abc394b3de2cfee6e911b4599bfb97b9bdc55ca4e32f85d20b60ccdde0f6298411d39831d50028a9343a4f772d39e5196633e515e6bfae15
-  data.tar.gz: 44f990a7a31344d2f05382694a50ba046d3ec3a3ad6a1bb3360a4d82b5e0340174282d20a5c5c2aebbbe66f99ae8918ee0d4e4ac790a366e1d6888e30a3ee321
+  metadata.gz: 054ffe81109fae0450400b26a32262a8a95ea84532b69054a8a9dd799f62dcfb2af5bf826a91c9027428ff54fbd260489d41e6870751cca616379a0e4d482781
+  data.tar.gz: 525f02eafe1da32a28906b12bcfd75834d991960f174687086074b79310d9bd91f1c059dc5b66e1fb94c7296f5be8cefa9c55f45e575eaaa6dd049632dc038b7

data/stylesheets/_accoutrement.scss

@@ -0,0 +1,20 @@
+// Utilities
+// ---------
+
+@import 'accoutrement/maps';
+@import 'accoutrement/settings';
+@import 'accoutrement/scale';
+@import 'accoutrement/fonts';
+@import 'accoutrement/color';
+
+
+// Patterns
+// --------
+
+@import 'accoutrement/a11y';
+@import 'accoutrement/pseudo-elements';
+@import 'accoutrement/icons';
+@import 'accoutrement/input-toggle';
+@import 'accoutrement/arrows';
+@import 'accoutrement/fluid-media';
+@import 'accoutrement/tooltips';

data/stylesheets/accoutrement/_a11y.scss

@@ -0,0 +1,38 @@
+// Accessibility
+// =============
+
+
+// Is Hidden
+// ---------
+
+@mixin _is-hidden--position {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+@mixin _is-hidden--clip {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@mixin is-hidden(
+  $method: clip
+) {
+  @if $method == position {
+    @include _is-hidden--position;
+  } @else {
+    @include _is-hidden--clip;
+  }
+}
+
+
+// Placeholders
+// ------------
+
+%is-hidden {
+  @include is-hidden;
+}

data/stylesheets/accoutrement/_arrows.scss

@@ -0,0 +1,162 @@
+// Arrows
+// ======
+
+@include set(arrows, (
+  position: top,
+  offset: center,
+  direction: auto,
+  size: 1em,
+  color: black,
+  border-width: null,
+  border-color: null,
+));
+
+
+// Arrow
+// -----
+@mixin arrow(
+  $arrow: get(arrows),
+  $root: relative
+) {
+  $arrow: _build-arrow($arrow);
+  $_body: map-get($arrow, body);
+  $_border: map-get($arrow, border);
+
+  position: $root;
+
+  &::after {
+    @extend %_arrow-base;
+    @include output-map($_body);
+  }
+
+  &::before {
+    @if $_border { @extend %arrow-base; }
+    @include output-map($_border);
+  }
+}
+
+
+// Arrow Base
+// ----------
+@mixin _arrow-base {
+  content: " ";
+  position: absolute;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+  pointer-events: none;
+}
+
+%_arrow-base {
+  @include _arrow-base;
+}
+
+
+// Parse Arrow
+// -----------
+@function _parse-arrow(
+  $arrow: null
+) {
+  $_return: get(arrows);
+  $_numbers: ();
+  $_strings: ();
+
+  @if type-of($arrow) == map {
+    $_return: map-merge($_return, $arrow);
+  } @else if $arrow {
+
+    @each $val in $arrow {
+      @if type-of($val) == map {
+        $_return: map-merge($_return, $val);
+      } @else if type-of($val) == color {
+        $_return: map-merge($_return, (color: $val));
+      } @else if type-of($val) == string {
+        @if index(auto up down forward backward, $val) {
+          $_return: map-merge($_return, (direction: $val));
+        } @else {
+          $_strings: append($_strings, $val);
+        }
+      } @else if type-of($val) == number {
+        $_numbers: append($_numbers, $val);
+      }
+    }
+
+    @if $_strings {
+      $_return: map-merge($_return, (position: nth($_strings, 1)));
+      @if length($_strings) > 1 {
+        $_return: map-merge($_return, (offset: nth($_strings, 2)));
+      }
+    }
+
+    @if $_numbers {
+      $_return: map-merge($_return, (size: nth($_numbers, 1)));
+      @if length($_numbers) > 1 {
+        $_return: map-merge($_return, (offset: nth($_numbers, 2)));
+      }
+    }
+  }
+
+  @return $_return;
+}
+
+
+// Build Arrow
+// -----------
+@function _build-arrow(
+  $arrow
+) {
+  $arrow: _parse-arrow($arrow);
+  $_position: map-get($arrow, position);
+  $_offset: map-get($arrow, offset);
+  $_color: map-get($arrow, color);
+  $_size: map-get($arrow, size);
+  $_border-color: map-get($arrow, border-color);
+  $_border-size: map-get($arrow, border-width);
+  $_opposite: opposite-position($_position);
+
+  $_offset-position: if($_position == left or $_position == right, top, left);
+
+  @if $_offset == 'bottom' or $_offset == 'right' {
+    $_offset-position: opposite-position($_offset-position);
+  } @else if type-of($_offset) == "number" and $_offset != abs($_offset) {
+    $_offset-position: opposite-position($_offset-position);
+  }
+
+  $_border: null;
+  $_body: (
+    #{$_opposite}: 100%,
+    border-#{$_opposite}-color: $_color,
+    border-width: $_size,
+  );
+
+  @if $_offset {
+    @if $_offset == 'center' {
+      $_body: map-merge($_body, (
+        #{$_offset-position}: 50%,
+        margin-#{$_offset-position}: - $_size,
+      ));
+    } @else if type-of($_offset) == 'string' {
+      $_body: map-merge($_body, (
+        #{$_offset-position}: 0,
+      ));
+    } @else {
+      $_body: map-merge($_body, (
+        #{$_offset-position}: abs($_offset),
+      ));
+    }
+  }
+
+  @if $_border-size and $_border-color {
+
+    $_border: map-merge($_body, (
+      border-#{$_opposite}-color: $border-color,
+      margin-#{$offset-position}: if($offset == 'center', 0 - $_border, 0 - $border-size * $border-ratio),
+      margin-#{$_opposite}: $_border-size,
+    ));
+  }
+
+  @return (
+    body: $_body,
+    border: $_border,
+  );
+}

data/stylesheets/accoutrement/_color.scss

@@ -0,0 +1,106 @@
+// Color Toolkit
+// =============
+
+@include set(color-keywords, (
+  lightest: 80%,
+  lighter: 50%,
+  light: 20%,
+  dark: -20%,
+  darker: -50%,
+  darkest: -80%,
+));
+
+$contrasted-dark-default  : black     !default;
+$contrasted-light-default : white     !default;
+
+
+// Color
+// -----
+@function color(
+  $args,
+  $alpha: 1
+) {
+  $args: _parse-color($args);
+  $_color: map-get($args, color);
+  $_lightness: map-get($args, lightness);
+  $_saturation: map-get($args, saturation);
+
+  @if $_lightness {
+    @if $_lightness > 0 {
+      $_color: tint($_color, $_lightness);
+    } @else if $_lightness < 0 {
+      $_color: shade($_color, abs($_lightness));
+    }
+  }
+
+  @if $_saturation {
+    $_color: scale-color($_color, $saturation: $_saturation);
+  }
+
+  @return rgba($_color, $alpha);
+}
+
+
+// Contrast
+// --------
+@function contrast(
+  $color,
+  $contrast: $contrasted-dark-default $contrasted-light-default
+) {
+  $contrasted-light: false;
+  $contrasted-dark: false;
+
+  @if length($contrast) == 2 {
+    $light1: brightness(nth($contrast,1));
+    $light2: brightness(nth($contrast,2));
+    $contrasted-light: if($light1 > $light2, nth($contrast,1), nth($contrast,2));
+    $contrasted-dark: if($light1 < $light2, nth($contrast,1), nth($contrast,2));
+  } @else {
+    @warn "Contrast takes two colors (light & dark) for the second argument.";
+  }
+
+  $color-brightness: brightness($color);
+  $light-contrast-brightness: brightness($contrasted-light);
+  $dark-contrast-brightness: brightness($contrasted-dark);
+
+  $light-diff: abs($color-brightness - $light-contrast-brightness);
+  $dark-diff: abs($color-brightness - $dark-contrast-brightness);
+
+  @return if($light-diff > $dark-diff, $contrasted-light, $contrasted-dark);
+}
+
+
+// Parse Color
+// -----------
+@function _parse-color(
+  $args
+) {
+  $_has-color: false;
+  $_return: (
+    color: gray,
+    lightness: null,
+    saturation: null,
+  );
+
+  @each $arg in $args {
+    @if type-of($arg) == color {
+      $_return: map-merge($_return, (color: $arg));
+      $_has-color: true;
+    }
+
+    @else if type-of($arg) == number {
+      @if $_has-color or length($args) == 1 {
+        $_return: map-merge($_return, (lightness: $arg));
+      } @else {
+        $_return: map-merge($_return, (saturation: $arg));
+      }
+    }
+
+    @else if type-of($arg) == string {
+      $arg: get(color-keywords, $arg);
+      $_return: map-merge($_return, (lightness: $arg));
+    }
+  }
+
+  @return $_return;
+}

data/stylesheets/accoutrement/_fluid-media.scss

@@ -0,0 +1,48 @@
+// Fluid Media
+// ===========
+
+
+@include set(fluid-media, (
+  ratio: 16/9,
+  width: 100%,
+  children: '*',
+));
+
+
+// Fluid Ratio
+// -----------
+@mixin fluid-ratio(
+  $args
+) {
+  $_ratio: get(fluid-media ratio);
+  $_width: get(fluid-media width);
+  $_children: get(fluid-media children);
+
+  @each $arg in $args {
+    @if type-of($arg) == string {
+      $_children: $arg;
+    } @else if type-of($arg) == number {
+      @if unitless($arg) {
+        $_ratio: $arg;
+      } @else {
+        $_width: $arg;
+      }
+    }
+  }
+
+  position: relative;
+  height: 0;
+  padding-top: (1 / $_ratio) * $_width;
+  width: $_width;
+
+  @if $children {
+    > #{$children} {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}

data/stylesheets/accoutrement/_fonts.scss

@@ -0,0 +1,113 @@
+// Fontface Tools
+// ==============
+
+@include set(fontface, formats, woff ttf);
+
+
+// Fonts
+// -----
+// Establish fonts
+@mixin fonts(
+  $fonts: get(fonts),
+  $formats: get(fontface, formats)
+) {
+  @include import-fonts($fonts, $formats);
+  @include font-placeholders($fonts);
+}
+
+
+// Import Fonts
+// ------------
+// Create font-face css
+@mixin import-fonts(
+  $fonts: get(fonts),
+  $formats: get(fontface, formats)
+) {
+  @each $font, $info in $fonts {
+    $name: map-get($info, name) or $font;
+
+    @each $styles, $path in map-get($info, files) {
+      $styles: _parse-font-styles($styles);
+      $src: _build-font-src($path, $formats);
+
+      @font-face {
+        font-family: quote($name);
+        src: $src;
+        font-weight: map-get($styles, weight);
+        font-style: map-get($styles, style);
+      }
+    }
+  }
+}
+
+
+// Parse Font Styles
+// -----------------
+// Return font weight and style based on shorthand syntax
+@function _parse-font-styles(
+  $face
+) {
+  $styles: italic, oblique;
+  $weights: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder, lighter;
+  $return: (
+    weight: normal,
+    style: normal,
+  );
+
+  @each $item in $face {
+    @if index($styles, $item) {
+      $return: map-merge($return, (style: $item));
+    } @else if index($weights, $item) {
+      $return: map-merge($return, (weight: $item));
+    }
+  }
+
+  @return $return;
+}
+
+
+// Build Font SRC
+// --------------
+// Return src attribute based on path and formats
+@function _build-font-src(
+  $path,
+  $formats: get(fontface, formats)
+) {
+  $options: (
+    woff: 'woff',
+    ttf: 'truetype',
+    svg: 'svg',
+  );
+  $return: ();
+
+  @each $format in $formats {
+    $name: map-get($options, $format);
+    @if $name {
+      $src: font-url('#{$path}.#{$format}') format($name);
+      $return: append($return, $src, comma);
+    }
+  }
+
+  @return $return;
+}
+
+
+// Font Placeholders
+// -----------------
+// Create font-family placeholders
+@mixin font-placeholders(
+  $fonts: get(fonts)
+) {
+  @each $font, $info in $fonts {
+    $name: map-get($info, name) or $font;
+    $type: map-get($info, type);
+    $stack: append($name, map-get($info, stack), comma);
+    $stack: append($stack, $type, comma);
+
+    @if $type == monospace {
+      $stack: append($stack, serif);
+    }
+
+    %#{$font} { font-family: $stack; }
+  }
+}

data/stylesheets/accoutrement/_icons.scss

@@ -0,0 +1,66 @@
+// Icon Toolkit
+// ============
+
+
+// Icon
+// ----
+@mixin icon(
+  $name,
+  $location: before
+) {
+  &::#{$location} {
+    @extend %icon;
+    content: get(icons, $name);
+    @content;
+  }
+}
+
+
+// Icon [function]
+// ---------------
+@function icon(
+  $name
+) {
+  @return get(icons, $name),
+}
+
+
+// Data Icons
+// ----------
+@mixin data-icons(
+  $icons: get(icons)
+) {
+  @each $name, $value in $icons {
+    @if map-has-key(get(icons), $value) {
+      $value: get(icons, $value);
+    }
+    [data-icon='#{$name}']:before { content: $value; }
+  }
+}
+
+
+// Placeholders
+// ------------
+
+@mixin icon-placeholder(
+  $name: get(icon-font)
+) {
+  %icon {
+    font-family: $name;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-decoration: none;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [data-icon] {
+    @extend %icon;
+    @include before(attr(data-icon));
+  }
+}

data/stylesheets/accoutrement/_input-toggle.scss

@@ -0,0 +1,19 @@
+// Input Toggles
+// =============
+
+
+// Is Checked
+// ----------
+// Add styles when an input is checked
+@mixin is-checked {
+  &:checked { @content; }
+}
+
+
+// Toggle
+// ------
+// Create
+@mixin is-toggle {
+  @include is-hidden;
+  @include is-checked { @content; }
+}

data/stylesheets/accoutrement/_maps.scss

@@ -0,0 +1,100 @@
+// Map Functions
+// =============
+
+
+// Truncate List
+// -------------
+// Return a list, truncated to a given length
+@function _truncate-list(
+  $list,
+  $length
+) {
+  $_return: ();
+
+  @for $i from 1 through length($list) {
+    $_return: if($i <= $length, append($_return, nth($list, $i)), $_return);
+  }
+
+  @return $_return;
+}
+
+
+// Deep Get
+// --------
+// Return a value deep in nested maps
+@function deep-get(
+  $map,
+  $keys...
+) {
+  $_return: $map;
+
+  @each $key in $keys {
+    @if type-of($_return) == map {
+      $_return: map-get($_return, $key);
+    }
+  }
+
+  @return $_return;
+}
+
+
+// Deep Set
+// --------
+// Set a value deep in nested maps
+@function deep-set(
+  $map,
+  $keys-value...
+) {
+  $_value: nth($keys-value, -1);
+  $_keys: _truncate-list($keys-value, length($keys-value) - 1);
+  $_length: length($_keys);
+  $_return: ();
+
+  @for $i from 1 through $_length {
+    $_n: 0 - $i;
+    $_level: _truncate-list($_keys, $_length + $_n);
+    $_level: deep-get($map, $_level...);
+    $_merge: (nth($_keys, $_n): $_value);
+    $_return: if($_level, map-merge($_level, $_merge), $_merge);
+    $_value: $_return;
+  }
+
+  @return $_return;
+}
+
+
+// Deep Has-Key
+// ------------
+// Return true if a deep key exists
+@function deep-has-key(
+  $map,
+  $keys...
+) {
+  $_return: null;
+  $_stop: false;
+
+  @each $key in $keys {
+    @if not $_stop {
+      $_return: map-has-key($map, $key);
+    }
+
+    @if $_return {
+      $map: map-get($map, $key);
+    } @else {
+      $_stop: true;
+    }
+  }
+
+  @return $_return;
+}
+
+
+// Output Map
+// ----------
+@mixin output-map(
+  $map
+) {
+  @each $prop, $val in $map {
+    #{$prop}: $val;
+  }
+}

data/stylesheets/accoutrement/_pseudo-elements.scss

@@ -0,0 +1,44 @@
+// Pseudo Elements
+// ===============
+
+
+// Before
+// ------
+@mixin before(
+  $content
+) {
+  &::before {
+    content: $content;
+    @content;
+  }
+}
+
+
+// After
+// -----
+@mixin after(
+  $content
+) {
+  &::after {
+    content: $content;
+    @content;
+  }
+}
+
+
+// Wrap Content
+// ------------
+@mixin wrap-content(
+  $content: "“" "”"
+) {
+  $_before: nth($content, 1);
+
+  &::before, &::after {
+    content: $_before;
+    @content;
+  }
+
+  @if length($content) > 1 {
+    &::after { content: nth($content, 2); }
+  }
+}

data/stylesheets/accoutrement/_scale.scss

@@ -0,0 +1,76 @@
+// Scales
+// ======
+
+@import "compass/typography/vertical_rhythm";
+
+@include set(ratio-options, (
+  octave           : 2,
+  major-seventh    : 15/8,
+  minor-seventh    : 16/9,
+  major-sixth      : 5/3,
+  minor-sixth      : 8/5,
+  fifth            : 3/2,
+  augmented-fourth : 45/32,
+  fourth           : 4/3,
+  major-third      : 5/4,
+  minor-third      : 6/5,
+  major-second     : 9/8,
+  minor-second     : 16/15,
+));
+
+@include set(scale, (
+  xxxlarge  : 4,
+  xxlarge   : 3,
+  xlarge    : 2,
+  large     : 1,
+  normal    : 0,
+  small     : -1,
+  xsmall    : -2,
+  xxsmall   : -3,
+  xxxsmall  : -4,
+));
+
+@include set(ratio, fifth);
+
+
+// Size
+// ----
+@function size(
+  $multiplier: normal,
+  $root: $base-font-size,
+  $ratio: get(ratio)
+) {
+  @if type-of($multiplier) == string {
+    $multiplier: get(scale, $multiplier);
+  }
+
+  @if type-of($ratio) == string {
+    $ratio: get(ratio-options, $ratio);
+  }
+
+  @return round($root * pow($ratio, $multiplier));
+}
+
+
+// Font Size
+// ---------
+@mixin font-size(
+  $size: normal,
+  $lines: false
+){
+  $_output: _get-font-sizes($size, $lines);
+  @include adjust-font-size-to($_output...);
+}
+
+
+// Get Font Sizes
+// --------------
+@function _get-font-sizes(
+  $size: normal,
+  $lines: false
+) {
+  $_return: if($lines, (lines: $lines), ());
+  $size: size($size);
+
+  @return map-merge($_return, (to_size: $size));
+}

data/stylesheets/accoutrement/_settings.scss

@@ -0,0 +1,23 @@
+// Settings
+// ========
+
+
+$settings: ();
+
+
+// Set
+// ---
+@mixin set(
+  $keys-value...
+) {
+  $settings: deep-set($settings, $keys-value...) !global;
+}
+
+
+// Get
+// ---
+@function get(
+  $keys...
+) {
+  @return deep-get($settings, $keys...);
+}

data/stylesheets/accoutrement/_tooltips.scss

@@ -0,0 +1,95 @@
+// Tooltips
+// ========
+
+@include set(tooltips, (
+  position: top right,
+  container: '.tooltip',
+  content: '.tooltip-text',
+));
+
+
+// Tooltip
+// -------
+@mixin tooltip(
+  $pos: get(tooltips, position)
+) {
+  $x: null;
+  $y: null;
+
+  @each $side in $pos {
+    $x: if($side == left or $side == right, $side, $x);
+    $y: if($side == top or $side == bottom, $side, $y);
+  }
+
+  #{get(tooltips, content)} {
+    @extend #{'%tooltip' + if($y, '-#{$y}', '') + if($x, '-#{$x}', '')};
+    @content;
+  }
+}
+
+
+// Tooltips
+// --------
+@mixin tooltips {
+  #{get(tooltips, container)} {
+    display: inline-block;
+    position: relative;
+    text-decoration: none;
+    &:hover #{get(tooltips, content)} {
+      display: block;
+      z-index: 900;
+    }
+  }
+
+  #{get(tooltips, content)} {
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    pointer-events: none;
+    @content;
+
+    &[data-tooltip] { @include before(attr(data-tooltip)); }
+  }
+}
+
+
+// Placeholders
+// ------------
+
+%tooltip-top {
+  bottom: 100%;
+}
+
+%tooltip-top-left {
+  @extend %tooltip-top;
+  right: 0;
+}
+
+%tooltip-top-right {
+  @extend %tooltip-top;
+  left: 0;
+}
+
+%tooltip-bottom {
+  top: 100%;
+}
+
+%tooltip-bottom-left {
+  @extend %tooltip-bottom;
+  right: 0;
+}
+
+%tooltip-bottom-right {
+  @extend %tooltip-bottom;
+  left: 0;
+}
+
+%tooltip-right {
+  top: 0;
+  left: 100%;
+}
+
+%tooltip-left {
+  top: 0;
+  right: 100%;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: accoutrement
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Eric Meyer
@@ -49,6 +49,19 @@ extra_rdoc_files:
 files:
 - lib/accoutrement.rb
 - lib/compass-accoutrement.rb
+- stylesheets/_accoutrement.scss
+- stylesheets/accoutrement/_a11y.scss
+- stylesheets/accoutrement/_arrows.scss
+- stylesheets/accoutrement/_color.scss
+- stylesheets/accoutrement/_fluid-media.scss
+- stylesheets/accoutrement/_fonts.scss
+- stylesheets/accoutrement/_icons.scss
+- stylesheets/accoutrement/_input-toggle.scss
+- stylesheets/accoutrement/_maps.scss
+- stylesheets/accoutrement/_pseudo-elements.scss
+- stylesheets/accoutrement/_scale.scss
+- stylesheets/accoutrement/_settings.scss
+- stylesheets/accoutrement/_tooltips.scss
 - README.md
 - VERSION
 homepage: http://github.com/ericam/accoutrement/