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
@@ -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
+ }