compass-stitch 0.0.1

data/templates/project/sass/assets/README.md

@@ -0,0 +1,5 @@
+# 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.

data/templates/project/sass/layouts/README.md

@@ -0,0 +1,16 @@
+# Layouts
+
+Layouts are different ways of displaying your site across different media such as web browsers, mobile phones and tablet computers. 
+
+Import layouts in the master file by using media queries if you are using them or you can link directly to the layouts master file in your HTML.
+
+````
+// 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);
+````

data/templates/project/sass/layouts/desktop/README.md

@@ -0,0 +1,35 @@
+# Desktop Layout
+
+The desktop layout is probably your main design layout. The files are broken up to allow for quick building and easy maintenance.
+
+## _copy.scss
+
+The styles for copy blocks are placed in here. Unlike most stylesheet frameworks that use global styles to add text styles, we'll scope the styles for copy so that we don't have to override them.
+
+When setting text styles globally, you set margins/padding/colors on headings, paragraphs, links etc. Then when you use these elements within other modules that aren't copy blocks, you find yourself needing to remove and override yourself. By scoping these styles we're saving ourselves a LOT of work.
+
+## _forms.scss
+
+For all of your styles specific to certain forms. Global form styles should be in _global.scss. Form styles should be as modular as possible. If a particular form style is used multiple times, consider making it a module.
+
+## _functions.scss
+
+A common location for your mixins and sass functions for the layout
+
+## _global.scss
+
+This is where you put your unscoped, global styles for the site. Be careful adding anything to this file, as it usually means you need to override it later.
+
+## _layout.scss
+
+Place you layout styles in here. This is the high-level layout styles, such as breaking up a site into 2 column/3 column layouts etc. These should be re-usable when needed.
+
+Be careful how you apply layouts to your markup. Keep it semantic but modular.
+
+## _modules.scss
+
+This is where your modular styles go. For example, you may have a box style with a certain background and border. This style is used in multiple places, such as the sidebar of a blog, or the fieldset of a form. By breaking these styles into modules we can reuse the styles.
+
+These styles should be descriptive classes rather than semantic classes as they won't ever be directly used on an element in the markup (unless you're rapid prototyping). They should not be mixins either, as a mixin will inject the styles into each selector that includes them, whereas using the @extends method will just declare the styles once, saving you a LOT of space.
+
+Complex modules should be placed in their own folder inside the modules folder. This allows modules to be moved around and contain their own assets. Images for this module should be included within the folder rather than in the global assets directory.

data/templates/project/sass/layouts/desktop/_copy.scss

@@ -0,0 +1,140 @@
+/* Define styles for blocks of content scoped within the .copy rather than
+   making them global. Global styles will be constantly overridden. */
+.copy {
+	@include improve-text-rendering;
+	
+	/* 
+	  Set the baseline on all elements directly inside a copy block
+	  Inline elements won't take margin anyway
+	*/
+	& > * {
+		margin:0 0 $baseline 0;	
+	}
+	
+	/* Block Elements
+	---------------------------------------- */
+
+	p {
+		
+	}
+
+	address {
+
+	}
+	
+	/* Lists
+	---------------------------------------- */
+
+	ul {
+
+	}
+
+	ol {
+
+	}
+
+	li {
+		display:list-item;
+	}
+
+	dl {
+
+	}
+
+	dt {
+
+	}
+
+	dd {
+
+	}
+	
+	/* Code Blocks
+	---------------------------------------- */
+
+	pre {
+
+	}
+	
+	/* Headings
+	---------------------------------------- */
+
+	h1,h2,h3,h4,h5,h6 {
+
+	}
+
+	h1 {
+
+	}
+
+	h2 {
+
+	}
+
+	h3 {
+
+	}
+
+	h4 {
+
+	}
+
+	h5 {
+
+	}
+
+	h6 {
+
+	}
+
+	/* Inline Elements
+	---------------------------------------- */
+
+	em {
+		font-style:italic;
+	}
+
+	strong {
+		font-weight:bold;
+	}
+
+	mark {
+		background:yellow;
+	}
+
+	ins {
+		background:green;
+	}
+
+	del {
+		background:red;
+	}
+
+	abbr {
+
+	}
+	
+	code {
+		
+	}
+	
+	kbd {
+		
+	}
+	
+	/* Links
+	---------------------------------------- */
+
+	a {
+		font-weight:bold;
+		text-decoration:underline;
+	}
+
+	a:visited {
+
+	}
+
+	a:hover {
+
+	}
+}

