-
-
Notifications
You must be signed in to change notification settings - Fork 348
/
PHILOSOPHY.html
354 lines (270 loc) · 12.1 KB
/
PHILOSOPHY.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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Philosophy | Susy Documentation</title>
<link href="assets/img/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/webpack/app_styles.min.css" />
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" hidden>
<symbol id="icon-logo" viewBox="0 0 16 16">
<path d="M.2 8L0 7.8v-.2C.8 6.9 1.9 5.9 2.7 5l.4.3c-.5.8-1.1 1.6-1.8 2.3 1 1.2 1 1.3 1.7 2.4l-.4.3c-.4-.4-.5-.6-1-1C1 8.6 1.1 8.7.2 8zM13 10c.6-1.1.7-1.1 1.7-2.4-.6-.6-1.3-1.5-1.7-2.3l.3-.3c.8.8 1.8 1.8 2.7 2.6v.2l-.8.7c-.3.3-1.2 1.1-1.8 1.7L13 10z"/><path d="M2.6 13.1H3c.9 0 1.1-.2 1.1-1.4V4.2c0-1.1-.2-1.4-1.1-1.4h-.4v-.6h4.5v.7h-.3c-.9 0-1.1.2-1.1 1.4v3.2h4.6V4.2c0-1.1-.2-1.4-1.1-1.4h-.3v-.6h4.5v.7H13c-.9 0-1.1.2-1.1 1.4v7.5c0 1.1.2 1.4 1.1 1.4h.4v.7H8.9v-.7h.3c.9 0 1.1-.2 1.1-1.4V8.2H5.7v3.5c0 1.1.2 1.4 1.1 1.4h.3v.7H2.6v-.7z"/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 28">
<path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/>
</symbol>
</svg>
<div data-region="app">
<header data-region="banner">
<button data-nav-toggle data-toggle="button" aria-controls="nav" aria-pressed="false" type="button" data-toggle-synced="false">
<svg data-icon="menu" data-icon-size="nav-icon" ><title>menu</title><use xlink:href="#icon-menu" />
</svg>
</button>
<div class="project-title">
<a href="index.html" rel="home" class="project-name">Susy</a>
<span class="project-version">3.0.6</span>
</div>
</header>
<div data-region="container">
<nav data-region="nav" data-toggle="target" id="nav" data-target-id="nav" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false">
<form action="search.html">
<input type="text" name="q" placeholder="Search…" required minlength="3">
</form>
<div class="nav-subsection">
<h3 class="nav-home">
<a href="index.html" data-nav="is-not-active">Susy</a>
</h3>
<ul>
<li class="nav-item">
<a href="PHILOSOPHY.html" data-nav="is-active">Philosophy</a>
</li>
<li class="nav-item">
<a href="CHANGELOG.html" data-nav="is-not-active">Changelog</a>
</li>
<li class="nav-item">
<a href="CONTRIBUTING.html" data-nav="is-not-active">Contributing</a>
</li>
</ul>
</div>
<div class="nav-subsection">
<ul>
<li class="nav-subsection">
<h3 class="nav-title">Public Grid API</h3>
<ul>
<li class="nav-item">
<a href="config.html" data-nav="is-not-active">Grid Configuration</a>
</li>
<li class="nav-item">
<a href="api.html" data-nav="is-not-active">Grid Functions</a>
</li>
</ul>
</li>
<li class="nav-subsection">
<h3 class="nav-title">Extras</h3>
<ul>
<li class="nav-item">
<a href="plugin-utils.html" data-nav="is-not-active">Extending Susy</a>
</li>
<li class="nav-item">
<a href="su-math.html" data-nav="is-not-active">Su: Core Math<span class="widont"> </span>Engine</a>
</li>
<li class="nav-item">
<a href="plugin_svg-grid.html" data-nav="is-not-active">Plugin: SVG Grid<span class="widont"> </span>Image</a>
</li>
</ul>
</li>
<li class="nav-subsection">
<h3 class="nav-title">Internal Functions (Private)</h3>
<ul>
<li class="nav-item">
<a href="_normal.html" data-nav="is-not-active">Susy Normalization</a>
</li>
<li class="nav-item">
<a href="_parser.html" data-nav="is-not-active">Susy Syntax<span class="widont"> </span>Parser</a>
</li>
<li class="nav-item">
<a href="_validation.html" data-nav="is-not-active">Su Input<span class="widont"> </span>Validation</a>
</li>
<li class="nav-item">
<a href="_version.html" data-nav="is-not-active">Versioning</a>
</li>
</ul>
</li></ul>
</div>
<div class="nav-subsection">
<h3 class="nav-title">
External Links
</h3>
<ul>
<li class="nav-item">
<a href="http://oddbird.net/susy/" data-nav="is-not-active">Susy Website</a>
</li>
<li class="nav-item">
<a href="http://twitter.com/sasssusy/" data-nav="is-not-active">Twitter @SassSusy</a>
</li>
<li class="nav-item">
<a href="http://oddbird.net/2017/06/28/susy3" data-nav="is-not-active">Intro to<span class="widont"> </span>Susy3</a>
</li>
<li class="nav-item">
<a href="http://susy.readthedocs.io" data-nav="is-not-active">Susy2 Documentation</a>
</li>
<li class="nav-item">
<a href="http://oddbird.net/" data-nav="is-not-active">OddBird</a>
</li>
</ul>
</div>
<aside class="footer-credit">
<a href="http://oddbird.net/herman/" class="footer-icon">
<svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" />
</svg>
</a>
<span>
Documented with
<a href="http://oddbird.net/herman/" class="footer-link">
Herman
</a>
</span>
<span>
by
<a href="http://oddbird.net/" class="footer-link">
OddBird
</a>
</span>
</aside>
</nav>
<main data-region="main">
<nav class="breadcrumb">
<a href="index.html" >Susy</a> »
<strong>Philosophy</strong>
</nav>
<div data-page="PHILOSOPHY">
<div class="text-block">
<h1 id="the-susy3-philosophy">The Susy3 Philosophy</h1>
<p><strong>We no longer recommend using Susy as a primary layout<span class="widont"> </span>solution.</strong></p>
<p>With the advent of <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> and the <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Grid module</a>,
there are fewer and fewer reasons
to use a grid library like Susy,
and that’s wonderful!
Grid libraries were always a temporary fix,
waiting for the browser to take over.
Still, not everyone can play with the latest specs,
and there will always be edge-cases
that require manual<span class="widont"> </span>grid-math.</p>
<p>Susy3 is trimmed down to the most basic features:
a lightweight library of functions
that can be used along with float, flexbox,
or any other CSS.
Susy can be used for on-the-fly grid-math,
or used to generate a class-based system –
so that your grids are built to spec
for the requirements of your team and<span class="widont"> </span>application.</p>
<h2 id="not-for-everyone">Not For Everyone</h2>
<p>Much of the power and flexibility in Susy
is now available directly in the browser
with additional benefits and lower<span class="widont"> </span>overhead.</p>
<h3 id="css-grids">CSS Grids</h3>
<p>The CSS Grid module is relatively new,
but has gained <a href="https://caniuse.com/#feat=css-grid">browser-support</a> quickly –
and there is no third-party tool available
with the same power and simplicity it provides.
Rachel Andrew and Jen Simmons have compiled
a comprehensive set of articles, examples,
and even copy-paste templates (with fallbacks built in)
on their <a href="http://gridbyexample.com">gridbyexample.com</a><span class="widont"> </span>site.</p>
<h3 id="flexbox">Flexbox</h3>
<p>Flexbox also provides intrinsic sizing and relationships,
with near-complete <a href="https://caniuse.com/#feat=flexbox">support in modern browsers</a>
which can help make strict/explicit grids<span class="widont"> </span>obsolete.</p>
<h3 id="fractions">Fractions</h3>
<p>If you need a grid system
that works with legacy browsers,
I recommend an approach similar to <a href="https://github.com/stubbornella/oocss/wiki/Grids">OOCSS</a>.
While their code is out of date,
the approach is worth adopting to modern<span class="widont"> </span>practices:</p>
<ul>
<li>Remove gutters (or use padding for gutters)
to dramatically simplify the grid<span class="widont"> </span>math.</li>
<li>Use simple fractions to create a robust nested<span class="widont"> </span>grid.</li>
<li>Optionally create class-names as<span class="widont"> </span>needed.</li>
</ul>
<p>Those techniques can be used with floats, flexbox,
display-tables, and more.
In Sass it might looks something like<span class="widont"> </span>this:</p>
<pre><code class="lang-scss">.span1of2 {
width: percentage(1/2);
}
.span3of12 {
width: percentage(3/12);
}
</code></pre>
<p>This is the same technique used by
previous versions of Susy
when you set <code>gutter-position</code> to <code>inside</code> or <code>inside-static</code>.
In order to create a class-based system in Sass,
you can run a loop like this<span class="widont"> </span>one:</p>
<pre><code class="lang-scss">$columns: 12;
[class^='span'] {
float: left;
}
@for $i from 1 through $columns {
.span#{$i}of#{$columns} {
width: percentage($i / $columns);
}
}
</code></pre>
<p><em>Without ever loading a third-party tool</em>,
you can design your own grid system
in a few lines of<span class="widont"> </span>code.</p>
<h2 id="susy-as-a-fallback">Susy as a<span class="widont"> </span>Fallback</h2>
<p>Susy3 works similarly
to the <code>percentage()</code> technique,
but provides support for margin-gutters
and (simple) mixed-unit<span class="widont"> </span>grids:</p>
<pre><code class="lang-scss">.span1of2 {
width: span(1 of 2);
margin-right: gutter(of 2);
}
.span3of12 {
width: span(3 of 12);
margin: 0 (gutter() / 2);
}
</code></pre>
<p>When the math gets complicated,
Susy can be there to step in –
but <strong>there is no need for Susy if you can keep the math<span class="widont"> </span>simple</strong>.</p>
<h3 id="no-mixins">No Mixins</h3>
<p>The biggest change in Susy3 is that we’ve removed all the mixins.
On initial upgrade, most projects will run into errors
with missing mixins –
<code>container</code>, <code>span</code>, or otherwise.
While mixins can provide a nice shortcut for common use-cases,
they also make the actual CSS more opaque,
and quickly become out-of-date –
discouraging incremental improvements to your<span class="widont"> </span>application.</p>
<p>In a world with growing browser support for
any number of powerful CSS layout techniques,
it would be neglegent of us to push everyone
into a single one-size-fits-all solution.
There are other frameworks that provide that service,
but Susy was never intended to be one of<span class="widont"> </span>them.</p>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="http://oddbird.net/2017/06/28/susy3">Welcome to Susy3</a></li>
<li><a href="http://oddbird.net/2017/06/13/susy-spread">Understanding <code>Spread</code> in Susy</a></li>
<li><a href="http://oddbird.net/2017/09/25/susy-use">Media Queries in<span class="widont"> </span>Susy</a></li>
</ul>
<p>See our full list of <a href="http://oddbird.net/susy/articles/">Susy News & Tutorials</a>
for more<span class="widont"> </span>details.</p>
</div>
</div>
</main>
</div>
</div>
<script type="text/javascript" src="assets/webpack/runtime.min.js"></script>
<script type="text/javascript" src="assets/webpack/common.min.js"></script>
<script type="text/javascript" src="assets/webpack/app.min.js"></script>
</body>
</html>