forked from Jellyvision/spread
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (191 loc) · 8.63 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Spread: The Golden Grid System with Compass</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="stylesheets/screen.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,800' rel=
'stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="images/favicon.png">
<script src="GGS.js"></script>
</head>
<body>
<a href="https://github.com/Jellyvision/spread"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="wrapper secondary">
<div class="container three-quarters">
<div class="columns-1">
<img class="logo center" src="images/spread-logo.svg">
<div class="column center gutter-pad">
<h1><span class="highlight uppercase">Spread</span></h1>
<h2>Based on <a href="http://www.goldengridsystem.com" target=
"_blank">The Golden Grid System</a></h2>
<h2>Implemented with <a href=
"http://compass-style.org/reference/compass/typography/vertical_rhythm/"
target="_blank">Compass SASS</a></h2>
</div>
</div>
</div>
</div>
<div class="wrapper primary">
<div class="container three-quarters">
<div class="columns-1">
<div class="column gutter-pad">
<h3 class="center">Why a Grid?</h3>
</div>
</div>
<div class="columns-2">
<!-- Columns -->
<div class="column mobile-wide">
<div class="gutter-pad">
<h4>Mobile to Desktop</h4>
<p>This is a completely responsive, fluid grid system. Rooted in a
century of typography and executed through the basic math of the
Golden Ratio, consistent behavior of layout elements removes a vast
majority of questions pertaining to <b>"how will this look on
mobile?"</b></p>
</div>
</div><!-- Vertical Rhythm -->
<div class="column mobile-wide">
<div class="gutter-pad">
<h4>Design to Development</h4>
<p>The end of communicating in <b>pixels</b> as we know it. Set the
font size for the application, the rest is all relative. Columns
and baselines - <b>that's all you get.</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper tertiary">
<div class="container three-quarters">
<div class="columns-1">
<div class="column mobile-wide gutter-pad">
<h3 class="center">How do I use this?</h3>
</div>
</div>
<div class="columns-2">
<!-- Columns: Gutters -->
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>DIV Hierarchy</h4>
<p>There's a pre-established structure for layout, from highest to
lowest level. Any kind of modifications would simply be nested SASS
classes pertaining to these structural elements. The structure is
fairly simple, and goes in this order:</p>
<ol>
<li>Wrapper</li>
<li>Container</li>
<li>Column Layout</li>
<li>Column</li>
<li>Gutter Pad</li>
</ol>
</div>
</div><!-- Columns: Vertical Rhythm -->
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>Columns & Gutters</h4>
<p>You can utilize the columns by generating layouts. There's a
Sass mixin built in that does all the calculations for you,
including <b>offset-x</b> and <b>wide-x</b> classes! Just call the
mixin by using:<br>
<br>
<b>@include column-calculator(x)</b><br>
<br>
Where X is the number of columns you want. Each column layout e.g.
<b>"columns-2"</b>, <b>"columns-4"</b>, etc., exists solely to give
style context to a <b>"column"</b> div.</p>
</div>
</div>
</div>
<div class="columns-2">
<!-- Vertical Rhythm: Rhythm Mixin -->
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>@include <a href=
"http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-rhythm"
target="_blank">vertical-rhythm</a></h4>
<p>Part of the Compass library, the vertical-rhythm mixin sets
vertical padding and margin based on the calculated baseline
heights. An example might look like this:</p>
<ul>
<li><code>@include rhythm (0, 0, 1, 0, 16px)</code></li>
<li><code>@include rhythm (0, 0, 1, 0, $base-font-size*1.2)</code></li>
</ul>
<p>Each argument in the mixin sets rhythm values in the following
order:</p>
<ol>
<li>Margin-Top</li>
<li>Padding-Top</li>
<li>Padding-Bottom</li>
<li>Margin-Bottom</li>
<li>Font Size (in pixels)</li>
</ol>
</div>
</div><!-- Vertical Rhythm: Font Size Mixin -->
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>@include <a href=
"http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-adjust-font-size-to"
target="_blank">adjust-font-size-to</a></h4>
<p>Rather than calling a <b>font-size</b> for each element, you can
just use the <b>adjust-font-size-to</b> mixin to set the font size
in pixels and designate its line height relative to the established
baseline. An example would look like this:</p>
<ul>
<li><code>@include adjust-font-size-to(16px,1)</code></li>
<li><code>@include adjust-font-size-to($base-font-size*1.2,1)</code></li>
</ul>
<p>If you call one of these mixins, <b>vertical-rhythm</b> or
<b>adjust-font-size-to</b>, be sure to call them both, even if it's
to pass all 0's. This will assure that all page elements are
aligned to the <b>baseline grid</b>.</p>
</div>
</div>
</div>
<div class="columns-2">
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>Media Queries</h4>
<p>Break points for various screen sizes are established at 320,
640, 1280, and 2560 pixels from mobile to desktop respectively.
These sizes are established as variables titled:</p>
<ul>
<li><code>@media (min-width: $width-mobile)</code></li>
<li><code>@media (min-width: $width-tablet)</code></li>
<li><code>@media (min-width: $width-desktop-small)</code></li>
<li><code>@media (min-width: $width-desktop-large)</code></li>
</ul>
<p>You can set these variables to your liking in the
<b>_global-elements.sass</b> partial. Be sure that media queries
are called in this order from smallest to largest!</p>
</div>
</div>
<div class="column mobile-wide with-trailer">
<div class="gutter-pad">
<h4>Be Patient</h4>
<p>If you've never used Compass, SASS, or a Grid System before,
don't worry. It's sort of tough at first, but just remember that
the whole thing is built on a pattern. The more exceptions you make
to the pattern, the harder it becomes to maintain. Just be patient
and experiment - you'd be surprised what you might find!</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper final">
<div class="container three-quarters">
<div class="columns-1">
<div class="column mobile-wide gutter-pad">
<h2 class="center">For Jellyvision Lab & ALEX</h2>
<p class="center">designed & developed by <a href=
"http://bit.ly/1wewIjU" target="_blank">Mike Else</a></p>
</div>
</div>
</div>
</div>
<!-- Dedicated to Andy Hass and Evan Jacover, for giving me the greatest job I'll ever have. -->
</body>
</html>