data/templates/project/sass/layouts/desktop/_forms.scss

@@ -0,0 +1,3 @@
+/*
+  Specific form styles. Global form styles should go in _global.scss
+*/

data/templates/project/sass/layouts/desktop/_functions.scss

@@ -0,0 +1,3 @@
+/*
+  Define all of your sass functions and mixins here
+*/

data/templates/project/sass/layouts/desktop/_global.scss

@@ -0,0 +1,52 @@
+/*
+  These are global styles with NO SCOPE
+*/
+
+/* Basic
+---------------------------------------- */
+html {
+	@include force-scrollbars;
+}
+
+/* Typography
+---------------------------------------- */
+$baseline: 21px;
+$base-font-size: 16px;
+
+body,
+input,
+label,
+select,
+button,
+textarea,
+table {
+	  font-size: $base-font-size;
+	font-family: Georgia;
+	line-height: $baseline;
+	      color: #000;
+}
+
+/* These ::selection declarations have to be separate. 
+   They cause the browsers to freak out. */
+@mixin text-selection {
+	 background: #000;
+	      color: #fff;
+	text-shadow: none;
+}
+
+::-moz-selection  { @include text-selection }
+::selection       { @include text-selection }
+
+h1,h2,h3,h4,h5,h6 {
+  @include improve-text-rendering; 
+}
+
+/* Forms
+---------------------------------------- */
+input:focus {
+  outline: 0; 
+}
+
+input[type="search"] {
+  @include reset-search-field;
+}

data/templates/project/sass/layouts/desktop/_layout.scss

@@ -0,0 +1,4 @@
+/*
+  All layout styles should go in here. Seperate your layout styles from your design styles
+  Common layout styles should be mixins, patterns or modules
+*/

data/templates/project/sass/layouts/desktop/_modules.scss

@@ -0,0 +1,4 @@
+/*
+  Re-usable components. Should be modular and scope styles
+  Complex modules can go in their own files inside the modules folder
+*/

data/templates/project/sass/layouts/desktop/master.scss

@@ -0,0 +1,18 @@
+// Compass CSS3 Helpers
+@import "compass/css3";
+
+// Patterns
+@import "stitch/patterns";
+
+// Reset
+@import "stitch/reset/desktop";
+
+// Assets
+
+// Specific styles
+@import "functions";
+@import "global";
+@import "copy";
+@import "layout";
+@import "modules";
+@import "forms";

data/templates/project/sass/layouts/mobile/_global.scss

@@ -0,0 +1,3 @@
+html {
+	@include fixed-sized-text;
+}

data/templates/project/sass/layouts/mobile/master.scss

@@ -0,0 +1,2 @@
+@import "stitch/patterns/mobile";
+@import "global";

data/templates/project/sass/layouts/print/_global.scss

@@ -0,0 +1,6 @@
+body {
+	// Append links to anchors
+	@include append-content;
+	// Make text printer-friendly
+	@include printable-text;
+}

data/templates/project/sass/layouts/print/master.scss

@@ -0,0 +1,2 @@
+@import "stitch/patterns/print";
+@import "global";

data/templates/project/sass/legacy.scss

@@ -0,0 +1,4 @@
+/*
+  For older browsers that will just get one layout. Import it here.
+*/
+@import "layouts/desktop/master";

