-
-
Notifications
You must be signed in to change notification settings - Fork 348
/
index.html
388 lines (299 loc) · 13.1 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
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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>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-active">Susy</a>
</h3>
<ul>
<li class="nav-item">
<a href="PHILOSOPHY.html" data-nav="is-not-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">
<div data-page="index">
<ul class="project-links">
<li class="project-link-item">
<a href="http://oddbird.net/susy" class="project-link">View Project</a>
</li>
<li class="project-link-item">
<a href="https://github.com/oddbird/susy" class="project-link">View Source</a>
</li>
</ul>
<div class="text-block">
<h1 id="power-tools-for-the-web-deprecated-">Power Tools For The Web<span class="widont"> </span>[Deprecated]</h1>
<p><strong>Susy is Deprecated. It should no longer be used on new projects, and will no longer be receiving any<span class="widont"> </span>updates.</strong></p>
<p><a href="https://badge.fury.io/js/susy"><img src="https://badge.fury.io/js/susy.svg" alt="npm version"></a><br />
<a href="https://travis-ci.org/oddbird/susy"><img src="https://travis-ci.org/oddbird/susy.png?branch=master" alt="Build Status"></a></p>
<p>Susy is a design-agnostic set of tools
for creating powerful, custom layouts.
We didn’t want another grid system
full of rules and restrictions —
we wanted a power tool
for building our own damn systems.
Version Three is trimmed down to it’s most basic components —
functions that can be used to build any grid<span class="widont"> </span>system.</p>
<ul>
<li><a href="http://oddbird.net/susy/">Susy Website</a> |
<a href="http://twitter.com/sasssusy/">@SassSusy</a></li>
<li><a href="http://oddbird.net/2017/06/28/susy3">Susy3 Intro</a> |
<a href="http://oddbird.net/2017/06/13/susy-spread">Spread in<span class="widont"> </span>Susy3</a></li>
<li><a href="http://oddbird.net/susy/docs/">Susy3 Documentation</a></li>
<li><a href="http://susy.readthedocs.io">Susy1/Susy2 Documentation</a></li>
</ul>
<h2 id="quotes">Quotes</h2>
<blockquote>
<p>“I like the idea of grids-on-demand,
rather than a strict framework.”<br />
– Chris Coyier, <a href="http://css-tricks.com/build-web-layouts-easily-susy/">CSS<span class="widont"> </span>Tricks</a></p>
</blockquote>
<blockquote>
<p>“Susy and Zendesk have been getting along magically…
It’s precisely what you need and nothing more.”<br />
— Stephany Varga, <a href="https://medium.com/zendesk-creative-blog/responsive-a-harrowing-meditation-on-the-brutal-realities-of-web-content-organization-in-5-acts-1d33ce25f062">Zendesk</a></p>
</blockquote>
<blockquote>
<p>“If you’re interested in reading Sass poetry,
be sure to look at Susy’s source code!”<br />
— Hugo Giraudel, <a href="http://www.sitepoint.com/my-favorite-sass-tools/">SitePoint</a></p>
</blockquote>
<h2 id="resources">Resources</h2>
<ul>
<li><a href="http://oddbird.net/">OddBird</a> | <a href="http://twitter.com/oddbird/">@OddBird</a></li>
<li><a href="http://oddbird.net/susy/sites/">Sites using Susy</a></li>
<li><a href="https://github.com/oddbird/susy/blob/master/CHANGELOG.md">Changelog</a></li>
<li><a href="https://github.com/oddbird/susy/blob/master/CONTRIBUTING.md">Guidelines for contributing</a></li>
<li><a href="https://github.com/oddbird/susy/blob/master/LICENSE.txt">BSD3 License</a></li>
</ul>
<h2 id="third-party-tools">Third-Party Tools</h2>
<ul>
<li><a href="https://github.com/ignota/susy.js">Susy.js</a> CSS-in-JS port</li>
</ul>
<h2 id="installation">Installation</h2>
<pre><code>npm install susy
</code></pre>
<p>There are two imports to choose from.
The default <code>sass/susy</code> comes with
un-prefixed versions of the core API functions.
If you want Susy to be name-spaced,
import <code>sass/susy-prefix</code> instead.</p>
<pre><code class="lang-scss">// un-prefixed functions
@import '<path-to>/susy/sass/susy';
// susy-prefixed functions
@import '<path-to>/susy/sass/susy-prefix';
</code></pre>
<h3 id="using-eyeglass">Using <a href="http://eyeglass.rocks/">Eyeglass</a></h3>
<p>With eyeglass set up,
you can <code>@import 'susy';</code>
without providing the npm-modules<span class="widont"> </span>path.</p>
<h3 id="using-webpack">Using Webpack</h3>
<p>Make sure <code>sass-loader</code> is installed:</p>
<pre><code class="lang-bash">npm install sass-loader --save-dev
</code></pre>
<p>Make sure you have sass-loader enabled in your webpack<span class="widont"> </span>configuration:</p>
<pre><code class="lang-javascript">// webpack.config.js
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
</code></pre>
<p>Start using Susy:</p>
<pre><code class="lang-scss">/* app.scss */
@import "~susy/sass/susy";
</code></pre>
<h3 id="using-gulp">Using Gulp</h3>
<p>Add a gulp<span class="widont"> </span>task:</p>
<pre><code class="lang-javascript">// gulpfile.js
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy/sass']
}).on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
</code></pre>
<p>Start using Susy:</p>
<pre><code class="lang-scss">/* app.scss */
@import 'susy';
</code></pre>
<h3 id="using-grunt-and-yeoman-">Using Grunt (and<span class="widont"> </span>Yeoman)</h3>
<p>To add Susy to the Sass task,
edit your <code>Gruntfile.js</code> at the root level of your project
and look for the Sass-related rules.
Add <code>require: 'susy'</code> inside the options<span class="widont"> </span>object:</p>
<pre><code class="lang-javascript">// Gruntfile.js
sass: {
dist: {
options: {
style: 'expanded',
require: 'susy'
},
files: {
'css/style.css': 'scss/style.scss'
}
}
}
</code></pre>
<p>Assuming you’ve already installed Susy,
it will now be added to the project
and will not clash with Yeoman’s grunt<span class="widont"> </span>rules.</p>
<p>Start using Susy:</p>
<pre><code class="lang-scss">/* app.scss */
@import 'susy';
</code></pre>
<h2 id="susy-vs-su">Susy vs Su</h2>
<p>You may notice that some functions have a <code>susy-</code> prefix,
while others only have <code>su-</code>.
This helps distinguish between the two distinct<span class="widont"> </span>layers:</p>
<ul>
<li>The core grid-math layer is called <strong>Su</strong>,
and is made up of “pure” functions
that expect normalized values.
This is useful if you prefer argument-syntax to shorthand syntax,
or if you are building your own Susy<span class="widont"> </span>mixins.</li>
<li>The upper <strong>Susy</strong> layer provides syntax-sugar –
global defaults, shorthand-parsing, normalization,
and a smaller set of common-use functions
that call on the core math as necessary.
This is the primary API for most<span class="widont"> </span>users.</li>
</ul>
</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>