stitch 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. data/.gitignore +5 -0
  2. data/Gemfile +4 -0
  3. data/README.md +86 -0
  4. data/Rakefile +2 -0
  5. data/lib/stitch.rb +6 -0
  6. data/lib/stitch/version.rb +3 -0
  7. data/stitch.gemspec +21 -0
  8. data/stylesheets/stitch/_helpers.scss +1 -0
  9. data/stylesheets/stitch/_patterns.scss +8 -0
  10. data/stylesheets/stitch/helpers/_css3.scss +231 -0
  11. data/stylesheets/stitch/patterns/_accessibility.scss +1 -0
  12. data/stylesheets/stitch/patterns/_forms.scss +1 -0
  13. data/stylesheets/stitch/patterns/_images.scss +2 -0
  14. data/stylesheets/stitch/patterns/_layout.scss +4 -0
  15. data/stylesheets/stitch/patterns/_legacy.scss +2 -0
  16. data/stylesheets/stitch/patterns/_mobile.scss +1 -0
  17. data/stylesheets/stitch/patterns/_print.scss +2 -0
  18. data/stylesheets/stitch/patterns/_text.scss +1 -0
  19. data/stylesheets/stitch/patterns/accessibility/_hide-content.scss +20 -0
  20. data/stylesheets/stitch/patterns/forms/_search-fields.scss +13 -0
  21. data/stylesheets/stitch/patterns/images/_image-rendering.scss +26 -0
  22. data/stylesheets/stitch/patterns/images/_image-replace.scss +17 -0
  23. data/stylesheets/stitch/patterns/layout/_center.scss +5 -0
  24. data/stylesheets/stitch/patterns/layout/_clear-floats.scss +27 -0
  25. data/stylesheets/stitch/patterns/layout/_force-scrollbars.scss +3 -0
  26. data/stylesheets/stitch/patterns/layout/_media.scss +23 -0
  27. data/stylesheets/stitch/patterns/legacy/_has-layout.scss +6 -0
  28. data/stylesheets/stitch/patterns/legacy/_inline-block.scss +15 -0
  29. data/stylesheets/stitch/patterns/mobile/_fixed-text.scss +7 -0
  30. data/stylesheets/stitch/patterns/print/_append-content.scss +13 -0
  31. data/stylesheets/stitch/patterns/print/_text.scss +36 -0
  32. data/stylesheets/stitch/patterns/text/_text-rendering.scss +9 -0
  33. data/stylesheets/stitch/reset/_desktop.scss +243 -0
  34. data/templates/project/layouts/desktop/_copy.scss +140 -0
  35. data/templates/project/layouts/desktop/_forms.scss +3 -0
  36. data/templates/project/layouts/desktop/_functions.scss +3 -0
  37. data/templates/project/layouts/desktop/_global.scss +52 -0
  38. data/templates/project/layouts/desktop/_layout.scss +4 -0
  39. data/templates/project/layouts/desktop/_modules.scss +4 -0
  40. data/templates/project/layouts/desktop/master.scss +18 -0
  41. data/templates/project/layouts/mobile/_global.scss +3 -0
  42. data/templates/project/layouts/mobile/master.scss +2 -0
  43. data/templates/project/layouts/print/_global.scss +6 -0
  44. data/templates/project/layouts/print/_layout.scss +0 -0
  45. data/templates/project/layouts/print/master.scss +2 -0
  46. data/templates/project/legacy.scss +4 -0
  47. data/templates/project/manifest.rb +31 -0
  48. data/templates/project/master.scss +8 -0
  49. metadata +113 -0
