Commit fa02530e authored by bqcrggia's avatar bqcrggia

Susy 3

parent 0031dcda
@import "vendor/susy/language/susy";
@import "vendor/susy/sass/susy";
@import "vendor/font-awesome/scss/font-awesome";
@import "styles/variables";
@import "styles/layout";
......
@include layout(12 (60px 40px) static);
/* enable: @import 'vendor/susy/sass/plugins/svg-grid';
* and add to grid container: background: susy-svg-grid() no-repeat scroll;
*/
@import 'vendor/susy/sass/plugins/svg-grid';
$phone: 480px;
* { box-sizing: border-box; }
$susy: (
'columns': susy-repeat(12),
'gutters': 30px,
'spread': 'narrow',
'container-spread': 'narrow',
);
@media screen and (min-width: $phone) {
.layout-container {
max-width: 1170px;
margin: 0 auto;
background: susy-svg-grid() no-repeat scroll;
}
header {
clear: both;
#block-sitebranding {
width: span(3);
float: left;
}
#block-mainnavigation {
width: span(9);
float: right;
}
}
main {
clear: both;
.layout-sidebar-first {
width: span(3);
float: left;
}
.layout-content {
width: span(9);
float: right;
}
}
footer {
clear: both;
}
}
susy-*.gem
*~
*.DS_Store
.sass-cache
.rvmrc
*.sublime-*
node_modules
*.css.map
npm-debug.log
Miriam Suzanne <miriam@oddbird.net> Eric Meyer <eric@oddbird.net>
Miriam Suzanne <miriam@oddbird.net> Eric M. Suzanne <eric@oddbird.net>
Miriam Suzanne <miriam@oddbird.net> Eric M Suzanne <eric@oddbird.net>
Miriam Suzanne <miriam@oddbird.net> Miriam Eric Suzanne <miriam@oddbird.net>
Miriam Suzanne <miriam@oddbird.net> E. Miriam Suzanne <eric@oddbird.net>
Miriam Suzanne <miriam@oddbird.net> Eric Meyer <ericam@susy.local>
# See https://github.com/sasstools/sass-lint/tree/develop/docs/rules
# ------------------------------------------------------------------
files:
include:
- 'sass/**/*.s+(a|c)ss'
ignore:
- 'test/scss/**/*.s+(a|c)ss'
# Rules
rules:
# Extends
extends-before-declarations: 2
extends-before-mixins: 2
placeholder-in-extend: 2
# Mixins
mixins-before-declarations: 2
# Line Spacing
one-declaration-per-line: 2
empty-line-between-blocks: 2
single-line-per-selector: 2
# Disallows
no-color-keywords: 2
no-color-literals: 0
no-css-comments: 2
no-debug: 2
no-duplicate-properties: 2
no-empty-rulesets: 2
no-extends: 0
no-ids: 2
no-important: 2
no-invalid-hex: 2
no-mergeable-selectors: 1
no-misspelled-properties: 2
no-qualifying-elements: 2
no-trailing-zero: 2
no-transition-all: 0
no-url-protocols: 2
no-vendor-prefixes: 2
no-warn: 0
# nesting
force-attribute-nesting: 2
force-element-nesting: 2
force-pseudo-nesting: 2
# Style Guide
border-zero: 2
brace-style: 2
clean-import-paths:
- 2
- leading-underscore: false
filename-extension: false
empty-args: 1
function-name-format: 2
hex-length: 2
hex-notation: 2
indentation: 1
leading-zero:
- 2
- include: true
mixin-name-format: 2
nesting-depth:
- 2
- max-depth: 3
placeholder-name-format: 2
property-sort-order: 2
quotes: 2
shorthand-values: 2
url-quotes: 2
variable-for-property: 0
variable-name-format: 2
zero-unit: 2
# Inner Spacing
space-after-bang: 2
space-after-colon: 2
space-after-comma: 2
space-before-bang: 2
space-before-brace: 2
space-before-colon: 2
space-between-parens: 2
# Final Items
final-newline: 2
trailing-semicolon: 2
theme: Herman
dest: docs/
display:
access: public
package: ./package.json
verbose: true
groups:
a-config: 'Configuration'
b-api: 'Grid Functions'
plugin-utils: 'Plugin Utilities'
plugin_svg-grid: 'Plugin: SVG Grid Image'
su-math: 'Su: Core Math Engine'
x-normal: '[Susy Normalization]'
x-parser: '[Susy Syntax Parser]'
x-validation: '[Su Input Validation]'
x-version: '[Release Notes]'
herman:
sass:
includepaths: ['sass']
includes: ['susy']
language: node_js
node_js:
- 6
sudo: false
before_install: yarn global add greenkeeper-lockfile@1
before_script: greenkeeper-lockfile-update
after_script: greenkeeper-lockfile-upload
notifications:
slack:
secure: in3AWzkLi5YOE0oY78bHiyYsYWUZG1OwkJeohGiQhNE+sdL5OZf3FfjJJKuCn8UJNGKTJpuBsb7DbvoAucB18IOHSc5f3NZ9RC2n6EiKW9prCM/o3Iwd0HYh0N/OmtoC8RlYWsk1WGEGQ3+Xk5ZrPk1NPJCSfDS0lF527pA42Ro=
This diff is collapsed.
Contributing to Susy
====================
Susy exists because of your contributions.
Bug reports and feature requests are welcome,
but code is even better!
In all cases,
we ask you to follow the
[Sass community guidelines](http://sass-lang.com/community-guidelines).
Susy is roughly divided into two layers,
the core grid-math layer is called **Su**,
and is made up of "pure" functions
that expect normalized values.
The "Susy" layer provides extra syntax-sugar
to the API –
with parsing, normalization,
and a smaller set of "common" functions
that call on the core math as necessary.
Development
-----------
Set up your environment
with the appropriate development dependencies:
```
yarn
```
As you work...
- Add or update any appropriate unit tests
in the `test` directory,
and make sure all tests are passing with `npm test`
- Add your changes to the [changelog](CHANGELOG.md)
- Update or add inline documentation
using [SassDoc][sassdoc] as appropriate,
and compile the docs with `npm run sassdoc`
[sassdoc]: http://sassdoc.com/
Committing
----------
Linting, testing, and documentation
should be done before every commit:
```
npm run commit
```
They can also be triggered individually:
```
# lint
npm run lint
# test with mocha/true, and compile ag-test CSS
npm test
# compile full test output for reference
npm run compile
# compile docs
npm run sassdoc
```
Optionally use `npm run test-libsass` for js-only tests,
or `rake test` for ruby-only environments.
Once you've fixed any final errors or typos,
commit your changes, and submit a pull request!
Pull Requests
-------------
We use the `master` branch for production-ready code,
and side-branches for everything in-progress
or up-for-debate.
When submitting a patch via pull request:
- Write a clear, descriptive commit message
- Keep it simple: one bug fix or feature per pull request
Copyright (c) 2017, Miriam Eric Suzanne
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
* Neither the name of the author nor the names of other
contributors may be used to endorse or promote products derived
from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Power Tools For The Web
=======================
[![npm version](https://badge.fury.io/js/susy.svg)](https://badge.fury.io/js/susy)<br />
[![Build Status](https://travis-ci.org/oddbird/susy.png?branch=master)](https://travis-ci.org/oddbird/susy)
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 system.
- [Susy Website](http://oddbird.net/susy/) |
[@SassSusy](http://twitter.com/sasssusy/)
- [Susy3 Intro](http://oddbird.net/2017/06/28/susy3) |
[Spread in Susy3](http://oddbird.net/2017/06/13/susy-spread)
- [Susy3 Documentation](http://oddbird.net/susy/docs/)
- [Susy1/Susy2 Documentation](http://susy.readthedocs.io)
Quotes
------
> "I like the idea of grids-on-demand,
> rather than a strict framework."<br />
> – Chris Coyier, [CSS Tricks](http://css-tricks.com/build-web-layouts-easily-susy/)
> "Susy and Zendesk have been getting along magically…
> It’s precisely what you need and nothing more."<br />
> — Stephany Varga, [Zendesk](https://medium.com/zendesk-creative-blog/responsive-a-harrowing-meditation-on-the-brutal-realities-of-web-content-organization-in-5-acts-1d33ce25f062)
> "If you’re interested in reading Sass poetry,
> be sure to look at Susy’s source code!"<br />
> — Hugo Giraudel, [SitePoint](http://www.sitepoint.com/my-favorite-sass-tools/)
Resources
---------
- [OddBird](http://oddbird.net/) | [@OddBird](http://twitter.com/oddbird/)
- [Sites using Susy](http://oddbird.net/susy/sites/)
- [Changelog](https://github.com/oddbird/susy/blob/master/CHANGELOG.md)
- [Guidelines for contributing](https://github.com/oddbird/susy/blob/master/CONTRIBUTING.md)
- [BSD3 License](https://github.com/oddbird/susy/blob/master/LICENSE.txt)
Installation
------------
```
npm install susy
```
There are two imports to choose from.
The default `sass/susy` comes with
un-prefixed versions of the core API functions.
If you want Susy to be name-spaced,
import `sass/susy-prefix` instead.
```scss
// un-prefixed functions
@import '<path-to>/susy/sass/susy';
// susy-prefixed functions
@import '<path-to>/susy/sass/susy-prefix';
```
### Using [Eyeglass](http://eyeglass.rocks/)
With eyeglass set up,
you can `@import 'susy';`
without providing the npm-modules path.
### Using Webpack
Make sure `sass-loader` is installed:
```bash
npm install sass-loader --save-dev
```
Make sure you have sass-loader enabled in your webpack configuration:
```javascript
// webpack.config.js
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass'
}
]
```
Start using Susy:
```scss
/* app.scss */
@import "~susy/sass/susy";
```
### Using Gulp
Add a gulp task:
```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'));
});
```
Start using Susy:
```scss
/* app.scss */
@import 'susy';
```
### Using Grunt (and Yeoman)
To add Susy to the Sass task,
edit your `Gruntfile.js` at the root level of your project
and look for the Sass-related rules.
Add `require: 'susy'` inside the options object:
```javascript
// Gruntfile.js
sass: {
dist: {
options: {
style: 'expanded',
require: 'susy'
},
files: {
'css/style.css': 'scss/style.scss'
}
}
}
```
Assuming you’ve already installed Susy,
it will now be added to the project
and will not clash with Yeoman's grunt rules.
Start using Susy:
```scss
/* app.scss */
@import 'susy';
```
Susy vs Su
----------
You may notice that some functions have a `susy-` prefix,
while others only have `su-`.
This helps distinguish between the two distinct layers:
- The core grid-math layer is called **Su**,
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 mixins.
- The upper **Susy** 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 users.
// Su
// ==
@import "su/utilities";
@import "su/settings";
@import "su/validation";
@import "su/grid";
This diff is collapsed.
/*! json-encode: {"brand-colors": {"brand-orange": {"output": "#c75000", "rgba": "rgba(199, 80, 0, 1)", "hsla": "hsla(24deg, 100%, 39%, 1)"}, "brand-blue": {"output": "#0d7fa5", "rgba": "rgba(13, 127, 165, 1)", "hsla": "hsla(195deg, 85%, 35%, 1)"}, "brand-pink": {"output": "#e2127a", "rgba": "rgba(226, 18, 122, 1)", "hsla": "hsla(330deg, 85%, 48%, 1)"}}, "neutral-colors": {"light-gray": {"output": "#dedede", "rgba": "rgba(222, 222, 222, 1)", "hsla": "hsla(196deg, 0%, 87%, 1)"}, "gray": {"output": "#555b5e", "rgba": "rgba(85, 91, 94, 1)", "hsla": "hsla(195deg, 5%, 35%, 1)"}, "black": {"output": "#3b4042", "rgba": "rgba(59, 64, 66, 1)", "hsla": "hsla(195deg, 6%, 25%, 1)"}}, "status-colors": {"go": {"output": "#657e1b", "rgba": "rgba(101, 126, 27, 1)", "hsla": "hsla(75deg, 65%, 30%, 1)"}, "yield": {"output": "#c75000", "rgba": "rgba(199, 80, 0, 1)", "hsla": "hsla(24deg, 100%, 39%, 1)"}, "stop": {"output": "#ec1313", "rgba": "rgba(236, 19, 19, 1)", "hsla": "hsla(0deg, 85%, 50%, 1)"}}, "theme-colors": {"theme-dark": {"output": "#0d7fa5", "rgba": "rgba(13, 127, 165, 1)", "hsla": "hsla(195deg, 85%, 35%, 1)"}, "theme-light": {"output": "#cfe5ed", "rgba": "rgba(207, 229, 237, 1)", "hsla": "hsla(196deg, 45%, 87%, 1)"}, "background": {"output": "#fff", "rgba": "rgba(255, 255, 255, 1)", "hsla": "hsla(0deg, 0%, 100%, 1)"}, "text": {"output": "#3b4042", "rgba": "rgba(59, 64, 66, 1)", "hsla": "hsla(195deg, 6%, 25%, 1)"}, "text-light": {"output": "#555b5e", "rgba": "rgba(85, 91, 94, 1)", "hsla": "hsla(195deg, 5%, 35%, 1)"}, "border": {"output": "#555b5e", "rgba": "rgba(85, 91, 94, 1)", "hsla": "hsla(195deg, 5%, 35%, 1)"}, "light-border": {"output": "#dedede", "rgba": "rgba(222, 222, 222, 1)", "hsla": "hsla(196deg, 0%, 87%, 1)"}, "callout": {"output": "#dedede", "rgba": "rgba(222, 222, 222, 1)", "hsla": "hsla(196deg, 0%, 87%, 1)"}, "overlay": {"output": "rgba(222, 222, 222, 0.9)", "hsla": "hsla(196deg, 0%, 87%, 0.9)"}, "shadow": {"output": "rgba(85, 91, 94, 0.5)", "hsla": "hsla(195deg, 5%, 35%, 0.5)"}, "action": {"output": "#0d7fa5", "rgba": "rgba(13, 127, 165, 1)", "hsla": "hsla(195deg, 85%, 35%, 1)"}, "focus": {"output": "#0a5f7c", "rgba": "rgba(10, 95, 124, 1)", "hsla": "hsla(195deg, 85%, 26%, 1)"}, "active": {"output": "#0d7fa5", "rgba": "rgba(13, 127, 165, 1)", "hsla": "hsla(195deg, 85%, 35%, 1)"}, "accent": {"output": "#e2127a", "rgba": "rgba(226, 18, 122, 1)", "hsla": "hsla(330deg, 85%, 48%, 1)"}, "slight": {"output": "#fcfcfc", "rgba": "rgba(252, 252, 252, 1)", "hsla": "hsla(0deg, 0%, 99%, 1)"}, "code": {"output": "#587f8d", "rgba": "rgba(88, 127, 141, 1)", "hsla": "hsla(196deg, 23%, 45%, 1)"}, "code-shadow": {"output": "rgba(88, 127, 141, 0.2)", "hsla": "hsla(196deg, 23%, 45%, 0.2)"}}, "system-colors": {"contrast-light": {"output": "#fff", "rgba": "rgba(255, 255, 255, 1)", "hsla": "hsla(0deg, 0%, 100%, 1)"}, "contrast-dark": {"output": "#3b4042", "rgba": "rgba(59, 64, 66, 1)", "hsla": "hsla(195deg, 6%, 25%, 1)"}}, "text-ratios": {"herman": 1.4}, "text-sizes": {"root": "18px", "large-rem": "1.11111rem", "base-rem": "1rem", "small-rem": "0.88889rem", "large": "calc(1rem + 1.5vw)", "medium": "calc(1rem + .5vw)", "base": "calc(.88889rem + .5vw)", "small": "calc(.88889rem + .25vw)", "code": "calc(0.75rem + 0.25vw)", "h1": "calc(1rem + 2.5vw)", "h2": "calc(1rem + 2vw)", "h3": "calc(1rem + 1.5vw)", "quote": "calc(1rem + .5vw)"}, "spacing-sizes": {"rhythm": "1.4rem", "gutter": "1.4rem", "flex-gutter": "calc(.7rem + 2.5vw)", "double-gutter": "2.8rem", "spacer": "4.2rem", "double-spacer": "8.4rem", "shim": "0.7rem", "half-shim": "0.35rem", "quarter-shim": "0.175rem"}, "pattern-sizes": {"border": "8px", "page": "50rem", "nav-small": "21rem", "nav-medium": "32rem", "project-link-nav": "36rem", "specimen": "4.2rem", "color-swatch": "5.6rem", "icon": "28px", "nav-underline": "4px"}, "sans": {"name": "Source Sans Pro", "source": "https://fonts.google.com/specimen/Source+Sans+Pro", "stack": ["Helvetica Neue", "Helvetica", "Arial", "sans-serif"]}, "code": {"name": "Source Code Pro", "source": "https://fonts.google.com/specimen/Source+Code+Pro", "stack": ["Consolas", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "monospace", "sans-serif"]}} */
/*# sourceMappingURL=json.css.map */
This diff is collapsed.
window.Herman=function(t,a){"use strict";var e={SPACE:32,ENTER:13,TAB:9,ESC:27,BACKSPACE:8,SHIFT:16,CTRL:17,ALT:18,CAPS:20,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46,COMMA:44};return t.initializeToggles=function(){var t=a("body");t.on("toggle:close",'[data-toggle="button"]',function(){var t=a(this).attr("aria-controls"),e=a('[data-target-id="'+t+'"]');a('[data-toggle="button"][aria-controls="'+t+'"][aria-pressed="true"]').attr("aria-pressed","false"),e.trigger("target:close")}),t.on("toggle:open",'[data-toggle="button"]',function(){var t=a(this),e=t.attr("aria-controls"),r=a('[data-target-id="'+e+'"]'),o=a('[data-toggle="button"][aria-controls="'+e+'"]').not(t);t.data("toggle-synced")?o.filter('[data-toggle-synced="true"]').attr("aria-pressed","true"):o.filter('[aria-pressed="true"]').attr("aria-pressed","false"),t.attr("aria-pressed","true"),r.trigger("target:open")}),t.on("target:close",'[data-toggle="target"]',function(t){var e=a(this);a(t.target).is(e)&&e.attr("aria-expanded","false")});var e=0,r=function(t){var e=t.attr("data-target-id"),r=a('[data-toggle="button"][aria-controls="'+e+'"][aria-pressed="true"]');r.length?r.trigger("toggle:close"):t.trigger("target:close")},o=function(e,o){var i=this.attr("data-target-id"),n=a(o.target);(this.data("auto-closing-on-any-click")||!n.closest(this).length||n.closest('[data-close-toggle="'+i+'"]').length)&&(t.off(e),r(this))};t.on("target:open",'[data-toggle="target"]',function(r){var i=a(this);if(a(r.target).is(i)&&(i.attr("aria-expanded","true"),i.data("auto-closing"))){var n="click.toggle_"+(e+=1);t.on(n,o.bind(i,n))}}),t.on("click",'[data-toggle="button"]',function(t){t.preventDefault();var e=a(this);"true"===e.attr("aria-pressed")?e.trigger("toggle:close"):e.trigger("toggle:open")}),t.on("click",'[data-toggle="close"]',function(t){t.preventDefault();var e=a(this).attr("aria-controls"),o=a('[data-target-id="'+e+'"]');r(o)})},t.initializeTabs=function(){var t=a("body"),r=function(t){var e=t.attr("data-tab-group");return a('[role="tab"][data-tab-group="'+e+'"]')},o=function(t){var e=t.attr("data-tab-group");return a('[role="tabpanel"][data-tab-group="'+e+'"]')},i=function(t){var a=r(t),e=o(t),i=e.filter('[aria-labelledby="'+t.attr("id")+'"]');t.attr({tabindex:0,"aria-selected":!0}),a.not(t).attr("tabindex",-1).removeAttr("aria-selected"),i.removeAttr("aria-hidden").trigger("visible"),e.not(i).attr("aria-hidden",!0),t.trigger("tab:active")};t.on("tabs:close",'[role="tab"]',function(){var t=a(this),e=r(t),i=o(t);e.attr("tabindex",-1).removeAttr("aria-selected"),i.attr("aria-hidden",!0)}),t.on("click",'[role="tab"]',function(t){t.preventDefault(),i(a(this))}),t.on("keydown",'[role="tab"]',function(t){var o=a(this),n=r(o),g=n.index(o),l=g;switch(t.keyCode){case e.LEFT:l=g>0?g-1:g;break;case e.RIGHT:l=g+1}var s=n.eq(l);g!==l&&s.length&&(i(s),s.focus())})},t.initializeIframes=function(){var t=function(t){t.contentWindow.document.body&&(t.height=t.contentWindow.document.body.scrollHeight)},e=function(){a("iframe").each(function(){t(this)})};e(),a("iframe").on("load",function(){t(this)}),a(window).on("resize",e)},t}(window.Herman||{},window.jQuery);
\ No newline at end of file
This diff is collapsed.
window.Herman=function(i,n){"use strict";return n(function(){window.hljs.initHighlightingOnLoad(),i.initializeToggles(),i.initializeTabs(),i.initializeIframes()}),i}(window.Herman||{},window.jQuery);
\ No newline at end of file
This diff is collapsed.
!function(t,e){var o=window.srcDoc;"function"==typeof define&&define.amd?define(["exports"],function(n){e(n,o),t.srcDoc=n}):"object"==typeof exports?e(exports,o):(t.srcDoc={},e(t.srcDoc,o))}(this,function(t,e){var o,n,c,i=!!("srcdoc"in document.createElement("iframe")),r="Polyfill may not function in the presence of the `sandbox` attribute. Consider using the `force` option.",s=/\ballow-same-origin\b/,f=function(t,e){var o=t.getAttribute("sandbox");"string"!=typeof o||s.test(o)||(e&&e.force?t.removeAttribute("sandbox"):e&&!1===e.force||(c(r),t.setAttribute("data-srcdoc-polyfill",r)))},a={compliant:function(t,e,o){e&&(f(t,o),t.setAttribute("srcdoc",e))},legacy:function(t,e,o){var n;t&&t.getAttribute&&(e?t.setAttribute("srcdoc",e):e=t.getAttribute("srcdoc"),e&&(f(t,o),n="javascript: window.frameElement.getAttribute('srcdoc');",t.contentWindow&&(t.contentWindow.location=n),t.setAttribute("src",n)))}},d=t;if(c=window.console&&window.console.error?function(t){window.console.error("[srcdoc-polyfill] "+t)}:function(){},d.set=a.compliant,d.noConflict=function(){return window.srcDoc=e,d},!i)for(d.set=a.legacy,n=document.getElementsByTagName("iframe"),o=n.length;o--;)d.set(n[o])});
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!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,700|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"><link rel="stylesheet" href="assets/css/main.css"></head><body><svg xmlns="http://www.w3.org/2000/svg" hidden><symbol id="icon-menu" viewBox="0 0 24 28"><title>menu icon</title><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><symbol id="icon-search" viewBox="0 0 24 28"><title>search icon</title><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-sassdoc-region="app"><header role="banner" data-sassdoc-region="banner"><button data-nav-toggle="small" data-toggle="button" aria-controls="nav-small" aria-pressed="false" data-toggle-synced="false"><svg data-icon="menu" data-icon-size="icon-small"><title>menu</title><use xlink:href="#icon-menu"/></svg></button> <button data-nav-toggle="large" data-toggle="button" aria-controls="nav-large" aria-pressed="true" data-toggle-synced="false"><svg data-icon="menu" data-icon-size="icon-small"><title>menu</title><use xlink:href="#icon-menu"/></svg></button><h1 data-sassdoc="project-title"><a href="index.html" rel="home" data-sassdoc="project-name">susy</a> <span data-sassdoc="project-version">3.0.1</span></h1></header><div data-sassdoc-region="container"><nav role="navigation" data-nav-menu="small" data-toggle="target" id="nav-small" data-target-id="nav-small" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false"><h3 data-sassdoc="nav-title"><a href="index.html" data-sassdoc-nav="is-not-active">susy</a></h3><ul><li data-sassdoc="nav-item"><a href="a-config.html" data-sassdoc-nav="is-not-active">Configuration</a></li><li data-sassdoc="nav-item"><a href="b-api.html" data-sassdoc-nav="is-not-active">Grid Functions</a></li><li data-sassdoc="nav-item"><a href="plugin-utils.html" data-sassdoc-nav="is-not-active">Plugin Utilities</a></li><li data-sassdoc="nav-item"><a href="plugin_svg-grid.html" data-sassdoc-nav="is-not-active">Plugin: SVG Grid Image</a></li><li data-sassdoc="nav-item"><a href="su-math.html" data-sassdoc-nav="is-not-active">Su: Core Math Engine</a></li><li data-sassdoc="nav-item"><a href="x-normal.html" data-sassdoc-nav="is-not-active">[Susy Normalization]</a></li><li data-sassdoc="nav-item"><a href="x-parser.html" data-sassdoc-nav="is-active">[Susy Syntax Parser]</a></li><li data-sassdoc="nav-item"><a href="x-validation.html" data-sassdoc-nav="is-not-active">[Su Input Validation]</a></li><li data-sassdoc="nav-item"><a href="x-version.html" data-sassdoc-nav="is-not-active">[Release Notes]</a></li></ul></nav><nav role="navigation" data-nav-menu="large" data-toggle="target" id="nav-large" data-target-id="nav-large" aria-expanded="true" data-auto-closing="false" data-auto-closing-on-any-click="false"><h3 data-sassdoc="nav-title"><a href="index.html" data-sassdoc-nav="is-not-active">susy</a></h3><ul><li data-sassdoc="nav-item"><a href="a-config.html" data-sassdoc-nav="is-not-active">Configuration</a></li><li data-sassdoc="nav-item"><a href="b-api.html" data-sassdoc-nav="is-not-active">Grid Functions</a></li><li data-sassdoc="nav-item"><a href="plugin-utils.html" data-sassdoc-nav="is-not-active">Plugin Utilities</a></li><li data-sassdoc="nav-item"><a href="plugin_svg-grid.html" data-sassdoc-nav="is-not-active">Plugin: SVG Grid Image</a></li><li data-sassdoc="nav-item"><a href="su-math.html" data-sassdoc-nav="is-not-active">Su: Core Math Engine</a></li><li data-sassdoc="nav-item"><a href="x-normal.html" data-sassdoc-nav="is-not-active">[Susy Normalization]</a></li><li data-sassdoc="nav-item"><a href="x-parser.html" data-sassdoc-nav="is-active">[Susy Syntax Parser]</a></li><li data-sassdoc="nav-item"><a href="x-validation.html" data-sassdoc-nav="is-not-active">[Su Input Validation]</a></li><li data-sassdoc="nav-item"><a href="x-version.html" data-sassdoc-nav="is-not-active">[Release Notes]</a></li></ul></nav><main role="main"><nav data-sassdoc-region="breadcrumb"><a href="index.html">susy</a> » <strong>[Susy Syntax Parser]</strong></nav><div data-sassdoc-region="main" data-sassdoc-page="x-parser"><section class="item"><div data-item-section="prose" class="text-block"><h1 id="shorthand-syntax-parser">Shorthand Syntax Parser</h1><p>The syntax parser converts <a href="b-api.html">shorthand syntax</a> into a map of settings that can be compared/merged with other config maps and global setting.</p></div></section><section class="item" id="function--susy-parse"><header data-item-section="header"><h2 class="item-title"><span class="item-type">@function</span> <a href="#function--susy-parse" class="item-name">susy-parse()</a></h2></header><div data-item-section="summary"><h3 class="item-subtitle">Description</h3><div class="text-block"><p>The <code>parse</code> function provides all the syntax-sugar in Susy, converting user shorthand into a usable map of keys and values that can be normalized and passed to Su.</p></div></div><div data-item-section="parameter"><h3 class="item-subtitle">Parameters &amp; Return</h3><div class="param-list"><h4 class="param-title"><span class="item-name">$shorthand:</span> <span class="value-type">(list)</span></h4><div class="param-details text-block"><p>Shorthand expression to define the width of the span, optionally containing:</p><ul><li>a count, length, or column-list span;</li><li><code>at $n</code>, <code>first</code>, or <code>last</code> location on asymmetrical grids;</li><li><code>narrow</code>, <code>wide</code>, or <code>wider</code> for optionally spreading across adjacent gutters;</li><li><code>of $n &lt;spread&gt;</code> for available grid columns and spread of the container (span counts like <code>of 6</code> are only valid in the context of symmetrical grids);</li><li>and <code>set-gutters $n</code> to override global gutter settings</li></ul></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">$context-only:</span> <span class="item-value">false</span> <span class="value-type">(bool)</span></h4><div class="param-details text-block"><p>Allow the parser to ignore span and span-spread values, only parsing context and container-spread. This makes it possible to accept spanless values, like the <code>gutters()</code> syntax. When parsing context-only, the <code>of</code> indicator is optional.</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">@return</span> <span class="value-type">(map)</span></h4><div class="param-details text-block"><p>Map of span and grid settings parsed from shorthand input – including all the properties available globally – <code>columns</code>, <code>gutters</code>, <code>spread</code>, <code>container-spread</code> – along with the span-specific properties <code>span</code>, and <code>location</code>.</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">@error</span></h4><div class="param-details text-block"><p>when a shorthand value is not recognized</p></div></div></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><a href="a-config.html#variable--susy" class="item-name">$susy</a></h4></div></div><div class="requires-wrapper"><div data-item-section="requires"><h3 class="item-subtitle">requires</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="x-validation.html#function--su-valid-columns" class="item-name">su-valid-columns()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">_susy-error()</span> <span class="item-note">[private]</span></h4></div></div><div data-item-section="used by"><h3 class="item-subtitle">used by</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--susy-compile" class="item-name">susy-compile()</a></h4></div></div></div></section></div></main></div></div><script type="text/javascript" src="assets/js/jquery-3.1.1.slim.js"></script><script type="text/javascript" src="assets/js/srcdoc-polyfill.min.js"></script><script type="text/javascript" src="assets/js/highlight.js"></script><script type="text/javascript" src="assets/js/base.js"></script><script type="text/javascript" src="assets/js/init.js"></script></body></html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
// Susy Next Syntax
// ================
$susy-version: 2.1;
@import "../su";
@import "../output/float";
@import "susy/settings";
@import "susy/validation";
@import "susy/grids";
@import "susy/box-sizing";
@import "susy/context";
@import "susy/background";
@import "susy/container";
@import "susy/span";
@import "susy/gutters";
@import "susy/isolate";
@import "susy/gallery";
@import "susy/rows";
@import "susy/margins";
@import "susy/padding";
@import "susy/bleed";
@import "susy/breakpoint-plugin";
// ---------------------------------------------------------------------------
// Partials
$susy-version: 1.5;
@import "susyone/settings";
@import "susyone/functions";
@import "susyone/grid";
@import "susyone/isolation";
@import "susyone/padding";
@import "susyone/margin";
@import "susyone/media";
@import "susyone/background";
// Background Grid Syntax
// ======================
$susy-overlay-grid-head-exists: false;
// Show Grid/s
// -----------
// Show grid on any element using either background or overlay.
// - [$grid] : <settings>
@mixin show-grid(
$grid: $susy
) {
$inspect: $grid;
$_output: debug-get(output, $grid);
@include susy-inspect(show-grid, $inspect);
@if $_output == overlay and susy-get(debug image, $grid) != hide {
@include overlay-grid($grid);
} @else {
@include background-grid($grid);
}
}
@mixin show-grids(
$grid: $susy
) {
@include show-grid($grid);
}
// Background Grid
// ---------------
// Show a grid background on any element.
// - [$grid] : <settings>
@mixin background-grid(
$grid: $susy
) {
$inspect : $grid;
$_output : get-background($grid);
@if length($_output) > 0 {
$_flow: susy-get(flow, $grid);