compass-retina-sprites 0.0.1

data/README.md

@@ -0,0 +1,127 @@
+Stylewithclass
+=========================
+
+Style your web pages using pre-defined classes with very commonly used CSS properties.
+
+Use Stylewithclass if you want to achieve DRY(Don't-repeat-yourself) CSS code. If you use Stylewithclass, you will end up re-using a lot of CSS code, because it uses pre-defined classes with very commonly used CSS properties.
+
+Installation
+============
+
+Install gem from the command line:
+
+    (sudo) gem install stylewithclass
+
+Require it using Compass in config.rb:
+
+    # Edit the project configuration file and add:
+    require 'stylewithclass'
+
+Import it in your sass/scss file.
+
+    # import Stylewithclass partial into your sass/scss file
+    @import "stylewithclass"
+
+Settings
+=========================
+
+Set min, max & step for padding and margin values.
+
+    $min-pm: 0; // default (We set zero beacuse margin and paddings are not compiled by default)
+    $max-pm: 0; // default (We set zero beacuse margin and paddings are not compiled by default)
+    $step-pm: 5; // default
+
+Using Stylewithclass
+=========================
+
+Padding & Margins
+=========================
+
+Using Stylewithclass is easy when styling elements using margins & paddings. just begin with a "m-" or a "p-" for margin or padding. Then, specify the "direction". The available "directions" are: "lt-" for left, "rt-" for right, "tp-" for top, "bm-" for bottom, "hor-" for horizontal and "ver-" for vertical. If you don't type any directions it assumes you are using all directions. After specifying directions you specify the amount.
+
+Style your html tags with padding: 20.
+
+    <div class="p-20"></div>
+
+Style your html tags with padding-left: 5 & margin-right: 3.
+
+    <div class="p-lt-5"> // padding-left: 5
+       <div class="m-rt-3"></div> // margin-right: 3
+    </div>
+
+Style your html tags with padding-top: 20 & padding-bottom: 20.
+
+    <div class="p-ver-20"></div>
+
+Style your html tags with margin-left: 10 & margin-right: 10.
+
+    <div class="m-hor-10"></div>
+
+Text
+=========================
+
+Using Stylewithclass to style fonts are easy. You begin with "fs-" for font-size. After that you specify whether you want it to be relative(with ems) or absolute(with px). "r-" is for relative and "a-" is for absolute. After specifying the font size type you specify the amount.
+
+Style your fonts with 12px with ems. It assumes that the browser default size is 16px and calculates the right number of ems for you.
+
+    <div class="fs-r-12"></div>
+
+Style your fonts with 12px with px.
+
+    <div class="fs-a-12"></div>
+
+The available font-sizes are `8px 9px 10px 11px 12px 14px 18px 20px 22px 24px 28px 30px 36px 48px`
+
+## Text aligns
+
+    .txt-al-lt // for "text-align: left;"
+    .txt-al-c  // for "text-align: center;"
+    .txt-al-rt // for "text-align: right;"
+
+## Font weights
+
+    .f-w-normal // for "font-weight: normal;"
+    .f-w-bold // for "font-weight: bold;"
+    .f-w-bolder // for "font-weight: bolder;"
+    .f-w-lighter // for "font-weight: lighter;"
+    .f-w-inherit // for "font-weight: inherit;"
+    .f-w-[100-700] // for "font-weight: [100-700];"
+
+Miscellaneous
+=========================
+
+In addition, you can style your html tags with positions, displays, floats, clears & overflow-hidden.
+
+
+    /* Positions */
+    .p-a // for "position: absolute;"
+    .p-r // for "position: relative;"
+    .p-f // for "position: fixed;"
+    .p-s // for "position: sticky;"
+
+    /* Displays */
+    .d-n // for "display: none;"
+    .d-bl // for "display: block;"
+    .d-in // for "display: inline;"
+    .d-in-bl // for "display: inline-block;"
+
+    /* Floats */
+    .fl-lt // for "float: left;"
+    .fl-rt // for "float: right;"
+
+    /* Clears */
+    .cl-b // for "clear: both;"
+    .cl-lt // for "clear: left;"
+    .cl-rt // for "clear: right;"
+
+    /* Overflow hidden */
+    .ov-hid // for "overflow: hidden;"
+
+    // Cursor
+    .cs-pointer // for "cursor: pointer;"
+
+    // Additional dimensions
+    .w-100 // for "width: 100%;"
+    .h-100 // for "height: 100%;"
+
+

data/lib/compass-retina-sprites.rb

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

data/stylesheets/_compass-retina-sprites.scss

@@ -0,0 +1,111 @@
+//
+// Bootstrap
+//
+
+// Generates a normal and retina version css rule for an sprite icon
+
+// $map : variable containing the normal sprites
+// $map2x : retina version, twice the resolution
+// $name : name of the icon
+
+@mixin background-sprite( $map, $map2x, $name ) {
+  display: inline-block;
+  height: image-height( sprite-file( $map, $name ) );
+  width: image-width( sprite-file( $map, $name ) );
+  background-position: sprite-position( $map, $name );
+
+  @media
+    ( -webkit-min-device-pixel-ratio: 1.5 ),
+    ( min--moz-device-pixel-ratio: 3/2 ),
+    ( min-resolution: 1.5dppx ),
+    ( min-resolution: 19dpi ) {
+      background-position: 0 round( nth( sprite-position( $map2x, $name ), 2) / 2);
+      height: round( image-height( sprite-file( $map2x, $name ) ) / 2 );
+      width: round( image-width( sprite-file( $map2x, $name ) ) /2 );
+      background-size: ceil( image-width( sprite-path( $map2x ) ) / 2) auto;
+  }
+}
+// Icon sprites are stored in i tags when possible
+
+i {
+  display : inline-block;
+  vertical-align  : middle;
+  margin-top : -4px; // Hack to properly align text
+}
+
+
+// Sprite images to be divided into 2 separate groups
+// Those accessed often and those accessed occasionnaly
+// (For exemple login and signup sprites)
+// The first ones should all be regrouped into one sprite
+// The later ones should be divided by modules
+
+
+
+// Sprites will all consists of two files
+// A normal and a retina version
+
+// Icons with special suffixes generate also
+// hover and active states
+
+// For exemple icon-inactive will generate in addition
+// the .sp-active .icon-inactive, .sp-hover:hover .icon-inactive, .icon-active {}
+// CSS rule
+
+$active-pattern     : '-active';
+$inactive-pattern   : '-inactive';
+$active-class       : 'sp-active';
+$hover-class        : 'sp-hover';
+
+@each $sprite-name in $sprite-folders {
+
+  $sprite         : sprite-map( "#{$sprite-name}/*.png" );
+  $sprite-ret     : sprite-map( "#{$sprite-name}2x/*.png" );
+
+  .sp-#{$sprite-name} {
+    background : $sprite;
+    @media (
+      -webkit-min-device-pixel-ratio: 1.5 ),
+      ( min--moz-device-pixel-ratio: 3/2 ),
+      ( min-resolution: 1.5dppx ),
+      ( min-resolution: 192dpi ) {
+        background  : $sprite-ret;
+    }
+  }
+
+  @each $sprite-image in sprite_names( $sprite ) {
+
+    // Prevent the active class from being created
+    @if str_pos( $active-pattern, $sprite-image ) == -1 {
+
+      .sp-#{$sprite-name}-#{$sprite-image} {
+        @include background-sprite( $sprite, $sprite-ret, $sprite-image );
+      }
+      $inactive : str_pos( $inactive-pattern, $sprite-image );
+      // If the sprite has the active suffix we create an additional
+      // rule that covers all the possible active states
+      @if $inactive > -1 {
+        $active : str_replace($inactive-pattern, $active-pattern, $sprite-image);
+        .#{$hover-class}:hover .sp-#{$sprite-name}-#{$sprite-image}, // hover state
+        .#{$active-class} .sp-#{$sprite-name}-#{$sprite-image}, // active state
+        .sp-#{$sprite-name}-#{$active} {
+            @include background-sprite($sprite, $sprite-ret, $active);
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

metadata

@@ -0,0 +1,76 @@
+--- !ruby/object:Gem::Specification 
+name: compass-retina-sprites
+version: !ruby/object:Gem::Version 
+  prerelease: false
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Tingan Ho
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-09-15 00:00:00 +08:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        - 11
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+description: Auto production of retina sprites
+email: tingan@clockies.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- lib/compass-retina-sprites.rb
+- stylesheets/_compass-retina-sprites.scss
+has_rdoc: true
+homepage: http://github.com/tinganho/compass-retina-sprites
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-retina-sprites
+rubygems_version: 1.3.6
+signing_key: 
+specification_version: 3
+summary: Auto production of retina sprites
+test_files: []
+