data/templates/project/sass/master.scss

@@ -0,0 +1,8 @@
+// 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);

metadata

@@ -0,0 +1,124 @@
+--- !ruby/object:Gem::Specification 
+name: compass-stitch
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Anthony Short
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-04-26 00:00:00 Z
+dependencies: []
+
+description: 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.
+email: 
+- antshort@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- compass-stitch.gemspec
+- lib/compass-stitch.rb
+- lib/compass-stitch/version.rb
+- stylesheets/stitch/_helpers.scss
+- stylesheets/stitch/_patterns.scss
+- stylesheets/stitch/helpers/_css3.scss
+- stylesheets/stitch/patterns/_accessibility.scss
+- stylesheets/stitch/patterns/_forms.scss
+- stylesheets/stitch/patterns/_images.scss
+- stylesheets/stitch/patterns/_layout.scss
+- stylesheets/stitch/patterns/_legacy.scss
+- stylesheets/stitch/patterns/_mobile.scss
+- stylesheets/stitch/patterns/_print.scss
+- stylesheets/stitch/patterns/_text.scss
+- stylesheets/stitch/patterns/accessibility/_hide-content.scss
+- stylesheets/stitch/patterns/forms/_search-fields.scss
+- stylesheets/stitch/patterns/images/_image-rendering.scss
+- stylesheets/stitch/patterns/images/_image-replace.scss
+- stylesheets/stitch/patterns/layout/.sass-cache/1678e5797c189adc70c5632bf0477b92adfb2fb6/_clear-floats.scssc
+- stylesheets/stitch/patterns/layout/_center.scss
+- stylesheets/stitch/patterns/layout/_clear-floats.scss
+- stylesheets/stitch/patterns/layout/_force-scrollbars.scss
+- stylesheets/stitch/patterns/layout/_media.scss
+- stylesheets/stitch/patterns/legacy/_has-layout.scss
+- stylesheets/stitch/patterns/legacy/_inline-block.scss
+- stylesheets/stitch/patterns/mobile/_fixed-text.scss
+- stylesheets/stitch/patterns/print/_append-content.scss
+- stylesheets/stitch/patterns/print/_text.scss
+- stylesheets/stitch/patterns/text/_text-rendering.scss
+- stylesheets/stitch/reset/README.md
+- stylesheets/stitch/reset/_desktop.scss
+- templates/project/manifest.rb
+- templates/project/sass/assets/README.md
+- templates/project/sass/assets/bg/.gitignore
+- templates/project/sass/assets/borders/.gitignore
+- templates/project/sass/assets/fonts/.gitignore
+- templates/project/sass/assets/icons/.gitignore
+- templates/project/sass/assets/sprites/.gitignore
+- templates/project/sass/assets/text/.gitignore
+- templates/project/sass/layouts/README.md
+- templates/project/sass/layouts/desktop/README.md
+- templates/project/sass/layouts/desktop/_copy.scss
+- templates/project/sass/layouts/desktop/_forms.scss
+- templates/project/sass/layouts/desktop/_functions.scss
+- templates/project/sass/layouts/desktop/_global.scss
+- templates/project/sass/layouts/desktop/_layout.scss
+- templates/project/sass/layouts/desktop/_modules.scss
+- templates/project/sass/layouts/desktop/master.scss
+- templates/project/sass/layouts/mobile/_global.scss
+- templates/project/sass/layouts/mobile/master.scss
+- templates/project/sass/layouts/print/_global.scss
+- templates/project/sass/layouts/print/_layout.scss
+- templates/project/sass/layouts/print/master.scss
+- templates/project/sass/legacy.scss
+- templates/project/sass/master.scss
+homepage: https://github.com/anthonyshort/stitch-css
+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: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-stitch
+rubygems_version: 1.7.2
+signing_key: 
+specification_version: 3
+summary: A CSS pattern framework for Compass
+test_files: []
+