accoutrement 0.0.1

data/README.md

@@ -0,0 +1,28 @@
+# Accoutrement Etc.
+
+These are just assorted functions and mixins I use on my projects.
+Maybe some of them will develop in to more legit Things,
+but for now thye are just normal things.
+
+If they are documented,
+that's merely an excercise in good code practice,
+and doesn't imply that they are useful.
+
+Some of these things are stolen and re-worked from other projects,
+notably [toolkit][] by [snugug][] and [canarymason][]
+who are very smart.
+
+[toolkit]: https://github.com/Snugug/toolkit
+[snugug]: https://github.com/Snugug/
+[canarymason]: https://github.com/canarymason/
+
+## License
+
+Copyright © Eric Meyer.
+
+Original code licensed under MIT/GLPv2
+Open Source projects used within this project retain their original licenses.
+
+GPL license: http://www.gnu.org/licenses/gpl.html
+
+MIT license: http://www.opensource.org/licenses/mit-license.php

data/lib/accoutrement.rb

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

data/stylesheets/_accoutrement.scss

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------------
+// Helpers
+
+@import 'accoutrement/math';
+@import 'accoutrement/sass-lists';
+@import 'accoutrement/rhythm';
+@import 'accoutrement/color';
+@import 'accoutrement/background';
+@import 'accoutrement/pseudo-elements';
+@import 'accoutrement/media';
+@import 'accoutrement/type';
+
+// ----------------------------------------------------------------------------
+// Patterns
+
+@import 'accoutrement/tabs';

data/stylesheets/accoutrement/_background.scss

@@ -0,0 +1,116 @@
+// ----------------------------------------------------------------------------
+// Imports
+
+@import 'sass-lists';
+@import 'color';
+
+// ----------------------------------------------------------------------------
+// Temporary gradient fixes
+
+// Return the convert angle or position for a css gradient using either syntax
+//
+// convert-gradient-angle($deg)
+// - $deg : The angle or position to convert.
+//          - Whichever syntax you pass, the other will be returned.
+@function convert-gradient-angle(
+  $deg
+) {
+  @if type-of($deg) == 'number' {
+    @return mod(abs($deg - 450), 360deg);
+  } @else {
+    $direction: compact();
+    @if nth($deg,1) == 'to' {
+      @if length($deg) < 2 {
+        $direction: top;
+        @warn "no direction given for 'to'. Using 'to bottom' as default.";
+      } @else { $direction: opposite-position(nth($deg,2)); }
+      @if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
+    } @else {
+      $direction: append($direction, to, space);
+      @each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
+    }
+    @return $direction;
+  }
+}
+
+// Return a linear gradient converted between the old and new syntax
+//
+// convert-linear($angle, $details...)
+// - $angle       : The angle or position to be converted.
+// - $details...  : Color-stops and other details that don't require conversion.
+@function convert-gradient(
+  $angle,
+  $details...
+) {
+  @return linear-gradient(convert-gradient-angle($angle), $details...);
+}
+
+// Create a single gradient background image.
+// Layered backgrounds require a bit more finess than mixins provide.
+//
+// @include gradient-background-image($gradient...)
+// - $gradient: A list of gradient features (position/angle, color-stops, etc.)
+@mixin gradient-background-image(
+  $gradient...
+) {
+  @include background-image(convert-gradient($gradient...));
+  background-image: linear-gradient($gradient...);
+}
+
+// ----------------------------------------------------------------------------
+// Stripes
+
+// Returns a striped gradient for use anywhere gradients are accepted.
+//
+// stripes($position, $colors)
+// - $position: the starting position or angle of the gradient.
+// - $colors: a list of all the colors to be used.
+@function stripes(
+  $position,
+  $colors
+) {
+  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
+  $gradient: compact();
+  $width: 100% / length($colors);
+
+  @for $i from 1 through length($colors) {
+    $pop: nth($colors,$i);
+    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
+    $gradient: join($gradient, $new, comma);
+  }
+
+  @return linear-gradient($position, $gradient);
+}
+
+// ----------------------------------------------------------------------------
+// Color Palettes
+
+// Returns a full list of tinted and shaded variations on a color.
+//
+// get-palette($color [, $tints, $shades])
+// - $color   : The color that your palette stack will be based around.
+// - $tints   : Optional list of percentage tint amounts.
+// - $shades  : Optional list of percentage shade amounts.
+@function get-palette(
+  $color,
+  $tints: $default-tints,
+  $shades: $default-shades
+) {
+  $tint-stack: tint-stack($color, $tints);
+  $shade-stack: shade-stack($color, $shades);
+  @return remove-duplicates(join(reverse($tint-stack), $shade-stack));
+}
+
+// Creates a background gradient color palette based on a given color
+//
+// palette($color [, $tints, $shades])
+// - $color   : The color that your palette gradient will be based around.
+// - $tints   : Optional list of percentage tint amounts.
+// - $shades  : Optional list of percentage shade amounts.
+@function palette(
+  $color,
+  $tints: $default-tints,
+  $shades: $default-shades
+) {
+  @return stripes(left,get-palette($color, $tints, $shades));
+}