data/.gitignore ADDED
@@ -0,0 +1,5 @@
1
+ */.DS_Store
2
+ *.gem
3
+ */.sass-cache/*
4
+ pkg/*
5
+ */.gitignore
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in stitch.gemspec
4
+ gemspec
data/README.md ADDED
@@ -0,0 +1,86 @@
1
+ # Stitch CSS Pattern Framework
2
+
3
+ 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.
4
+
5
+ By breaking these patterns into reusable classes and mixins we:
6
+
7
+ * Make our stylesheets free from clutter
8
+ * Give our styles more meaning
9
+ * Reduce the size of our stylesheet
10
+ * Only have to write them once
11
+ * Are updatable when newer methods are discovered by updating the framework
12
+
13
+ # Get Stitch
14
+
15
+ Install the Rubygem.
16
+
17
+ gem install stitch
18
+
19
+ # Create a new project
20
+
21
+ Now create your bare project that includes compass-stitch:
22
+
23
+ compass create my-project --bare -r stitch
24
+
25
+ Install the project template:
26
+
27
+ compass install stitch/project
28
+
29
+ # Add Stitch to a current project
30
+
31
+ To add Stitch patterns to a current project, add this to the top of your stylesheets
32
+
33
+ @import 'stitch/patterns';
34
+
35
+ And in your Compass config.rb file add
36
+
37
+ require 'compass-stitch'
38
+
39
+ To use the project template layout, run
40
+
41
+ compass install stitch/project
42
+
43
+ and the project template will be installed into your current directory
44
+
45
+ # Patterns
46
+
47
+ [See all of the patterns available](https://github.com/anthonyshort/stitch-css/tree/master/stylesheets/stitch/patterns)
48
+
49
+ By using @import 'stitch/patterns'; you will have access to all of the pattern mixins.
50
+
51
+ # Reset
52
+
53
+ 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.
54
+
55
+ To manually import the Stitch reset.
56
+
57
+ @import 'stitch/reset/desktop';
58
+
59
+ If you're using the Stitch project template, this will be included for you.
60
+
61
+ Stitch only includes a [desktop reset](https://github.com/anthonyshort/stitch-css/blob/master/stylesheets/stitch/patterns/reset/_desktop.scss) for now.
62
+
63
+ # Project Template
64
+
65
+ 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.
66
+
67
+ However, we don't want to ALWAYS use media queries, so we still have the option to import the layouts statically.
68
+
69
+ There are two files, master.scss and legacy.scss. Master imports the layouts based on media queries:
70
+
71
+ // Default Layout
72
+ @import "layouts/desktop/master.css" screen and (min-width: 481px);
73
+
74
+ // Adjusted default layout for smaller tablet screens
75
+ @import "layouts/tablet/master.css" screen and (min-width: 481px) and (max-width: 1024px);
76
+
77
+ // Adjusted layout for mobile devices
78
+ @import "layouts/mobile/master.css" screen and (max-width: 480px);
79
+
80
+ 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.
81
+
82
+ ## Assets Folder
83
+
84
+ 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.
85
+
86
+ 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/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
data/lib/stitch.rb ADDED
@@ -0,0 +1,6 @@
1
+ require 'compass'
2
+ Compass::Frameworks.register("stitch", :path => "#{File.dirname(__FILE__)}/..")
3
+
4
+ module Stitch
5
+ STYLESHEETS = File.expand_path("../stylesheets", __FILE__)
6
+ end
@@ -0,0 +1,3 @@
1
+ module Stitch
2
+ VERSION = "0.0.3"
3
+ end
data/stitch.gemspec ADDED
@@ -0,0 +1,21 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "stitch/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "stitch"
7
+ s.version = Stitch::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.authors = ["Anthony Short"]
10
+ s.email = ["antshort@gmail.com"]
11
+ s.homepage = "https://github.com/anthonyshort/stitch-css"
12
+ s.summary = %q{A CSS pattern framework for Compass}
13
+ 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.}
14
+
15
+ s.rubyforge_project = "stitch"
16
+
17
+ s.files = `git ls-files`.split("\n")
18
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
19
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
20
+ s.require_paths = ["lib"]
21
+ end
@@ -0,0 +1 @@
1
+ @import 'helpers/css';
@@ -0,0 +1,8 @@
1
+ @import 'patterns/accessibility';
2
+ @import 'patterns/forms';
3
+ @import 'patterns/images';
4
+ @import 'patterns/layout';
5
+ @import 'patterns/legacy';
6
+ @import 'patterns/mobile';
7
+ @import 'patterns/print';
8
+ @import 'patterns/text';
@@ -0,0 +1,231 @@
1
+ /* Prefixing
2
+ ---------------------------------------- */
3
+
4
+ $default-prefixes: -webkit, -moz, -o, -khtml, -ms;
5
+
6
+ @mixin prefix($property, $value, $prefixes: $default-prefixes) {
7
+
8
+ // Unquote the values
9
+ $property : unquote($property);
10
+ $value : unquote($value);
11
+
12
+ // Loop through the prefixes given
13
+ @each $prefix in $prefixes {
14
+ #{$prefix}-#{$property}:$value;
15
+ }
16
+ }
17
+
18
+ @mixin prefix-value($property, $value, $prefixes: $default-prefixes) {
19
+
20
+ // Unquote the values
21
+ $property : unquote($property);
22
+ $value : unquote($value);
23
+
24
+ // Loop through the prefixes given
25
+ @each $prefix in $prefixes {
26
+ #{$property}:#{$prefix}-#{$value};
27
+ }
28
+ }
29
+
30
+
31
+ /* Appearance
32
+ ---------------------------------------- */
33
+
34
+ $default-prefixes-appearance: -webkit, -moz;
35
+
36
+ @mixin appearance($v, $prefixes: $default-prefixes-appearance) {
37
+ @include prefix(appearance,$v,$prefixes);
38
+ appearance:$v;
39
+ }
40
+
41
+ /* Background Clip
42
+ ---------------------------------------- */
43
+
44
+ $default-prefixes-background-clip: -webkit, -moz;
45
+
46
+ @mixin background-clip($v, $prefixes: $default-prefixes-background-clip) {
47
+ @include prefix(background-clip,$v,$prefixes);
48
+ background-clip:$v;
49
+ }
50
+
51
+ /* Background Origin
52
+ ---------------------------------------- */
53
+
54
+ $default-prefixes-background-origin: -webkit, -moz;
55
+
56
+ @mixin background-origin($v, $prefixes: $default-prefixes-background-origin) {
57
+ @include prefix(background-origin,$v,$prefixes);
58
+ background-origin:$v;
59
+ }
60
+
61
+ /* Background Size
62
+ ---------------------------------------- */
63
+
64
+ $default-prefixes-background-size: -webkit, -moz;
65
+
66
+ @mixin background-size($v, $prefixes: $default-prefixes-background-size) {
67
+ @include prefix(background-size,$v,$prefixes);
68
+ background-size:$v;
69
+ }
70
+
71
+ /* Border Radius
72
+ ---------------------------------------- */
73
+
74
+ $default-prefixes-border-radius: -webkit, -moz;
75
+
76
+ @mixin border-radius($r, $prefixes: $default-prefixes-border-radius) {
77
+ @include prefix(border-radius,$r,$prefixes);
78
+ border-radius:$r;
79
+ }
80
+
81
+ /* Box Shadow
82
+ ---------------------------------------- */
83
+
84
+ $default-prefixes-box-shadow: -webkit, -moz;
85
+
86
+ @mixin box-shadow($v, $prefixes: $default-prefixes-box-shadow) {
87
+ @include prefix(border-radius,$v,$prefixes);
88
+ box-shadow:$v;
89
+ }
90
+
91
+ /* Flexible Box
92
+ ---------------------------------------- */
93
+
94
+ $default-prefixes-box: -webkit, -moz;
95
+
96
+ @mixin display-box($prefixes: $default-prefixes-box) {
97
+ @include prefix-value(display,box,$prefixes);
98
+ }
99
+
100
+ @mixin box-orient($v, $prefixes: $default-prefixes-box) {
101
+ @include prefix(box-orient,$v,$prefixes);
102
+ }
103
+
104
+ @mixin box-align($v, $prefixes: $default-prefixes-box) {
105
+ @include prefix(box-align,$v,$prefixes);
106
+ }
107
+
108
+ @mixin box-flex($v, $prefixes: $default-prefixes-box) {
109
+ @include prefix(box-flex,$v,$prefixes);
110
+ }
111
+
112
+ @mixin box-flex-group($v, $prefixes: $default-prefixes-box) {
113
+ @include prefix(box-flex-group,$v,$prefixes);
114
+ }
115
+
116
+ @mixin box-ordinal-group($v, $prefixes: $default-prefixes-box) {
117
+ @include prefix(box-ordinal-group,$v,$prefixes);
118
+ }
119
+
120
+ @mixin box-direction($v, $prefixes: $default-prefixes-box) {
121
+ @include prefix(box-direction,$v,$prefixes);
122
+ }
123
+
124
+ @mixin box-lines($v, $prefixes: $default-prefixes-box) {
125
+ @include prefix(box-direction,$v,$prefixes);
126
+ }
127
+
128
+ @mixin box-pack($v, $prefixes: $default-prefixes-box) {
129
+ @include prefix(box-direction,$v,$prefixes);
130
+ }
131
+
132
+ /* Box Sizing
133
+ ---------------------------------------- */
134
+
135
+ $default-prefixes-box-sizing: -webkit, -moz;
136
+
137
+ @mixin box-sizing($v, $prefixes: $default-prefixes-box-sizing) {
138
+ @include prefix(box-sizing,$v,$prefixes);
139
+ }
140
+
141
+ /* Columns
142
+ ---------------------------------------- */
143
+
144
+ $default-prefixes-columns: -webkit, -moz;
145
+
146
+ @mixin column-count($v, $prefixes: $default-prefixes-columns) {
147
+ @include prefix(column-count,$v,$prefixes);
148
+ }
149
+
150
+ @mixin column-gap($v, $prefixes: $default-prefixes-columns) {
151
+ @include prefix(column-gap,$v,$prefixes);
152
+ }
153
+
154
+ @mixin column-width($v, $prefixes: $default-prefixes-columns) {
155
+ @include prefix(column-width,$v,$prefixes);
156
+ }
157
+
158
+ @mixin column-rule-width($v, $prefixes: $default-prefixes-columns) {
159
+ @include prefix(column-rule-width,$v,$prefixes);
160
+ }
161
+
162
+ @mixin column-rule-style($v, $prefixes: $default-prefixes-columns) {
163
+ @include prefix(column-rule-style,$v,$prefixes);
164
+ }
165
+
166
+ @mixin column-rule-color($v, $prefixes: $default-prefixes-columns) {
167
+ @include prefix(column-rule-color,$v,$prefixes);
168
+ }
169
+
170
+ @mixin column-rule($v, $prefixes: $default-prefixes-columns) {
171
+ @include prefix(column-rule,$v,$prefixes);
172
+ }
173
+
174
+ /* Transforms
175
+ ---------------------------------------- */
176
+
177
+ $default-prefixes-transform: -webkit, -moz;
178
+
179
+ // @see http://www.w3.org/TR/css3-2d-transforms/#transform-property
180
+ @mixin transform($v, $prefixes:$default-prefixes-transform) {
181
+ @include prefix(transform,$v,$prefixes);
182
+ }
183
+
184
+ // @see http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
185
+ @mixin transform-origin($v, $prefixes:$default-prefixes-transform) {
186
+ @include prefix(transform-origin,$v,$prefixes);
187
+ }
188
+
189
+ // @see http://www.w3.org/TR/css3-3d-transforms/#transform-style
190
+ @mixin transform-style($v, $prefixes:$default-prefixes-transform) {
191
+ @include prefix(transform-style,$v,$prefixes);
192
+ }
193
+
194
+ // @see http://www.w3.org/TR/css3-3d-transforms/#perspective
195
+ @mixin perspective-origin($v, $prefixes:$default-prefixes-transform) {
196
+ @include prefix(perspective-origin,$v,$prefixes);
197
+ }
198
+
199
+ // @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility
200
+ @mixin backface-visibility($v, $prefixes:$default-prefixes-transform) {
201
+ @include prefix(backface-visibility,$v,$prefixes);
202
+ }
203
+
204
+ /* Transitions
205
+ ---------------------------------------- */
206
+
207
+ /*
208
+ @see http://www.w3.org/TR/css3-transitions/
209
+ */
210
+
211
+ $default-prefixes-transition: -webkit, -moz;
212
+
213
+ @mixin transition-property($v, $prefixes:$default-prefixes-transform) {
214
+ @include prefix(transition-property,$v,$prefixes);
215
+ }
216
+
217
+ @mixin transition-duration($v, $prefixes:$default-prefixes-transform) {
218
+ @include prefix(transition-duration,$v,$prefixes);
219
+ }
220
+
221
+ @mixin transition-timing-function($v, $prefixes:$default-prefixes-transform) {
222
+ @include prefix(transition-timing-function,$v,$prefixes);
223
+ }
224
+
225
+ @mixin transition-delay($v, $prefixes:$default-prefixes-transform) {
226
+ @include prefix(transition-delay,$v,$prefixes);
227
+ }
228
+
229
+ @mixin transition($v, $prefixes:$default-prefixes-transform) {
230
+ @include prefix(transition,$v,$prefixes);
231
+ }
@@ -0,0 +1 @@
1
+ @import 'accessibility/hide-content';
@@ -0,0 +1 @@
1
+ @import 'forms/search-fields';
@@ -0,0 +1,2 @@
1
+ @import 'images/image-rendering';
2
+ @import 'images/image-replace';
@@ -0,0 +1,4 @@
1
+ @import 'layout/center';
2
+ @import 'layout/clear-floats';
3
+ @import 'layout/force-scrollbars';
4
+ @import 'layout/media';
@@ -0,0 +1,2 @@
1
+ @import 'legacy/has-layout';
2
+ @import 'legacy/inline-block';
@@ -0,0 +1 @@
1
+ @import 'mobile/fixed-text';
@@ -0,0 +1,2 @@
1
+ @import 'print/append-content';
2
+ @import 'print/text';
@@ -0,0 +1 @@
1
+ @import 'text/text-rendering';
@@ -0,0 +1,20 @@
1
+ /* Hide for both screenreaders and browsers
2
+ css-discuss.incutio.com/wiki/Screenreader_Visibility */
3
+ @mixin hide-from-all {
4
+ display:none;
5
+ visibility: hidden;
6
+ }
7
+
8
+ /* Hide only visually, but have it available for screenreaders
9
+ www.webaim.org/techniques/css/invisiblecontent/
10
+ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
11
+ @mixin screenreaders-only {
12
+ position: absolute !important;
13
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
14
+ clip: rect(1px, 1px, 1px, 1px);
15
+ }
16
+
17
+ /* Hide visually and from screenreaders, but maintain layout */
18
+ @mixin invisible-with-layout {
19
+ visibility: hidden;
20
+ }
@@ -0,0 +1,13 @@
1
+ /*
2
+ Make webkit render the search input like a normal text field
3
+ */
4
+ @mixin reset-search-field {
5
+ -webkit-appearance:textfield;
6
+ ::-webkit-search-decoration {
7
+ display:none
8
+ }
9
+ }
10
+
11
+
12
+
13
+