-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (139 loc) · 7.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Susy Demo</title>
</head>
<body>
<h1>Susy Demo</h1>
<div class="container">
<h3>Basic Layout</h3>
<main class="example__basic--main">
<p>"Mobile First" approach: develop for mobile browsers. Start small, grow big. "<a href="http://zurb.com/word/progressive-enhancement" target="_blank">The more a design hinges on viewing requirements, the less flexible it becomes</a>."</p>
<p>"Progressive enhancement" is the idea of designing from a most common denominator - what most users can see - and building out. It’s also the fast track to mobile-first design.</p>
<p>
Our current breakpoints:
<ul>
<li><strong>Default:</strong> Any window greater than 300px and less than 480px</li>
<li><strong>Small:</strong> Any window greater than or equal to 480px</li>
<li><strong>Medium:</strong> Any window greater than or equal to 720px</li>
<li><strong>Large:</strong> Any window greater than or equal to 960px</li>
<li><strong>XL:</strong> Any window greater than or equal to 1800px</li>
<li><strong>Content max-width:</strong> 1200px. Varies by site</li>
</ul>
</p>
<p>
<a href="http://www.leemunroe.com/designing-for-high-resolution-retina-displays/" target="_blank">Developing for retina</a>:
<ul>
<li>Use media queries for high-res CSS styles</li>
<li>Have two versions of CSS sprites: standard dimensions and @2x
<ul>
<li>Sprites have largely been replaced with custom icon fonts (see fontastic.me) or using SVGs w/ PNG fallbacks</li>
</ul>
</li>
<li>Serve up larger html-embedded images with JavaScript
<ul>
<li>Picturefill, Retina.js</li>
<li>More pixels = better display. But, more pixels doesn't necessarily have to mean 4 or 5 times more data. More detail can be accomplished with less kilobytes.</li>
<li>Downside: Having to maintain two versions of graphical assets and images.</li>
</ul>
</li>
<li>You can just use the same image assets for both standard and high-res screens
<ul>
<li>Downside: Users may have to download larger files than they actually need</li>
</ul>
</li>
</ul>
</p>
<p>
Designing for retina:
<ul>
<li>Where possible, use vectors and Smart Objects.</li>
<li>Design like you normally would, then open "modify image size" and edit your pixel dimensions to 200 percent to get the 2x view.</li>
</ul>
</p>
<p>
Things we would like to know about:
<ul>
<li>Style guide (ex: <a href="http://www.yelp.com/styleguide" target="_blank">Yelp</a>)
<ul>
<li>Headings</li>
<li>Colors</li>
<li>Typography</li>
<li>Inline element styles</li>
<li>Lists</li>
<li>Tables</li>
<li>Buttons (active, disabled, etc.)</li>
<li>Links</li>
<li>Icons</li>
<li>Components (heroes, carousel, callouts, widgets, etc.)</li>
<li>…</li>
<li>basically anything that is used on multiple pages</li>
</ul>
</li>
</ul>
</p>
</main>
<aside class="example__basic--aside">
<h4>Recent Articles</h4>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
<li><a href="#">Article 4</a></li>
</ul>
<h4>Recent Comments</h4>
<ul>
<li><a href="#">Great article</a> on <a href="#">Article 1</a></li>
<li><a href="#">You're dumb</a> on <a href="#">Article 2</a></li>
<li><a href="#">Cats</a> on <a href="#">Article 3</a></li>
<li><a href="#">Nice use of the Oxford comma!</a> on <a href="#">Article 1</a></li>
</ul>
</aside>
</div>
<div class="container">
<h3>Nested Layout</h3>
<aside class="example__nested--aside">
<h4>Recent Articles</h4>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
<li><a href="#">Article 4</a></li>
</ul>
<h4>Recent Comments</h4>
<ul>
<li><a href="#">Great article</a> on <a href="#">Article 1</a></li>
<li><a href="#">You're dumb</a> on <a href="#">Article 2</a></li>
<li><a href="#">Cats</a> on <a href="#">Article 3</a></li>
<li><a href="#">Nice use of the Oxford comma!</a> on <a href="#">Article 1</a></li>
</ul>
</aside>
<main class="example__nested--main">
<p>Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="container--inner">
<div class="nested--primary">
<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.</p>
</div>
<div class="nested--secondary">
<p>CurabiturPellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>
</div>
</div>
</main>
</div>
<div class="container">
<h3>Grid Layout</h3>
<ul class="grid-list">
<li><img src="http://placehold.it/600x200?text=Item+1"></li>
<li><img src="http://placehold.it/600x200?text=Item+2"></li>
<li><img src="http://placehold.it/600x200?text=Item+3"></li>
<li><img src="http://placehold.it/600x200?text=Item+4"></li>
<li><img src="http://placehold.it/600x200?text=Item+5"></li>
<li><img src="http://placehold.it/600x200?text=Item+6"></li>
<li><img src="http://placehold.it/600x200?text=Item+7"></li>
<li><img src="http://placehold.it/600x200?text=Item+8"></li>
</ul>
</div>
</body>
</html>