data/stylesheets/accoutrement/_color.scss

@@ -0,0 +1,129 @@
+// ----------------------------------------------------------------------------
+// Color Stacks
+
+// Set the default mixing intervals for use in color stacks
+$default-amounts  : 20% 40% 60% 70% 80%;
+$default-tints    : $default-amounts;
+$default-shades   : $default-amounts;
+
+// Returns a list of mixed colors at given intervals
+// based on two initial source colors.
+//
+// color-stack($main, $second [, $amounts])
+// - $main    : The main color this stack is based on.
+// - $second  : The color to be mixed in at varrying amounts.
+// - $amounts : Optional list of percentage mix intervals;
+@function color-stack(
+  $main,
+  $second,
+  $amounts: $default-amounts
+) {
+  $stack: $main;
+
+  @each $amount in $amounts {
+    $stack: join($stack, mix($second, $main, $amount));
+  }
+
+  @return $stack;
+}
+
+// Shortcut for returning tint stacks based on a given color.
+//
+// tint-stack($color [, $amounts])
+// - $color   : The color to tint.
+// - $amounts : Optional list of percentage tint amounts.
+@function tint-stack(
+  $color,
+  $amounts: $default-tints
+) {
+  @return color-stack($color, #fff, $amounts);
+}
+
+// Shortcut for returning shade stacks based on a given color.
+//
+// shade-stack($color [, $amounts])
+// - $color       : The color to shade.
+// - $amounts...  : Optional list of percentage shade amounts.
+@function shade-stack(
+  $color,
+  $amounts: $default-shades
+) {
+  @return color-stack($color, #000, $amounts);
+}
+
+// ---------------------------------------------------------------------------
+// Managing Colors
+
+// Returns a given tint or shade of a color,
+// with options for changing saturation and alpha channels as well.
+//
+// color($color [, $alpha, $tints, $shades])
+// - $color   : The color to work from (See "Parsing Colors" detail below)
+// - $tints   : Optional list of percentage tint amounts.
+// - $shades  : Optional list of percentage shade amounts.
+//
+// Parsing Colors: $color == $saturation $color $tint-shade
+// - Any color value will be used as the base color.
+// - Any percentage preceeding the color will scale saturation.
+// - Any intiger, percentage, or keyword will change tint/shade:
+//   - Intigers step through your list of tint/shade amounts.
+//   - Percentages are used directly as tint/shade amounts.
+//   - Positive numbers tint, negative numbers scale.
+//   - Keywords light/lighter/lightest & dark/darker/darkest
+//     use the first, middle, and last amounts in a stack.
+@function color(
+  $color,
+  $alpha: 1,
+  $tints: $default-tints,
+  $shades: $default-shades
+) {
+  $saturation: false;
+  $light: false;
+  $base: false;
+  $index: 0;
+
+  @each $arg in $color {
+    @if type-of($arg) == 'color' { $base: $arg; }
+    @if type-of($arg) == 'number' {
+      @if unit($arg) != '' {
+        @if $base { $light: $arg; }
+        @else{ $saturation: $arg; }
+      }
+      @else { $index: $arg; }
+    }
+    @if type-of($arg) == 'string' {
+      $tint-length   : length($tints);
+      $tint-half     : floor($tint-length/2);
+      $shade-length  : length($shades);
+      $shade-half    : floor($shade-length/2);
+      @if $arg == 'light' { $index: 1; }
+      @if $arg == 'lighter' { $index: if($tint-half < 2, 2, $tint-half); }
+      @if $arg == 'lightest' { $index: $tint-length; }
+      @if $arg == 'dark' { $index: -1; }
+      @if $arg == 'darker' { $index: if($shade-half < 2, -2, - $shade-half); }
+      @if $arg == 'darkest' { $index: - $shade-length; }
+    }
+  }
+
+  @if $light and $light != 0 {
+    @if $light > 0 { $base: tint($base,$light); }
+    @else { $base: shade($base,abs($light)); }
+  } @else if $index and $index != 0 {
+    $color-stack: compact();
+    @if $index > 0 {
+      $index: $index + 1;
+      $color-stack: tint-stack($base, $tints);
+    } @else {
+      $index: abs($index) + 1;
+      $color-stack: shade-stack($base, $shades);
+    }
+    @if $index <= length($color-stack) {
+      $base: nth($color-stack,$index);
+    } @else {
+      @warn "You don't have #{$index - 1} colors in this stack";
+    }
+  }
+
+  @if $saturation { $base: scale-color($base, $saturation: $saturation); }
+  @return rgba($base, $alpha);
+}

data/stylesheets/accoutrement/_math.scss

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------------
+// Math Functions
+
+// Return the modulo of two numbers.
+//
+// mod($dividend, $divisor)
+// - $dividend  : the sample size.
+// - $divisor   : the full count.
+@function mod(
+  $dividend,
+  $divisor
+) {
+  @return $dividend - (floor($dividend/$divisor)*$divisor);
+}

data/stylesheets/accoutrement/_media.scss

@@ -0,0 +1,72 @@
+// ----------------------------------------------------------------------------
+// Fluid Media
+
+// Default property-value pair for setting fluid width.
+$default-fluid-width    : max-width 100%;
+
+// Default list of elements for the fluid-media mixin.
+$default-fluid-elements : 'img, video'    !default;
+
+// Create fluid images and video
+//
+// @include fluid-media([$width, $elements])
+// - $width     : Property-value pair for setting fluid width.
+// - $elements  : List of elements for the fluid-media mixin.
+@mixin fluid-media(
+  $width    : $default-fluid-width,
+  $elements : $default-fluid-elements
+) {
+  $property : max-width;
+  $value    : 100%;
+
+  @each $arg in $width {
+    @if type-of($arg) == 'string' { $property: $arg; }
+    @if type-of($arg) == 'number' { $value: $arg; }
+  }
+
+  #{$elements} {
+    #{$property}: $value;
+    height: auto;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Fluid Ratios
+
+// The default fluid ratio.
+$default-fluid-ratio          : 16/9          !default;
+
+// The default fluid ratio width.
+$default-fluid-ratio-width    : 100%          !default;
+
+// Child elements to keep within the ratio.
+$default-fluid-ratio-children : '*'           !default;
+
+// Force an element and its children to hold a fluid ratio
+//
+// @include fluid-ratio([$ratio, $width, $children])
+// - $ratio     : Ratio e.g. 16/9
+// - $width     : Fluid width
+// - $children  : Child elements to keep within the ratio
+@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;
+    }
+  }
+}

