compass-stitch 0.0.1

data/.gitignore

@@ -0,0 +1,3 @@
+*/.DS_Store
+*.gem
+*/.sass-cache

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in compass-stitch.gemspec
+gemspec

data/README.md

@@ -0,0 +1,81 @@
+# Stitch CSS Pattern Framework
+
+Patterns are chunks of styles that we use on every project. These chunks of styles generally perform a particular function, such as clearing floats. Having to write these styles each time is annoying and the function of these chunks of code in our stylesheets is obscure. 
+
+By breaking these patterns into reusable classes and mixins we:
+
+* Make our stylesheets free from clutter
+* Give our styles more meaning
+* Reduce the size of our stylesheet
+* Only have to write them once
+* Are updatable when newer methods are discovered by updating the framework
+
+# Get Stitch
+
+Install the Rubygem.
+
+	gem install compass-stitch
+	
+# Create a new project
+
+Now create your bare project that includes compass-stitch:
+
+	compass create my-project --bare -r compass-stitch
+	
+Install the project template:
+
+	compass install stitch/project
+
+# Add Stitch to a current project
+
+To add Stitch patterns to a current project, add this to the top of your stylesheets
+
+	@import 'stitch/patterns';
+	
+And in your Compass config.rb file add
+	
+	require 'compass-stitch'
+	
+To use the project template layout, run
+
+	compass install stitch/project
+
+and the project template will be installed into your current directory 
+
+# Patterns
+
+[See all of the patterns available](https://github.com/anthonyshort/stitch-css/tree/master/stylesheets/stitch/patterns)
+
+By using @import 'stitch/patterns'; you will have access to all of the pattern mixins.
+
+# Reset
+
+Stitch includes a CSS reset. This is a new reset I'm working on. It resets everything back to it's raw text form so that it's easy to build from.
+
+To manually import the Stitch reset.
+
+	@import 'stitch/reset/desktop';
+	
+If you're using the Stitch project template, this will be included for you.
+	
+Stitch only includes a [desktop reset](https://github.com/anthonyshort/stitch-css/blob/master/stylesheets/stitch/patterns/reset/_desktop.scss) for now.
+
+# Project Template
+
+This project folder sets up the conventions for laying out your stylesheets. It is built around the idea that a single site may have many layouts and we'll use media queries to select which layout to use.
+
+However, we don't want to ALWAYS use media queries, so we still have the option to import the layouts statically.
+
+There are two files, master.scss and legacy.scss. Master imports the layouts based on media queries:
+
+	// Default Layout
+	@import "layouts/desktop/master.css" screen and (min-width: 481px);
+
+	// Adjusted default layout for smaller tablet screens
+	@import "layouts/tablet/master.css" screen and (min-width: 481px) and (max-width: 1024px);
+
+	// Adjusted layout for mobile devices
+	@import "layouts/mobile/master.css" screen and (max-width: 480px);
+
+Whereas the legacy file will import files statically and without media queries. This means we can send the legacy file to browsers that don't support media queries, and we can send the master file to browsers that do.
+

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/compass-stitch.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass-stitch/version"
+
+Gem::Specification.new do |s|
+  s.name        = "compass-stitch"
+  s.version     = Compass::Stitch::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Anthony Short"]
+  s.email       = ["antshort@gmail.com"]
+  s.homepage    = "https://github.com/anthonyshort/stitch-css"
+  s.summary     = %q{A CSS pattern framework for Compass}
+  s.description = %q{A framework for Compass that provides mixins for common CSS patterns to minimize the amount of CSS writing we have to do and gives our stylesheets more meaning.}
+
+  s.rubyforge_project = "compass-stitch"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/lib/compass-stitch.rb

@@ -0,0 +1,2 @@
+require 'compass'
+Compass::Frameworks.register("stitch", :path => "#{File.dirname(__FILE__)}/..")

data/lib/compass-stitch/version.rb

@@ -0,0 +1,5 @@
+module Compass
+  module Stitch
+    VERSION = "0.0.1"
+  end
+end

data/stylesheets/stitch/_helpers.scss

@@ -0,0 +1 @@
+@import 'helpers/css';

data/stylesheets/stitch/_patterns.scss

@@ -0,0 +1,8 @@
+@import 'patterns/accessibility';
+@import 'patterns/forms';
+@import 'patterns/images';
+@import 'patterns/layout';
+@import 'patterns/legacy';
+@import 'patterns/mobile';
+@import 'patterns/print';
+@import 'patterns/text';

data/stylesheets/stitch/helpers/_css3.scss

@@ -0,0 +1,231 @@
+/* Prefixing
+---------------------------------------- */
+
+$default-prefixes: -webkit, -moz, -o, -khtml, -ms;
+
+@mixin prefix($property, $value, $prefixes: $default-prefixes) {
+	
+	// Unquote the values
+	$property : unquote($property);
+	$value    : unquote($value);
+	
+	// Loop through the prefixes given
+	@each $prefix in $prefixes {
+		#{$prefix}-#{$property}:$value;
+	}
+}
+
+@mixin prefix-value($property, $value, $prefixes: $default-prefixes) {
+	
+	// Unquote the values
+	$property : unquote($property);
+	$value    : unquote($value);
+	
+	// Loop through the prefixes given
+	@each $prefix in $prefixes {
+		#{$property}:#{$prefix}-#{$value};
+	}
+}
+
+
+/* Appearance
+---------------------------------------- */
+
+$default-prefixes-appearance: -webkit, -moz;
+
+@mixin appearance($v, $prefixes: $default-prefixes-appearance) {
+	@include prefix(appearance,$v,$prefixes);
+	appearance:$v;
+}
+
+/* Background Clip
+---------------------------------------- */
+
+$default-prefixes-background-clip: -webkit, -moz;
+
+@mixin background-clip($v, $prefixes: $default-prefixes-background-clip) {
+	@include prefix(background-clip,$v,$prefixes);
+	background-clip:$v;
+}
+
+/* Background Origin
+---------------------------------------- */
+
+$default-prefixes-background-origin: -webkit, -moz;
+
+@mixin background-origin($v, $prefixes: $default-prefixes-background-origin) {
+	@include prefix(background-origin,$v,$prefixes);
+	background-origin:$v;
+}
+
+/* Background Size
+---------------------------------------- */
+
+$default-prefixes-background-size: -webkit, -moz; 
+
+@mixin background-size($v, $prefixes: $default-prefixes-background-size) {
+	@include prefix(background-size,$v,$prefixes);
+	background-size:$v;
+}
+
+/* Border Radius
+---------------------------------------- */
+
+$default-prefixes-border-radius: -webkit, -moz; 
+
+@mixin border-radius($r, $prefixes: $default-prefixes-border-radius) {
+	@include prefix(border-radius,$r,$prefixes);
+	border-radius:$r;
+}
+
+/* Box Shadow
+---------------------------------------- */
+
+$default-prefixes-box-shadow: -webkit, -moz; 
+
+@mixin box-shadow($v, $prefixes: $default-prefixes-box-shadow) {
+	@include prefix(border-radius,$v,$prefixes);
+	box-shadow:$v;
+}
+
+/* Flexible Box
+---------------------------------------- */
+
+$default-prefixes-box: -webkit, -moz;
+
+@mixin display-box($prefixes: $default-prefixes-box) {
+	@include prefix-value(display,box,$prefixes);
+}
+
+@mixin box-orient($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-orient,$v,$prefixes);
+}
+
+@mixin box-align($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-align,$v,$prefixes);
+}
+
+@mixin box-flex($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-flex,$v,$prefixes);
+}
+
+@mixin box-flex-group($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-flex-group,$v,$prefixes);
+}
+
+@mixin box-ordinal-group($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-ordinal-group,$v,$prefixes);
+}
+
+@mixin box-direction($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-direction,$v,$prefixes);
+}
+
+@mixin box-lines($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-direction,$v,$prefixes);
+}
+
+@mixin box-pack($v, $prefixes: $default-prefixes-box) {
+	@include prefix(box-direction,$v,$prefixes);
+}
+
+/* Box Sizing
+---------------------------------------- */
+
+$default-prefixes-box-sizing: -webkit, -moz;
+
+@mixin box-sizing($v, $prefixes: $default-prefixes-box-sizing) {
+	@include prefix(box-sizing,$v,$prefixes);
+}
+
+/* Columns
+---------------------------------------- */
+
+$default-prefixes-columns: -webkit, -moz;
+
+@mixin column-count($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-count,$v,$prefixes);
+}
+
+@mixin column-gap($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-gap,$v,$prefixes);
+}
+
+@mixin column-width($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-width,$v,$prefixes);
+}
+
+@mixin column-rule-width($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-rule-width,$v,$prefixes);
+}
+
+@mixin column-rule-style($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-rule-style,$v,$prefixes);
+}
+
+@mixin column-rule-color($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-rule-color,$v,$prefixes);
+}
+
+@mixin column-rule($v, $prefixes: $default-prefixes-columns) {
+	@include prefix(column-rule,$v,$prefixes);
+}
+
+/* Transforms
+---------------------------------------- */
+
+$default-prefixes-transform: -webkit, -moz;
+
+// @see http://www.w3.org/TR/css3-2d-transforms/#transform-property
+@mixin transform($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transform,$v,$prefixes);
+}
+
+// @see http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
+@mixin transform-origin($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transform-origin,$v,$prefixes);
+}
+
+// @see http://www.w3.org/TR/css3-3d-transforms/#transform-style
+@mixin transform-style($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transform-style,$v,$prefixes);
+}
+
+// @see http://www.w3.org/TR/css3-3d-transforms/#perspective
+@mixin perspective-origin($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(perspective-origin,$v,$prefixes);
+}
+
+// @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility
+@mixin backface-visibility($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(backface-visibility,$v,$prefixes);
+}
+
+/* Transitions
+---------------------------------------- */
+
+/*
+  @see http://www.w3.org/TR/css3-transitions/
+*/
+
+$default-prefixes-transition: -webkit, -moz;
+
+@mixin transition-property($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transition-property,$v,$prefixes);
+}
+
+@mixin transition-duration($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transition-duration,$v,$prefixes);
+}
+
+@mixin transition-timing-function($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transition-timing-function,$v,$prefixes);
+}
+
+@mixin transition-delay($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transition-delay,$v,$prefixes);
+}
+
+@mixin transition($v, $prefixes:$default-prefixes-transform) {
+	@include prefix(transition,$v,$prefixes);
+}

