patterner 0.0.1b

data/README.mkdn

@@ -0,0 +1,108 @@
+Patterner
+==========
+
+Patterner is a compass extension that contains a library of customizable patterns for use as background images. Images are outputted as base64 data url png using the [chunky_png library](https://github.com/wvanbergen/chunky_png). The png images outputted are transparent so where is no pattern the background color will show through, the patterns themselves can also be transparent when setting the color of the pattern using an hsla or rgba color. You can see a quick demo of the patterns [here](http://dl.dropbox.com/u/1274637/patterns/patterner.html)
+
+Installation
+-------------
+
+From the command like
+	
+	(sudo) gem install patterner
+
+Adding to an existing compass project
+
+	#Edit the project configuration file
+	require 'patterner'
+	
+	#From command line
+	compass install patterner
+
+Creating a new project based on patterner
+
+	#From command line
+	compass create <project_name> -r patterner --using patterner
+	
+
+Patterner usage
+---------------
+
+Patterner currently has a library of 8 customizable patterns (checkers, crosshatch, diamond, dots [normal and offset], grids [grid and blueprint], plus, stripes [horizontal, vertical, forwards, and backwards], and zigzag)	
+
+To use a pattern you call the pattern function on a css selector's background property and declare what pattern you would like to use and the color of the pattern. Below is an example of creating checker pattern for a div 
+
+	div {
+		background: pattern(checker, black);
+	}
+
+Most patterns have optional arguments that let you customize the pattern including the size, spacing, and some have an optional secondary color. Below is an example of calling the checker pattern with the optional arguments
+
+	#checker pattern with optional arguments: pattern(checker, color, size of squares, optional second color)
+	
+	div {
+		background: pattern(checker, #333, 50, #ccc);
+	}
+
+### Full pattern argument listings
+Only pattern style and color are required, all other arguments are optional and used for customizing the pattern
+
+#### Checker
+
+	pattern(checker, color, square size, second color)	
+
+#### Crosshatch	
+	pattern(crosshatch, line color, line size, secondary line color)
+	
+#### Diamond
+	pattern(diamond, color, height, width)
+
+#### Dots
+	# Normal
+	pattern(dots, color, dot size, dot spacing)
+	
+	# Offset
+	pattern(offset-dots, color, dot size, dot spacing)
+
+#### Grid	
+	# Grid
+	pattern(grid, color, size)
+	
+	# Blueprint
+	pattern(blueprint, color, size)
+	
+#### Plus
+	# Plus
+	pattern(plus, color, size, spacing)
+	
+#### Stripes
+	
+	# Horizontal
+	pattern(horizontal-stripe, color, stripe width, spacing) 
+	- or -
+	pattern(h-stripe, color, stripe width, spacing)
+	
+	# Vertical
+	pattern(vertical-stripe, color, stripe width, spacing) 
+	- or -
+	pattern(v-stripe, color, stripe width, spacing)
+	
+	# Forward diagonal
+	pattern(forward-stripe, color, stripe width, spacing) 
+	- or -
+	pattern(f-stripe, color, stripe width, spacing)
+	
+	# Backward diagonal
+	pattern(backward-stripe, color, stripe width, spacing) 
+	- or -
+	pattern(b-stripe, color, stripe width, spacing)
+	
+#### Zigzag	
+	# Zigzag
+	pattern(zigzag, height, width, spacing)
+	
+	
+	
+	
+
+
+

data/lib/patterner.rb

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

data/lib/patterner/patterner.rb

@@ -0,0 +1,32 @@
+require "rubygems"
+require "chunky_png"
+require "base64"
+require "patterner/patterner/patterns.rb"
+
+
+module Sass::Script::Functions
+	
+	
+  
+  TRANSPARENT = ChunkyPNG::Color::TRANSPARENT
+  
+  
+  def return_image(png)
+    
+    data  = Base64.encode64(png.to_blob).gsub("\n", "")
+    Sass::Script::String.new("url('data:image/png;base64,#{data}')")
+    
+  end
+
+
+	
+	def get_color(color)
+		color = ChunkyPNG::Color.rgba(color.red, color.green, color.blue, (color.alpha*255).round)
+	end
+
+
+
+    
+    
+  
+end

data/lib/patterner/patterner/patterns.rb

@@ -0,0 +1,59 @@
+require "patterner/patterner/patterns/checker.rb"
+require "patterner/patterner/patterns/crosshatch.rb"
+require "patterner/patterner/patterns/diamond.rb"
+require "patterner/patterner/patterns/dots.rb"
+require "patterner/patterner/patterns/grids.rb"
+require "patterner/patterner/patterns/plus.rb"
+require "patterner/patterner/patterns/stripes.rb"
+require "patterner/patterner/patterns/zigzag.rb"
+
+module Patron
+	class Patterns
+	  module Sass::Script::Functions
+		
+		def pattern(style, arg1, arg2 = nil, arg3 = nil, arg4 = nil)
+		  
+		  style = style.to_s if style.is_a? Sass::Script::String
+		  
+		  case style
+      when "checker"
+        checker(arg1, arg2, arg3)
+      when "crosshatch"
+        crosshatch(arg1, arg2, arg3, arg4)
+      when "diamond"
+        diamond(arg1, arg2, arg3)
+      when "dots"
+        dots(arg1, arg2, arg3) 
+      when "offset-dots"
+        offsetdots(arg1, arg2, arg3) 
+      when "grid"
+        grid(arg1, arg2)
+      when "blueprint"
+        blueprint(arg1, arg2)
+      when "plus"
+        plus(arg1, arg2, arg3)
+      when "horizontal-stripe", "h-stripe"
+        stripe("h", arg1, arg2, arg3)
+      when "vertical-stripe", "v-stripe"
+        stripe("v", arg1, arg2, arg3)
+      when "forward-stripe", "f-stripe"
+        stripe("f", arg1, arg2, arg3)
+      when "backward-stripe", "b-stripe"
+        stripe("b", arg1, arg2, arg3)
+      when "zigzag"
+        zigzag(arg1, arg2, arg3, arg4)
+      else
+        Sass::Tree::WarnNode.new("No pattern named #{style} found")
+      end
+		  
+		  
+        
+		  	  
+	  end
+		
+	
+	
+	
+	end
+	end
+end

data/lib/patterner/patterner/patterns/checker.rb

@@ -0,0 +1,32 @@
+module Sass::Script::Functions
+
+  def checker(c1, size, c2 = nil)
+    
+    size = 20 if size.nil?
+    
+ 		size = size.to_i if size.is_a? Sass::Script::Number
+
+ 		c1 = get_color(c1)
+
+ 		total_size = (size*2)
+
+
+ 		png = ChunkyPNG::Image.new(total_size, total_size, TRANSPARENT)
+
+ 		png.rect(0, 0, size-1, size-1, TRANSPARENT, c1)
+
+ 		png.rect(size,size,total_size, total_size, TRANSPARENT, c1)
+
+
+ 		unless c2.nil?
+ 		  c2 = get_color(c2)
+ 		  png.rect(size, 0, total_size, size-1, TRANSPARENT, c2)
+ 		  png.rect(0, size, size-1, total_size, TRANSPARENT, c2)
+ 		end
+
+ 		return_image(png)
+
+
+   end
+
+end

data/lib/patterner/patterner/patterns/crosshatch.rb

@@ -0,0 +1,19 @@
+module Sass::Script::Functions
+	
+	def crosshatch(c1, size = 1, spacing = 20, c2 = nil)
+	  
+	  size = 1 if size.nil?
+	  spacing = 20 if spacing.nil?
+		
+		if c2.nil?
+			c2 = c1
+		end
+		
+		front = stripe("f", c1, size, spacing)
+		back = stripe("b", c2, size, spacing)
+		
+		Sass::Script::String.new("#{front}, #{back}")
+		
+	end
+
+end

data/lib/patterner/patterner/patterns/diamond.rb

@@ -0,0 +1,29 @@
+module Sass::Script::Functions
+
+	def diamond(c, height = 25, width = 35)
+	  
+	  height = 25 if height.nil?
+	  width = 35 if width.nil?
+	  
+		height = height.to_i if height.is_a? Sass::Script::Number
+		width = width.to_i if width.is_a? Sass::Script::Number
+		
+		c =  get_color(c)
+		
+		top = ChunkyPNG::Image.new(width, height, TRANSPARENT)
+		bottom = ChunkyPNG::Image.new(width, height, TRANSPARENT)
+		png = ChunkyPNG::Image.new(width, (height*2), TRANSPARENT)
+		
+		
+
+		top.polygon([width/2,-1,0,height,width,height], TRANSPARENT, c)
+		bottom = bottom.compose(top, 0, 0)
+		bottom = bottom.flip_horizontally 
+		png = png.compose(top, 0, 0)
+		png = png.compose(bottom, 0, height)
+		
+		return_image(png)
+		
+	end
+  
+end

data/lib/patterner/patterner/patterns/dots.rb

@@ -0,0 +1,47 @@
+module Sass::Script::Functions
+
+  def dots(c, size, spacing)
+    
+    size = 5 if size.nil?
+    spacing = 10 if spacing.nil?
+    
+
+    size = size.to_i if size.is_a? Sass::Script::Number
+    spacing = spacing.to_i if spacing.is_a? Sass::Script::Number
+    
+    total_size = (size*2)+spacing    
+    c = get_color(c)
+    	
+    total_size = (size*2)+spacing      
+    png = ChunkyPNG::Image.new(total_size, total_size, TRANSPARENT)      
+    png.circle(size,size, size, TRANSPARENT, c)
+    
+    return_image(png)
+        
+  end
+  
+  def offsetdots(c, size, spacing)
+    size = 5 if size.nil?
+    spacing = 10 if spacing.nil?
+
+    size = size.to_i if size.is_a? Sass::Script::Number    
+    spacing = spacing.to_i if spacing.is_a? Sass::Script::Number
+
+    total_size = (size*4)+spacing
+    c = get_color(c)   
+    png = ChunkyPNG::Image.new(total_size, total_size, TRANSPARENT)
+
+    png.circle(0, total_size/2, size, TRANSPARENT, c)
+    png.circle(total_size, total_size/2, size, TRANSPARENT, c)
+    png.circle(total_size/2, 0, size, TRANSPARENT, c)
+    png.circle(total_size/2, total_size, size, TRANSPARENT, c)
+   
+
+      return_image(png)
+    
+    
+    
+  end
+
+end
+

data/lib/patterner/patterner/patterns/grids.rb

@@ -0,0 +1,63 @@
+module Sass::Script::Functions
+
+  def grid(c, size)
+    size = 25 if size.nil?
+		size = size.to_i if size.is_a? Sass::Script::Number
+	
+		c = get_color(c) 
+		
+		png = ChunkyPNG::Image.new(size, size, TRANSPARENT)
+		
+		png.line(size/2, 0, size/2, size, c)
+		png.line(0, size/2, size, size/2, c)
+		
+		return_image(png)
+	end
+	
+	
+	def blueprint(c, size)
+	  size = 75 if size.nil?
+		size = size.to_i if size.is_a? Sass::Script::Number
+		c = get_color(c) 
+		png = ChunkyPNG::Image.new(size, size, TRANSPARENT)
+		
+		spacing = size/3
+		
+		png.rect(size-1, 0, size, size, TRANSPARENT,c)
+		png.rect(0, size-1, size, size, TRANSPARENT,c)
+		
+		for x in (0...spacing)
+			png.line(spacing*x, 0, spacing*x, size, c)
+			png.line(0, spacing*x, size, spacing*x, c)		
+		end
+		
+			return_image(png)
+  	end
+  	
+  	def grid_overlay(columns, column_width, gutter_width, c = nil)
+
+      columns = columns.to_i            if columns.is_a? Sass::Script::Number
+      column_width = column_width.to_i  if column_width.is_a? Sass::Script::Number
+      gutter_width = gutter_width.to_i  if gutter_width.is_a? Sass::Script::Number
+      grid_width = ((column_width + gutter_width) * columns) - gutter_width
+
+
+      if c.nil?
+          grid_color = ChunkyPNG::Color.rgba(255, 0, 0, 150)     
+      else
+          grid_color = ChunkyPNG::Color.rgba(c.red, c.green, c.blue, (c.alpha * 255).round)
+      end
+
+      png =  ChunkyPNG::Image.new(grid_width, 25, ChunkyPNG::Color::TRANSPARENT)
+
+
+       for i in (0..columns)
+         png.rect((column_width+gutter_width)*i, 0, ((column_width+gutter_width)*i)+column_width, 25, ChunkyPNG::Color::TRANSPARENT, grid_color)
+
+       end
+
+      return_image(png)
+
+    end
+
+end

data/lib/patterner/patterner/patterns/plus.rb

@@ -0,0 +1,26 @@
+module Sass::Script::Functions
+
+	def plus(c, size, spacing)
+	  size = 5 if size.nil?
+	  spacing = 10 if spacing.nil?
+		size = size.to_i if size.is_a? Sass::Script::Number
+		spacing = spacing.to_i if spacing.is_a? Sass::Script::Number
+		
+		total_size = size+spacing
+		
+		c = get_color(c)
+		
+		png = ChunkyPNG::Image.new(total_size, total_size, TRANSPARENT)
+		
+		size%2 == 0 ? size = size : size = size+1
+
+		
+		png.line(size/2, 0, size/2, size, c)
+		png.line(0, size/2, size, size/2, c)
+		
+		return_image(png)
+		
+		
+	end
+
+end

data/lib/patterner/patterner/patterns/stripes.rb

@@ -0,0 +1,94 @@
+module Sass::Script::Functions
+
+	def stripe(type, c, size, spacing)
+	  
+	  size = 1 if size.nil?
+	  spacing = 10 if spacing.nil?
+  
+		size = size.to_i if size.is_a? Sass::Script::Number
+		spacing = spacing.to_i if spacing.is_a? Sass::Script::Number
+		type = type.to_s if type.is_a? Sass::Script::String
+		total_size = (size+spacing) 
+		line_color = get_color(c)
+		png = ChunkyPNG::Image.new(total_size, total_size, ChunkyPNG::Color::TRANSPARENT)
+  
+  
+	# horizontal stripe    
+	if type == "horizontal" || type == "h"
+	 for x in (0...total_size)
+	   for y in (0...size)
+	      png.set_pixel(x, y, line_color)
+	    end
+	  end
+	end
+  
+
+	# vertical stripe    
+	if type == "vertical" || type == "v"
+		for y in (0...total_size)
+	     for x in (0...size)
+	       png.set_pixel(x, y, line_color)
+	     end
+	  end
+	end
+ 
+	starting_point = size 
+	total_points = size
+
+	#Forward Stripe	
+	if type == "forward" || type == "f"	
+	 for y in (0...total_size) 
+		for x in (0...total_size)	 		
+			if x < size	 	
+
+				point = starting_point-x
+
+				if point < 0	
+	 				point = point + total_size
+	 			end
+
+	 			png.set_pixel(point, y, line_color)
+ 	
+	 		end
+	  end
+
+			starting_point = starting_point-1  
+  
+			if starting_point < 0
+				starting_point  = total_size-1
+	  	end
+		end
+	end
+	
+	
+	#Backwards Stipe	
+	if type == "back" || type == "b"
+
+		for y in (0...total_size) 
+			for x in (0...total_size)				
+				if x < size
+					point = starting_point+x
+   	
+					if point > total_size-1
+						point = point - total_size
+					end
+
+					png.set_pixel(point, y, line_color)
+		
+				end
+		 	end
+
+		 	starting_point = starting_point+1
+
+		 	if starting_point > total_size-1
+		     starting_point  = 0
+		 	end
+		end
+	end
+  
+	  return_image(png)
+
+  
+	end
+end
+

data/lib/patterner/patterner/patterns/zigzag.rb

@@ -0,0 +1,41 @@
+module Sass::Script::Functions
+	
+	def zigzag(c, size, width, spacing)
+	    size = 20 if size.nil?
+	    width = 20 if width.nil?
+	    spacing = 0 if spacing.nil?
+			size = size.to_i if size.is_a? Sass::Script::Number
+			width = width.to_i if width.is_a? Sass::Script::Number
+			spacing = spacing.to_i if spacing.is_a? Sass::Script::Number
+			
+			height = size+width
+			
+			c = get_color(c)
+			
+			point = 0
+			
+			spacing = spacing + height
+			
+			left = ChunkyPNG::Image.new(width, height, TRANSPARENT)
+			right = ChunkyPNG::Image.new(width, height, TRANSPARENT)
+			png =  ChunkyPNG::Image.new(width*2, spacing, TRANSPARENT)
+			
+			for x in (0...width)
+				for y in (0...size)
+					left.set_pixel(x, y+point, c)
+				end
+				
+				point = point+1
+				
+			end 
+			
+			right = right.compose(left, 0, 0)
+			right = right.flip_vertically
+			png = png.compose(left, 0, 0)
+			png = png.compose(right,width,0)
+			
+			return_image(png)
+			
+		end
+	
+end

data/templates/project/manifest.rb

@@ -0,0 +1,4 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'patterner.sass', :media => 'screen, projection'
+
+html 'patterner.html'

data/templates/project/patterner.html

@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Patterner Examples</title>
+	
+	<!-- link the compiled provided patterner css file here -->
+	<link href="stylesheets/patterner.css" media="screen, projection" rel="stylesheet" type="text/css" />
+</head>
+<body>
+	
+	<h1>Example patterns</h1>
+	
+	<div class="patterner checker"></div>
+	<div class="patterner crosshatch"></div>
+	<div class="patterner diamond"></div>
+	<div class="patterner dots"></div>
+	<div class="patterner offset-dots"></div>
+	<div class="patterner grid"></div>
+	<div class="patterner blueprint"></div>
+	<div class="patterner plus"></div>
+	<div class="patterner horizontal-stripes"></div>
+	<div class="patterner vertical-stripes"></div>
+	<div class="patterner forward-stripes"></div>
+	<div class="patterner backwards-stripes"></div>
+	<div class="patterner zigzag"></div>
+
+</body>
+</html>

data/templates/project/patterner.sass

@@ -0,0 +1,56 @@
+// Example usage
+// All examples use all the arguments for you to explore and experiemnt with, only the pattern stlye and color are required
+.patterner 
+	width: 300px
+	height: 300px
+	float: left
+	margin: 25px
+	&:hover 
+		background-color: #333  
+
+// Checker
+.checker 
+	background: pattern(checker, #333333, 50, hsla(0, 0, 70, 0.5)) 
+
+// Crosshatch
+.crosshatch 
+	background: pattern(crosshatch, hsla(318, 100, 50, 1), 1, 20, hsla(33, 100, 50, 1)) 
+
+// Diamond
+.diamond 
+	background: pattern(diamond, hsla(180, 50, 50, 1), 25, 30) 
+
+// Dots
+.dots 
+	background: pattern(dots, hsla(0, 50, 50, 1), 10, 20) 
+
+.offset-dots 
+	background: pattern(offset-dots, #cccccc, 20, 5) 
+
+// Grids
+.grid 
+	background: pattern(grid, #e6a031, 25) 
+
+.blueprint 
+	background: pattern(blueprint, teal, 75) 
+
+// Plus
+.plus 
+	background: pattern(plus, green, 10, 15) 
+
+// Stripes
+.horizontal-stripes 
+	background: pattern(horizontal-stripe, teal, 20, 10) 
+
+.vertical-stripes 
+	background: pattern(vertical-stripe, #a95ec5, 10, 20) 
+
+.forward-stripes 
+	background: pattern(forward-stripe, hsla(12, 100, 61, 1), 1, 10) 
+
+.backwards-stripes 
+	background: pattern(backward-stripe, hsla(220, 80, 60, 0.8), 10, 25) 
+
+// Zigzag
+.zigzag 
+	background: pattern(zigzag, hsla(90, 80, 45, 0.8), 20, 25, 5) 

metadata

@@ -0,0 +1,114 @@
+--- !ruby/object:Gem::Specification 
+name: patterner
+version: !ruby/object:Gem::Version 
+  hash: 47
+  prerelease: 5
+  segments: 
+  - 0
+  - 0
+  - 1
+  - b
+  version: 0.0.1b
+platform: ruby
+authors: 
+- Jared Hardy
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-04-16 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: 62196225
+        segments: 
+        - 0
+        - 11
+        - beta
+        - 5
+        version: 0.11.beta.5
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: chunky_png
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 19
+        segments: 
+        - 1
+        - 1
+        - 0
+        version: 1.1.0
+  type: :runtime
+  version_requirements: *id002
+description: a pattern generator for compass
+email: jared@jaredhardy.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.mkdn
+- lib/patterner/patterner/patterns/checker.rb
+- lib/patterner/patterner/patterns/crosshatch.rb
+- lib/patterner/patterner/patterns/diamond.rb
+- lib/patterner/patterner/patterns/dots.rb
+- lib/patterner/patterner/patterns/grids.rb
+- lib/patterner/patterner/patterns/plus.rb
+- lib/patterner/patterner/patterns/stripes.rb
+- lib/patterner/patterner/patterns/zigzag.rb
+- lib/patterner/patterner/patterns.rb
+- lib/patterner/patterner.rb
+- lib/patterner.rb
+- templates/project/manifest.rb
+- templates/project/patterner.html
+- templates/project/patterner.sass
+homepage: http://www.jaredhardy.com
+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: 25
+      segments: 
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.7.2
+signing_key: 
+specification_version: 3
+summary: a pattern generator for compass
+test_files: []
+