data/stylesheets/accoutrement/_pseudo-elements.scss

@@ -0,0 +1,34 @@
+// ----------------------------------------------------------------------------
+// Pseudo Elements
+
+// Add content before an element.
+//
+// @include before($content)
+// $content: The string to add before.
+@mixin before($content) {
+  &:before {
+    content: $content;
+    @content;
+  }
+}
+
+// Add content after an element.
+//
+// @include after($content)
+// $content: The string to add after.
+@mixin after($content) {
+  &:after {
+    content: $content;
+    @content;
+  }
+}
+
+// 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/accoutrement/_rhythm.scss

@@ -0,0 +1,28 @@
+// ---------------------------------------------------------------------------
+// Pixels and Rhythms
+
+// Returns the nearest half-rhythm value for a given pixel length
+//
+// px-to-rhythm($px [, $from, $round])
+// - $px    : The pixel value to convert.
+// - $from  : Optional context font-size.
+// - $round : Optional direction ["up" | "down"] to round the results.
+@function px-to-rhythm(
+  $px,
+  $from: $base-font-size,
+  $round: up
+) {
+  $rough: 2 * $px / $base-line-height;
+  $lines: if($round == down, floor($rough) / 2, ceil($rough) / 2);
+  @return rhythm($lines, $from);
+}
+
+// Returns the nearest half-rhythm value based on an images height
+//
+// rhythm-image($image [, $from, $round])
+// - $image   : The image whos height we will use.
+// - $from  : Optional context font-size.
+// - $round : Optional direction ["up" | "down"] to round the results.
+@function rhythm-image($image, $from: $base-font-size, $round: up) {
+  @return px-to-rhythm(image-height($image), $from, $round);
+}

