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.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.md +86 -0
- data/Rakefile +2 -0
- data/lib/stitch.rb +6 -0
- data/lib/stitch/version.rb +3 -0
- data/stitch.gemspec +21 -0
- data/stylesheets/stitch/_helpers.scss +1 -0
- data/stylesheets/stitch/_patterns.scss +8 -0
- data/stylesheets/stitch/helpers/_css3.scss +231 -0
- data/stylesheets/stitch/patterns/_accessibility.scss +1 -0
- data/stylesheets/stitch/patterns/_forms.scss +1 -0
- data/stylesheets/stitch/patterns/_images.scss +2 -0
- data/stylesheets/stitch/patterns/_layout.scss +4 -0
- data/stylesheets/stitch/patterns/_legacy.scss +2 -0
- data/stylesheets/stitch/patterns/_mobile.scss +1 -0
- data/stylesheets/stitch/patterns/_print.scss +2 -0
- data/stylesheets/stitch/patterns/_text.scss +1 -0
- data/stylesheets/stitch/patterns/accessibility/_hide-content.scss +20 -0
- data/stylesheets/stitch/patterns/forms/_search-fields.scss +13 -0
- data/stylesheets/stitch/patterns/images/_image-rendering.scss +26 -0
- data/stylesheets/stitch/patterns/images/_image-replace.scss +17 -0
- data/stylesheets/stitch/patterns/layout/_center.scss +5 -0
- data/stylesheets/stitch/patterns/layout/_clear-floats.scss +27 -0
- data/stylesheets/stitch/patterns/layout/_force-scrollbars.scss +3 -0
- data/stylesheets/stitch/patterns/layout/_media.scss +23 -0
- data/stylesheets/stitch/patterns/legacy/_has-layout.scss +6 -0
- data/stylesheets/stitch/patterns/legacy/_inline-block.scss +15 -0
- data/stylesheets/stitch/patterns/mobile/_fixed-text.scss +7 -0
- data/stylesheets/stitch/patterns/print/_append-content.scss +13 -0
- data/stylesheets/stitch/patterns/print/_text.scss +36 -0
- data/stylesheets/stitch/patterns/text/_text-rendering.scss +9 -0
- data/stylesheets/stitch/reset/_desktop.scss +243 -0
- data/templates/project/layouts/desktop/_copy.scss +140 -0
- data/templates/project/layouts/desktop/_forms.scss +3 -0
- data/templates/project/layouts/desktop/_functions.scss +3 -0
- data/templates/project/layouts/desktop/_global.scss +52 -0
- data/templates/project/layouts/desktop/_layout.scss +4 -0
- data/templates/project/layouts/desktop/_modules.scss +4 -0
- data/templates/project/layouts/desktop/master.scss +18 -0
- data/templates/project/layouts/mobile/_global.scss +3 -0
- data/templates/project/layouts/mobile/master.scss +2 -0
- data/templates/project/layouts/print/_global.scss +6 -0
- data/templates/project/layouts/print/_layout.scss +0 -0
- data/templates/project/layouts/print/master.scss +2 -0
- data/templates/project/legacy.scss +4 -0
- data/templates/project/manifest.rb +31 -0
- data/templates/project/master.scss +8 -0
- 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,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,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,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
|
+
}
|