stitch 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
@@ -0,0 +1,26 @@
1
+ /*
2
+ Sharpen an image if it has become blurry due to upscaling or downscaling
3
+ @see https://developer.mozilla.org/en/CSS/image-rendering
4
+ */
5
+ @mixin sharpen-image {
6
+ image-rendering:-moz-crisp-edges;
7
+ -ms-interpolation-mode:nearest-neighbor; /* IE 7+ */
8
+ }
9
+
10
+ /*
11
+ When photos are upscaled or downscaled, they often get blurry. Don't use
12
+ this on flat color images, they will still appear blurry.
13
+ @see https://developer.mozilla.org/en/CSS/image-rendering
14
+ */
15
+ @mixin high-quality-image {
16
+ image-rendering:optimizeQuality;
17
+ -ms-interpolation-mode:bicubic; /* IE 7+ */
18
+ }
19
+
20
+ /*
21
+ Optimizes the rendering on images so they
22
+ appear faster, but at a lower quality. Useful for <video>
23
+ */
24
+ @mixin low-quality-image {
25
+ image-rendering:optimizeSpeed;
26
+ }
@@ -0,0 +1,17 @@
1
+ /*
2
+ Removes any text from an element and replaces it with an image
3
+ */
4
+ .f-ir {
5
+ display : block;
6
+ text-indent : -9999em;
7
+ overflow : hidden;
8
+ background-repeat : no-repeat;
9
+ text-align : left;
10
+ direction : ltr;
11
+ }
12
+
13
+ @mixin image-replace($img) {
14
+ @extend .f-ir;
15
+ height:image_height($img);
16
+ width:image_width($img);
17
+ }
@@ -0,0 +1,5 @@
1
+ @mixin center-horizontal($width, $margin-top:0, $margin-bottom:0) {
2
+ margin:$margin-top auto $margin-bottom auto;
3
+ width:$width;
4
+ float:none;
5
+ }
@@ -0,0 +1,27 @@
1
+ /* Allows a parent element to enclose the full height of the children
2
+ * elements when all of the children are floated.
3
+ * Normally the parent will have no height.
4
+ * @see http://nicolasgallagher.com/micro-clearfix-hack/
5
+ */
6
+
7
+ @mixin clear-floats($legacy:false) {
8
+ // IE6/7 support
9
+ @if $legacy == true {
10
+ &::before,
11
+ &::after {
12
+ content:"";
13
+ display:block;
14
+ }
15
+ &::after {
16
+ clear:both;
17
+ }
18
+ zoom:1;
19
+ }
20
+ @if $legacy == false {
21
+ &::after {
22
+ content:"";
23
+ display:block;
24
+ clear:both;
25
+ }
26
+ }
27
+ }
@@ -0,0 +1,3 @@
1
+ @mixin force-scrollbars {
2
+ height:101%;
3
+ }
@@ -0,0 +1,23 @@
1
+ /*
2
+ For blocks of content with media beside them.
3
+ Adding overflow hidden changes the way the content interacts with the float
4
+ */
5
+
6
+ /*
7
+ Apply it to the wrapper div
8
+ <div>
9
+ <img class="content-image" />
10
+ <div class="content"></div>
11
+ </div>
12
+ */
13
+
14
+ @mixin content-with-media($position: left, $spacing:20px, $image: '.content-image', $content: '.content') {
15
+ #{unquote($image)} {
16
+ float:$position;
17
+ margin-#{opposite-position($position)}:$spacing;
18
+ }
19
+ #{unquote($content)} {
20
+ overflow:hidden;
21
+ float:none;
22
+ }
23
+ }
@@ -0,0 +1,6 @@
1
+ /*
2
+ Triggers hasLayout for IE7 and below. Fixes most IE issues
3
+ */
4
+ @mixin has-layout {
5
+ zoom:1;
6
+ }
@@ -0,0 +1,15 @@
1
+ /*
2
+ Cross-browser inline-block.
3
+ */
4
+ @mixin inline-block {
5
+ & {
6
+ *display : inline;
7
+ }
8
+ display : -moz-inline-box;
9
+ -moz-box-orient : vertical;
10
+ display : inline-block;
11
+ vertical-align : middle;
12
+ & {
13
+ *vertical-align : auto;
14
+ }
15
+ }
@@ -0,0 +1,7 @@
1
+ /*
2
+ Prevents the resizing of text. Useful for mobile web apps
3
+ */
4
+ @mixin fixed-sized-text {
5
+ -webkit-text-size-adjust:none;
6
+ -ms-text-size-adjust:none;
7
+ }
@@ -0,0 +1,13 @@
1
+ /*
2
+ Adds URLs and abbreviations to the end of links in printed documents
3
+ */
4
+
5
+ @mixin append-content {
6
+ a:after {
7
+ content:" (" attr(href) ")";
8
+ }
9
+ abbr:after {
10
+ content: " (" attr(title) ")";
11
+ }
12
+ }
13
+
@@ -0,0 +1,36 @@
1
+ /*
2
+ Sets up some sensible text defaults for printed pages
3
+ */
4
+
5
+ @mixin printable-text {
6
+ background:transparent !important;
7
+ color:#444 !important;
8
+ text-shadow:none !important;
9
+
10
+ pre,
11
+ blockquote {
12
+ page-break-inside: avoid;
13
+ }
14
+
15
+ img {
16
+ page-break-inside:avoid;
17
+ }
18
+
19
+ p,
20
+ h2,
21
+ h3 {
22
+ orphans:3;
23
+ widows:3;
24
+ }
25
+
26
+ h2,
27
+ h3 {
28
+ page-break-after:avoid;
29
+ }
30
+
31
+ a,
32
+ a:visited {
33
+ color: #444 !important;
34
+ text-decoration: underline;
35
+ }
36
+ }
@@ -0,0 +1,9 @@
1
+ /*
2
+ Nicer text rendering in webkit and gecko
3
+ @see http://www.aestheticallyloyal.com/public/optimize-legibility/
4
+ @see http://files.christophzillgens.com/webkit-font-smoothing.html
5
+ */
6
+ @mixin improve-text-rendering {
7
+ text-rendering:optimizeLegibility;
8
+ -webkit-font-smoothing:subpixel-antialiased;
9
+ }
@@ -0,0 +1,243 @@
1
+ /* Block Elements
2
+ ---------------------------------------- */
3
+ /*
4
+ Reset all COMMON block elements.
5
+ If you're using uncommon or invalid elements you will need to reset them yourself
6
+ */
7
+ address,
8
+ article,
9
+ aside,
10
+ audio,
11
+ blockquote,
12
+ body,
13
+ button,
14
+ dd,
15
+ details,
16
+ div,
17
+ dl,
18
+ dt,
19
+ fieldset,
20
+ figcaption,
21
+ figure,
22
+ footer,
23
+ form,
24
+ h1,
25
+ h2,
26
+ h3,
27
+ h4,
28
+ h5,
29
+ h6,
30
+ header,
31
+ hgroup,
32
+ hr,
33
+ input,
34
+ label,
35
+ legend,
36
+ li,
37
+ nav,
38
+ ol,
39
+ p,
40
+ pre,
41
+ section,
42
+ select,
43
+ table,
44
+ textarea,
45
+ th,
46
+ td,
47
+ ul,
48
+ video
49
+ {
50
+ margin : 0;
51
+ padding : 0;
52
+ border : 0;
53
+ background : none;
54
+ }
55
+
56
+ /* Forms
57
+ ---------------------------------------- */
58
+ input,
59
+ label,
60
+ select,
61
+ button,
62
+ textarea {
63
+ display : inline-block;
64
+ vertical-align : middle;
65
+ white-space : normal;
66
+ }
67
+
68
+ /* Hand cursor on clickable input elements */
69
+ label,
70
+ input[type=button],
71
+ input[type=submit],
72
+ button {
73
+ cursor: pointer;
74
+ }
75
+
76
+ /*
77
+ Form elements have different box-sizing models by default.
78
+ This will fix form styling woes across webkit, gecko and trident
79
+ */
80
+ input,
81
+ textarea {
82
+ -webkit-box-sizing : content-box;
83
+ -moz-box-sizing : content-box;
84
+ box-sizing : content-box;
85
+ }
86
+
87
+ button,
88
+ input[type=reset],
89
+ input[type=button],
90
+ input[type=submit],
91
+ input[type=checkbox],
92
+ input[type=radio],
93
+ select {
94
+ -webkit-box-sizing : border-box;
95
+ -moz-box-sizing : border-box;
96
+ box-sizing : border-box;
97
+ }
98
+
99
+ /* Standardize radio and checkbox sizes */
100
+ input[type=checkbox],
101
+ input[type=radio] {
102
+ width : 13px;
103
+ height : 13px;
104
+ }
105
+
106
+ /*
107
+ Make buttons play nice in IE:
108
+ @see www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
109
+ */
110
+ button,
111
+ input[type="reset"],
112
+ input[type="button"],
113
+ input[type="submit"] {
114
+ overflow : visible;
115
+ width : auto;
116
+ }
117
+
118
+ /* Turn off scroll bars in IE unless needed */
119
+ textarea {
120
+ overflow : auto;
121
+ }
122
+
123
+ /* HTML5 elements
124
+ ---------------------------------------- */
125
+ /*
126
+ So that browsers render the new elements correctly. Only block elements need to be worried about as browsers render unknown elements as inline by default.
127
+ */
128
+ article, aside, details, figcaption, figure,
129
+ footer, header, hgroup, menu, nav, section {
130
+ display:block
131
+ }
132
+
133
+ /* Text Elements
134
+ ---------------------------------------- */
135
+ /*
136
+ Reset all COMMON text elements.
137
+ If you're using uncommon or invalid elements you have to reset them yourself
138
+ */
139
+ a,
140
+ abbr,
141
+ b,
142
+ body,
143
+ br,
144
+ cite,
145
+ code,
146
+ dfn,
147
+ em,
148
+ h1,
149
+ h2,
150
+ h3,
151
+ h4,
152
+ h5,
153
+ h6,
154
+ img,
155
+ input,
156
+ kbd,
157
+ label,
158
+ mark,
159
+ pre,
160
+ q,
161
+ samp,
162
+ select,
163
+ small,
164
+ span,
165
+ strong,
166
+ sub,
167
+ sup,
168
+ textarea,
169
+ var
170
+ {
171
+ font-size : 100%;
172
+ font-family : sans-serif;
173
+ font-style : normal;
174
+ font-weight : normal;
175
+ font-variant : normal;
176
+ color : #000;
177
+ vertical-align : baseline;
178
+ text-decoration : none;
179
+ }
180
+
181
+ blockquote:before,
182
+ blockquote:after,
183
+ q:before,
184
+ q:after {
185
+ content: "";
186
+ content: none;
187
+ }
188
+
189
+ /*
190
+ Make lists display inline and not like list items
191
+ You must explicitly declare lists in copy to look the way they do
192
+ It will save you a whole lot of code
193
+ */
194
+ li {
195
+ list-style: none;
196
+ display: block;
197
+ }
198
+
199
+ /*
200
+ Make links look like normal text. This way you don't need to
201
+ override styles when you create buttons and wrap blocks in links
202
+ */
203
+ a {
204
+ &:hover,
205
+ &:active {
206
+ outline: none;
207
+ }
208
+ }
209
+
210
+ /* Set sub, sup without affecting line-height: gist.github.com/413930 */
211
+ sub,sup {
212
+ font-size: 75%;
213
+ line-height: 0;
214
+ position: relative;
215
+ }
216
+
217
+ sup {
218
+ top: -0.5em;
219
+ }
220
+
221
+ sub {
222
+ bottom: -0.25em;
223
+ }
224
+
225
+ /* Tables
226
+ ---------------------------------------- */
227
+ table {
228
+ border-collapse: collapse;
229
+ border-spacing: 0;
230
+ }
231
+
232
+ /* Media
233
+ ---------------------------------------- */
234
+ /* Nicer image sizing in IE */
235
+ img {
236
+ -ms-interpolation-mode: bicubic
237
+ }
238
+
239
+ /* fluid images and objects */
240
+ img,object,embed,video {
241
+ max-width:100%;
242
+ display:block;
243
+ }