data/stylesheets/accoutrement/_sass-lists.scss

@@ -0,0 +1,40 @@
+// ----------------------------------------------------------------------------
+// Sass List Controls
+
+// 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
+//
+// remove-duplicates($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/accoutrement/_tabs.scss

@@ -0,0 +1,152 @@
+// ---------------------------------------------------------------------------
+// CSS Tabs and Accordion
+
+// Create tabs with pure css & html.
+//
+// # Markup (within a shared container):
+// 1. radio or checkbox inputs   : [id*="SLUG"]
+// 2. labels for those inpults   : [for*="SLUG"]
+// 3. content for each tab       : [class*="SLUG"];
+//
+// - The labels and content can be nested,
+//  as long as you pass that nesting information along to the `tabs` mixin.
+//  You can also change the default setting with `$default-nested-selectors`.
+// - You can also change the selector attributes with the
+//  `$toggle-attribute`, `$title-attribute`, & `$content-attribute` settings.
+// - By default, we use the ':checked' attribute to know what tabs are active.
+//  You can change that `$default-checked-selector` setting,
+//  or the `$checked` argument in the `tabs` mixin.
+//
+// # Styles
+// 1. hidden content             : %hide-tab-content { ... };
+// 2. visible content            : %show-tab-content { ... };
+// 3. active tab title           : %active-tab-title { ... };
+//
+// There are some very basic default styles that you can use to get started.
+// Simply `@include tab-defaults` and see it in action.
+//
+// # Tabs Example:
+//
+// section.mytabs
+//   input[type="radio"]#first-tab-toggle
+//   input[type="radio"]#second-tab-toggle
+//   input[type="radio"]#third-tab-toggle
+//
+//   label[for="first-tab-toggle"]
+//      "First Tab"
+//   label[for="second-tab-toggle"]
+//      "Second Tab"
+//   label[for="third-tab-toggle"]
+//      "Third Tab"
+//
+//   article.first
+//      "Content for the first tab"
+//   article.second
+//      "Content for the first tab"
+//   article.third
+//      "Content for the first tab"
+//
+// @include tab-defaults;
+// @include tabs(first second third);
+//
+// # Accordion Example
+//
+// section.accordion
+//   input[type="checkbox"]#first-toggle
+//   input[type="checkbox"]#second-toggle
+//   input[type="checkbox"]#third-toggle
+//
+//   article
+//    label[for="first-toggle"]
+//      "First Section"
+//    div.first
+//      "Content for the first section"
+//
+//   article
+//    label[for="second-toggle"]
+//      "Second Section"
+//    div.second
+//      "Content for the first section"
+//
+//   article
+//    label[for="third-toggle"]
+//      "Third Section"
+//    div.third
+//      "Content for the first section"
+//
+// @include tab-defaults;
+// @include tabs(first second third, article);
+
+// ---------------------------------------------------------------------------
+// Settings
+
+// We don't need the radio-inputs to display.
+%hide-tab-toggle { display: none; }
+
+// The CSS3 `:checked` selector is not supported by IE7 and IE8.
+// For legacy support, use `[aria-checked="true"]` applied with JavaScrip.
+$default-checked-selector : ':checked'      !default;
+$default-nested-selectors : null            !default;
+
+// Change the attributes used for each selector.
+// These attributes need to be different,
+// since everything else is the same in the selectors.
+$toggle-attribute   : id      !default;
+$title-attribute    : for     !default;
+$content-attribute  : class   !default;
+
+// ---------------------------------------------------------------------------
+// Mixins
+
+// Default styles for the content and the tab titles
+//
+// @include tab-defaults
+// - %hide-tab-content: Applied to hidden tabs.
+// - %show-tab-content: Applied to visible tabs.
+// - %active-tab-title: Applied to the tab-title for the active tab.
+@mixin tab-defaults {
+  %hide-tab-content { display: none; }
+  %show-tab-content { display: block; }
+  %active-tab-title { font-weight: bold; }
+}
+
+// Create tabs for the given slugs
+//
+// @include make-tabs($slugs [, $nested, $checked])
+// - $slugs   : The slugs to use in tab selectors.
+// - $nested  : If the tabs or content are nested, add those selectors as well.
+//              - One selector will be used for both
+//              - Two selectors will be split: first tabs, then content
+//              - Use `null` to unset one e.g. '.tab-selector null'
+// - $checked : How we know when a toggle is checked e.g. ':checked'.
+@mixin tabs(
+  $slugs,
+  $nested: $default-nested-selectors,
+  $checked: $default-checked-selector
+) {
+  $nested-tabs: $nested;
+  $nested-content: $nested;
+  @if length($nested) > 1 {
+    $nested-tabs: nth($nested, 1);
+    $nested-content: nth($nested, 2);
+  }
+
+  @each $slug in $slugs {
+    $toggle   : '[#{$toggle-attribute}*="#{$slug}"]';
+    $title    : '[#{$title-attribute}*="#{$slug}"]';
+    $content  : '[#{$content-attribute}*="#{$slug}"]';
+
+    #{$content} { @extend %hide-tab-content; }
+    #{$toggle} {
+      @extend %hide-tab-toggle;
+      &#{$checked} {
+        & ~ #{$nested-tabs} #{$title} {
+          @extend %active-tab-title !optional;
+        }
+        & ~ #{$nested-content} #{$content} {
+          @extend %show-tab-content;
+        }
+      }
+    }
+  }
+}