data/stylesheets/stitch/patterns/_accessibility.scss

@@ -0,0 +1 @@
+@import 'accessibility/hide-content';

data/stylesheets/stitch/patterns/_forms.scss

@@ -0,0 +1 @@
+@import 'forms/search-fields';

data/stylesheets/stitch/patterns/_images.scss

@@ -0,0 +1,2 @@
+@import 'images/image-rendering';
+@import 'images/image-replace';

data/stylesheets/stitch/patterns/_layout.scss

@@ -0,0 +1,4 @@
+@import 'layout/center';
+@import 'layout/clear-floats';
+@import 'layout/force-scrollbars';
+@import 'layout/media';

data/stylesheets/stitch/patterns/_legacy.scss

@@ -0,0 +1,2 @@
+@import 'legacy/has-layout';
+@import 'legacy/inline-block';

data/stylesheets/stitch/patterns/_mobile.scss

@@ -0,0 +1 @@
+@import 'mobile/fixed-text';

data/stylesheets/stitch/patterns/_print.scss

@@ -0,0 +1,2 @@
+@import 'print/append-content';
+@import 'print/text';

data/stylesheets/stitch/patterns/_text.scss

@@ -0,0 +1 @@
+@import 'text/text-rendering';

data/stylesheets/stitch/patterns/accessibility/_hide-content.scss

