SassyIcons 0.0.9

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6f4c1c8e9074524b9d0148f46c81521eef54c9ee
+  data.tar.gz: e94a5b47498dc428049e5b147f586ab435c06c5c
+SHA512:
+  metadata.gz: 3166dd2c0271ac184fcbd6a64a125d43ffa7df60ee622efac13c504ffa968130098265d47d82fecce12f02fae5d7098becff2847c015bf7128f4597da4b7d292
+  data.tar.gz: 052a9973e22c2370c163a5d83a5ad814371c33bde140b90c7abd7869e8c5d91bdf53abf4ee1360c4cb41c3435a8703dda83a84678e29a6dc11c2e1da91476f13

data/CHANGELOG.md

@@ -0,0 +1,16 @@
+# SassyIcons changelog
+
+## 0.0.9 <span style="font-size: .8em">(2014-05-24)</span>
+
+### Refactor
+
+* made `spacing` a per sprite-map configurable item.
+Default value is now 0.
+([aa2f225b45](https://github.com/pascalduez/SassyIcons/commit/e1e4812cab824368c9a0bdc6b3355fab32e0c5b5),
+[#1](https://github.com/pascalduez/SassyIcons/issues/1))
+
+## 0.0.8 <span style="font-size: .8em">(2014-05-23)</span>
+
+### Features
+
+* Added new configuration items `format` and `legacy`.

data/README.md

@@ -0,0 +1,175 @@
+# SassyIcons
+
+Flexible system to manipulate icons, SVG, PNG, sprites.  
+
+Works on top of compass sprite API.  
+It was designed to easily switch between SVG and PNG while working with icons as background-images.  
+So you have more granular control over which icons to use as SVG or PNG.  
+SVG first with PNG sprite fallback, or PNG first with hidpi sprite support.  
+
+Also managing several "thematic" sprites a breeze.  
+
+
+*Best workflow used in conjunction with [grunt-svg2png](https://github.com/pascalduez/grunt-svg2png)*
+
+
+## Mixins
+
+`sprite-map-create($name [, $spacing])`  
+`icon($name, $sprite [, $offset, $format])`  
+`icon-single($name, $sprite [, $format])`  
+`icon-generated($name, $sprite [, $pos, $centered, $format])`
+
+
+## Documentation
+
+**sprite-map-create($name)**  
+Create a new sprite map from folder.  
+
+**icon($name, $sprite [, $offset, $format])**  
+Main icon mixin.  
+
+**icon-single($name, $sprite [, $format])**  
+Embed a single icon as inline-image (no sprite).  
+Should be used sporadically.  
+
+**icon-generated($name, $sprite [, $pos, $centered, $format])**  
+Include the icon in a generated "pseudo-element". Default to :before.  
+Allows for easier positioning or centering.  
+
+
+## Configuration
+
+```scss
+// Default settings.
+$icons-defaults: (
+
+  // Space around sprites in generated sprite map.
+  // Useful with `$offset` parameter.
+  // This setting is global for all sprite-maps.
+  // Can be set per sprite-map with the `$spacing` parameter.
+  spacing: 0,
+
+  // Main icons directory. sprite-map-create() allows to use sub dirs.
+  dir: "icons",
+
+  // Name of the png sub-folders.
+  dir-png: "png",
+
+  // Name of the hidpi png sub-folders.
+  dir-hidpi: "png_2x",
+
+  // Scale of the hidpi pngs.
+  hidpi-scale: 2,
+
+  // Minimum resolution ratio used in the hidpi media query.
+  hidpi-ratio: 1.3,
+
+  // Whether to embed icons as data URI in the icon-single() mixin.
+  single-embed: true,
+
+  // Default file format unless overridden by parameter, svg | png.
+  format: "svg",
+
+  // Whether to support legacy browsers, svg fallback.
+  legacy: true
+
+);
+```
+Override default values in a new `$icons-settings` map.
+
+
+## Requirements
+
+* Sass ~> 3.3.0
+* Compass ~> 1.0.0.alpha.19
+
+
+## Install
+
+#### Git
+
+```
+git clone git@github.com:pascalduez/SassyIcons.git
+```
+
+#### npm
+
+```
+npm install sassyicons --save
+```
+
+#### Bower
+
+```
+bower install SassyIcons --save
+```
+
+
+## Usage
+
+*Provided that [path] = path to SassyIcons*
+
+#### Example usage with [Compass](http://compass-style.org/help/tutorials/command-line)
+```css
+@import 'SassyIcons';
+```
+```
+bundle exec compass watch --import-path [path]/dist
+```
+
+#### Example config with [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass)
+
+```js
+sass: {
+  options: {
+    bundleExec: true, // Optional usage of Bundler, but recommended.
+    compass: true,
+    loadPath: ['[path]/dist/_SassyIcons.scss']
+  }
+}
+```
+
+
+## Roadmap
+
+* More documentation
+* `icon-generated()` and `generated()` Don't force absolute positioning.
+* Rewrite `generated()` mixin
+* `icon-generated()` configurable `calc()` fallback
+* Helper mixin to work with `background-size`
+* Support for SVG sprites ?
+* Support for SVG stacks ?
+* Try to further improve output CSS
+* More control over print position in the stylesheet ?
+* Abstract and move away from compass sprites ?
+* Move away from Modernizr classes ? Or make it an option.
+* Clarify or remove the `@content` thing to pass additional rules to `.svg`.
+
+
+## Development
+
+### You need
+
+  * [Node.js](http://nodejs.org)
+  * [Ruby](https://www.ruby-lang.org)
+  * [Bundler](http://bundler.io) via `gem install bundler`
+  * `grunt-cli` via `npm install -g grunt-cli`
+
+### How to
+
+  1. Fork this repository
+  2. Run `npm install`
+  3. Make your changes + write tests
+  4. `grunt test`
+  5. Commit + Pull request
+
+
+## Authors
+
+[Pascal Duez](http://pascalduez.me)
+
+
+## Licence
+
+SassyIcons is available under the [MIT](http://opensource.org/licenses/MIT) license.

data/lib/SassyIcons.rb

@@ -0,0 +1,15 @@
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('SassyIcons', :path => extension_path)
+
+#  Version is a number. If a version contains alphas, it will be created as a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module SassyIcons
+  VERSION = "0.0.9"
+  DATE = "2014-06-09"
+end
+
+module Sass::Script::Functions
+
+end

data/stylesheets/_SassyIcons.scss

@@ -0,0 +1,29 @@
+// -------------------------------------------------------------------------------
+// SassyIcons - Flexible icons system.
+// -------------------------------------------------------------------------------
+// Repository: https://github.com/pascalduez/SassyIcons
+// -------------------------------------------------------------------------------
+
+// A bit of terminology:
+// sprite = a single image/icon
+// "sprite sheet" or "sprite map" == all sprites combined together
+
+//
+// Import configuration
+//
+@import "config/config";
+
+//
+// Import helpers
+//
+@import "helpers/helpers";
+
+
+//
+// Import icons
+//
+@import "icons/sprite-map-create";
+@import "icons/icon";
+@import "icons/icon-single";
+@import "icons/generated";
+@import "icons/icon-generated";

data/stylesheets/config/_config.scss

@@ -0,0 +1,53 @@
+//
+// SassyIcons
+//
+
+// Configuration
+
+// Default settings.
+$icons-defaults: (
+
+  // Space around sprites in generated sprite map.
+  // Useful with `$offset` parameter.
+  // This setting is global for all sprite-maps.
+  // Can be set per sprite-map with the `$spacing` parameter.
+  spacing: 0,
+
+  // Main icons directory. sprite-map-create() allows to use sub dirs.
+  dir: "icons",
+
+  // Name of the png sub-folders.
+  dir-png: "png",
+
+  // Name of the hidpi png sub-folders.
+  dir-hidpi: "png_2x",
+
+  // Scale of the hidpi pngs.
+  hidpi-scale: 2,
+
+  // Minimum resolution ratio used in the hidpi media query.
+  hidpi-ratio: 1.3,
+
+  // Whether to embed icons as data URI in the icon-single() mixin.
+  single-embed: true,
+
+  // Default file format unless overridden by parameter, svg | png.
+  format: "svg",
+
+  // Whether to support legacy browsers, svg fallback.
+  legacy: true
+
+);
+
+// User settings.
+$icons-settings: () !default;
+
+// Retreive a configuration item.
+@function conf($key) {
+  @if not map-has-key($icons-defaults, $key) {
+    @warn "No item `#{$key}` found in configuration.";
+    @return false;
+  }
+
+  @return map-get(map-merge($icons-defaults, $icons-settings), $key);
+}

data/stylesheets/helpers/_helpers.scss

@@ -0,0 +1,88 @@
+
+// Push new entry to `$map`
+// -----------------------------------------------------------------------------
+// @param [map] $map
+// @param $key
+// @param $value
+// -----------------------------------------------------------------------------
+// @return [map]
+
+@function _map-set($map, $key, $value) {
+  @return map-merge($map, ($key: $value));
+}
+
+
+
+// Join `$list` into a string
+// -----------------------------------------------------------------------------
+// @param [list] $list
+// @param [string] $glue
+// -----------------------------------------------------------------------------
+// @return [string]
+
+@function _join($list, $glue: "") {
+  $result: "";
+  $length: length($list);
+
+  @if $length < 1 {
+    @return $result;
+  }
+
+  @for $i from 1 through $length {
+    $result: $result
+             + nth($list, $i)
+             + if($i != $length, $glue, "");
+  }
+
+  @return $result;
+}
+
+
+
+// Helper: retreive a sprite map.
+// -----------------------------------------------------------------------------
+// @param [string] $name
+// @param [string] $factor
+// -----------------------------------------------------------------------------
+// @return [spritemap]
+
+@function _sprite-map-get($name, $factor: 1x) {
+  @return map-get(map-get($icons-maps, $name), $factor);
+}
+
+
+
+// Helper: return correct sprites-map `background-position`.
+// -----------------------------------------------------------------------------
+// @param [spritemap] $map
+// @param [string] $sprite
+// @param [number] $offset-x
+// @param [number] $offset-y
+// @param [number] $scale
+// -----------------------------------------------------------------------------
+// @return [list]
+
+@function _sprite-position($map, $sprite, $offset-x: 0, $offset-y: 0, $scale: 1) {
+  $pos: sprite-position($map, $sprite, $offset-x, $offset-y * $scale);
+  @return (nth($pos, 1) nth($pos, 2) / $scale);
+}
+
+
+
+// Hidpi media query builder.
+// -----------------------------------------------------------------------------
+// http://bjango.com/articles/min-device-pixel-ratio/
+// http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries
+// http://w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio
+// -----------------------------------------------------------------------------
+
+@mixin hidpi-mq() {
+  $hidpi-ratio: conf(hidpi-ratio);
+
+  @media (-webkit-min-device-pixel-ratio: $hidpi-ratio),
+         (min-resolution: round($hidpi-ratio * 96dpi)),
+         (min-resolution: $hidpi-ratio * 1dppx)
+  {
+    @content;
+  }
+}

data/stylesheets/icons/_generated.scss

@@ -0,0 +1,21 @@
+
+//
+// Generated content.
+//
+@mixin generated($width: false, $height: false, $top: false, $right: false, $bottom: false, $left: false) {
+  //
+  //  Boilerplate styles for generated content .before :after
+  //
+  @if ($width) { width: $width };
+  @if ($height) { height: $height };
+  content: "";
+  display: block;
+  position: absolute;
+  @if($top) { top: $top; }
+  @if($right) { right: $right; }
+  @if($bottom) { bottom: $bottom; }
+  @if($left) { left: $left; }
+  z-index: 1;
+
+  @content;
+}

data/stylesheets/icons/_icon-generated.scss

@@ -0,0 +1,38 @@
+//
+// SassyIcons
+//
+
+//
+// Include the icon in a generated "pseudo-element".
+// Default to :before
+// Allows for easier positioning or centering.
+//
+@mixin icon-generated(
+  $name,
+  $sprite,
+  $pos: "before",
+  $centered: false,
+  $format: conf(format)
+) {
+  position: relative;
+
+  &:#{$pos} {
+    $sprite-file: sprite-file(_sprite-map-get($name), $sprite);
+
+    $width: image-width($sprite-file);
+    $height: image-height($sprite-file);
+
+    @include generated($width, $height);
+
+    @if ($centered) {
+      top: 35%;
+      top: calc(50% - #{$height} / 2);
+      left: 35%;
+      left: calc(50% - #{$width} / 2);
+    }
+
+    @include icon($name: $name, $sprite: $sprite, $format: $format);
+
+    @content;
+  }
+}

data/stylesheets/icons/_icon-single.scss

@@ -0,0 +1,63 @@
+//
+// SassyIcons
+//
+
+//
+// Embed a single icon as inline-image (no sprite).
+// Should be used sporadically.
+//
+@mixin icon-single(
+  $name,
+  $sprite,
+  $format: conf(format)
+) {
+
+  // sprite-file() and inline-image() no work.
+  // @see https://github.com/chriseppstein/compass/issues/951
+
+  $dir: conf(dir);
+  $svg-file: _join(($dir, $name, "#{$sprite}.svg"), "/");
+  $png-file-1x: _join(($dir, $name, conf(dir-png), "#{$sprite}.png"), "/");
+  $png-file-2x: _join(($dir, $name, conf(dir-hidpi), "#{$sprite}.png"), "/");
+
+  $function: if(conf(single-embed), inline-image, image-url);
+  $svg-url: call($function, $svg-file);
+  $png-url-1x: call($function, $png-file-1x);
+  $png-url-2x: call($function, $png-file-2x);
+
+  $legacy-support: conf(legacy);
+
+  @if $format == "svg" {
+
+    background: {
+      image: $svg-url;
+      repeat: no-repeat;
+    }
+
+    .svg & {
+      @content;
+    }
+
+    @if $legacy-support {
+      .no-svg &,
+      .no-js & {
+        background-image: $png-url-1x;
+      }
+    }
+
+  }
+  @else if $format == "png" {
+
+    background: {
+      image: $png-url-1x;
+      repeat: no-repeat;
+    }
+
+    @include hidpi-mq {
+      background: {
+        image: $png-url-2x;
+        size: ceil(image-width($png-file-2x) / conf(hidpi-scale)) auto;
+      }
+    }
+  }
+}

data/stylesheets/icons/_icon.scss

@@ -0,0 +1,59 @@
+//
+// SassyIcons
+//
+
+//
+// Main icon mixin.
+//
+@mixin icon(
+  $name,
+  $sprite,
+  $offset: 0 0,
+  $format: conf(format)
+) {
+  $map-1x: _sprite-map-get($name);
+  $map-2x: _sprite-map-get($name, 2x);
+
+  // Shorter mixin calls.
+  $offset-x: nth($offset, 1);
+  $offset-y: nth($offset, length($offset));
+
+  $legacy-support: conf(legacy);
+
+  @if $format == "svg" {
+
+    $svg-file: _join((conf(dir), $name, "#{$sprite}.svg"), "/");
+
+    background: {
+      image: inline-image($svg-file);
+      repeat: no-repeat;
+    }
+
+    .svg & {
+      @content;
+    }
+
+    @if $legacy-support {
+      .no-svg &,
+      .no-js & {
+
+        @extend %sprite-map-#{$name}-image-map;
+
+        background-position: _sprite-position($map-1x, $sprite, $offset-x, $offset-y);
+      }
+    }
+
+  }
+  @else if $format == "png" {
+
+    @extend %sprite-map-#{$name}-image-map;
+
+    background-position: _sprite-position($map-1x, $sprite, $offset-x, $offset-y);
+
+    @extend %sprite-map-#{$name}-2x-image-map;
+
+    @include hidpi-mq {
+      background-position: _sprite-position($map-2x, $sprite, $offset-x, $offset-y, conf(hidpi-scale));
+    }
+  }
+}

data/stylesheets/icons/_sprite-map-create.scss

@@ -0,0 +1,38 @@
+//
+// SassyIcons
+//
+
+// Storage
+$icons-maps: ();
+
+//
+// Create a new sprite map from folder.
+//
+@mixin sprite-map-create(
+  $name,
+  $spacing: conf(spacing)
+) {
+
+  $sprites-1x: _join((conf(dir), $name, conf(dir-png), "*.png"), "/");
+  $sprites-2x: _join((conf(dir), $name, conf(dir-hidpi), "*.png"), "/");
+
+  $map-1x: sprite-map($sprites-1x, $spacing: $spacing);
+  $map-2x: sprite-map($sprites-2x, $spacing: $spacing);
+
+  $icons-maps: _map-set($icons-maps, $name, (1x: $map-1x, 2x: $map-2x)) !global;
+
+  @at-root %sprite-map-#{$name}-image-map {
+    background: {
+      image: $map-1x;
+      repeat: no-repeat;
+    }
+  }
+  @at-root %sprite-map-#{$name}-2x-image-map {
+    @include hidpi-mq {
+      background: {
+        image: $map-2x;
+        size: ceil(image-width(sprite-path($map-2x)) / conf(hidpi-scale)) auto;
+      }
+    }
+  }
+}

metadata

@@ -0,0 +1,81 @@
+--- !ruby/object:Gem::Specification
+name: SassyIcons
+version: !ruby/object:Gem::Version
+  version: 0.0.9
+platform: ruby
+authors:
+- Pascal Duez
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-06-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha.19
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.0.alpha.19
+description: Flexible icons system.
+email: 
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- CHANGELOG.md
+- lib/SassyIcons.rb
+- stylesheets/_SassyIcons.scss
+- stylesheets/config/_config.scss
+- stylesheets/helpers/_helpers.scss
+- stylesheets/icons/_generated.scss
+- stylesheets/icons/_icon-generated.scss
+- stylesheets/icons/_icon-single.scss
+- stylesheets/icons/_icon.scss
+- stylesheets/icons/_sprite-map-create.scss
+homepage: http://github.com/pascalduez/SassyIcons
+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: SassyIcons
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Flexible system to manipulate icons, SVG, PNG, sprites.
+test_files: []