data/stylesheets/accoutrement/_type.scss

@@ -0,0 +1,41 @@
+// ----------------------------------------------------------------------------
+// Typography
+
+// @private base settings
+$base-font-size         : 16px !default;
+
+// The default padding on a dropcap letter
+$default-dropcap-padding      : null;
+
+// The default font settings (null == inherit)
+$default-dropcap-font-family    : null;
+$default-dropcap-font-weight    : null;
+$default-dropcap-font-style     : null;
+$default-dropcap-font-variant   : null;
+$default-dropcap-text-transform : null;
+
+// Creates a dropcap using the :first-letter selector
+//
+// dropcap([$size, $lines, $padding, $from-size]) { @content }
+// - $size        : Optional font-size of your dropcap.
+// - $lines       : Optional lines of rhythm for the dropcap line-height.
+// - $padding     : Optional padding around the dropcap.
+// - $from-size   : Optional context font size, if using relative sizing.
+// - $font-family : Optional font-stack for the dropcap.
+// - @content     : Optionally override the default dropcap styles as needed.
+@mixin dropcap(
+  $size         : $base-font-size*2,
+  $lines        : lines-for-font-size($size),
+  $padding      : $default-dropcap-padding,
+  $from-size    : $base-font-size,
+  $font-family  : $default-dropcap-font-family
+) {
+  &:first-letter {
+    @include adjust-font-size-to($size,$lines,$from-size);
+    font-family: $font-family;
+    float: left;
+    padding: $padding;
+
+    @content;
+  }
+}

metadata

@@ -0,0 +1,91 @@
+--- !ruby/object:Gem::Specification 
+name: accoutrement
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Eric Meyer
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-11-30 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 43
+        segments: 
+        - 0
+        - 12
+        - 2
+        version: 0.12.2
+  type: :runtime
+  version_requirements: *id001
+description: Assorted Sass/Compass accoutrement & accessories
+email: eric@oddbird.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- lib/accoutrement.rb
+- stylesheets/_accoutrement.scss
+- stylesheets/accoutrement/_background.scss
+- stylesheets/accoutrement/_color.scss
+- stylesheets/accoutrement/_math.scss
+- stylesheets/accoutrement/_media.scss
+- stylesheets/accoutrement/_pseudo-elements.scss
+- stylesheets/accoutrement/_rhythm.scss
+- stylesheets/accoutrement/_sass-lists.scss
+- stylesheets/accoutrement/_tabs.scss
+- stylesheets/accoutrement/_type.scss
+homepage: http://oddbird.net/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Assorted Sass/Compass accoutrement & accessories
+test_files: []
+