stitch 0.0.3 → 0.1.0

data/Gemfile.lock

@@ -0,0 +1,25 @@
+PATH
+  remote: .
+  specs:
+    stitch (0.0.3)
+      compass
+      sass-globbing
+
+GEM
+  remote: http://rubygems.org/
+  specs:
+    chunky_png (1.2.0)
+    compass (0.11.4)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    fssm (0.2.7)
+    sass (3.1.7)
+    sass-globbing (1.0.0.rc.1)
+      sass (>= 3.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  stitch!

data/README.md

@@ -1,4 +1,4 @@
-# Stitch CSS Pattern Framework
+# Stitch - CSS Pattern Framework for Compass
 
 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. 
 
@@ -10,77 +10,33 @@ By breaking these patterns into reusable classes and mixins we:
 * Only have to write them once
 * Are updatable when newer methods are discovered by updating the framework
 
-# Get Stitch
+## Get Stitch
 
-Install the Rubygem.
-
-	gem install stitch
+	sudo gem install stitch
 	
-# Create a new project
-
-Now create your bare project that includes compass-stitch:
+## Add it to your Compass config.rb
 
-	compass create my-project --bare -r stitch
-	
-Install the project template:
+	require 'stitch'
 
-	compass install stitch/project
+## Import it into your Sass
 
-# Add Stitch to a current project
+	@import 'stitch';
 
-To add Stitch patterns to a current project, add this to the top of your stylesheets
+## Or import it in parts
 
+	@import 'stitch/reset';
 	@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
+## 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.
+By using @import 'stitch/patterns'; you will have access to all of the pattern mixins. The patterns are all mixins with a couple of extra classes used for extending.
 
-# Reset
+## 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.
+Stitch includes a unique CSS reset. 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.
-
-## Assets Folder
-
-This folder is where the majority of your assets, such as fonts and images, will live. Keeping them in this single spot makes them easy to access from any layout.
-
-Assets can include a stylesheet that allows layouts to easily use them. In the case of fonts, a stylesheet should be included with the @font-face method so that layouts only need to import the stylesheet to use the assets. The same method could be used for backgrounds, icons etc.
+	@import 'stitch/reset';

data/Rakefile

@@ -1,2 +1 @@
-require 'bundler'
-Bundler::GemHelper.install_tasks
+require "bundler/gem_tasks"

data/lib/stitch/version.rb

@@ -1,3 +1,3 @@
 module Stitch
-  VERSION = "0.0.3"
+  VERSION = "0.1.0"
 end

data/stitch.gemspec

@@ -18,4 +18,7 @@ Gem::Specification.new do |s|
   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"]
+  
+  s.add_runtime_dependency "compass"
+  #s.add_runtime_dependency "sass-globbing"
 end

data/stylesheets/stitch/_patterns.scss

@@ -1,4 +1,7 @@
+@import 'utilities';
 @import 'patterns/accessibility';
+@import 'patterns/animation';
+//@import 'patterns/css3';
 @import 'patterns/forms';
 @import 'patterns/images';
 @import 'patterns/layout';

data/stylesheets/stitch/_reset.scss

@@ -0,0 +1,315 @@
+/*
+ * 1. Keeps page centred in all browsers regardless of content height
+ * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+html {
+    overflow-y: scroll; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+	text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * 1. Clear default browser margin
+ * 2. Default line-height inconsistent across browsers
+ */
+body {
+	margin:0; /* 1 */
+	line-height:1; /* 2 */
+}
+
+/* Forms
+ ------------------------------------------------ */
+
+form {
+	margin:0;
+}
+
+fieldset {
+	margin:0;
+	padding:0;
+	border:0;
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+	font-family:inherit; /* 1 */
+    margin: 0; /* 2 */
+	padding:0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
+ * 2. Corrects inner spacing displayed oddly in IE6/7
+ */
+button,
+input {
+    line-height: normal; /* 1 */
+    *overflow: visible;  /* 2 */
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+textarea {
+  overflow:auto; 
+  vertical-align:top;
+  padding:0;
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Corrects inner padding displayed oddly in S5, Chrome on OSX
+ */
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/* 
+ * Remove the webkit glow 
+ */
+:focus {
+  outline:none; 
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Addresses excess padding in IE8/9
+ */
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * Corrects inner padding and border displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/* Images
+ ------------------------------------------------ */
+
+/*
+ * Chrome gives figures margin
+ */
+figure {
+	margin:0;
+}
+
+/* 
+ * 1. Nicer image sizing in IE 
+ * 2. Common default
+ */
+img {
+	-ms-interpolation-mode: bicubic; /* 1 */
+	display:block; /* 2 */
+}
+
+/* Lists
+ ------------------------------------------------ */
+
+ol,
+ul {
+	margin:0;
+	padding:0;
+}
+
+dl,
+dd {
+	margin:0;
+}
+
+/* 
+ * Reset list items back to normal block display.
+ * This allows us to use lists for semantic markup
+ * without needing to set this each time.
+ * Lists only look like lists in blocks of copy.
+ */
+li {
+	display: block;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+/* Headings
+ ------------------------------------------------ */
+
+/*
+ * Resets all headings to look like normal text
+ */
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+	font-weight:inherit;
+	line-height:inherit;
+	font-size:inherit;
+	margin:0;
+}
+
+/* Block Text
+ ------------------------------------------------ */
+
+p {
+	margin:0;
+}
+
+blockquote {
+	margin:0;
+}
+
+/* 
+ * Improve the appearance of preformatted text
+ */
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+	margin:0;
+	font-family:inherit;
+	font-size:inherit;
+}
+
+/* Inline Text
+ ------------------------------------------------ */
+
+cite {
+	font-style:normal;
+}
+
+ins {
+	text-decoration:none;
+}
+
+dfn {
+	font-style:inherit;
+}
+
+del {
+	text-decoration:none;
+}
+
+mark {
+	background:none;
+	color:inherit;
+}
+
+address {
+	font-style:normal;
+}
+
+tt, code, kbd, samp {
+	font-family: inherit;
+	font-size:inherit;
+}
+
+b,
+strong {
+	font-weight:inherit;
+}
+
+em {
+	font-style:inherit;
+}
+
+small {
+	font-size:100%;
+}
+
+q {
+    quotes: none;
+}
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+a {
+  font-weight:inherit;
+  color:inherit;
+  text-decoration:none;
+}
+
+a:hover,
+a:active {
+    outline: none; 
+}
+
+/* 
+ * Set sub, sup without affecting line-height: gist.github.com/413930 
+ */
+sub,sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative; 
+}
+
+sup {
+  top: -0.5em; 
+}
+
+sub {
+  bottom: -0.25em; 
+}
+
+/* HTML 5 Block Elements
+ ------------------------------------------------ */
+
+article, 
+aside, 
+details, 
+figcaption, 
+figure,
+footer, 
+header, 
+hgroup, 
+menu, 
+nav, 
+section {
+	display:block;
+}
+
+/* Tables
+ ------------------------------------------------ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; 
+}
+
+th {
+	font-weight:inherit;
+}