@@ -0,0 +1,20 @@
+/* Hide for both screenreaders and browsers
+   css-discuss.incutio.com/wiki/Screenreader_Visibility */
+@mixin hide-from-all {
+	display:none;
+	visibility: hidden;
+} 
+
+/* Hide only visually, but have it available for screenreaders 
+   www.webaim.org/techniques/css/invisiblecontent/ 
+   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
+@mixin screenreaders-only {
+	position: absolute !important;    
+  	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  	clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Hide visually and from screenreaders, but maintain layout */
+@mixin invisible-with-layout {
+	visibility: hidden;
+}

data/stylesheets/stitch/patterns/forms/_search-fields.scss

@@ -0,0 +1,13 @@
+/* 
+   Make webkit render the search input like a normal text field 
+*/
+@mixin reset-search-field {
+	-webkit-appearance:textfield;
+	::-webkit-search-decoration {
+		display:none
+	}
+}
+
+
+
+

data/stylesheets/stitch/patterns/images/_image-rendering.scss

@@ -0,0 +1,26 @@
+/*
+  Sharpen an image if it has become blurry due to upscaling or downscaling
+  @see https://developer.mozilla.org/en/CSS/image-rendering
+*/
+@mixin sharpen-image {
+	image-rendering:-moz-crisp-edges;
+	-ms-interpolation-mode:nearest-neighbor;  /* IE 7+ */
+}
+
+/*
+  When photos are upscaled or downscaled, they often get blurry. Don't use
+  this on flat color images, they will still appear blurry.
+  @see https://developer.mozilla.org/en/CSS/image-rendering
+*/
+@mixin high-quality-image {
+	image-rendering:optimizeQuality;
+	-ms-interpolation-mode:bicubic;  /* IE 7+ */
+}
+
+/*
+  Optimizes the rendering on images so they
+  appear faster, but at a lower quality. Useful for <video>
+*/
+@mixin low-quality-image {
+	image-rendering:optimizeSpeed;
+}