├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bower.json ├── css ├── outline.css └── outline.min.css ├── dist ├── css │ ├── outline.css │ └── outline.min.css ├── favicon-152.png ├── favicon.ico ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── get-started.html ├── img │ ├── 16x9-img-placholder.png │ ├── browser.png │ ├── logo.png │ ├── min │ │ ├── 16x9-img-placholder.png │ │ ├── browser.png │ │ └── logo.png │ └── outline-mail │ │ ├── 16x9-img-placholder.jpg │ │ ├── 16x9-img-placholder.png │ │ ├── outline-logo-white.png │ │ ├── outline-logo.png │ │ ├── outline-mail-logo-white.png │ │ └── outline-mail-logo.png ├── index.html ├── js │ ├── classie.js │ ├── min │ │ ├── bundle.js │ │ └── modernizr.custom.js │ ├── nav.js │ └── smooth-scroll.js └── sitemap.xml ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf ├── fontawesome-webfont.woff └── fontawesome-webfont.woff2 ├── gulpfile.js ├── img ├── 16x9-img-placholder.png └── min │ └── 16x9-img-placholder.png ├── index.html ├── package.json ├── scss ├── base │ ├── _print.scss │ ├── _reset.scss │ ├── _typography.scss │ └── readme.md ├── components │ ├── _buttons.scss │ ├── _code.scss │ ├── _embed.scss │ ├── _forms.scss │ ├── _lists.scss │ ├── _media.scss │ ├── _pagination.scss │ ├── _tables.scss │ └── readme.md ├── layout │ ├── _susy-config.scss │ └── readme.md ├── outline.scss ├── pages │ └── readme.md ├── themes │ └── readme.md ├── utils │ ├── _functions.scss │ ├── _helpers.scss │ ├── _mixins.scss │ ├── _variables.scss │ └── readme.md └── vendors │ ├── _font-awesome.scss │ └── readme.md └── susy ├── _su.scss ├── _susy.scss ├── _susyone.scss └── susy ├── _su.scss ├── language ├── _susy.scss ├── _susyone.scss ├── susy │ ├── _background.scss │ ├── _bleed.scss │ ├── _box-sizing.scss │ ├── _breakpoint-plugin.scss │ ├── _container.scss │ ├── _context.scss │ ├── _gallery.scss │ ├── _grids.scss │ ├── _gutters.scss │ ├── _isolate.scss │ ├── _margins.scss │ ├── _padding.scss │ ├── _rows.scss │ ├── _settings.scss │ ├── _span.scss │ └── _validation.scss └── susyone │ ├── _background.scss │ ├── _functions.scss │ ├── _grid.scss │ ├── _isolation.scss │ ├── _margin.scss │ ├── _media.scss │ ├── _padding.scss │ └── _settings.scss ├── output ├── _float.scss ├── _shared.scss ├── _support.scss ├── float │ ├── _container.scss │ ├── _end.scss │ ├── _isolate.scss │ └── _span.scss ├── shared │ ├── _background.scss │ ├── _container.scss │ ├── _direction.scss │ ├── _inspect.scss │ ├── _margins.scss │ ├── _output.scss │ └── _padding.scss └── support │ ├── _background.scss │ ├── _box-sizing.scss │ ├── _clearfix.scss │ ├── _prefix.scss │ ├── _rem.scss │ └── _support.scss └── su ├── _grid.scss ├── _settings.scss ├── _utilities.scss └── _validation.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Packages # 2 | ############ 3 | # it's better to unpack these files and commit the raw source 4 | # git has its own built in compression methods 5 | *.7z 6 | *.dmg 7 | *.gz 8 | *.iso 9 | *.jar 10 | *.rar 11 | *.tar 12 | *.zip 13 | 14 | # Logs and databases # 15 | ###################### 16 | *.log 17 | *.sql 18 | *.sqlite 19 | 20 | # OS generated files # 21 | ###################### 22 | .DS_Store 23 | .DS_Store? 24 | ._* 25 | .Spotlight-V100 26 | .Trashes 27 | ehthumbs.db 28 | Thumbs.db 29 | 30 | node_modules 31 | .sass-cache/ 32 | bower_components 33 | 34 | # ignore sourcemaps generated by sass 35 | /*/css/*.map 36 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | ## [Unreleased](https://github.com/matt-harris/outline/tree/HEAD) 5 | 6 | ### Changed 7 | 8 | ## [v1.4.0](https://github.com/matt-harris/outline/tree/v1.4.0) (2016-04-06) 9 | 10 | ### Changed 11 | - Updated Susy to version 2.2.12 12 | - Updated FontAwesome to version 4.5.0 13 | - Safari input search field padding fix 14 | 15 | ## [v1.3.0](https://github.com/matt-harris/outline/tree/v1.3.0) (2015-10-29) 16 | 17 | ### Changed 18 | - Updated Susy to version 2.2.6 19 | - Updated all Gulp packages to latest versions 20 | 21 | ### Added 22 | - '.hyphenate' class in _typography.scss for dealing with long words in CSS 23 | 24 | ## [v1.2.0](https://github.com/matt-harris/outline/tree/v1.2.0) (2015-08-04) 25 | 26 | ### Changed 27 | - Updated FontAwesome to version 4.4.0 28 | - Updated _reset.scss styles to normalize v3.0.2 29 | - Updated html and body height style 30 | - Updated README.md to include bower install 31 | 32 | ## [v1.1.0](https://github.com/matt-harris/outline/tree/v1.1.0) (2015-06-23) 33 | 34 | ### Added 35 | - Include CHANGELOG.md 36 | - Add to bower [\#8](https://github.com/matt-harris/outline/issues/8) 37 | 38 | ### Changed 39 | - Updated Susy to version 2.2.5 40 | 41 | ## [v1.0.1](https://github.com/matt-harris/outline/tree/v1.0.1) (2015-06-10) 42 | 43 | ### Fixed 44 | - Mention 7-1 [\#7](https://github.com/matt-harris/outline/issues/7) 45 | - Shall vendor prefixes be included? [\#5](https://github.com/matt-harris/outline/issues/5) 46 | - Normalize names [\#3](https://github.com/matt-harris/outline/issues/3) 47 | 48 | ### Changed 49 | - refactored unneeded shorthand for margin properties. [\#2](https://github.com/matt-harris/outline/pull/2) ([filose](https://github.com/filose)) 50 | 51 | ## [v1.0](https://github.com/matt-harris/outline/tree/v1.0) (2015-05-11) 52 | 53 | ### Added 54 | - Intial release 55 | 56 | [Full Changelog](https://github.com/matt-harris/outline/compare/v1.0.1...HEAD) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Matt Harris 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Outline 2 | 3 | Outline is a simple CSS starter responsive boilerplate for any new web project, created by [Matt Harris](https://twitter.com/matty_h) 4 | 5 | ## The clean & simple responsive framework 6 | 7 | It's a modular, mobile-first framework which includes todays best practices for responsive design and core components I use on every project. 8 | 9 | Outline is designed to be a starting point. A solid foundation for your project, leaving the creativity up to you. 10 | 11 | ## Quick start 12 | 13 | There are a couple of ways to get started with Outline. 14 | 15 | - [Download the latest release](https://github.com/matt-harris/outline/archive/master.zip) 16 | 17 | - To clone the git repository. Just run the following command '[sudo] git clone git@github.com:matt-harris/outline.git' 18 | 19 | - Install with Bower. Just run the following command 'bower install outline' 20 | 21 | ## Documentation 22 | 23 | View full documentation at: [http://outline-css.surge.sh/get-started.html](http://outline-css.surge.sh/get-started.html) 24 | 25 | ## Updates 26 | 27 | Keep track of updates by following [@matty_h](https://twitter.com/matty_h) on Twitter. 28 | 29 | ## License 30 | 31 | Outline is free to use under the [MIT License](LICENSE). 32 | 33 | Copyright [Matt Harris](http://www.matt-harris.net) 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "outline", 3 | "version": "1.4.0", 4 | "homepage": "http://outline-css.surge.sh/", 5 | "description": "The clean & simple framework. Outline is simple CSS starter boilerplate for any new web project. It's a modular, mobile-first framework which includes todays best practices for responsive design and core components (including susy) I use on every project.", 6 | "authors": [ 7 | "Matt Harris (http://www.matt-harris.net/)" 8 | ], 9 | "main": "scss/outline.scss", 10 | "keywords": [ 11 | "outline", 12 | "css", 13 | "sass", 14 | "framework", 15 | "responsive", 16 | "susy", 17 | "mobile-first", 18 | "front-end", 19 | "boilerplate", 20 | "modular", 21 | "simple" 22 | ], 23 | "license": "MIT", 24 | "ignore": [ 25 | "**/.*", 26 | "node_modules", 27 | "bower_components", 28 | "test", 29 | "tests" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /css/outline.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont.eot?v=4.4.0);src:url(../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0) format("embedded-opentype"),url(../fonts/fontawesome-webfont.woff2?v=4.4.0) format("woff2"),url(../fonts/fontawesome-webfont.woff?v=4.4.0) format("woff"),url(../fonts/fontawesome-webfont.ttf?v=4.4.0) format("truetype"),url(../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.clearfix:after,.form--inline .form__row--actions:after,.form--inline .form__row--controls:after,.form__row:after,.media:after{content:"";display:table;clear:both}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.justify{text-align:justify}.float-left{float:left}.float-center{float:none;margin-left:auto;margin-right:auto}.float-right{float:right}.no-space{margin:0;padding:0}.space{margin:1.5rem}.space-top{margin-top:1.5rem}.space-right{margin-right:1.5rem}.space-btm{margin-bottom:1.5rem}.space-left{margin-left:1.5rem}.bg-primary{background-color:#38a1d6}.bg-secondary{background-color:#16f4d0}.bg-tertiary{background-color:#fcee21}.bg-grey{background-color:#a1acb5}.bg-grey-light{background-color:#dce8ef}.bg-grey-dark{background-color:#333}.bg-white{background-color:#fff}.text-primary{color:#38a1d6}.text-secondary{color:#16f4d0}.text-tertiary{color:#fcee21}.text-grey{color:#a1acb5}.text-grey-light{color:#dce8ef}.text-white{color:#fff}.img-center{display:block;margin:0 auto 1.5rem}.is-uppercase{text-transform:uppercase}.hide{display:none;visibility:hidden}.visuallyhidden{position:absolute;margin:-1px;padding:0;height:1px;width:1px;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;margin:0;width:auto;height:auto;overflow:visible;clip:auto}@media print{*{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}@page{margin:.5cm}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}@-ms-viewport{width:device-width;zoom:1}@-o-viewport{width:device-width;zoom:1}@viewport{width:device-width;zoom:1}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*,:after,:before{box-sizing:border-box}body,html{height:100%}html{background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}a{background-color:transparent}a:focus{outline:dotted thin}a:active,a:hover{outline:0}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}img,video{max-width:100%;height:auto;vertical-align:middle}embed,iframe,object{max-width:100%}img{-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer}input[type=search]{box-sizing:border-box}input[type=search],input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}html{font-size:100%}body{font-family:Merriweather,serif;font-size:1rem;line-height:1.5;color:#333}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Lato,sans-serif;font-weight:400}.h1,h1{font-size:1.875rem;font-weight:700;margin-top:.9375rem;margin-bottom:.75rem}@media screen and (min-width:48rem){.h1,h1{font-size:2.5rem;margin-top:1.25rem;margin-bottom:1rem}}@media screen and (min-width:64rem){.h1,h1{font-size:3.375rem;line-height:1.3;margin-top:1.625rem;margin-bottom:1.375rem}}.h2,.h3,h2,h3{font-size:1.688rem;margin-top:.8125rem;margin-bottom:.6875rem}@media screen and (min-width:48rem){.h2,h2{font-size:1.875rem;margin-top:.9375rem;margin-bottom:.75rem}}.h4,h4{font-size:1.5rem;margin-top:.75rem;margin-bottom:.625rem}.h5,h5{font-size:1.375rem;margin-top:.6875rem;margin-bottom:.5625rem}.h6,h6{font-size:1.25rem;margin-top:.625rem;margin-bottom:.5rem}p{margin-bottom:1.5rem}.font-primary{font-family:Merriweather,serif}.font-secondary{font-family:Lato,sans-serif}.lead{font-size:1.125rem}.text-small,blockquote cite,small{font-size:.75rem}.text-muted{color:#a1acb5}.hyphenate{overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}strong{font-weight:700}cite,dfn,em,var{font-style:italic}a{text-decoration:none;word-wrap:break-word;color:#38a1d6}a:hover{text-decoration:underline;color:#2a79a1}a img{border:none;background:0 0}a:hover img{border:none;background:0 0;opacity:.9;filter:alpha(opacity=90)}hr{margin:1.5rem auto;border:0;border-top:.0625rem solid #a1acb5;border-bottom:0 solid #fff}sub,sup{position:relative;margin-left:.25rem;font-size:85%;font-weight:700;line-height:0;vertical-align:baseline}sup{top:-.5rem}sub{bottom:-.25rem}abbr[title]{border-bottom:.0625rem dotted #333}mark{background-color:#ff0;color:#333;padding:.25rem}blockquote{margin-bottom:1.5rem;padding-left:1rem;padding-right:1.5rem;border-left:.25rem solid #38a1d6;font-family:Lato,sans-serif}blockquote p:last-of-type{margin-bottom:.25rem}blockquote cite{font-style:italic}figure{margin-bottom:1.5rem}figcaption{padding-top:.5rem;padding-bottom:.5rem;font-family:Lato,sans-serif;font-size:.875rem;text-align:center;border-bottom:.0625rem solid #dce8ef}::-moz-selection{color:#fff;background:#38a1d6}::selection{color:#fff;background:#38a1d6}.container{max-width:71.25rem;margin-left:auto;margin-right:auto}.container:after{content:" ";display:block;clear:both}.btn,button,input[type=submit]{margin-bottom:1rem;padding:.5rem 1rem;display:inline-block;font-family:Lato,sans-serif;font-size:inherit;font-weight:400;text-align:center;line-height:1;color:#fff;background-color:#38a1d6;border:none;outline:0;cursor:pointer;vertical-align:middle;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.btn:active,.btn:focus,.btn:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{color:#fff;text-decoration:none;background-color:#3089b6}.btn.btn--disabled,.btn[disabled],button.btn--disabled,button[disabled],input.btn--disabled[type=submit],input[disabled][type=submit]{cursor:not-allowed;opacity:.6}.btn--secondary{background-color:#16f4d0}.btn--secondary:active,.btn--secondary:focus,.btn--secondary:hover{background-color:#13cfb1}.btn--tertiary{color:#333;background-color:#fcee21}.btn--tertiary:active,.btn--tertiary:focus,.btn--tertiary:hover{color:#333;background-color:#d6ca1c}.btn--grey{color:#333;background-color:#dce8ef}.btn--grey:active,.btn--grey:focus,.btn--grey:hover{color:#333;background-color:#bbc5cb}.btn--small{padding:.25rem .75rem;font-size:.875rem}.btn--large{padding:.5rem 1.625rem;font-size:1.375rem;line-height:normal}.btn--xlarge{padding:.75rem 1.75rem;font-size:1.375rem;line-height:normal}.btn--rounded{border-radius:.25rem}.btn--pill{border-radius:3rem}.btn--ghost{color:#38a1d6;border:.125rem solid #38a1d6;background-color:transparent}.btn--ghost:active,.btn--ghost:focus,.btn--ghost:hover{background-color:#38a1d6}.btn--block,input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{margin-right:0;margin-left:0;padding-right:0;padding-left:0;display:block;width:100%}code,kbd,pre,samp{font-family:Monaco,Consolas,"Lucida Console",monospace;font-weight:400;font-size:.875rem;color:#333}pre{margin:0 0 1.5rem;padding:1rem;background-color:#eef4f7;white-space:pre-wrap;word-wrap:break-word;overflow:auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2}code{padding:.25rem;background-color:#eef4f7}pre code{padding:0;background-color:transparent}.embed-wrap{position:relative;margin:1.5rem auto;padding:1.875rem 0 56.25%;width:100%;height:0;overflow:hidden}.embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}fieldset,form{margin-bottom:1.5rem}label{margin-bottom:.25rem;display:block;font-family:Lato,sans-serif;cursor:pointer}fieldset{margin-top:1.5rem;margin-bottom:1.5rem;padding:1.5rem;border:.0625rem solid #a1acb5}legend{margin:0 0 0 -.5rem;padding:0 .5rem;display:block;font-family:Lato,sans-serif}.form--inline .form__row--actions,.form--inline .form__row--controls,.form__row{margin-bottom:1.5rem}input[type=search],input[type=date],input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],select,textarea{padding:.375rem;display:block;width:100%;height:2.375rem;font:inherit;line-height:1.5;color:#333;border:.0625rem solid #a1acb5}input[type=checkbox],input[type=image],input[type=radio]{margin-bottom:0;display:inline-block;width:auto;cursor:pointer;vertical-align:baseline}textarea{height:5.5rem;overflow:auto;resize:vertical}select{font-family:Lato,sans-serif}input[type=submit]{width:auto;margin-bottom:0}input:focus,select:focus,textarea:focus{border-color:#38a1d6;border-color:rgba(56,161,214,.8);outline:0;-webkit-transition:border .2s linear;transition:border .2s linear}input[disabled],textarea[disabled]{background:#eef4f7;cursor:not-allowed;overflow:hidden;white-space:nowrap}.form--inline input,.form--inline select,.form--inline textarea{display:inline-block;width:auto}.form--inline label{display:inline-block;margin:0 1rem 0 0;width:6.5rem;text-align:right}.form--inline .form__row--actions,.form--inline .form__row--controls{margin-left:7.5rem}.form--inline .form__row--actions label,.form--inline .form__row--controls label{width:auto}.form--inline .form__row--actions{margin-bottom:0}::-webkit-input-placeholder{color:#a1acb5}::-moz-placeholder{color:#a1acb5}:-ms-input-placeholder{color:#a1acb5}.list,dl,ol,ul{margin-bottom:1.5rem;margin-left:1.75rem;font-family:inherit;list-style-position:outside}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}ul{list-style:disc}ul ul{list-style:square}ul ul ul{list-style:circle}ol{list-style:decimal}ol ol{list-style:upper-alpha}ol ol ol{list-style:lower-roman}dl{margin-left:0}dt{font-weight:700;font-family:Lato,sans-serif}.list--unstyled,.pager{margin-left:0;list-style:none}.list--inline{margin-left:0}.list--inline li{display:inline-block;margin-right:.5rem}.media{display:block;margin-bottom:1.5rem}.media__item{float:left;margin:0 1.5rem 1.5rem 0}.media__item--reversed{float:right;margin-left:1.5rem}.media__item img,.media__item--reversed img{display:block}.media__body{overflow:hidden}.media__body:last-child{margin-bottom:0}.flag{display:table;width:100%;margin-bottom:1.5rem}.flag__body,.flag__item{display:table-cell;vertical-align:middle}.flag--top .flag__body,.flag--top .flag__item{vertical-align:top}.flag--bottom .flag__body,.flag--bottom .flag__item{vertical-align:bottom}.flag__item{padding-right:1.5rem}.flag__item>img{display:block;max-width:none}.flag--reversed .flag__item{padding-right:0;padding-left:1.5rem}.flag__body{width:100%}.flag__body p:last-of-type{margin-bottom:0}.pager{margin-bottom:1.5rem;font-family:Lato,sans-serif;text-align:center}.pager li{margin:0 .5rem .5rem 0;display:inline-block}.pager li:last-child{margin-right:0}.pager li:hover{background-color:#e3edf2}.pager li a{display:inline-block;padding:.25rem .75rem}.pager li.pager--current{background-color:#38a1d6}.pager li.pager--current a{color:#fff}table{max-width:100%;width:100%;margin-bottom:1.5rem;border-spacing:0;border-collapse:collapse;border:0}table tfoot td,table th{text-align:left;font-weight:700;font-family:Lato,sans-serif}table td,table th{padding:.625rem;vertical-align:top}.table thead>tr,table thead>tr{border-bottom:.0625rem solid #dce8ef}.table--stripes tbody>tr:nth-child(odd)>td{background-color:#eef4f7}.table--border-rows tr{border-bottom:.0625rem solid #dce8ef}.table--border-cells td,.table--border-cells th{border:.0625rem solid #dce8ef}.table--condensed thead>tr{border-bottom:.0625rem solid #dce8ef}.table--condensed td,.table--condensed th{padding:.25rem}.table--responsive{overflow-x:auto;width:100%;margin-bottom:1.5rem;-webkit-overflow-scrolling:touch}.table--responsive table{margin-bottom:.5rem} -------------------------------------------------------------------------------- /dist/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/favicon-152.png -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/favicon.ico -------------------------------------------------------------------------------- /dist/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /dist/img/16x9-img-placholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/16x9-img-placholder.png -------------------------------------------------------------------------------- /dist/img/browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/browser.png -------------------------------------------------------------------------------- /dist/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/logo.png -------------------------------------------------------------------------------- /dist/img/min/16x9-img-placholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/min/16x9-img-placholder.png -------------------------------------------------------------------------------- /dist/img/min/browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/min/browser.png -------------------------------------------------------------------------------- /dist/img/min/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/min/logo.png -------------------------------------------------------------------------------- /dist/img/outline-mail/16x9-img-placholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/16x9-img-placholder.jpg -------------------------------------------------------------------------------- /dist/img/outline-mail/16x9-img-placholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/16x9-img-placholder.png -------------------------------------------------------------------------------- /dist/img/outline-mail/outline-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/outline-logo-white.png -------------------------------------------------------------------------------- /dist/img/outline-mail/outline-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/outline-logo.png -------------------------------------------------------------------------------- /dist/img/outline-mail/outline-mail-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/outline-mail-logo-white.png -------------------------------------------------------------------------------- /dist/img/outline-mail/outline-mail-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/dist/img/outline-mail/outline-mail-logo.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | Outline - The clean & simple responsive CSS framework. 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 | 39 | 40 |
41 | 42 | 56 |
57 |
58 |
59 |

The clean & simple framework.

60 | Download 65 | Get started 66 |

67 | Version 1.4.0
Size: 3.7kb (gzipped) 68 |

69 |
70 |
71 |
72 |
73 |
74 |

75 | So fresh, so clean 76 |

77 | Outline CSS framework 78 |
79 |
80 |
81 |
82 |

A lean, mean responsive framework

83 |

Outline is simple CSS starter boilerplate for any new web project.

84 |

85 | It's a modular, mobile-first framework which includes todays best practices for responsive 86 | design and core components I use on every project. 87 |

88 |

89 | Outline is designed to be a starting point. A solid foundation for your project, leaving 90 | the creativity up to you. 91 |

92 |
93 |
94 |
95 |
96 |
    97 |
  • 98 | 99 |

    Responsive

    100 |
    • 101 |
  • 102 | 103 |

    Built with Sass

    104 |
    • 105 |
  • 106 | 107 |

    Modular

    108 |
    • 109 |
  • 110 | 111 |

    Susy - grids on demand

    112 |
    • 113 |
114 | Get started 115 |
116 |
117 |
118 |
119 |

Do you want to help make Outline awesome?

120 | Check out the repo 125 | Report an issue 130 |
131 |
132 | 137 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /dist/js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /dist/js/min/bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){"use strict";function t(e){return new RegExp("(^|\\s+)"+e+"(\\s+|$)")}function n(e,t){var n=o(e,t)?a:r;n(e,t)}var o,r,a;"classList"in document.documentElement?(o=function(e,t){return e.classList.contains(t)},r=function(e,t){e.classList.add(t)},a=function(e,t){e.classList.remove(t)}):(o=function(e,n){return t(n).test(e.className)},r=function(e,t){o(e,t)||(e.className=e.className+" "+t)},a=function(e,n){e.className=e.className.replace(t(n)," ")});var s={hasClass:o,addClass:r,removeClass:a,toggleClass:n,has:o,add:r,remove:a,toggle:n};"function"==typeof define&&define.amd?define(s):e.classie=s}(window),function(){function e(){if(classie.has(n,"open")){classie.remove(n,"open"),classie.add(n,"close");var e=function(t){if(support.transitions){if("visibility"!==t.propertyName)return;this.removeEventListener(transEndEventName,e)}classie.remove(n,"close")};support.transitions?n.addEventListener(transEndEventName,e):e()}else classie.has(n,"close")||classie.add(n,"open")}var t=document.getElementById("trigger-overlay"),n=document.querySelector(".nav-overlay"),o=n.querySelector(".nav-close");transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},transEndEventName=transEndEventNames[Modernizr.prefixed("transition")],support={transitions:Modernizr.csstransitions},t.addEventListener("click",e),o.addEventListener("click",e)}(),function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}(this,function(e){"use strict";var t,n,o,r,a={},s=!!document.querySelector&&!!e.addEventListener,i={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},c=function(e,t,n){if("[object Object]"===Object.prototype.toString.call(e))for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.call(n,e[o],o,e);else for(var r=0,a=e.length;a>r;r++)t.call(n,e[r],r,e)},u=function(e,t){var n={};return c(e,function(t,o){n[o]=e[o]}),c(t,function(e,o){n[o]=t[o]}),n},l=function(e,t){for(var n=t.charAt(0);e&&e!==document;e=e.parentNode)if("."===n){if(e.classList.contains(t.substr(1)))return e}else if("#"===n){if(e.id===t.substr(1))return e}else if("["===n&&e.hasAttribute(t.substr(1,t.length-2)))return e;return!1},f=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},d=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",s=n.charCodeAt(0);++r=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===s?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},m=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},v=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=o-t-n,o>=0?o:0},p=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},h=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},g=function(t,n){history.pushState&&(n||"true"===n)&&history.pushState(null,null,[e.location.protocol,"//",e.location.host,e.location.pathname,e.location.search,t].join(""))},E=function(e){return null===e?0:f(e)+e.offsetTop};a.animateScroll=function(t,n,a){var s=u(s||i,a||{}),c=h(t?t.getAttribute("data-options"):null);s=u(s,c),n="#"+d(n.substr(1));var l="#"===n?document.documentElement:document.querySelector(n),f=e.pageYOffset;o||(o=document.querySelector("[data-scroll-header]")),r||(r=E(o));var b,y,O,S=v(l,r,parseInt(s.offset,10)),L=S-f,I=p(),N=0;g(n,s.updateURL);var C=function(o,r,a){var i=e.pageYOffset;(o==r||i==r||e.innerHeight+i>=I)&&(clearInterval(a),l.focus(),s.callbackAfter(t,n))},T=function(){N+=16,y=N/parseInt(s.speed,10),y=y>1?1:y,O=f+L*m(s.easing,y),e.scrollTo(0,Math.floor(O)),C(O,S,b)},k=function(){s.callbackBefore(t,n),b=setInterval(T,16)};0===e.pageYOffset&&e.scrollTo(0,0),k()};var b=function(e){var n=l(e.target,"[data-scroll]");n&&"a"===n.tagName.toLowerCase()&&(e.preventDefault(),a.animateScroll(n,n.hash,t))},y=function(){n||(n=setTimeout(function(){n=null,r=E(o)},66))};return a.destroy=function(){t&&(document.removeEventListener("click",b,!1),e.removeEventListener("resize",y,!1),t=null,n=null,o=null,r=null)},a.init=function(n){s&&(a.destroy(),t=u(i,n||{}),o=document.querySelector("[data-scroll-header]"),r=E(o),document.addEventListener("click",b,!1),o&&e.addEventListener("resize",y,!1))},a}); -------------------------------------------------------------------------------- /dist/js/min/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || 151 | // If the character is the first character and is in the range [0-9] 152 | // (U+0030 to U+0039), […] 153 | (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || 154 | // If the character is the second character and is in the range [0-9] 155 | // (U+0030 to U+0039) and the first character is a `-` (U+002D), […] 156 | ( 157 | index === 1 && 158 | codeUnit >= 0x0030 && codeUnit <= 0x0039 && 159 | firstCodeUnit === 0x002D 160 | ) 161 | ) { 162 | // http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point 163 | result += '\\' + codeUnit.toString(16) + ' '; 164 | continue; 165 | } 166 | 167 | // If the character is not handled by one of the above rules and is 168 | // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or 169 | // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to 170 | // U+005A), or [a-z] (U+0061 to U+007A), […] 171 | if ( 172 | codeUnit >= 0x0080 || 173 | codeUnit === 0x002D || 174 | codeUnit === 0x005F || 175 | codeUnit >= 0x0030 && codeUnit <= 0x0039 || 176 | codeUnit >= 0x0041 && codeUnit <= 0x005A || 177 | codeUnit >= 0x0061 && codeUnit <= 0x007A 178 | ) { 179 | // the character itself 180 | result += string.charAt(index); 181 | continue; 182 | } 183 | 184 | // Otherwise, the escaped character. 185 | // http://dev.w3.org/csswg/cssom/#escape-a-character 186 | result += '\\' + string.charAt(index); 187 | 188 | } 189 | return result; 190 | }; 191 | 192 | /** 193 | * Calculate the easing pattern 194 | * @private 195 | * @link https://gist.github.com/gre/1650294 196 | * @param {String} type Easing pattern 197 | * @param {Number} time Time animation should take to complete 198 | * @returns {Number} 199 | */ 200 | var easingPattern = function ( type, time ) { 201 | var pattern; 202 | if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity 203 | if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity 204 | if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration 205 | if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity 206 | if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity 207 | if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration 208 | if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity 209 | if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity 210 | if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration 211 | if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity 212 | if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity 213 | if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration 214 | return pattern || time; // no easing, no acceleration 215 | }; 216 | 217 | /** 218 | * Calculate how far to scroll 219 | * @private 220 | * @param {Element} anchor The anchor element to scroll to 221 | * @param {Number} headerHeight Height of a fixed header, if any 222 | * @param {Number} offset Number of pixels by which to offset scroll 223 | * @returns {Number} 224 | */ 225 | var getEndLocation = function ( anchor, headerHeight, offset ) { 226 | var location = 0; 227 | if (anchor.offsetParent) { 228 | do { 229 | location += anchor.offsetTop; 230 | anchor = anchor.offsetParent; 231 | } while (anchor); 232 | } 233 | location = location - headerHeight - offset; 234 | return location >= 0 ? location : 0; 235 | }; 236 | 237 | /** 238 | * Determine the document's height 239 | * @private 240 | * @returns {Number} 241 | */ 242 | var getDocumentHeight = function () { 243 | return Math.max( 244 | document.body.scrollHeight, document.documentElement.scrollHeight, 245 | document.body.offsetHeight, document.documentElement.offsetHeight, 246 | document.body.clientHeight, document.documentElement.clientHeight 247 | ); 248 | }; 249 | 250 | /** 251 | * Convert data-options attribute into an object of key/value pairs 252 | * @private 253 | * @param {String} options Link-specific options as a data attribute string 254 | * @returns {Object} 255 | */ 256 | var getDataOptions = function ( options ) { 257 | return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options ); 258 | }; 259 | 260 | /** 261 | * Update the URL 262 | * @private 263 | * @param {Element} anchor The element to scroll to 264 | * @param {Boolean} url Whether or not to update the URL history 265 | */ 266 | var updateUrl = function ( anchor, url ) { 267 | if ( history.pushState && (url || url === 'true') ) { 268 | history.pushState( null, null, [root.location.protocol, '//', root.location.host, root.location.pathname, root.location.search, anchor].join('') ); 269 | } 270 | }; 271 | 272 | var getHeaderHeight = function ( header ) { 273 | return header === null ? 0 : ( getHeight( header ) + header.offsetTop ); 274 | }; 275 | 276 | /** 277 | * Start/stop the scrolling animation 278 | * @public 279 | * @param {Element} toggle The element that toggled the scroll event 280 | * @param {Element} anchor The element to scroll to 281 | * @param {Object} options 282 | */ 283 | smoothScroll.animateScroll = function ( toggle, anchor, options ) { 284 | 285 | // Options and overrides 286 | var settings = extend( settings || defaults, options || {} ); // Merge user options with defaults 287 | var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null ); 288 | settings = extend( settings, overrides ); 289 | anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers 290 | 291 | // Selectors and variables 292 | var anchorElem = anchor === '#' ? document.documentElement : document.querySelector(anchor); 293 | var startLocation = root.pageYOffset; // Current location on the page 294 | if ( !fixedHeader ) { fixedHeader = document.querySelector('[data-scroll-header]'); } // Get the fixed header if not already set 295 | if ( !headerHeight ) { headerHeight = getHeaderHeight( fixedHeader ); } // Get the height of a fixed header if one exists and not already set 296 | var endLocation = getEndLocation( anchorElem, headerHeight, parseInt(settings.offset, 10) ); // Scroll to location 297 | var animationInterval; // interval timer 298 | var distance = endLocation - startLocation; // distance to travel 299 | var documentHeight = getDocumentHeight(); 300 | var timeLapsed = 0; 301 | var percentage, position; 302 | 303 | // Update URL 304 | updateUrl(anchor, settings.updateURL); 305 | 306 | /** 307 | * Stop the scroll animation when it reaches its target (or the bottom/top of page) 308 | * @private 309 | * @param {Number} position Current position on the page 310 | * @param {Number} endLocation Scroll to location 311 | * @param {Number} animationInterval How much to scroll on this loop 312 | */ 313 | var stopAnimateScroll = function (position, endLocation, animationInterval) { 314 | var currentLocation = root.pageYOffset; 315 | if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) { 316 | clearInterval(animationInterval); 317 | anchorElem.focus(); 318 | settings.callbackAfter( toggle, anchor ); // Run callbacks after animation complete 319 | } 320 | }; 321 | 322 | /** 323 | * Loop scrolling animation 324 | * @private 325 | */ 326 | var loopAnimateScroll = function () { 327 | timeLapsed += 16; 328 | percentage = ( timeLapsed / parseInt(settings.speed, 10) ); 329 | percentage = ( percentage > 1 ) ? 1 : percentage; 330 | position = startLocation + ( distance * easingPattern(settings.easing, percentage) ); 331 | root.scrollTo( 0, Math.floor(position) ); 332 | stopAnimateScroll(position, endLocation, animationInterval); 333 | }; 334 | 335 | /** 336 | * Set interval timer 337 | * @private 338 | */ 339 | var startAnimateScroll = function () { 340 | settings.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll 341 | animationInterval = setInterval(loopAnimateScroll, 16); 342 | }; 343 | 344 | /** 345 | * Reset position to fix weird iOS bug 346 | * @link https://github.com/cferdinandi/smooth-scroll/issues/45 347 | */ 348 | if ( root.pageYOffset === 0 ) { 349 | root.scrollTo( 0, 0 ); 350 | } 351 | 352 | // Start scrolling animation 353 | startAnimateScroll(); 354 | 355 | }; 356 | 357 | /** 358 | * If smooth scroll element clicked, animate scroll 359 | * @private 360 | */ 361 | var eventHandler = function (event) { 362 | var toggle = getClosest(event.target, '[data-scroll]'); 363 | if ( toggle && toggle.tagName.toLowerCase() === 'a' ) { 364 | event.preventDefault(); // Prevent default click event 365 | smoothScroll.animateScroll( toggle, toggle.hash, settings); // Animate scroll 366 | } 367 | }; 368 | 369 | /** 370 | * On window scroll and resize, only run events at a rate of 15fps for better performance 371 | * @private 372 | * @param {Function} eventTimeout Timeout function 373 | * @param {Object} settings 374 | */ 375 | var eventThrottler = function (event) { 376 | if ( !eventTimeout ) { 377 | eventTimeout = setTimeout(function() { 378 | eventTimeout = null; // Reset timeout 379 | headerHeight = getHeaderHeight( fixedHeader ); // Get the height of a fixed header if one exists 380 | }, 66); 381 | } 382 | }; 383 | 384 | /** 385 | * Destroy the current initialization. 386 | * @public 387 | */ 388 | smoothScroll.destroy = function () { 389 | 390 | // If plugin isn't already initialized, stop 391 | if ( !settings ) return; 392 | 393 | // Remove event listeners 394 | document.removeEventListener( 'click', eventHandler, false ); 395 | root.removeEventListener( 'resize', eventThrottler, false ); 396 | 397 | // Reset varaibles 398 | settings = null; 399 | eventTimeout = null; 400 | fixedHeader = null; 401 | headerHeight = null; 402 | }; 403 | 404 | /** 405 | * Initialize Smooth Scroll 406 | * @public 407 | * @param {Object} options User settings 408 | */ 409 | smoothScroll.init = function ( options ) { 410 | 411 | // feature test 412 | if ( !supports ) return; 413 | 414 | // Destroy any existing initializations 415 | smoothScroll.destroy(); 416 | 417 | // Selectors and variables 418 | settings = extend( defaults, options || {} ); // Merge user options with defaults 419 | fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header 420 | headerHeight = getHeaderHeight( fixedHeader ); 421 | 422 | // When a toggle is clicked, run the click handler 423 | document.addEventListener('click', eventHandler, false ); 424 | if ( fixedHeader ) { root.addEventListener( 'resize', eventThrottler, false ); } 425 | 426 | }; 427 | 428 | 429 | // 430 | // Public APIs 431 | // 432 | 433 | return smoothScroll; 434 | 435 | }); -------------------------------------------------------------------------------- /dist/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | http://www.outlinecss.co.uk/ 6 | 2016-06-02 7 | weekly 8 | 1.0 9 | 10 | 11 | http://www.outlinecss.co.uk/get-started.html 12 | 2016-06-02 13 | weekly 14 | 0.9 15 | 16 | -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Include gulp 2 | var gulp = require('gulp'); 3 | 4 | // Include plugins 5 | // npm install --save-dev gulp-sass gulp-autoprefixer gulp-minify-css gulp-concat gulp-uglify gulp-imagemin browser-sync gulp-cache gulp-notify gulp-size gulp-rename 6 | var sass = require('gulp-sass'); 7 | var prefix = require('gulp-autoprefixer'); 8 | var minifycss = require('gulp-minify-css'); 9 | 10 | var concat = require('gulp-concat'); 11 | var uglify = require('gulp-uglify'); 12 | 13 | var images = require('gulp-imagemin'); 14 | 15 | var browserSync = require('browser-sync'); 16 | var reload = browserSync.reload; 17 | 18 | var cache = require('gulp-cache'); 19 | var notify = require('gulp-notify'); 20 | var size = require('gulp-size'); 21 | var rename = require('gulp-rename'); 22 | 23 | // Default Task 24 | gulp.task('default', ['css', 'js', 'images', 'browser-sync', 'watch']); 25 | 26 | // Tasks 27 | // Compile sass 28 | gulp.task('css', function() { 29 | gulp.src('scss/**/*.scss') 30 | .pipe(sass({ 31 | errLogToConsole: true 32 | })) 33 | 34 | // auto prefix css 35 | .pipe(prefix('last 2 versions')) 36 | 37 | // move css file to folder 38 | .pipe(gulp.dest('css/')) 39 | 40 | // rename the file with .min 41 | .pipe(rename({ 42 | suffix: '.min' 43 | })) 44 | 45 | // minify the file 46 | .pipe(minifycss()) 47 | 48 | // move minified css file to folder 49 | .pipe(gulp.dest('css/')) 50 | 51 | // get file size (gzipped) 52 | .pipe(size({ 53 | gzip: true 54 | })) 55 | 56 | // notify to say the task has complete 57 | .pipe(notify({ 58 | message: 'CSS task complete' 59 | })) 60 | }); 61 | 62 | // Concatenate js files and minify 63 | gulp.task('js', function() { 64 | gulp.src('js/*.js') 65 | 66 | .pipe(concat('bundle.js')) 67 | 68 | // minify the file 69 | .pipe(uglify()) 70 | 71 | // move js file to folder 72 | .pipe(gulp.dest('js/min/')) 73 | 74 | // notify to say the task has complete 75 | .pipe(notify({ 76 | message: 'JS task complete' 77 | })) 78 | }); 79 | 80 | // Compress images 81 | gulp.task('images', function() { 82 | gulp.src('img/*.{gif,jpg,png}') 83 | .pipe(cache(images({ 84 | optimizationLevel: 4, 85 | progressive: true, 86 | interlaced: true 87 | }))) 88 | .pipe(gulp.dest('img/min/')) 89 | 90 | // notify to say the task has complete 91 | .pipe(notify({ 92 | message: 'Images task complete' 93 | })) 94 | }); 95 | 96 | // Reload browser 97 | gulp.task('reload', function () { 98 | browserSync.reload(); 99 | }); 100 | 101 | // Prepare Browser-sync 102 | gulp.task('browser-sync', function() { 103 | browserSync.init(['scss/**/*.scss', 'js/*.js'], { 104 | //proxy: 'your_dev_site.url' 105 | server: { 106 | baseDir: './' 107 | } 108 | }); 109 | }); 110 | 111 | // Watch files for changes 112 | gulp.task('watch', function() { 113 | gulp.watch('scss/**/*.scss', ['css']); 114 | gulp.watch('js/*.js', ['js']); 115 | gulp.watch('img/*' , ['images']); 116 | gulp.watch(['*.html'], ['reload']); 117 | }); -------------------------------------------------------------------------------- /img/16x9-img-placholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/img/16x9-img-placholder.png -------------------------------------------------------------------------------- /img/min/16x9-img-placholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matt-harris/outline/bcd1405b727765774a5fd74d19630bf38a9f2abe/img/min/16x9-img-placholder.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Enter your page title here 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Hello! This is Outline.

19 |
20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "outline", 3 | "version": "1.4.0", 4 | "description": "A lightweight front-end boilerplate by Matt Harris", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git@github.com-personal:matt-harris/outline.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "browser-sync": "^2.9.11", 17 | "gulp": "^3.9.0", 18 | "gulp-autoprefixer": "^3.1.0", 19 | "gulp-cache": "^0.3.0", 20 | "gulp-concat": "^2.6.0", 21 | "gulp-imagemin": "^2.3.0", 22 | "gulp-minify-css": "^1.2.1", 23 | "gulp-notify": "^2.2.0", 24 | "gulp-rename": "^1.2.2", 25 | "gulp-sass": "^2.1.0", 26 | "gulp-size": "^2.0.0", 27 | "gulp-uglify": "^1.4.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/base/_print.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Print styles - Outline 3 | // Styles for printed content 4 | // http://html5boilerplate.com 5 | //---------------------------------------------// 6 | 7 | @media print { 8 | * { 9 | background: transparent !important; 10 | color: #000 !important; 11 | box-shadow: none !important; 12 | text-shadow: none !important; 13 | } 14 | 15 | @page { 16 | margin: 0.5cm; 17 | } 18 | 19 | a, 20 | a:visited { 21 | text-decoration: underline; 22 | } 23 | 24 | a[href]:after { 25 | content: " (" attr(href) ")"; 26 | } 27 | 28 | abbr[title]:after { 29 | content: " (" attr(title) ")"; 30 | } 31 | 32 | .ir a:after, 33 | a[href^="javascript:"]:after, 34 | a[href^="#"]:after { 35 | content: ""; 36 | } 37 | 38 | pre, 39 | blockquote { 40 | border: 1px solid #999; 41 | page-break-inside: avoid; 42 | } 43 | 44 | thead { 45 | display: table-header-group; 46 | } 47 | 48 | tr, 49 | img { 50 | page-break-inside: avoid; 51 | } 52 | 53 | img { 54 | max-width: 100% !important; 55 | } 56 | 57 | p, 58 | h2, 59 | h3 { 60 | orphans: 3; 61 | widows: 3; 62 | } 63 | 64 | h2, 65 | h3 { 66 | page-break-after: avoid; 67 | } 68 | } -------------------------------------------------------------------------------- /scss/base/_reset.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // CSS Reset - Outline 3 | // A mixture of Normalized.css & Meyer's CSS 4 | // Reset & custom code 5 | //---------------------------------------------// 6 | 7 | // viewport resizing 8 | @viewport { width: device-width; zoom: 1.0; } 9 | 10 | // remove defaults 11 | html, body, div, span, applet, object, iframe, 12 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 13 | a, abbr, acronym, address, big, cite, code, 14 | del, dfn, em, img, ins, kbd, q, s, samp, 15 | small, strike, strong, sub, sup, tt, var, 16 | b, u, i, center, 17 | dl, dt, dd, ol, ul, li, 18 | fieldset, form, label, legend, 19 | table, caption, tbody, tfoot, thead, tr, th, td, 20 | article, aside, canvas, details, embed, 21 | figure, figcaption, footer, header, hgroup, 22 | menu, nav, output, ruby, section, summary, 23 | time, mark, audio, video { 24 | margin: 0; 25 | padding: 0; 26 | border: 0; 27 | font-size: 100%; 28 | font: inherit; 29 | vertical-align: baseline; 30 | } 31 | 32 | // correct block display for HTML5 elements on older browsers 33 | article, aside, details, figcaption, figure, footer, 34 | header, hgroup, main, menu, nav, section, summary { 35 | display: block; 36 | } 37 | 38 | // box model 39 | *, 40 | *:before, 41 | *:after { 42 | box-sizing: border-box; 43 | } 44 | 45 | // html & body to inherit height of the viewport 46 | html, 47 | body { 48 | height: 100%; 49 | } 50 | 51 | html { 52 | background: #fff; 53 | text-size-adjust: 100%; 54 | } 55 | 56 | // correct inline-block display not defined in IE 8/9 57 | audio, 58 | canvas, 59 | progress, 60 | video { 61 | display: inline-block; 62 | vertical-align: baseline; 63 | } 64 | 65 | // prevent modern browsers from displaying 'audio' without controls 66 | // remove excess height in iOS 5 devices 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | body { 73 | line-height: 1.5; 74 | } 75 | 76 | ol, ul { 77 | list-style: none; 78 | } 79 | 80 | // remove the gray background color from active links in IE 10 81 | a { 82 | background-color: transparent; 83 | } 84 | 85 | // address outline inconsistency between Chrome and other browsers 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | // improve readability when focused and also mouse hovered in all browsers 91 | a:active, 92 | a:hover { 93 | outline: 0; 94 | } 95 | 96 | blockquote, q { 97 | quotes: none; 98 | } 99 | 100 | blockquote:before, 101 | blockquote:after, 102 | q:before, 103 | q:after { 104 | content: ''; 105 | content: none; 106 | } 107 | 108 | // Remove most spacing between table cells 109 | table { 110 | border-collapse: collapse; 111 | border-spacing: 0; 112 | } 113 | 114 | // resize img's and video to scale with container 115 | img, 116 | video { 117 | max-width: 100%; 118 | height: auto; 119 | vertical-align: middle; 120 | } 121 | 122 | // Prevent iframe, object, and embed elements from 123 | // spilling outside of the page on smaller screens 124 | iframe, 125 | object, 126 | embed { 127 | max-width: 100%; 128 | } 129 | 130 | // help ie render img's when scaled 131 | img { 132 | -ms-interpolation-mode: bicubic; 133 | } 134 | 135 | svg:not(:root) { 136 | overflow: hidden; 137 | } 138 | 139 | // improve usability and consistency of cursor style between inputs 140 | button, 141 | html input[type="button"], 142 | input[type="reset"], 143 | input[type="submit"] { 144 | cursor: pointer; 145 | } 146 | 147 | input[type="search"] { 148 | box-sizing: border-box; 149 | } 150 | 151 | input[type="search"]::-webkit-search-cancel-button, 152 | input[type="search"]::-webkit-search-decoration, 153 | input[type="search"] { 154 | -webkit-appearance: none; 155 | } 156 | 157 | // remove inner padding and border in Firefox 4+ 158 | button::-moz-focus-inner, 159 | input::-moz-focus-inner { 160 | border: 0; 161 | padding: 0; 162 | } -------------------------------------------------------------------------------- /scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Typography - Outline 3 | // Set headings, font, link , hr, sub & sup, 4 | // abbreviation, highlighting, figure 5 | // & blockquote styles 6 | // Docs - http://outline-css.surge.sh/get-started.html#typography 7 | //---------------------------------------------// 8 | 9 | html { 10 | font-size: $html-font-base; 11 | } 12 | 13 | body { 14 | font-family: $font-primary; 15 | font-size: $font-base; 16 | line-height: 1.5; 17 | color: $color-grey-dark; 18 | } 19 | 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5, 25 | h6, 26 | .h1, 27 | .h2, 28 | .h3, 29 | .h4, 30 | .h5, 31 | .h6, 32 | %h1, 33 | %h2, 34 | %h3, 35 | %h4, 36 | %h5, 37 | %h6 { 38 | font-family: $font-secondary; 39 | font-weight: normal; 40 | } 41 | 42 | h1, 43 | .h1, 44 | %h1 { 45 | font-size: 1.875rem; 46 | font-weight: 700; 47 | margin-top: 0.9375rem; 48 | margin-bottom: 0.75rem; 49 | 50 | @include respond-min($tablet-wide) { 51 | font-size: 2.5rem; 52 | margin-top: 1.25rem; 53 | margin-bottom: 1rem; 54 | } 55 | 56 | @include respond-min($desktop) { 57 | font-size: 3.375rem; 58 | line-height: 1.3; 59 | margin-top: 1.625rem; 60 | margin-bottom: 1.375rem; 61 | } 62 | } 63 | 64 | h2, 65 | .h2, 66 | %h2 { 67 | font-size: 1.688rem; 68 | margin-top: 0.8125rem; 69 | margin-bottom: 0.6875rem; 70 | 71 | @include respond-min($tablet-wide) { 72 | font-size: 1.875rem; 73 | margin-top: 0.9375rem; 74 | margin-bottom: 0.75rem; 75 | } 76 | } 77 | 78 | h3, 79 | .h3, 80 | %h3 { 81 | font-size: 1.688rem; 82 | margin-top: 0.8125rem; 83 | margin-bottom: 0.6875rem; 84 | } 85 | 86 | h4, 87 | .h4, 88 | %h4 { 89 | font-size: 1.5rem; 90 | margin-top: 0.75rem; 91 | margin-bottom: 0.625rem; 92 | } 93 | 94 | h5, 95 | .h5, 96 | %h5 { 97 | font-size: 1.375rem; 98 | margin-top: 0.6875rem; 99 | margin-bottom: 0.5625rem; 100 | } 101 | 102 | h6, 103 | .h6, 104 | %h6 { 105 | font-size: 1.25rem; 106 | margin-top: 0.625rem; 107 | margin-bottom: 0.5rem; 108 | } 109 | 110 | p { 111 | margin-bottom: $spacing; 112 | } 113 | 114 | .font-primary, 115 | %font-primary { 116 | font-family: $font-primary; 117 | } 118 | 119 | .font-secondary, 120 | %font-secondary { 121 | font-family: $font-secondary; 122 | } 123 | 124 | .lead, 125 | %lead { 126 | font-size: 1.125rem; 127 | } 128 | 129 | small, 130 | .text-small, 131 | %text-small { 132 | font-size: 0.75rem; 133 | } 134 | 135 | .text-muted { 136 | color: $color-grey; 137 | } 138 | 139 | // dealing with long words in CSS 140 | // https://justmarkup.com/log/2015/07/31/dealing-with-long-words-in-css/ 141 | .hyphenate, 142 | %hyphenate { 143 | overflow-wrap: break-word; 144 | word-wrap: break-word; 145 | hyphens: auto; 146 | } 147 | 148 | strong { 149 | font-weight: bold; 150 | } 151 | 152 | em, 153 | cite, 154 | dfn, 155 | var { 156 | font-style: italic; 157 | } 158 | 159 | // link styles 160 | a { 161 | text-decoration: none; 162 | word-wrap: break-word; 163 | color: $color-primary; 164 | } 165 | 166 | a:hover { 167 | text-decoration: underline; 168 | color: shade($color-primary, 25%); 169 | } 170 | 171 | a img { 172 | border: none; 173 | background: none; 174 | } 175 | 176 | // prevents border/background on linked image hover 177 | a:hover img { 178 | border: none; 179 | background: none; 180 | opacity: 0.9; 181 | filter: alpha(opacity=90); 182 | } 183 | 184 | // lines 185 | hr { 186 | margin: $spacing auto; 187 | border: 0; 188 | border-top: 0.0625rem solid $color-grey; 189 | border-bottom: 0 solid #fff; 190 | } 191 | 192 | // subscript & superscript 193 | sub, 194 | sup { 195 | position: relative; 196 | margin-left: 0.25rem; 197 | font-size: 85%; 198 | font-weight: bold; 199 | line-height: 0; 200 | vertical-align: baseline; 201 | } 202 | 203 | sup { 204 | top: -0.5rem; 205 | } 206 | 207 | sub { 208 | bottom: -0.25rem; 209 | } 210 | 211 | // abbreviation or acronym 212 | abbr[title] { 213 | border-bottom: 0.0625rem dotted $color-grey-dark; 214 | } 215 | 216 | // mark element (highlight) 217 | mark { 218 | background-color: yellow; 219 | color: $color-grey-dark; 220 | padding: 0.25rem; 221 | } 222 | 223 | // blockquote 224 | blockquote { 225 | margin-bottom: $spacing; 226 | padding-left: 1rem; 227 | padding-right: $spacing; 228 | border-left: 0.25rem solid $color-primary; 229 | font-family: $font-secondary; 230 | 231 | p:last-of-type { 232 | margin-bottom: 0.25rem; 233 | } 234 | 235 | cite { 236 | font-style: italic; 237 | @extend %text-small; 238 | } 239 | } 240 | 241 | // figure and caption 242 | figure { 243 | margin-bottom: $spacing; 244 | } 245 | 246 | figcaption { 247 | padding-top: 0.5rem; 248 | padding-bottom: 0.5rem; 249 | font-family: $font-secondary; 250 | font-size: 0.875rem; 251 | text-align: center; 252 | border-bottom: 0.0625rem solid $color-grey-light; 253 | } 254 | 255 | // highlighting colors 256 | ::selection { 257 | color: #fff; 258 | background: $color-primary; 259 | } 260 | -------------------------------------------------------------------------------- /scss/base/readme.md: -------------------------------------------------------------------------------- 1 | The base folder holds the boilerplate code for the project This can include reset styles, typography styles for the project and print style. 2 | -------------------------------------------------------------------------------- /scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Buttons - Outline 3 | // CSS styles for buttons 4 | // Docs - http://outline-css.surge.sh/get-started.html#buttons 5 | //---------------------------------------------// 6 | 7 | button, 8 | .btn, 9 | %btn { 10 | margin-bottom: 1rem; 11 | padding: 0.5rem 1rem; 12 | display: inline-block; 13 | font-family: $font-secondary; 14 | font-size: inherit; 15 | font-weight: normal; 16 | text-align: center; 17 | line-height: 1; 18 | color: $btn-text-color; 19 | background-color: $color-primary; 20 | border: none; 21 | outline: none; 22 | cursor: pointer; 23 | vertical-align: middle; 24 | transition: all 0.3s ease-in-out; 25 | 26 | &:hover, 27 | &:focus, 28 | &:active { 29 | color: $btn-text-color; 30 | text-decoration: none; 31 | background-color: shade($color-primary, 15%); 32 | } 33 | 34 | &.btn--disabled, 35 | &[disabled] { 36 | cursor: not-allowed; 37 | opacity: 0.6; 38 | } 39 | } 40 | 41 | .btn--secondary, 42 | %btn--secondary { 43 | background-color: $color-secondary; 44 | 45 | &:hover, 46 | &:focus, 47 | &:active { 48 | background-color: shade($color-secondary, 15%); 49 | } 50 | } 51 | 52 | .btn--tertiary, 53 | %btn--tertiary { 54 | color: $btn-text-color-alt; 55 | background-color: $color-tertiary; 56 | 57 | &:hover, 58 | &:focus, 59 | &:active { 60 | color: $btn-text-color-alt; 61 | background-color: shade($color-tertiary, 15%); 62 | } 63 | } 64 | 65 | .btn--grey, 66 | %btn--grey { 67 | color: $btn-text-color-alt; 68 | background-color: $color-grey-light; 69 | 70 | &:hover, 71 | &:focus, 72 | &:active { 73 | color: $btn-text-color-alt; 74 | background-color: shade($color-grey-light, 15%); 75 | } 76 | } 77 | 78 | .btn--small, 79 | %btn--small { 80 | padding: 0.25rem 0.75rem; 81 | font-size: 0.875rem; 82 | } 83 | 84 | .btn--large, 85 | %btn--large { 86 | padding: 0.5rem 1.625rem; 87 | font-size: 1.375rem; 88 | line-height: normal; 89 | } 90 | 91 | .btn--xlarge, 92 | %btn--xlarge { 93 | padding: 0.75rem 1.75rem; 94 | font-size: 1.375rem; 95 | line-height: normal; 96 | } 97 | 98 | .btn--rounded, 99 | %btn--rounded { 100 | border-radius: 0.25rem; 101 | } 102 | 103 | .btn--pill, 104 | %btn--pill { 105 | border-radius: 3rem; 106 | } 107 | 108 | .btn--ghost, 109 | %btn--ghost { 110 | @include ghost-btn($color-primary); 111 | } 112 | 113 | .btn--block, 114 | %btn-block, 115 | input[type='submit'].btn-block, 116 | input[type='reset'].btn-block, 117 | input[type='button'].btn-block { 118 | margin-right: 0; 119 | margin-left: 0; 120 | padding-right: 0; 121 | padding-left: 0; 122 | display: block; 123 | width: 100%; 124 | } 125 | -------------------------------------------------------------------------------- /scss/components/_code.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Code - Outline 3 | // Basic styling for code / pre / kbd 4 | // Docs - http://outline-css.surge.sh/get-started.html#code 5 | //---------------------------------------------// 6 | 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-monospace; 12 | font-weight: normal; 13 | font-size: 0.875rem; 14 | color: $color-grey-dark; 15 | } 16 | 17 | pre { 18 | margin: 0 0 $spacing 0; 19 | padding: 1rem; 20 | background-color: tint($color-grey-light, 50%); 21 | white-space: pre-wrap; 22 | word-wrap: break-word; 23 | overflow: auto; 24 | tab-size: 2; 25 | } 26 | 27 | code { 28 | padding: 0.25rem; 29 | background-color: tint($color-grey-light, 50%); 30 | } 31 | 32 | pre code { 33 | padding: 0; 34 | background-color: transparent; 35 | } 36 | -------------------------------------------------------------------------------- /scss/components/_embed.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Embed containers - Outline 3 | // Basic styles to make embedded content responsive 4 | // Docs - http://outline-css.surge.sh/get-started.html#embed 5 | //---------------------------------------------// 6 | 7 | .embed-wrap { 8 | position: relative; 9 | margin: $spacing auto; 10 | padding: 1.875rem 0 56.25% 0; 11 | width: 100%; 12 | height: 0; 13 | overflow: hidden; 14 | 15 | iframe { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scss/components/_forms.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Forms - Outline 3 | // Basic styles for form elements 4 | // Docs - http://outline-css.surge.sh/get-started.html#forms 5 | //---------------------------------------------// 6 | 7 | form, 8 | fieldset { 9 | margin-bottom: $spacing; 10 | } 11 | 12 | label { 13 | margin-bottom: 0.25rem; 14 | display: block; 15 | font-family: $font-secondary; 16 | cursor: pointer; 17 | } 18 | 19 | fieldset { 20 | margin-top: $spacing; 21 | margin-bottom: $spacing; 22 | padding: $spacing; 23 | border: 0.0625rem solid $color-grey; 24 | } 25 | 26 | legend { 27 | margin: 0; 28 | margin-left: -0.5rem; 29 | padding: 0 0.5rem; 30 | display: block; 31 | font-family: $font-secondary; 32 | } 33 | 34 | .form__row, 35 | %form__row { 36 | margin-bottom: $spacing; 37 | @extend %clearfix; 38 | } 39 | 40 | input[type='date'], 41 | input[type='email'], 42 | input[type='number'], 43 | input[type='password'], 44 | input[type='search'], 45 | input[type='tel'], 46 | input[type='text'], 47 | input[type='url'], 48 | textarea, 49 | select { 50 | padding: 0.375rem; 51 | display: block; 52 | width: 100%; 53 | height: 2.375rem; 54 | font: inherit; 55 | line-height: 1.5; 56 | color: $color-grey-dark; 57 | border: 0.0625rem solid $color-grey; 58 | } 59 | 60 | // inputs 'inline-block' by default 61 | input[type='checkbox'], 62 | input[type='image'], 63 | input[type='radio'] { 64 | margin-bottom: 0; 65 | display: inline-block; 66 | width: auto; 67 | cursor: pointer; 68 | vertical-align: baseline; 69 | } 70 | 71 | textarea { 72 | height: 5.5rem; // roughly 3 lines in height 73 | overflow: auto; 74 | resize: vertical; 75 | } 76 | 77 | select { 78 | font-family: $font-secondary; 79 | } 80 | 81 | // extend '.btn' 82 | input[type='submit'] { 83 | @extend %btn; 84 | width: auto; 85 | margin-bottom: 0; 86 | } 87 | 88 | input:focus, 89 | select:focus, 90 | textarea:focus { 91 | border-color: $color-primary; 92 | border-color: rgba($color-primary, 0.8); 93 | outline: 0; 94 | outline: thin dotted \9; // IE6-9 95 | transition: border 0.2s linear; 96 | } 97 | 98 | input[disabled], 99 | textarea[disabled] { 100 | background: tint($color-grey-light, 50%); 101 | cursor: not-allowed; 102 | overflow: hidden; 103 | white-space: nowrap; 104 | } 105 | 106 | // inline form styles 107 | .form--inline { 108 | input, 109 | textarea, 110 | select { 111 | display: inline-block; 112 | width: auto; 113 | } 114 | 115 | label { 116 | display: inline-block; 117 | margin: 0 1rem 0 0; 118 | width: 6.5rem; 119 | text-align: right; 120 | } 121 | 122 | .form__row--controls, 123 | %form__row--controls { 124 | @extend %form__row; 125 | margin-left: 7.5rem; 126 | 127 | label { 128 | width: auto; 129 | } 130 | } 131 | 132 | .form__row--actions { 133 | @extend %form__row--controls; 134 | margin-bottom: 0; 135 | } 136 | } 137 | 138 | // Placeholder text colour 139 | ::-webkit-input-placeholder { 140 | color: $placeholder-text; 141 | } 142 | 143 | ::-moz-placeholder { 144 | color: $placeholder-text; 145 | } 146 | 147 | :-ms-input-placeholder { 148 | color: $placeholder-text; 149 | } 150 | -------------------------------------------------------------------------------- /scss/components/_lists.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Lists - Outline 3 | // Basic styling for lists 4 | // Docs - http://outline-css.surge.sh/get-started.html#lists 5 | //---------------------------------------------// 6 | 7 | ul, 8 | ol, 9 | dl, 10 | .list { 11 | margin-bottom: $spacing; 12 | margin-left: 1.75rem; 13 | font-family: inherit; 14 | list-style-position: outside; 15 | } 16 | 17 | ul ul, 18 | ul ol, 19 | ol ol, 20 | ol ul { 21 | margin-bottom: 0; 22 | } 23 | 24 | ul { 25 | list-style: disc; 26 | 27 | ul { 28 | list-style: square; 29 | 30 | ul { 31 | list-style: circle; 32 | } 33 | } 34 | } 35 | 36 | ol { 37 | list-style: decimal; 38 | 39 | ol { 40 | list-style: upper-alpha; 41 | 42 | ol { 43 | list-style: lower-roman; 44 | } 45 | } 46 | } 47 | 48 | dl { 49 | margin-left: 0; 50 | } 51 | 52 | dt { 53 | font-weight: bold; 54 | font-family: $font-secondary; 55 | } 56 | 57 | .list--unstyled, 58 | %list--unstyled { 59 | margin-left: 0; 60 | list-style: none; 61 | } 62 | 63 | .list--inline, 64 | %list--inline { 65 | margin-left: 0; 66 | 67 | li { 68 | display: inline-block; 69 | margin-right: 0.5rem; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /scss/components/_media.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Media - Outline 3 | // Basic styling for media & flag object 4 | // Docs - http://outline-css.surge.sh/get-started.html#media-objects 5 | //---------------------------------------------// 6 | 7 | // media object 8 | .media { 9 | display: block; 10 | margin-bottom: $spacing; 11 | @extend %clearfix; 12 | } 13 | 14 | .media__item { 15 | float: left; 16 | margin: 0 $spacing $spacing 0; 17 | } 18 | 19 | // Reversed item - right instead of left 20 | .media__item--reversed { 21 | float: right; 22 | margin-left: $spacing; 23 | } 24 | 25 | .media__item img, 26 | .media__item--reversed img { 27 | display: block; 28 | } 29 | 30 | .media__body { 31 | overflow: hidden; 32 | 33 | &:last-child { 34 | margin-bottom: 0; 35 | } 36 | } 37 | 38 | // flag object 39 | .flag { 40 | display: table; 41 | width: 100%; 42 | margin-bottom: $spacing; 43 | } 44 | 45 | .flag__item, 46 | .flag__body { 47 | display: table-cell; 48 | vertical-align: middle; 49 | 50 | .flag--top & { 51 | vertical-align: top; 52 | } 53 | 54 | .flag--bottom & { 55 | vertical-align: bottom; 56 | } 57 | } 58 | 59 | .flag__item { 60 | padding-right: $spacing; 61 | 62 | > img { 63 | display: block; 64 | max-width: none; 65 | } 66 | 67 | .flag--reversed & { 68 | padding-right: 0; 69 | padding-left: $spacing; 70 | } 71 | } 72 | 73 | .flag__body { 74 | width: 100%; 75 | 76 | p:last-of-type { 77 | margin-bottom: 0; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /scss/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Pagination - Outline 3 | // Basic styling for pagination 4 | // Docs - http://outline-css.surge.sh/get-started.html#pagination 5 | //---------------------------------------------// 6 | 7 | .pager { 8 | margin-bottom: $spacing; 9 | font-family: $font-secondary; 10 | text-align: center; 11 | @extend %list--unstyled; 12 | 13 | li { 14 | margin: 0 0.5rem 0.5rem 0; 15 | display: inline-block; 16 | 17 | &:last-child { 18 | margin-right: 0; 19 | } 20 | 21 | &:hover { 22 | background-color: tint($color-grey-light, 20%); 23 | } 24 | 25 | a { 26 | display: inline-block; 27 | padding: 0.25rem 0.75rem; 28 | } 29 | 30 | &.pager--current { 31 | background-color: $color-primary; 32 | 33 | a { 34 | color: #fff; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /scss/components/_tables.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Tables - Outline 3 | // Basic styles for tables 4 | // Docs - http://outline-css.surge.sh/get-started.html#tables 5 | //---------------------------------------------// 6 | 7 | table { 8 | max-width: 100%; 9 | width: 100%; 10 | margin-bottom: $spacing; 11 | border-spacing: 0; 12 | border-collapse: collapse; 13 | border: 0; 14 | 15 | th, 16 | tfoot td { 17 | text-align: left; 18 | font-weight: 700; 19 | font-family: $font-secondary; 20 | } 21 | 22 | th, 23 | td { 24 | padding: 0.625rem; 25 | vertical-align: top; 26 | } 27 | } 28 | 29 | table, 30 | .table { 31 | thead > tr { 32 | border-bottom: 0.0625rem solid $color-grey-light; 33 | } 34 | } 35 | 36 | .table--stripes { 37 | tbody > tr:nth-child(odd) > td { 38 | background-color: tint($color-grey-light, 50%); 39 | } 40 | } 41 | 42 | .table--border-rows { 43 | tr { 44 | border-bottom: 0.0625rem solid $color-grey-light; 45 | } 46 | } 47 | 48 | .table--border-cells { 49 | th, 50 | td { 51 | border: 0.0625rem solid $color-grey-light; 52 | } 53 | } 54 | 55 | .table--condensed { 56 | thead > tr { 57 | border-bottom: 0.0625rem solid $color-grey-light; 58 | } 59 | 60 | th, 61 | td { 62 | padding: 0.25rem; 63 | } 64 | } 65 | 66 | // responsive table container 67 | .table--responsive { 68 | overflow-x: auto; 69 | width: 100%; 70 | margin-bottom: $spacing; 71 | -webkit-overflow-scrolling: touch; 72 | 73 | table { 74 | margin-bottom: 0.5rem; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /scss/components/readme.md: -------------------------------------------------------------------------------- 1 | The components folder breaks up UI's and CSS into smaller pieces. Build individual components which only focuses on one task at a time. 2 | -------------------------------------------------------------------------------- /scss/layout/_susy-config.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Susy config (2.2.5) 3 | // Docs - http://outline-css.surge.sh/get-started.html#susy 4 | //---------------------------------------------// 5 | 6 | $susy: ( 7 | columns: 12, 8 | gutters: 0.25, 9 | gutter-position: split, 10 | container: $widescreen, 11 | ); 12 | 13 | .container { 14 | @include container(); 15 | } 16 | -------------------------------------------------------------------------------- /scss/layout/readme.md: -------------------------------------------------------------------------------- 1 | The layout folder contains all the css for laying out the project. For example this can include grids, header, nav and footer. 2 | -------------------------------------------------------------------------------- /scss/outline.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Outline v0.1 3 | // A lightweight front-end boilerplate by Matt Harris 4 | // Free to use under the MIT License 5 | // Docs - http://outline-css.surge.sh/get-started.html 6 | //---------------------------------------------// 7 | 8 | @import '../susy/susy'; 9 | 10 | // Vendors and external stylesheets 11 | @import 'vendors/font-awesome'; 12 | 13 | // Utilities - make sure you import variables first 14 | @import 'utils/variables', 'utils/functions', 'utils/mixins', 'utils/helpers'; 15 | 16 | // Base 17 | @import 'base/print', 'base/reset', 'base/typography'; 18 | 19 | // Layout 20 | @import 'layout/susy-config'; 21 | 22 | // Components 23 | @import 'components/buttons', 'components/code', 'components/embed', 'components/forms', 24 | 'components/lists', 'components/media', 'components/pagination', 'components/tables'; 25 | 26 | // Pages 27 | 28 | // Themes 29 | -------------------------------------------------------------------------------- /scss/pages/readme.md: -------------------------------------------------------------------------------- 1 | The pages folder holds page specific css. E.g if you need specific styles for the home page _home.scss 2 | -------------------------------------------------------------------------------- /scss/themes/readme.md: -------------------------------------------------------------------------------- 1 | The themes folder. When working on a large project you can have multiple themes e.g. _theme.scss and _admin.scss 2 | -------------------------------------------------------------------------------- /scss/utils/_functions.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Functions -- Outline 3 | // e.g. color: tint($color-grey-dark, 30%); 4 | // Docs - http://outline-css.surge.sh/get-started.html#functions 5 | //---------------------------------------------// 6 | 7 | // Slightly lighten a colour 8 | @function tint($color, $percent) { 9 | @return mix(white, $color, $percent); 10 | } 11 | 12 | // Slightly darken a colour 13 | @function shade($color, $percent) { 14 | @return mix(black, $color, $percent); 15 | } 16 | -------------------------------------------------------------------------------- /scss/utils/_helpers.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Helper classes - Outline 3 | // Docs - http://outline-css.surge.sh/get-started.html#helpers 4 | //---------------------------------------------// 5 | 6 | // clearfix 7 | .clearfix, 8 | %clearfix { 9 | &:after { 10 | content: ''; 11 | display: table; 12 | clear: both; 13 | } 14 | } 15 | 16 | // align 17 | .align-left, 18 | %align-left { 19 | text-align: left; 20 | } 21 | 22 | .align-center, 23 | %align-center { 24 | text-align: center; 25 | } 26 | 27 | .align-right, 28 | %align-right { 29 | text-align: right; 30 | } 31 | 32 | .justify, 33 | %justify { 34 | text-align: justify; 35 | } 36 | 37 | // floats 38 | .float-left, 39 | %float-left { 40 | float: left; 41 | } 42 | 43 | .float-center, 44 | %float-center { 45 | float: none; 46 | margin-left: auto; 47 | margin-right: auto; 48 | } 49 | 50 | .float-right, 51 | %float-right { 52 | float: right; 53 | } 54 | 55 | // spacing 56 | .no-space, 57 | %no-space { 58 | margin: 0; 59 | padding: 0; 60 | } 61 | 62 | .space, 63 | %space { 64 | margin: $spacing; 65 | } 66 | 67 | .space-top, 68 | %space-top { 69 | margin-top: $spacing; 70 | } 71 | 72 | .space-right, 73 | %space-right { 74 | margin-right: $spacing; 75 | } 76 | 77 | .space-btm, 78 | %space-btm { 79 | margin-bottom: $spacing; 80 | } 81 | 82 | .space-left, 83 | %space-left { 84 | margin-left: $spacing; 85 | } 86 | 87 | // background colours 88 | .bg-primary, 89 | %bg-primary { 90 | background-color: $color-primary; 91 | } 92 | 93 | .bg-secondary, 94 | %bg-secondary { 95 | background-color: $color-secondary; 96 | } 97 | 98 | .bg-tertiary, 99 | %bg-tertiary { 100 | background-color: $color-tertiary; 101 | } 102 | 103 | .bg-grey, 104 | %bg-grey { 105 | background-color: $color-grey; 106 | } 107 | 108 | .bg-grey-light, 109 | %bg-grey-light { 110 | background-color: $color-grey-light; 111 | } 112 | 113 | .bg-grey-dark, 114 | %bg-grey-dark { 115 | background-color: $color-grey-dark; 116 | } 117 | 118 | .bg-white, 119 | %bg-white { 120 | background-color: #fff; 121 | } 122 | 123 | // text colours 124 | .text-primary, 125 | %text-primary { 126 | color: $color-primary; 127 | } 128 | 129 | .text-secondary, 130 | %text-secondary { 131 | color: $color-secondary; 132 | } 133 | 134 | .text-tertiary, 135 | %text-tertiary { 136 | color: $color-tertiary; 137 | } 138 | 139 | .text-grey, 140 | %text-grey { 141 | color: $color-grey; 142 | } 143 | 144 | .text-grey-light, 145 | %text-grey-light { 146 | color: $color-grey-light; 147 | } 148 | 149 | .text-white, 150 | %text-white { 151 | color: #fff; 152 | } 153 | 154 | // center image 155 | .img-center, 156 | %img-center { 157 | display: block; 158 | margin: 0 auto $spacing auto; 159 | } 160 | 161 | // make text uppercase 162 | .is-uppercase, 163 | %is-uppercase { 164 | text-transform: uppercase; 165 | } 166 | 167 | // hide from browsers & screenreaders 168 | .hide, 169 | %hide { 170 | display: none; 171 | visibility: hidden; 172 | } 173 | 174 | // hide visually, but available for screenreaders 175 | .visuallyhidden, 176 | %visuallyhidden { 177 | position: absolute; 178 | margin: -1px; 179 | padding: 0; 180 | height: 1px; 181 | width: 1px; 182 | border: 0; 183 | overflow: hidden; 184 | clip: rect(0 0 0 0); 185 | } 186 | 187 | // extends the .visuallyhidden class to allow the element to 188 | // be focusable when navigated to via the keyboard 189 | .visuallyhidden.focusable:active, 190 | .visuallyhidden.focusable:focus { 191 | position: static; 192 | margin: 0; 193 | width: auto; 194 | height: auto; 195 | overflow: visible; 196 | clip: auto; 197 | } 198 | -------------------------------------------------------------------------------- /scss/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Mixins - Outline 3 | // e.g. @include respond-min($tablet) { 4 | // background-color: $color-primary; 5 | // } 6 | // Docs - http://outline-css.surge.sh/get-started.html#mixins 7 | //---------------------------------------------// 8 | 9 | // media queries / breakpoints 10 | @mixin respond-min($width) { 11 | @media screen and (min-width: $width) { 12 | @content; 13 | } 14 | } 15 | 16 | // ghost buttons 17 | @mixin ghost-btn($color) { 18 | color: $color; 19 | border: 0.125rem solid $color; 20 | background-color: transparent; 21 | 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | background-color: $color; 26 | } 27 | } 28 | 29 | // gradients 30 | @mixin gradient($angle, $colour1, $colour2) { 31 | background: $colour1; 32 | background: linear-gradient(#{$angle}deg, $colour1 0%, $colour2 100%); 33 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$colour1', endColorstr='$colour2',GradientType=1 ); 34 | } 35 | 36 | // icons 37 | @mixin icon($icon) { 38 | @extend %icon; 39 | @extend %icon-#{$icon}; 40 | } 41 | 42 | @mixin icon-before($icon, $padding: 0.5rem) { 43 | &:before { 44 | @extend %icon; 45 | @extend %icon-#{$icon}; 46 | padding-right: $padding; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/utils/_variables.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------// 2 | // Variables - Outline 3 | // all variables... 4 | // Docs - http://outline-css.surge.sh/get-started.html#variables 5 | //---------------------------------------------// 6 | 7 | // html 8 | $html-font-base: 100%; // 16px 9 | $font-base: 1rem; // 16px 10 | $spacing: 1.5rem; // 24px 11 | 12 | // Fonts 13 | $font-primary: 'Merriweather', serif; // body font 14 | $font-secondary: 'Lato', sans-serif; // title font 15 | $font-monospace: Monaco, Consolas, 'Lucida Console', monospace; 16 | 17 | // Colours 18 | $color-primary: #38a1d6; 19 | $color-secondary: #16f4d0; 20 | $color-tertiary: #fcee21; 21 | $color-grey: #a1acb5; 22 | $color-grey-light: #dce8ef; 23 | $color-grey-dark: #333; 24 | 25 | // Placeholder text colour 26 | $placeholder-text: $color-grey; 27 | 28 | // Button text color 29 | $btn-text-color: #fff; 30 | $btn-text-color-alt: $color-grey-dark; 31 | 32 | // Breakpoints 33 | $mobile-landscape: 30rem; // 480px 34 | $tablet: 40rem; // 640px 35 | $tablet-wide: 48rem; // 768px 36 | $desktop: 64rem; // 1024px 37 | $widescreen: 71.25rem; // 1140px 38 | -------------------------------------------------------------------------------- /scss/utils/readme.md: -------------------------------------------------------------------------------- 1 | The Utils folder contains all the Sass tools, mixins, variables and helpers used across the project. 2 | -------------------------------------------------------------------------------- /scss/vendors/readme.md: -------------------------------------------------------------------------------- 1 | The vendors folder contains all the CSS for external libraries and frameworks e.g Font awesome 2 | -------------------------------------------------------------------------------- /susy/_su.scss: -------------------------------------------------------------------------------- 1 | // Su 2 | // == 3 | 4 | @import 'susy/su'; 5 | -------------------------------------------------------------------------------- /susy/_susy.scss: -------------------------------------------------------------------------------- 1 | // Susy 2 | // ==== 3 | 4 | @import 'susy/language/susy'; 5 | -------------------------------------------------------------------------------- /susy/_susyone.scss: -------------------------------------------------------------------------------- 1 | // Susy 2 | // ==== 3 | 4 | @import 'susy/language/susyone'; 5 | -------------------------------------------------------------------------------- /susy/susy/_su.scss: -------------------------------------------------------------------------------- 1 | // Su 2 | // == 3 | 4 | @import "su/utilities"; 5 | @import "su/settings"; 6 | @import "su/validation"; 7 | @import "su/grid"; 8 | -------------------------------------------------------------------------------- /susy/susy/language/_susy.scss: -------------------------------------------------------------------------------- 1 | // Susy Next Syntax 2 | // ================ 3 | 4 | $susy-version: 2.1; 5 | 6 | @import "../su"; 7 | @import "../output/float"; 8 | 9 | @import "susy/settings"; 10 | @import "susy/validation"; 11 | @import "susy/grids"; 12 | @import "susy/box-sizing"; 13 | @import "susy/context"; 14 | @import "susy/background"; 15 | @import "susy/container"; 16 | @import "susy/span"; 17 | @import "susy/gutters"; 18 | @import "susy/isolate"; 19 | @import "susy/gallery"; 20 | @import "susy/rows"; 21 | @import "susy/margins"; 22 | @import "susy/padding"; 23 | @import "susy/bleed"; 24 | @import "susy/breakpoint-plugin"; 25 | -------------------------------------------------------------------------------- /susy/susy/language/_susyone.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Partials 3 | 4 | $susy-version: 1.5; 5 | 6 | @import "susyone/settings"; 7 | @import "susyone/functions"; 8 | @import "susyone/grid"; 9 | @import "susyone/isolation"; 10 | @import "susyone/padding"; 11 | @import "susyone/margin"; 12 | @import "susyone/media"; 13 | @import "susyone/background"; 14 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_background.scss: -------------------------------------------------------------------------------- 1 | // Background Grid Syntax 2 | // ====================== 3 | 4 | $susy-overlay-grid-head-exists: false; 5 | 6 | 7 | // Show Grid/s 8 | // ----------- 9 | // Show grid on any element using either background or overlay. 10 | // - [$grid] : 11 | @mixin show-grid( 12 | $grid: $susy 13 | ) { 14 | $inspect: $grid; 15 | $_output: debug-get(output, $grid); 16 | 17 | @include susy-inspect(show-grid, $inspect); 18 | @if $_output == overlay and susy-get(debug image, $grid) != hide { 19 | @include overlay-grid($grid); 20 | } @else { 21 | @include background-grid($grid); 22 | } 23 | } 24 | 25 | @mixin show-grids( 26 | $grid: $susy 27 | ) { 28 | @include show-grid($grid); 29 | } 30 | 31 | // Background Grid 32 | // --------------- 33 | // Show a grid background on any element. 34 | // - [$grid] : 35 | @mixin background-grid( 36 | $grid: $susy 37 | ) { 38 | $inspect : $grid; 39 | $_output : get-background($grid); 40 | 41 | @if length($_output) > 0 { 42 | $_flow: susy-get(flow, $grid); 43 | 44 | $_image: (); 45 | @each $name, $layer in map-get($_output, image) { 46 | $_direction: if($name == baseline, to bottom, to to($_flow)); 47 | $_image: append($_image, linear-gradient($_direction, $layer), comma); 48 | } 49 | $_output: map-merge($_output, (image: $_image)); 50 | 51 | @include background-grid-output($_output...); 52 | @include susy-inspect(background-grid, $inspect); 53 | } 54 | } 55 | 56 | 57 | // Overlay Grid 58 | // ------------ 59 | // Generate an icon to trigger grid-overlays on any given elements. 60 | // $grids... : [] [, ]* 61 | @mixin overlay-grid ( 62 | $grid: $susy 63 | ) { 64 | @if not($susy-overlay-grid-head-exists) { 65 | @at-root head { @include overlay-head($grid); } 66 | @at-root head:before { @include overlay-trigger; } 67 | @at-root head:hover { @include overlay-trigger-hover; } 68 | $susy-overlay-grid-head-exists: true !global; 69 | } 70 | 71 | head:hover ~ &, 72 | head:hover ~ body & { 73 | position: relative; 74 | &:before { 75 | @include grid-overlay-base; 76 | @include background-grid($grid); 77 | } 78 | } 79 | } 80 | 81 | 82 | // [Private] Overlay Trigger 83 | // ------------------------- 84 | @mixin overlay-trigger { 85 | content: "|||"; 86 | display: block; 87 | padding: 5px 10px; 88 | font: { 89 | family: sans-serif; 90 | size: 16px; 91 | weight: bold; 92 | } 93 | } 94 | 95 | 96 | // [Private] Overlay Trigger Hover 97 | // ------------------------------- 98 | @mixin overlay-trigger-hover { 99 | background: rgba(white, .5); 100 | color: red; 101 | } 102 | 103 | 104 | // [Private] Overlay Head 105 | // ---------------------- 106 | // styles to create grid overlay toggle 107 | @mixin overlay-head ( 108 | $grid: $susy 109 | ) { 110 | $_toggle: debug-get(toggle, $grid); 111 | $_horz: null; 112 | $_vert: null; 113 | 114 | @each $side in $_toggle { 115 | $_horz: if($side == left or $side == right, $side, $_horz); 116 | $_vert: if($side == top or $side == bottom, $side, $_vert); 117 | } 118 | 119 | display: block; 120 | position: fixed; 121 | #{$_horz}: 10px; 122 | #{$_vert}: 10px; 123 | z-index: 999; 124 | color: #333; 125 | background: rgba(white, .25); 126 | } 127 | 128 | 129 | // [Private] Grid Overlay Base 130 | // --------------------------- 131 | // Base styles for generating a grid overlay 132 | @mixin grid-overlay-base() { 133 | position: absolute; 134 | top: 0; 135 | left: 0; 136 | bottom: 0; 137 | right: 0; 138 | content: " "; 139 | z-index: 998; 140 | } 141 | 142 | 143 | // Get Symmetrical Background 144 | // -------------------------- 145 | // - $grid: 146 | @function get-background-sym( 147 | $grid 148 | ) { 149 | $grid : parse-grid($grid); 150 | $_gutters : susy-get(gutters, $grid); 151 | $_column-width : susy-get(column-width, $grid); 152 | $_math : susy-get(math, $grid); 153 | 154 | $_color : debug-get(color); 155 | $_trans : transparent; 156 | $_light : lighten($_color, 15%); 157 | 158 | $_end : 1 + $_gutters; 159 | $_after : percentage(1/$_end); 160 | $_stops : (); 161 | $_size : span(1 $grid wide); 162 | 163 | @if is-inside($grid) { 164 | $_stops: $_color, $_light; 165 | } @else if is-split($grid) { 166 | $_split: $_gutters/2; 167 | $_before: percentage($_split/$_end); 168 | $_after: percentage((1 + $_split)/$_end); 169 | $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after; 170 | } @else { 171 | $_stops: $_color, $_light $_after, $_trans $_after; 172 | } 173 | 174 | @if $_math == static { 175 | $_size: valid-column-math($_math, $_column-width) * $_end; 176 | } 177 | 178 | $_output: ( 179 | image: (columns: $_stops), 180 | size: $_size, 181 | ); 182 | 183 | @return $_output; 184 | } 185 | 186 | 187 | // Get Asymmetrical Inside 188 | // ----------------------- 189 | // - $grid: 190 | @function get-asym-inside( 191 | $grid 192 | ) { 193 | $grid : parse-grid($grid); 194 | $_columns : susy-get(columns, $grid); 195 | 196 | $_color : debug-get(color); 197 | $_light : lighten($_color, 15%); 198 | $_stops : (); 199 | 200 | @for $location from 1 through susy-count($_columns) { 201 | $this-stop: (); 202 | 203 | @if $location == 1 { 204 | $this-stop: append($this-stop, $_color, comma); 205 | } @else { 206 | $start: parse-span(1 at $location $grid); 207 | $start: get-isolation($start); 208 | $this-stop: append($this-stop, $_color $start, comma); 209 | } 210 | 211 | @if $location == susy-count($_columns) { 212 | $this-stop: append($this-stop, $_light, comma); 213 | } @else { 214 | $_end: parse-span(1 at ($location + 1) $grid); 215 | $_end: get-isolation($_end); 216 | $this-stop: append($this-stop, $_light $_end, comma); 217 | } 218 | 219 | $_stops: join($_stops, $this-stop, comma); 220 | } 221 | 222 | @return $_stops; 223 | } 224 | 225 | 226 | // Get Asymmetrical Split 227 | // ---------------------- 228 | // - $grid: 229 | @function get-asym-split( 230 | $grid 231 | ) { 232 | $grid : parse-grid($grid); 233 | $_columns : susy-get(columns, $grid); 234 | 235 | $_color : debug-get(color); 236 | $_light : lighten($_color, 15%); 237 | $_stops : (); 238 | 239 | @for $location from 1 through susy-count($_columns) { 240 | $this-stop: (); 241 | 242 | $start: parse-span(1 at $location $grid); 243 | $start: get-isolation($start); 244 | $this-stop: append($this-stop, transparent $start, comma); 245 | $this-stop: append($this-stop, $_color $start, comma); 246 | 247 | $_end: $start + span(1 at $location $grid); 248 | $this-stop: append($this-stop, $_light $_end, comma); 249 | $this-stop: append($this-stop, transparent $_end, comma); 250 | 251 | $_stops: join($_stops, $this-stop, comma); 252 | } 253 | 254 | @return $_stops; 255 | } 256 | 257 | 258 | // Get Asymmetrical Outside 259 | // ------------------------ 260 | // - $grid: 261 | @function get-asym-outside( 262 | $grid 263 | ) { 264 | $grid : parse-grid($grid); 265 | $_columns : susy-get(columns, $grid); 266 | 267 | $_color : debug-get(color); 268 | $_light : lighten($_color, 15%); 269 | $_trans : transparent; 270 | $_stops : (); 271 | 272 | @for $location from 1 through susy-count($_columns) { 273 | $this-stop: (); 274 | 275 | @if $location == 1 { 276 | $this-stop: append($this-stop, $_color, comma); 277 | } @else { 278 | $start: parse-span(1 at $location $grid); 279 | $start: get-isolation($start); 280 | $this-stop: append($this-stop, $_color $start, comma); 281 | } 282 | 283 | @if $location == susy-count($_columns) { 284 | $this-stop: append($this-stop, $_light, comma); 285 | } @else { 286 | $gutter: get-span-width(first $location $grid); 287 | 288 | $_end: parse-span(1 at ($location + 1) $grid); 289 | $_end: get-isolation($_end); 290 | 291 | $gutter: $_light $gutter, $_trans $gutter, $_trans $_end; 292 | $this-stop: join($this-stop, $gutter, comma); 293 | } 294 | 295 | $_stops: join($_stops, $this-stop, comma); 296 | } 297 | 298 | @return $_stops; 299 | } 300 | 301 | 302 | // Get Asymmetrical Background 303 | // --------------------------- 304 | // - $grid: 305 | @function get-background-asym( 306 | $grid 307 | ) { 308 | $_stops: (); 309 | 310 | @if is-inside($grid) { 311 | $_stops: get-asym-inside($grid); 312 | } @else if is-split($grid) { 313 | $_stops: get-asym-split($grid); 314 | } @else { 315 | $_stops: get-asym-outside($grid); 316 | } 317 | 318 | @return (image: (columns: $_stops)); 319 | } 320 | 321 | 322 | // Get Background 323 | // -------------- 324 | // - $grid: 325 | @function get-background( 326 | $grid 327 | ) { 328 | $grid : parse-grid($grid); 329 | $_show : susy-get(debug image, $grid); 330 | $_return : (); 331 | 332 | @if $_show and $_show != 'hide' { 333 | $_columns: susy-get(columns, $grid); 334 | 335 | @if $_show != 'show-baseline' { 336 | $_sym: is-symmetrical($_columns); 337 | $_return: if($_sym, get-background-sym($grid), get-background-asym($grid)); 338 | $_return: map-merge($_return, (clip: content-box)); 339 | } 340 | 341 | @if $_show != 'show-columns' 342 | and global-variable-exists(base-line-height) 343 | and type-of($base-line-height) == 'number' 344 | and not unitless($base-line-height) { 345 | $_color: variable-exists('grid-background-baseline-color'); 346 | $_color: if($_color, $grid-background-baseline-color, #000); 347 | 348 | $_image: map-get($_return, image); 349 | $_size: map-get($_return, size); 350 | $_baseline: (baseline: ($_color 1px, transparent 1px)); 351 | $_baseline-size: 100% $base-line-height; 352 | 353 | $_return: map-merge($_return, ( 354 | image: if($_image, map-merge($_image, $_baseline), $_baseline), 355 | size: if($_size, ($_size, $_baseline-size), $_baseline-size), 356 | )); 357 | 358 | @if $_show == 'show' { 359 | $_clip: map-get($_return, clip); 360 | $_return: map-merge($_return, (clip: join($_clip, border-box, comma))); 361 | } 362 | } @else if $_show == 'show-baseline' { 363 | @warn 'Please provide a $base-line-height with the desired height and units'; 364 | } 365 | } 366 | 367 | @if map-get($_return, image) { 368 | $_return: map-merge($_return, (flow: susy-get(flow, $grid))); 369 | } 370 | 371 | @return $_return; 372 | } 373 | 374 | 375 | // Get Debug 376 | // --------- 377 | // Return the value of a debug setting 378 | // - $key: 379 | @function debug-get( 380 | $key, 381 | $grid: $susy 382 | ) { 383 | $key: join(debug, $key, space); 384 | @return susy-get($key, $grid); 385 | } 386 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_bleed.scss: -------------------------------------------------------------------------------- 1 | // Bleed Syntax 2 | // ============ 3 | 4 | // Bleed 5 | // ----- 6 | // Add negative margins, and equal positive padding to create bleed. 7 | // - $bleed : 8 | @mixin bleed( 9 | $bleed: 0 gutter() 10 | ) { 11 | $inspect : $bleed; 12 | $output : get-bleed($bleed); 13 | 14 | @if susy-get(global-box-sizing) != content-box { 15 | $output: map-merge((box-sizing: content-box), $output); 16 | } 17 | 18 | @include susy-inspect(bleed, $inspect); 19 | @include output($output); 20 | } 21 | 22 | 23 | // Bleed-x 24 | // ------- 25 | // Shortcut for horizontal bleed. 26 | // - $bleed : 27 | @mixin bleed-x( 28 | $bleed: gutter() 29 | ) { 30 | $bleed : parse-span($bleed); 31 | $trbl : susy-get(span, $bleed); 32 | 33 | @if length($trbl) == 1 { 34 | $bleed: map-merge($bleed, (span: 0 nth($trbl, 1))); 35 | } @else if length($trbl) == 2 { 36 | $bleed: map-merge($bleed, (span: 0 nth($trbl, 2) 0 nth($trbl, 1))); 37 | } @else { 38 | @warn 'bleed-x only takes 2 lengths, but #{length($trbl)} were passed.'; 39 | } 40 | 41 | @include bleed($bleed); 42 | } 43 | 44 | 45 | // Bleed-y 46 | // ------- 47 | // Shortcut for vertical bleed. 48 | // - $bleed : 49 | @mixin bleed-y( 50 | $bleed: if(function-exists(rhythm), rhythm(1), 1em) 51 | ) { 52 | $bleed : parse-span($bleed); 53 | $trbl : susy-get(span, $bleed); 54 | 55 | @if length($trbl) == 1 { 56 | $bleed: map-merge($bleed, (span: nth($trbl, 1) 0)); 57 | } @else if length($trbl) == 2 { 58 | $bleed: map-merge($bleed, (span: nth($trbl, 1) 0 nth($trbl, 2) 0)); 59 | } @else { 60 | @warn 'bleed-y only takes 2 lengths, but #{length($trbl)} were passed.'; 61 | } 62 | 63 | @include bleed($bleed); 64 | } 65 | 66 | 67 | // Get Bleed 68 | // --------- 69 | // Return bleed output values 70 | // - $bleed: 71 | @function get-bleed( 72 | $bleed 73 | ) { 74 | $bleed : map-merge((spread: wide), parse-span($bleed)); 75 | $trbl : susy-get(span, $bleed); 76 | $short : null; 77 | $output : (); 78 | 79 | @for $i from 1 through length($trbl) { 80 | $this: nth($trbl, $i); 81 | $new: (); 82 | $margin: null; 83 | $padding: null; 84 | $padding-x: null; 85 | 86 | @if $this > 0 { 87 | $this: map-merge($bleed, (span: $this)); 88 | $margin: span($this); 89 | $padding: $margin; 90 | $padding-x: $padding; 91 | } 92 | 93 | @if $margin and $margin > 0 { 94 | $margin: - $margin; 95 | 96 | @if is-inside($this) { 97 | $gutter: gutter($this); 98 | $join: if($gutter and comparable($padding, $gutter), true, false); 99 | $padding-x: if($join and $padding > 0, $padding + $gutter, $padding); 100 | } 101 | } 102 | 103 | @if $i == 1 { 104 | $new: ( 105 | margin-top: $margin, 106 | padding-top: $padding, 107 | margin-right: $margin, 108 | padding-right: $padding-x, 109 | margin-bottom: $margin, 110 | padding-bottom: $padding, 111 | margin-left: $margin, 112 | padding-left: $padding-x, 113 | ); 114 | } @else if $i == 2 { 115 | $new: ( 116 | margin-right: $margin, 117 | padding-right: $padding-x, 118 | margin-left: $margin, 119 | padding-left: $padding-x, 120 | ); 121 | } @else if $i == 3 { 122 | $new: ( 123 | margin-bottom: $margin, 124 | padding-bottom: $padding, 125 | ); 126 | } @else if $i == 4 { 127 | $new: ( 128 | margin-left: $margin, 129 | padding-left: $padding-x, 130 | ); 131 | } 132 | 133 | $output: map-merge($output, $new); 134 | } 135 | 136 | @each $prop, $value in $output { 137 | $output: if($value == 0, map-merge($output, ($prop: null)), $output); 138 | } 139 | 140 | @return bleed-shorthand($output); 141 | } 142 | 143 | // Bleed Shorthand 144 | // --------------- 145 | // Convert bleed output into shorthand when possible. 146 | // - $bleed: 147 | @function bleed-shorthand( 148 | $bleed 149 | ) { 150 | $margin: (); 151 | $padding: (); 152 | $return: (); 153 | 154 | @each $key, $value in $bleed { 155 | @if str-index($key, margin) { 156 | $margin: map-merge($margin, ($key: $value)); 157 | } @else if str-index($key, padding) > 0 { 158 | $padding: map-merge($padding, ($key: $value)); 159 | } 160 | } 161 | 162 | $props: ( 163 | margin: $margin, 164 | padding: $padding, 165 | ); 166 | 167 | @each $name, $map in $props { 168 | $four: if(length(map-keys($map)) == 4, true, false); 169 | $null: if(index(map-values($map), null), true, false); 170 | 171 | @if $four and not($null) { 172 | $top: map-get($map, '#{$name}-top'); 173 | $right: map-get($map, '#{$name}-right'); 174 | $bottom: map-get($map, '#{$name}-bottom'); 175 | $left: map-get($map, '#{$name}-left'); 176 | 177 | $tb: if($top == $bottom, $top, null); 178 | $rl: if($right == $left, $right, null); 179 | $all: if($tb == $rl, $tb, null); 180 | 181 | $new: if($all, $all, null); 182 | 183 | @if not($new) { 184 | @if $tb and $rl { 185 | $new: $tb $rl; 186 | } @else if $rl { 187 | $new: $top $rl $bottom; 188 | } @else { 189 | $new: $top $right $bottom $left; 190 | } 191 | } 192 | 193 | $return: map-merge($return, ($name: $new)); 194 | } @else { 195 | $return: map-merge($return, $map); 196 | } 197 | } 198 | 199 | @return $return; 200 | } 201 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | // Susy Box Sizing 2 | // ================= 3 | 4 | // Global Box Sizing 5 | // ----------------- 6 | // Set a box model globally on all elements. 7 | // - [$box]: border-box | content-box 8 | // - [$inherit]: true | false 9 | @mixin global-box-sizing( 10 | $box: susy-get(global-box-sizing), 11 | $inherit: false 12 | ) { 13 | $inspect: $box; 14 | 15 | @if $inherit { 16 | @at-root { 17 | html { @include output((box-sizing: $box)); } 18 | *, *:before, *:after { box-sizing: inherit; } 19 | } 20 | } @else { 21 | *, *:before, *:after { @include output((box-sizing: $box)); } 22 | } 23 | 24 | @include susy-inspect(global-box-sizing, $inspect); 25 | @include update-box-model($box); 26 | } 27 | 28 | // Border Box Sizing 29 | // ----------------- 30 | // A legacy shortcut... 31 | // - [$inherit]: true | false 32 | @mixin border-box-sizing( 33 | $inherit: false 34 | ) { 35 | @include global-box-sizing(border-box, $inherit); 36 | } 37 | 38 | // Update Box Model 39 | // ---------------- 40 | // PRIVATE: Updates global box model setting 41 | @mixin update-box-model( 42 | $box 43 | ) { 44 | @if $box != susy-get(global-box-sizing) { 45 | @include susy-set(global-box-sizing, $box); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_breakpoint-plugin.scss: -------------------------------------------------------------------------------- 1 | // Breakpoint Integration 2 | // ====================== 3 | 4 | $susy-media: () !default; 5 | $susy-media-fallback: false !default; 6 | 7 | $_susy-media-context: (); 8 | 9 | 10 | // Susy Breakpoint 11 | // --------------- 12 | // Change grids at different media query breakpoints. 13 | // - $query : [] | | 14 | // - $layout : 15 | // - $no-query : | 16 | @mixin susy-breakpoint( 17 | $query, 18 | $layout: false, 19 | $no-query: $susy-media-fallback 20 | ) { 21 | @include susy-media-router($query, $no-query) { 22 | @if $layout { 23 | @include with-layout($layout) { 24 | @content; 25 | } 26 | } @else { 27 | @content; 28 | } 29 | } 30 | } 31 | 32 | 33 | // Susy Media 34 | // ---------- 35 | // - $query: [] | 36 | // - $no-query: | 37 | @mixin susy-media( 38 | $query, 39 | $no-query: $susy-media-fallback 40 | ) { 41 | $old-context: $_susy-media-context; 42 | $name: if(map-has-key($susy-media, $query), $query, null); 43 | $query: susy-get-media($query); 44 | $query: susy-parse-media($query); 45 | 46 | @include susy-media-context($query, $name); 47 | 48 | @if $no-query and type-of($no-query) != string { 49 | @content; 50 | } @else { 51 | @media #{susy-render-media($query)} { 52 | @content; 53 | } 54 | 55 | @if type-of($no-query) == string { 56 | #{$no-query} & { 57 | @content; 58 | } 59 | } 60 | } 61 | 62 | @include susy-media-context($old-context, $clean: true); 63 | } 64 | 65 | 66 | // Media Router 67 | // ------------ 68 | // Rout media arguments to the correct mixin. 69 | @mixin susy-media-router( 70 | $query, 71 | $no-query: $susy-media-fallback 72 | ) { 73 | @if susy-support(breakpoint, (mixin: breakpoint), $warn: false) { 74 | @include breakpoint($query, $no-query) { 75 | @content; 76 | } 77 | } @else { 78 | @include susy-media($query, $no-query) { 79 | @content; 80 | } 81 | } 82 | } 83 | 84 | 85 | // Update Context 86 | // ------------- 87 | // Set the new media context 88 | @mixin susy-media-context( 89 | $query, 90 | $name: null, 91 | $clean: false 92 | ) { 93 | $query: map-merge((name: $name), $query); 94 | 95 | @if $clean { 96 | $_susy-media-context: $query !global; 97 | } @else { 98 | $_susy-media-context: map-merge($_susy-media-context, $query) !global; 99 | } 100 | } 101 | 102 | 103 | // Media Context 104 | // ------------- 105 | // Return the full media context, or a single media property (e.g. min-width) 106 | @function susy-media-context( 107 | $property: false 108 | ) { 109 | @if $property { 110 | @return map-get($_susy-media-context, $property); 111 | } @else { 112 | @return $_susy-media-context; 113 | } 114 | } 115 | 116 | 117 | // Get Media 118 | // --------- 119 | // Return a named media-query from $susy-media. 120 | // - $name: 121 | @function susy-get-media( 122 | $name 123 | ) { 124 | @if map-has-key($susy-media, $name) { 125 | $map-value: map-get($susy-media, $name); 126 | @if ($name == $map-value) { 127 | $name: $map-value; 128 | } @else { 129 | $name: susy-get-media($map-value); 130 | } 131 | } 132 | 133 | @return $name; 134 | } 135 | 136 | 137 | // Render Media 138 | // ------------ 139 | // Build a media-query string from various media settings 140 | @function susy-render-media( 141 | $query 142 | ) { 143 | $output: null; 144 | @each $property, $value in $query { 145 | $string: null; 146 | 147 | @if $property == media { 148 | $string: $value; 149 | } @else { 150 | $string: '(#{$property}: #{$value})'; 151 | } 152 | 153 | $output: if($output, '#{$output} and #{$string}', $string); 154 | } 155 | 156 | @return $output; 157 | } 158 | 159 | 160 | // Parse Media 161 | // ----------- 162 | // Return parsed media-query settings based on shorthand 163 | @function susy-parse-media( 164 | $query 165 | ) { 166 | $mq: null; 167 | @if type-of($query) == map { 168 | $mq: $query; 169 | } @else if type-of($query) == number { 170 | $mq: (min-width: $query); 171 | } @else if type-of($query) == list and length($query) == 2 { 172 | @if type-of(nth($query, 1)) == number { 173 | $mq: ( 174 | min-width: min($query...), 175 | max-width: max($query...), 176 | ); 177 | } @else { 178 | $mq: (nth($query, 1): nth($query, 2)); 179 | } 180 | } @else { 181 | $mq: (media: '#{$query}'); 182 | } 183 | 184 | @return $mq; 185 | } 186 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_container.scss: -------------------------------------------------------------------------------- 1 | // Container Syntax 2 | // ================ 3 | 4 | // Container [mixin] 5 | // ----------------- 6 | // Set a container element 7 | // - [$layout] : 8 | @mixin container( 9 | $layout: $susy 10 | ) { 11 | $inspect : $layout; 12 | $layout : parse-grid($layout); 13 | 14 | $_width : get-container-width($layout); 15 | $_justify : parse-container-position(susy-get(container-position, $layout)); 16 | $_property : if(susy-get(math, $layout) == static, width, max-width); 17 | 18 | $_box : susy-get(box-sizing, $layout); 19 | 20 | @if $_box { 21 | @include output((box-sizing: $_box)); 22 | } 23 | 24 | @include susy-inspect(container, $inspect); 25 | @include float-container($_width, $_justify, $_property); 26 | @include show-grid($layout); 27 | } 28 | 29 | // Container [function] 30 | // -------------------- 31 | // Return container width 32 | // - [$layout] : 33 | @function container( 34 | $layout: $susy 35 | ) { 36 | $layout: parse-grid($layout); 37 | @return get-container-width($layout); 38 | } 39 | 40 | // Get Container Width 41 | // ------------------- 42 | // Calculate the container width 43 | // - [$layout]: 44 | @function get-container-width( 45 | $layout: $susy 46 | ) { 47 | $layout : parse-grid($layout); 48 | $_width : susy-get(container, $layout); 49 | $_column-width : susy-get(column-width, $layout); 50 | $_math : susy-get(math, $layout); 51 | 52 | @if not($_width) or $_width == auto { 53 | @if valid-column-math($_math, $_column-width) { 54 | $_columns : susy-get(columns, $layout); 55 | $_gutters : susy-get(gutters, $layout); 56 | $_spread : if(is-split($layout), wide, narrow); 57 | $_width : susy-sum($_columns, $_gutters, $_spread) * $_column-width; 58 | } @else { 59 | $_width: 100%; 60 | } 61 | } 62 | 63 | @return $_width; 64 | } 65 | 66 | // Parse Container Position 67 | // ------------------------ 68 | // Parse the $container-position into margin values. 69 | // - [$justify] : left | center | right | [] 70 | @function parse-container-position( 71 | $justify: map-get($susy-defaults, container-position) 72 | ) { 73 | $_return: if($justify == left, 0, auto) if($justify == right, 0, auto); 74 | 75 | @if not(index(left right center, $justify)) { 76 | $_return: nth($justify, 1); 77 | $_return: $_return if(length($justify) > 1, nth($justify, 2), $_return); 78 | } 79 | 80 | @return $_return; 81 | } 82 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_context.scss: -------------------------------------------------------------------------------- 1 | // Context Syntax 2 | // ============== 3 | 4 | // Nested [function] 5 | // ----------------- 6 | // Return a subset grid for nested context. 7 | // - $context : 8 | @function nested( 9 | $context 10 | ) { 11 | $context : parse-span($context); 12 | $span : susy-get(span, $context); 13 | $location : get-location($context); 14 | $columns : susy-get(columns, $context); 15 | 16 | @return susy-slice($span, $location, $columns); 17 | } 18 | 19 | // Nested [mixin] 20 | // -------------- 21 | // Use a subset grid for a nested context 22 | // - $context : 23 | // - @content : 24 | @mixin nested( 25 | $context 26 | ) { 27 | $inspect : $context; 28 | $context : parse-span($context); 29 | $old : susy-get(columns); 30 | $susy : map-merge($susy, (columns: nested($context))) !global; 31 | 32 | @include susy-inspect(nested, $inspect); 33 | @content; 34 | 35 | $susy : map-merge($susy, (columns: $old)) !global; 36 | } 37 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_gallery.scss: -------------------------------------------------------------------------------- 1 | // Gallery Syntax 2 | // ============== 3 | 4 | // Gallery 5 | // ------- 6 | // Create an isolated gallery 7 | // - $span : 8 | // - [$selector] : child | of-type 9 | @mixin gallery( 10 | $span, 11 | $selector: child 12 | ) { 13 | $inspect : $span; 14 | $span : parse-span($span); 15 | $span : map-merge($span, (location: 1)); 16 | 17 | $n : susy-get(span, $span); 18 | $columns : susy-get(columns, $span); 19 | $context : susy-count($columns); 20 | $flow : susy-get(flow, $span); 21 | 22 | $inside : is-inside($span); 23 | $from : from($flow); 24 | $line : floor($context / $n); 25 | $symmetrical : is-symmetrical($columns); 26 | 27 | $output: ( 28 | width : null, 29 | float : from, 30 | margin-before : null, 31 | margin-after : null, 32 | padding-before : null, 33 | padding-after : null, 34 | flow : $flow, 35 | ); 36 | 37 | @if $inside { 38 | $gutters: get-gutters($span); 39 | $output: map-merge($output, ( 40 | padding-before: map-get($gutters, before), 41 | padding-after: map-get($gutters, after), 42 | )); 43 | } 44 | 45 | @if $symmetrical { 46 | $output: map-merge($output, (width: get-span-width($span))); 47 | } 48 | 49 | $box : susy-get(box-sizing, $span); 50 | $global-box : if(susy-get(global-box-sizing) == 'border-box', true, false); 51 | 52 | @include susy-inspect(gallery, $inspect); 53 | 54 | // Collective Output 55 | @if $box == border-box or ($inside and not($box) and not($global-box)) { 56 | @include output((box-sizing: border-box)); 57 | } @else if $box == content-box { 58 | @include output((box-sizing: content-box)); 59 | } 60 | 61 | @include float-span-output($output...); 62 | 63 | // Individual Loop 64 | @for $item from 1 through $line { 65 | $nth: '#{$line}n + #{$item}'; 66 | &:nth-#{$selector}(#{$nth}) { 67 | // Individual Prep 68 | $output: ( 69 | width : if($symmetrical, null, get-span-width($span)), 70 | float : null, 71 | margin-before : get-isolation($span), 72 | margin-after : -100%, 73 | padding-before : null, 74 | padding-after : null, 75 | flow : $flow, 76 | ); 77 | 78 | // Individual Output 79 | @include float-span-output($output...); 80 | 81 | @if get-edge($span) == first { 82 | @include break; 83 | @include first($span); 84 | } @else { 85 | @include nobreak; 86 | } 87 | 88 | // Individual Location Increment 89 | $location: get-location($span) + $n; 90 | $location: if($location > $context, 1, $location); 91 | $span: map-merge($span, (location: $location)); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_grids.scss: -------------------------------------------------------------------------------- 1 | // Grid Syntax 2 | // =========== 3 | 4 | 5 | // Layout 6 | // ------ 7 | // Set a new layout using a shorthand 8 | // - $layout: 9 | // - $clean: boolean 10 | @mixin layout( 11 | $layout, 12 | $clean: false 13 | ) { 14 | $inspect : $layout; 15 | $susy : _get-layout($layout, $clean) !global; 16 | 17 | @include susy-inspect(layout, $inspect); 18 | } 19 | 20 | 21 | // Use Grid 22 | // -------- 23 | // Use an arbitrary layout for a section of code 24 | // - $layout: 25 | // - $clean: boolean 26 | @mixin with-layout( 27 | $layout, 28 | $clean: false 29 | ) { 30 | $inspect : $layout; 31 | $old : $susy; 32 | $susy : _get-layout($layout, $clean) !global; 33 | 34 | @include susy-inspect(with-layout, $inspect); 35 | 36 | @content; 37 | 38 | $susy: $old !global; 39 | } 40 | 41 | 42 | // Layout 43 | // ------ 44 | // Return a parsed layout map based on shorthand syntax 45 | // - $layout: 46 | @function layout( 47 | $layout: $susy 48 | ) { 49 | @return parse-grid($layout); 50 | } 51 | 52 | 53 | // Get Layout 54 | // ---------- 55 | // Return a new layout based on current and given settings 56 | // - $layout: 57 | // - $clean: boolean 58 | @function _get-layout( 59 | $layout, 60 | $clean: false 61 | ) { 62 | $layout: layout($layout); 63 | @return if($clean, $layout, _susy-deep-merge($susy, $layout)); 64 | } 65 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_gutters.scss: -------------------------------------------------------------------------------- 1 | // Gutter Syntax 2 | // ============= 3 | 4 | 5 | // Gutters 6 | // ------- 7 | // Set gutters on an element. 8 | // - [$span] : 9 | @mixin gutters( 10 | $span: $susy 11 | ) { 12 | $inspect : $span; 13 | $span : parse-gutters($span); 14 | $_gutters : get-gutters($span); 15 | 16 | $_output: ( 17 | before: map-get($_gutters, before), 18 | after: map-get($_gutters, after), 19 | flow: susy-get(flow, $span), 20 | ); 21 | 22 | @include susy-inspect(gutters, $inspect); 23 | 24 | @if is-inside($span) { 25 | @include padding-output($_output...); 26 | } @else { 27 | @include margin-output($_output...); 28 | } 29 | } 30 | 31 | @mixin gutter( 32 | $span: $susy 33 | ) { 34 | @include gutters($span); 35 | } 36 | 37 | 38 | // Gutter 39 | // ------ 40 | // Return the width of a gutter. 41 | // - [$span] : 42 | @function gutter( 43 | $span: $susy 44 | ) { 45 | $span: parse-gutters($span); 46 | 47 | $_gutters: get-gutters($span); 48 | $_gutters: map-get($_gutters, before) or map-get($_gutters, after); 49 | 50 | @return $_gutters; 51 | } 52 | 53 | @function gutters( 54 | $span: $susy 55 | ) { 56 | @return gutter($span); 57 | } 58 | 59 | 60 | // Get Gutter Width 61 | // ---------------- 62 | // Return gutter width. 63 | // - [$context]: 64 | @function get-gutter-width( 65 | $context: $susy 66 | ) { 67 | $context : parse-gutters($context); 68 | 69 | $_gutters : susy-get(gutters, $context); 70 | $_gutter : susy-get(gutter-override, $context); 71 | 72 | @if $_gutters and ($_gutters > 0) and not($_gutter) { 73 | $_column-width: susy-get(column-width, $context); 74 | $_math: gutter-math($context); 75 | @if $_math == static { 76 | $_gutter: $_gutters * valid-column-math($_math, $_column-width); 77 | } @else { 78 | $_columns : susy-get(columns, $context); 79 | $_spread : if(is-split($context), wide, susy-get(spread, $context)); 80 | $_gutter : percentage($_gutters / susy-sum($_columns, $_gutters, $_spread)); 81 | } 82 | } 83 | 84 | $_gutter: if($_gutter == 'no-gutters' or $_gutter == 'no-gutter', null, $_gutter); 85 | 86 | @return $_gutter; 87 | } 88 | 89 | 90 | // Get Gutters 91 | // ----------- 92 | // Return before and after gutter values. 93 | // - [$context]: 94 | @function get-gutters( 95 | $context: $susy 96 | ) { 97 | $context : parse-gutters($context); 98 | 99 | $_gutter-position : susy-get(gutter-position, $context); 100 | $_gutter : get-gutter-width($context); 101 | 102 | $_return : (before: null, after: null); 103 | 104 | @if is-split($context) and $_gutter { 105 | $_gutter: $_gutter / 2; 106 | $_return: map-merge($_return, (before: $_gutter, after: $_gutter)); 107 | } @else { 108 | $_return: map-merge($_return, ($_gutter-position: $_gutter)); 109 | } 110 | 111 | @return $_return; 112 | } 113 | 114 | 115 | // Is Inside 116 | // --------- 117 | // Returns true if gutters are inside. 118 | // $context: 119 | @function is-inside( 120 | $context 121 | ) { 122 | $_inside: inside inside-static; 123 | $_gutter-position: susy-get(gutter-position, $context); 124 | 125 | @return if(index($_inside, $_gutter-position), true, false); 126 | } 127 | 128 | 129 | // Is Split 130 | // -------- 131 | // Returns true if gutters are split. 132 | // $context: 133 | @function is-split( 134 | $context 135 | ) { 136 | $_split: split inside inside-static; 137 | $_gutter-position: susy-get(gutter-position, $context); 138 | 139 | @return if(index($_split, $_gutter-position), true, false); 140 | } 141 | 142 | 143 | // Gutter Math 144 | // ----------- 145 | // Return the math to use for gutter calculations 146 | // $context: 147 | @function gutter-math( 148 | $context: $susy 149 | ) { 150 | $_return : susy-get(math, $context); 151 | $_return : if(susy-get(gutter-position, $context) == inside-static, static, $_return); 152 | 153 | @return $_return; 154 | } 155 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_isolate.scss: -------------------------------------------------------------------------------- 1 | // Isolation Syntax 2 | // ================ 3 | 4 | 5 | // Isolate [Mixin] 6 | // --------------- 7 | // Set isolation as an override. 8 | // - $location: 9 | @mixin isolate( 10 | $isolate: 1 11 | ) { 12 | $inspect: $isolate; 13 | 14 | $output: ( 15 | push: isolate($isolate), 16 | flow: susy-get(flow, $isolate), 17 | ); 18 | 19 | @include susy-inspect(isolate, $inspect); 20 | @include isolate-output($output...); 21 | } 22 | 23 | 24 | // Isolate [function] 25 | // ------------------ 26 | // Return an isolation offset width. 27 | // - $location: 28 | @function isolate( 29 | $isolate: 1 30 | ) { 31 | $isolate: parse-span($isolate); 32 | $isolation: susy-get(span, $isolate); 33 | 34 | @if $isolation and not(get-location($isolate)) { 35 | $new: ( 36 | span: null, 37 | location: $isolation, 38 | ); 39 | $isolate: map-merge($isolate, $new); 40 | } 41 | 42 | @return get-isolation($isolate); 43 | } 44 | 45 | 46 | // Get Isolation 47 | // ------------- 48 | // Return the isolation offset width 49 | // - $input: 50 | @function get-isolation( 51 | $input 52 | ) { 53 | $location : get-location($input); 54 | $columns : susy-get(columns, $input); 55 | $width : null; 56 | 57 | @if type-of($location) == number and not(unitless($location)) { 58 | $width: $location; 59 | } @else if $location { 60 | $push: $location - 1; 61 | @if $push > 0 { 62 | $push: map-merge($input, ( 63 | span: $push, 64 | location: 1, 65 | spread: wide, 66 | )); 67 | $width: get-span-width($push); 68 | } 69 | } 70 | 71 | @if susy-get(gutter-position, $input) == split 72 | and susy-get(gutters, $input) > 0 { 73 | $width: if($width == null, gutters($input), $width + gutters($input)); 74 | } 75 | 76 | @return $width or 0; 77 | } 78 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_margins.scss: -------------------------------------------------------------------------------- 1 | // Margin Syntax 2 | // ============= 3 | 4 | // Pre 5 | // --- 6 | // Add spanning-margins before an element. 7 | // - $span : 8 | @mixin pre( 9 | $span 10 | ) { 11 | $inspect: $span; 12 | $span : map-merge((spread: wide), parse-span($span)); 13 | $flow : susy-get(flow, $span); 14 | $split : if(susy-get(gutter-position, $span) == split, true, false); 15 | $gutter : gutter($span); 16 | $span : span($span); 17 | $width : if($split and $gutter, $span + $gutter, $span); 18 | 19 | @include susy-inspect(pre, $inspect); 20 | @include margin-output($width, null, $flow); 21 | } 22 | 23 | // Post 24 | // ---- 25 | // Add spanning-margins after an element. 26 | // - $span : 27 | @mixin post( 28 | $span 29 | ) { 30 | $inspect : $span; 31 | $span : map-merge((spread: wide), parse-span($span)); 32 | $flow : susy-get(flow, $span); 33 | $split : if(susy-get(gutter-position, $span) == split, true, false); 34 | $width : if($split, span($span) + gutter($span), span($span)); 35 | 36 | @include susy-inspect(post, $inspect); 37 | @include margin-output(null, $width, $flow); 38 | } 39 | 40 | // Push 41 | // ---- 42 | // Simple synonymn for pre. 43 | // - $span : 44 | @mixin push( 45 | $span 46 | ) { 47 | @include pre($span); 48 | } 49 | 50 | // Pull 51 | // ---- 52 | // Add negative spanning-margins before an element. 53 | // - $span : 54 | @mixin pull( 55 | $span 56 | ) { 57 | $inspect : $span; 58 | $span : map-merge((spread: wide), parse-span($span)); 59 | $flow : susy-get(flow, $span); 60 | $split : if(susy-get(gutter-position, $span) == split, true, false); 61 | $width : if($split, 0 - span($span) + gutter($span), 0 - span($span)); 62 | 63 | @include susy-inspect(pull, $inspect); 64 | @include margin-output($width, null, $flow); 65 | } 66 | 67 | // Squish 68 | // ------ 69 | // Add spanning-margins before and after an element. 70 | // - $pre : 71 | // - [$post] : 72 | @mixin squish( 73 | $pre, 74 | $post: false 75 | ) { 76 | $inspect : ($pre, $post); 77 | $pre : map-merge((spread: wide), parse-span($pre)); 78 | 79 | @if $post { 80 | $post: map-merge((spread: wide), parse-span($post)); 81 | } @else { 82 | $span: susy-get(span, $pre); 83 | @if length($span) > 1 { 84 | $pre: map-merge($pre, (span: nth($span, 1))); 85 | $post: map-merge($pre, (span: nth($span, 2))); 86 | } @else { 87 | $post: $pre; 88 | } 89 | } 90 | 91 | @include susy-inspect(squish, $inspect); 92 | @include pre($pre); 93 | @include post($post); 94 | } 95 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_padding.scss: -------------------------------------------------------------------------------- 1 | // Padding Syntax 2 | // ============== 3 | 4 | // Prefix 5 | // ------ 6 | // Add spanning-padding before an element. 7 | // - $span : 8 | @mixin prefix( 9 | $span 10 | ) { 11 | $inspect : $span; 12 | $span : map-merge((spread: wide), parse-span($span)); 13 | $flow : susy-get(flow, $span); 14 | $width : span($span); 15 | 16 | @if is-inside($span) { 17 | $gutter: gutter($span); 18 | $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width); 19 | } 20 | 21 | @include susy-inspect(prefix, $inspect); 22 | @include padding-output($width, null, $flow); 23 | } 24 | 25 | // Suffix 26 | // ------ 27 | // Add spanning-padding after an element. 28 | // - $span : 29 | @mixin suffix( 30 | $span 31 | ) { 32 | $inspect : $span; 33 | $span : map-merge((spread: wide), parse-span($span)); 34 | $flow : susy-get(flow, $span); 35 | $width : span($span); 36 | 37 | @if is-inside($span) { 38 | $gutter: gutter($span); 39 | $width: if($gutter and comparable($width, $gutter), $width + $gutter, $width); 40 | } 41 | 42 | @include susy-inspect(suffix, $inspect); 43 | @include padding-output(null, $width, $flow); 44 | } 45 | 46 | // Pad 47 | // --- 48 | // Add spanning-padding before and after an element. 49 | // - $pre : 50 | // - [$post] : 51 | @mixin pad( 52 | $pre, 53 | $post: false 54 | ) { 55 | $inspect : ($pre, $post); 56 | $pre : map-merge((spread: wide), parse-span($pre)); 57 | 58 | @if $post { 59 | $post: map-merge((spread: wide), parse-span($post)); 60 | } @else { 61 | $span: susy-get(span, $pre); 62 | @if length($span) > 1 { 63 | $pre: map-merge($pre, (span: nth($span, 1))); 64 | $post: map-merge($pre, (span: nth($span, 2))); 65 | } @else { 66 | $post: $pre; 67 | } 68 | } 69 | 70 | @include susy-inspect(pad, $inspect); 71 | @include prefix($pre); 72 | @include suffix($post); 73 | 74 | } 75 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_rows.scss: -------------------------------------------------------------------------------- 1 | // Row Start & End 2 | // =============== 3 | 4 | // Break 5 | // ----- 6 | // Apply to any element that should force a line break. 7 | @mixin break { 8 | @include output((clear: both)); 9 | } 10 | 11 | 12 | // NoBreak 13 | // ------- 14 | // Cancel the break() effect, e.g. when using media queries. 15 | @mixin nobreak { 16 | @include output((clear: none)); 17 | } 18 | 19 | 20 | // Full 21 | // ---- 22 | // - [$context]: 23 | @mixin full( 24 | $context: $susy 25 | ) { 26 | $inspect : $context; 27 | @include susy-inspect(full, $inspect); 28 | @include span(full of parse-grid($context) break); 29 | } 30 | 31 | 32 | // First 33 | // ----- 34 | // - [$context]: 35 | @mixin first( 36 | $context: $susy 37 | ) { 38 | $inspect : $context; 39 | $context : parse-grid($context); 40 | $flow : susy-get(flow, $context); 41 | 42 | @include susy-inspect(first, $inspect); 43 | @if not(is-split($context)) { 44 | @include float-first($flow); 45 | } 46 | } 47 | 48 | @mixin alpha( 49 | $context: $susy 50 | ) { 51 | @include first($context); 52 | } 53 | 54 | 55 | // Last 56 | // ---- 57 | // - [$context]: 58 | @mixin last( 59 | $context: $susy 60 | ) { 61 | $inspect : $context; 62 | $context : parse-grid($context); 63 | 64 | @include susy-inspect(last, $inspect); 65 | 66 | $output: ( 67 | flow: susy-get(flow, $context), 68 | last-flow: susy-get(last-flow, $context), 69 | margin: if(is-split($context), null, 0), 70 | ); 71 | 72 | @include float-last($output...); 73 | } 74 | 75 | @mixin omega( 76 | $context: $susy 77 | ) { 78 | @include last($context); 79 | } 80 | 81 | 82 | // Get Edge 83 | // -------- 84 | // Calculate edge value based on location, if possible 85 | @function get-edge( 86 | $span 87 | ) { 88 | $span : parse-span($span); 89 | $edge : susy-get(edge, $span); 90 | 91 | @if not($edge) { 92 | $count: susy-count(susy-get(columns, $span)); 93 | $location: susy-get(location, $span); 94 | $n: susy-get(span, $span); 95 | 96 | $number: if(type-of($location) == number, true, false); 97 | $index: if($number and unitless($location), true, false); 98 | 99 | @if $n == $count { 100 | $edge: full; 101 | } @else if $location and $n and $index { 102 | @if $location == 1 { 103 | $edge: if($n == $count, full, first); 104 | } @else if $location + $n - 1 == $count { 105 | $edge: last; 106 | } 107 | } 108 | } 109 | 110 | @if $edge == alpha or $edge == omega { 111 | $edge: if($edge == alpha, first, last); 112 | } 113 | 114 | @return $edge; 115 | } 116 | 117 | 118 | // Get Location 119 | // ------------ 120 | // Calculate location value based on edge, if possible 121 | @function get-location( 122 | $span 123 | ) { 124 | $span : parse-span($span); 125 | $location : susy-get(location, $span); 126 | $edge : get-edge($span); 127 | $n : susy-get(span, $span); 128 | 129 | @if $edge and not($location) and type-of($n) == number and unitless($n) { 130 | @if $edge == first { 131 | $location: 1; 132 | } @else if $edge == last { 133 | $location: susy-count(susy-get(columns, $span)) - $n + 1; 134 | } 135 | } 136 | 137 | @return $location 138 | } 139 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_settings.scss: -------------------------------------------------------------------------------- 1 | // Susy Settings 2 | // ============= 3 | 4 | // Susy Language Defaults 5 | // ---------------------- 6 | // - PRIVATE 7 | @include susy-defaults(( 8 | container: auto, 9 | math: fluid, 10 | output: float, 11 | container-position: center, 12 | gutter-position: after, 13 | global-box-sizing: content-box, 14 | debug: ( 15 | image: hide, 16 | color: rgba(#66f, .25), 17 | output: background, 18 | toggle: top right, 19 | ), 20 | )); 21 | 22 | 23 | // Valid Keyword Values 24 | // -------------------- 25 | // - PRIVATE: DONT'T TOUCH 26 | $susy-keywords: ( 27 | container: auto, 28 | math: static fluid, 29 | output: isolate float, 30 | container-position: left center right, 31 | flow: ltr rtl, 32 | gutter-position: before after split inside inside-static, 33 | box-sizing: border-box content-box, 34 | span: full, 35 | edge: first alpha last omega full, 36 | spread: narrow wide wider, 37 | gutter-override: no-gutters no-gutter, 38 | role: nest, 39 | clear: break nobreak, 40 | debug image: show hide show-columns show-baseline, 41 | debug output: background overlay, 42 | ); 43 | 44 | 45 | // Parse Susy Keywords and Maps 46 | // ---------------------------- 47 | @function parse-settings( 48 | $short: $susy 49 | ) { 50 | $_return: (); 51 | 52 | @if type-of($short) == map { 53 | $_return: $short; 54 | } @else { 55 | @each $item in $short { 56 | // strings 57 | @if type-of($item) == string { 58 | @each $key, $value in $susy-keywords { 59 | @if index($value, $item) { 60 | $_key-value: append($key, $item); 61 | $_return: _susy-deep-set($_return, $_key-value...); 62 | } 63 | } 64 | // maps 65 | } @else if type-of($item) == map { 66 | $_return: map-merge($_return, $item); 67 | } 68 | } 69 | } 70 | 71 | @return $_return; 72 | } 73 | 74 | 75 | // Parse Columns & Gutters 76 | // ----------------------- 77 | @function parse-layout( 78 | $short 79 | ) { 80 | $_return: (); 81 | $_columns: (); 82 | $_gutters: null; 83 | 84 | @if not(unitless(nth(nth($short, 1), 1))) { 85 | $_gutters: nth($short, 1); 86 | } @else { 87 | $_columns: (columns: nth($short, 1)); 88 | $_gutters: if(length($short) > 1, nth($short, 2), $_gutters); 89 | } 90 | 91 | @if type-of($_gutters) == list and length($_gutters) > 0 { 92 | $_gutters: ( 93 | gutters: nth($_gutters, 2) / nth($_gutters, 1), 94 | column-width: nth($_gutters, 1), 95 | ); 96 | } @else { 97 | $_gutters: if($_gutters, (gutters: $_gutters), ()); 98 | } 99 | 100 | $_return: map-merge($_return, $_columns); 101 | $_return: map-merge($_return, $_gutters); 102 | 103 | @return $_return; 104 | } 105 | 106 | 107 | // Parse Grid/Context 108 | // ------------------ 109 | @function parse-grid( 110 | $short: $susy 111 | ) { 112 | $_return: parse-settings($short); 113 | $_layout: (); 114 | 115 | @if type-of($short) == map { 116 | $_return: $short; 117 | } @else { 118 | @each $item in $short { 119 | // number or list 120 | @if type-of($item) == number or type-of($item) == list { 121 | @if type-of($item) == list or unitless($item) { 122 | $_layout: append($_layout, $item); 123 | } @else { 124 | $_return: map-merge($_return, (container: $item)); 125 | } 126 | } 127 | } 128 | 129 | $_layout: if(length($_layout) > 0, parse-layout($_layout), $_layout); 130 | } 131 | 132 | @return map-merge($_return, $_layout); 133 | } 134 | 135 | 136 | // Parse Span 137 | // ---------- 138 | @function parse-span( 139 | $short, 140 | $key: span 141 | ) { 142 | $_return: (); 143 | 144 | @if type-of($short) == map { 145 | $_return: $short; 146 | } @else { 147 | $_at: index($short, at); 148 | 149 | @if $_at { 150 | $_loci: $_at + 1; 151 | $_location: nth($short, $_loci); 152 | $_return: map-merge($_return, (location: $_location)); 153 | $short: set-nth($short, $_at, null); 154 | $short: set-nth($short, $_loci, null); 155 | } 156 | 157 | $_i: 1; 158 | $_span: (); 159 | 160 | @while $_i <= length($short) { 161 | $_this: nth($short, $_i); 162 | 163 | @if type-of($_this) == number { 164 | $_span: append($_span, $_this); 165 | $short: set-nth($short, $_i, null); 166 | } @else if $_this == of { 167 | $short: set-nth($short, $_i, null); 168 | $_i: length($short) + 1; 169 | } 170 | 171 | $_i: $_i + 1; 172 | } 173 | 174 | @if length($_span) > 0 { 175 | $_span: if(length($_span) == 1, nth($_span, 1), $_span); 176 | $_return: map-merge($_return, ($key: $_span)); 177 | } 178 | 179 | $_return: map-merge($_return, parse-grid($short)); 180 | } 181 | 182 | @return $_return; 183 | } 184 | 185 | 186 | // Parse Gutters 187 | // ------------- 188 | @function parse-gutters( 189 | $short: $susy 190 | ) { 191 | $_gutters: parse-span($short, gutter-override); 192 | $_span: susy-get(gutter-override, $_gutters); 193 | 194 | @if $_span and not(map-get($_gutters, columns)) { 195 | $_context: (); 196 | $_new: (); 197 | 198 | @each $item in $_span { 199 | @if type-of($item) == number and unitless($item) { 200 | $_context: append($_context, $item); 201 | } @else { 202 | $_new: append($_new, $item); 203 | } 204 | } 205 | 206 | $_context: parse-grid($_context); 207 | $_new: if(length($_new) == 0, null, $_new); 208 | $_new: if(length($_new) == 1, nth($_new, 1), $_new); 209 | $_new: (gutter-override: if($_new != $_span, $_new, $_span)); 210 | 211 | $_gutters: map-merge($_gutters, $_new); 212 | $_gutters: map-merge($_gutters, $_context); 213 | } 214 | 215 | @return $_gutters; 216 | } 217 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_span.scss: -------------------------------------------------------------------------------- 1 | // Span Syntax 2 | // =========== 3 | 4 | // Span [mixin] 5 | // ------------ 6 | // Set a spanning element using shorthand syntax. 7 | // - $span : 8 | @mixin span( 9 | $span 10 | ) { 11 | $inspect: $span; 12 | $span: parse-span($span); 13 | $output: span-math($span); 14 | $nesting: susy-get(span, $span); 15 | $clear: susy-get(clear, $span); 16 | 17 | $box: susy-get(box-sizing, $span); 18 | $content-box: if(susy-get(global-box-sizing) != 'border-box', true, false); 19 | $box: $box or if(is-inside($span) and $content-box, border-box, null); 20 | 21 | @if $clear == break { 22 | @include break; 23 | } @else if $clear == nobreak { 24 | @include nobreak; 25 | } 26 | 27 | @include susy-inspect(span, $inspect); 28 | @include output((box-sizing: $box)); 29 | @include float-span-output($output...); 30 | 31 | @if valid-columns($nesting, silent) { 32 | @include nested($span) { @content; } 33 | } @else { 34 | @content; 35 | } 36 | } 37 | 38 | // Span [function] 39 | // --------------- 40 | // Return the width of a span. 41 | // - $span : 42 | @function span( 43 | $span 44 | ) { 45 | @return get-span-width($span); 46 | } 47 | 48 | // Span Math 49 | // --------- 50 | // Get all the span results. 51 | // - $span: 52 | @function span-math( 53 | $span 54 | ) { 55 | $nest : if(susy-get(role, $span) == nest, true, false); 56 | $split-nest : if(is-split($span) and $nest, true, false); 57 | $edge : get-edge($span); 58 | $location : get-location($span); 59 | 60 | $float : from; 61 | $padding-before : null; 62 | $padding-after : null; 63 | $margin-before : null; 64 | $margin-after : null; 65 | 66 | // calculate widths 67 | $spread: index(map-values($span), spread); 68 | $span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span); 69 | $width: get-span-width($span); 70 | $gutters: get-gutters($span); 71 | 72 | // apply gutters 73 | @if is-inside($span) { 74 | @if not(susy-get(role, $span)) { 75 | $padding-before: map-get($gutters, before); 76 | $padding-after: map-get($gutters, after); 77 | } 78 | } @else { 79 | @if not($split-nest) { 80 | $margin-before: map-get($gutters, before); 81 | $margin-after: map-get($gutters, after); 82 | } 83 | } 84 | 85 | // special margin handling 86 | @if susy-get(output, $span) == isolate and $location { 87 | $margin-before: get-isolation($span); 88 | $margin-after: -100%; 89 | } @else if $edge { 90 | $is-split: is-split($span); 91 | $pos: susy-get(gutter-position, $span); 92 | 93 | @if $edge == last { 94 | $float: susy-get(last-flow, $span); 95 | } 96 | 97 | @if not($is-split) { 98 | @if $edge == full or ($edge == first and $pos == before) { 99 | $margin-before: 0; 100 | } 101 | @if $edge == full or ($edge == last and $pos == after) { 102 | $margin-after: 0; 103 | } 104 | } 105 | 106 | } 107 | 108 | @return ( 109 | width : $width, 110 | float : $float, 111 | margin-before : $margin-before, 112 | margin-after : $margin-after, 113 | padding-before : $padding-before, 114 | padding-after : $padding-after, 115 | flow : susy-get(flow, $span), 116 | ); 117 | } 118 | 119 | // Get Span Width 120 | // -------------- 121 | // Return span width. 122 | // - $span: 123 | @function get-span-width( 124 | $span 125 | ) { 126 | $span : parse-span($span); 127 | 128 | $n : susy-get(span, $span); 129 | $location : get-location($span); 130 | $columns : susy-get(columns, $span); 131 | $gutters : susy-get(gutters, $span); 132 | $spread : susy-get(spread, $span); 133 | 134 | $context : null; 135 | $span-sum : null; 136 | $width : null; 137 | 138 | @if $n == 'full' { 139 | $pos: susy-get(gutter-position, $span); 140 | $role: susy-get(role, $span); 141 | $n: if($pos == split and $role != nest, susy-count($columns), 100%); 142 | } 143 | 144 | @if type-of($n) != number { 145 | @warn "(#{type-of($n)}) #{$n} is not a valid span."; 146 | } @else if unitless($n) { 147 | $context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow)); 148 | $spread: if(is-inside($span), $spread or wide, $spread); 149 | $span-sum: susy($n, $location, $columns, $gutters, $spread); 150 | 151 | $_math: susy-get(math, $span); 152 | $_column-width: susy-get(column-width, $span); 153 | @if $_math == static { 154 | $width: $span-sum * valid-column-math($_math, $_column-width); 155 | } @else { 156 | $width: percentage($span-sum / $context); 157 | } 158 | } @else { 159 | $width: $n; 160 | } 161 | 162 | @return $width; 163 | } 164 | -------------------------------------------------------------------------------- /susy/susy/language/susy/_validation.scss: -------------------------------------------------------------------------------- 1 | // Validation 2 | // ========== 3 | 4 | 5 | // Validate Column Math 6 | // -------------------- 7 | @function valid-column-math( 8 | $math, 9 | $column-width 10 | ) { 11 | @if $math == static and not($column-width) { 12 | @error 'Static math requires a valid column-width setting.'; 13 | } 14 | 15 | @return $column-width; 16 | } 17 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_background.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Imports 3 | 4 | @import "compass/layout/grid-background"; 5 | @import "compass/css3/background-origin"; 6 | @import "compass/css3/background-clip"; 7 | 8 | // --------------------------------------------------------------------------- 9 | // Susy Grid Background 10 | // 11 | // A wrapper for the compass "column-grid-background" mixin 12 | // Uses all your settings to create a grid background for a container element. 13 | // Note: Sub-pixel rounding can lead to several pixels of variation between browsers. 14 | @mixin susy-grid-background(){ 15 | @include column-grid-background($total-columns, column(), gutter(), 0); 16 | @include background-origin(content-box); 17 | @include background-clip(content-box); 18 | } 19 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_functions.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Imports 3 | 4 | // We need access to some basic font settings for handling media-queries. 5 | @import "compass/typography/vertical_rhythm"; 6 | 7 | // For now, we also need this... 8 | $browser-default-font-size-px : 16px; 9 | $browser-default-font-size-percent : 100%; 10 | $browser-default-font-size-pt : 12pt; 11 | 12 | $rem-with-px-fallback : true !default; 13 | 14 | // --------------------------------------------------------------------------- 15 | // Sass list Functions 16 | 17 | // Return a list with specific items removed 18 | // 19 | // filter($list, $target) 20 | // - $list : The list to filter. 21 | // - $target : An item to be removed from the list. 22 | @function filter($list, $target) { 23 | $clean: compact(); 24 | @if index($list, $target) { 25 | @each $item in $list { 26 | $clean: if($item == $target, $clean, append($clean, $item)); 27 | } 28 | } @else { $clean: $list; } 29 | @return $clean; 30 | } 31 | 32 | // --------------------------------------------------------------------------- 33 | // Don't use static output when it will break things 34 | 35 | // Switch element-level output to fluid, when container-width is wrong for static 36 | // 37 | // fix-static-misalignment([$style, $width]) 38 | // - $style: $container-style. 39 | // - $width: $container-width. 40 | @function fix-static-misalignment( 41 | $style: $container-style, 42 | $width: $container-width 43 | ) { 44 | @if $container-width and $container-width != container-outer-width($width: false) { 45 | $style: fluid; 46 | } 47 | @return $style; 48 | } 49 | 50 | // --------------------------------------------------------------------------- 51 | // Grid Functions 52 | 53 | // Returns the full width of a grid based on your grid settings. 54 | // 55 | // $columns : The number of columns to get width for. 56 | @function columns-width( 57 | $columns : $total-columns 58 | ) { 59 | @if round($columns) != $columns { 60 | @warn "Susy works best with integer column-spans." + 61 | "For partial-columns, you may need to finesse the math by hand using functions directly."; 62 | } 63 | @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width); 64 | } 65 | 66 | // Return the grid width after adding or subtracting grid padding 67 | // 68 | // $width : the width of the grid without padding; 69 | // $operation : ( add | subtract ) if padding should be added or subtracted; 70 | @function handle-grid-padding( 71 | $width, 72 | $operation : subtract 73 | ) { 74 | $pad: $grid-padding*2; 75 | 76 | @if comparable($width, $grid-padding) { 77 | $width: if($operation == subtract, $width - $pad, $width + $pad); 78 | } @else { 79 | @warn "$grid-padding must be set in units comparable to the container width."; 80 | } 81 | 82 | @return $width; 83 | } 84 | 85 | // Return the full outer width of a Container element. 86 | // 87 | // $columns : The number of columns in the Grid Layout. 88 | @function container-outer-width( 89 | $columns : $total-columns, 90 | $width : $container-width 91 | ) { 92 | $outerwidth: if($width, $width, columns-width($columns)); 93 | 94 | @if $width { 95 | @if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); } 96 | } @else { 97 | @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); } 98 | } 99 | 100 | @return $outerwidth; 101 | } 102 | 103 | // Return the percentage width of a single column in a given 'context'. 104 | // 105 | // $context : The grid context in columns, if nested. 106 | // $style : The container style to use. 107 | @function column( 108 | $context : $total-columns, 109 | $style : fix-static-misalignment() 110 | ) { 111 | @return if($style == static, $column-width, relative-width($column-width, $context)); 112 | } 113 | 114 | // Return the percentage width of multiple 'columns' in a given 'context'. 115 | // 116 | // $columns : The number of columns to get relative width for. 117 | // $context : The grid context in columns, if nested. 118 | // $style : The container style to use. 119 | @function columns( 120 | $columns, 121 | $context : $total-columns, 122 | $style : fix-static-misalignment() 123 | ) { 124 | @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context)); 125 | } 126 | 127 | // Return the percentage width of a single gutter in a given 'context'. 128 | // 129 | // $context : The grid context in columns, if nested. 130 | // $style : The container style to use. 131 | @function gutter( 132 | $context : $total-columns, 133 | $style : fix-static-misalignment() 134 | ) { 135 | @return if($style == static, $gutter-width, relative-width($gutter-width, $context)); 136 | } 137 | 138 | // Return the percentage width of a given value in a given 'context'. 139 | // 140 | // $width : Any given width value. 141 | // $context : The grid context in columns, if nested. 142 | @function relative-width( 143 | $width, 144 | $context : $total-columns 145 | ) { 146 | @return percentage($width / columns-width($context)); 147 | } 148 | 149 | // Return the total space occupied by multiple columns and associated gutters. 150 | // Useful for adding padding or margins (prefix, suffix, push, pull, etc.) 151 | // 152 | // $columns : The number of columns to get relative space for. 153 | // $context : The grid context in columns, if nested. 154 | // $style : The container style to use. 155 | @function space( 156 | $columns, 157 | $context : $total-columns, 158 | $style : fix-static-misalignment() 159 | ) { 160 | @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0); 161 | } 162 | 163 | // Accept a list including column-count and (optional) position. 164 | // Return either the column count or the position alone. 165 | // 166 | // $columns : the list to split and interprate. 167 | // $request : The value to return, either 'columns' or 'position'. 168 | @function split-columns-value( 169 | $columns, 170 | $request : columns 171 | ) { 172 | $pos : false; 173 | $cols : false; 174 | 175 | @each $var in $columns { 176 | @if (type-of($var) == 'string') { 177 | $pos: $var; 178 | } @else { 179 | @if (type-of($var) == 'number') and (unitless($var)) { 180 | $cols: $var; 181 | } @else { 182 | @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.'; 183 | } 184 | } 185 | } 186 | 187 | @if $request == 'columns' { 188 | @return $cols; 189 | } @else { 190 | @if $request == 'position' { 191 | @return $pos; 192 | } @else { 193 | @warn '"#{$request}" is not a valid value for $request'; 194 | } 195 | } 196 | } 197 | 198 | // Accept nth-selector variables, and format them as a valid CSS3 selector. 199 | // 200 | // $n : [first | only | last | ] 201 | // $selector : [child | last-child | of-type | last-of-type ] 202 | @function format-nth( 203 | $n : last, 204 | $selector : child 205 | ) { 206 | @if ($n == 'last') or ($n =='first') or ($n =='only') { 207 | $selector: '#{$n}-#{$selector}'; 208 | } @else { 209 | $selector: 'nth-#{$selector}(#{$n})'; 210 | } 211 | @return $selector; 212 | } 213 | 214 | // --------------------------------------------------------------------------- 215 | // Media Functions 216 | 217 | // Return an em value adjusted to match the browser default font size. 218 | // Note: This only works if actual sizes are set relative to browser defaults. 219 | // 220 | // $ems : The initial value to be converted. 221 | // $font-size : The current font-size in. 222 | @function base-ems( 223 | $ems, 224 | $font-size: $base-font-size 225 | ){ 226 | $font-size : if(unit($ems) == 'rem', $base-font-size, $font-size); 227 | $unit : unit($font-size); 228 | $mult : $ems / ($ems * 0 + 1); 229 | 230 | @if $unit == 'px' { 231 | @return $font-size / $browser-default-font-size-px * $mult * 1em; 232 | } 233 | @else if $unit == '%' { 234 | @return $font-size / $browser-default-font-size-percent * $mult * 1em; 235 | } 236 | @else if $unit == 'em' { 237 | @return $font-size / 1em * $mult * 1em; 238 | } 239 | @else if $unit == 'pt' { 240 | @return $font-size / $browser-default-font-size-pt * $mult * 1em; 241 | } 242 | @else { 243 | @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.'; 244 | } 245 | } 246 | 247 | // This name will be deprecated... 248 | @function absolute-ems( 249 | $ems, 250 | $font-size: $base-font-size 251 | ){ 252 | @return base-ems( $ems, $font-size); 253 | } 254 | 255 | // Return a length, after any em-values have been sent through absolute-ems(). 256 | // 257 | // $length : The length value to be checked and adjusted if necessary. 258 | // $font-size : The current font-size in px. 259 | @function fix-ems( 260 | $length, 261 | $font-size: $base-font-size 262 | ){ 263 | @if $length { 264 | @if (unit($length) == 'em') or (unit($length) == 'rem') { 265 | $length: absolute-ems($length,$font-size); 266 | } 267 | } 268 | @return $length; 269 | } 270 | 271 | // Sort a list of arguments into "$min $layout $max $ie" order, and return the list. 272 | // 273 | // $media-layout : a list of values [$min $layout $max $ie] including... 274 | // : - one unitless number (columns in a layout) 275 | // : - two optional lengths (min and max-width media-query breakpoints). 276 | // : - one optional boolean or string to trigger fallback support for IE. 277 | // $font-size : [optional] The base font-size of your layout, if you are using ems. 278 | // : - defaults to $base-font-size 279 | @function medialayout( 280 | $media-layout, 281 | $font-size: $base-font-size 282 | ) { 283 | $media : false; 284 | $min : false; 285 | $layout : false; 286 | $max : false; 287 | $ie : false; 288 | $has-layout : false; 289 | 290 | @each $val in $media-layout { 291 | @if (type-of($val) == "number") { 292 | @if unitless($val) { 293 | $layout : $val; 294 | $has-layout : true; 295 | } @else { 296 | @if ($has-layout) and not($media) { 297 | $max: $val; 298 | } @else { 299 | @if $media { 300 | $media: join($media,$val); 301 | } @else { 302 | $media: $val; 303 | } 304 | } 305 | } 306 | } @else { 307 | $ie: $val; 308 | } 309 | } 310 | @if (length($media) > 0) { 311 | @if (length($media) == 1) { 312 | $min: nth($media,1); 313 | } @else { 314 | $min: nth($media,1); 315 | $max: nth($media,2); 316 | @if comparable($min, $max) { 317 | @if ($min > $max) { 318 | $max: nth($media,1); 319 | $min: nth($media,2); 320 | } 321 | } @else { 322 | @warn "Can't compare incompatible units." + 323 | "Using #{$min} for min-width, and #{$max} for max-width"; 324 | } 325 | @if (length($media) > 2) { 326 | @warn "You can only send two lengths: a min-width and an (optional) max-width." + 327 | "You sent #{length($media)}: #{$media}"; 328 | } 329 | } 330 | } 331 | 332 | // media-queries must be set in ems relative to the browser default 333 | // rather than the font-size set in CSS. 334 | $min: fix-ems($min,$font-size); 335 | $max: fix-ems($max,$font-size); 336 | 337 | @return $min $layout $max $ie; 338 | } 339 | 340 | // Return the nearest layout (column-count) above a given breakpoint. 341 | // 342 | // $min : The min-width media-query breakpoint above which to establish a new layout. 343 | @function get-layout( 344 | $min 345 | ) { 346 | $min : fix-ems($min); 347 | $return : false; 348 | 349 | @if comparable($min, $column-width) { 350 | $return : ceil(($min + $gutter-width) / ($column-width + $gutter-width)); 351 | } @else { 352 | @warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable."; 353 | } 354 | 355 | @return $return; 356 | } 357 | 358 | // Check to see if a given $media-layout list is simply the default. 359 | // 360 | // $media-layout : a list of values including - 361 | // : One unitless number (columns in a layout) 362 | // : Two optional lengths (min and max-width media-query breakpoints). 363 | // : One optional boolean or string to trigger fallback support for IE. 364 | @function is-default-layout( 365 | $media-layout 366 | ) { 367 | $media-layout : medialayout($media-layout); 368 | $min : nth($media-layout,1); 369 | $layout-cols : nth($media-layout,2); 370 | $max : nth($media-layout,3); 371 | 372 | @if $min or $max { 373 | @return false; 374 | } @else { 375 | @return if($layout-cols == $total-columns,true,false); 376 | } 377 | } 378 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_grid.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Imports 3 | 4 | @import "compass/utilities/general/clearfix"; 5 | @import "compass/css3/box-sizing"; 6 | 7 | // --------------------------------------------------------------------------- 8 | // Border-Box Sizing 9 | 10 | // Apply the border-box sizing model to all elements 11 | // and adjust the grid math appropriately. 12 | @mixin border-box-sizing { 13 | $border-box-sizing: true !global; 14 | * { @include box-sizing(border-box); } 15 | } 16 | 17 | // --------------------------------------------------------------------------- 18 | // Container 19 | 20 | // Set the width of a container 21 | // 22 | // $columns : The number of columns in the Grid Layout. 23 | @mixin set-container-width( 24 | $columns : $total-columns, 25 | $style : $container-style, 26 | $px-vals : $pixel-values-only 27 | ){ 28 | $width: container-outer-width($columns); 29 | 30 | @if $style == 'static' { 31 | @if $px-vals == true { 32 | width: round(convert-length($width, px)); 33 | } @else { 34 | @include rem(width, $width); 35 | } 36 | } @else { 37 | @if $style == 'fluid' { 38 | @if unit($width) == '%' { 39 | @if $px-vals == true { 40 | width: round(convert-length($width, px)); 41 | } @else { 42 | @include rem(width, $width); 43 | } 44 | } 45 | } @else { 46 | @if $px-vals == true { 47 | max-width: round(convert-length($width, px)); 48 | } @else { 49 | @include rem(max-width, $width); 50 | } 51 | 52 | @include for-legacy-browser(ie,"6") { 53 | @if unit($width) == 'rem' { 54 | _width: round(convert-length($width, px)); 55 | } @else { 56 | _width: $width; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | 63 | // Set the outer grid-containing element(s). 64 | // 65 | // $columns : The number of columns in the container. 66 | @mixin apply-container( 67 | $columns : $total-columns, 68 | $px-vals : $pixel-values-only 69 | ){ 70 | @include pie-clearfix; 71 | @include set-container-width($columns); 72 | @if $px-vals == true { 73 | padding-left: round(convert-length($grid-padding, px)); 74 | padding-right: round(convert-length($grid-padding, px)); 75 | } @else { 76 | @include rem(padding-left, $grid-padding); 77 | @include rem(padding-right, $grid-padding); 78 | } 79 | margin: { left: auto; right: auto; } 80 | } 81 | 82 | // Set one or more layouts on a grid-containing element at any number of media-query breakpoints. 83 | // 84 | // $media-layout-1 : [default:$total-columns] A list of values including - 85 | // : One unitless number (representing columns in a layout) 86 | // : Two optional lengths (representing min and max-width media-query breakpoints). 87 | // $media-layout-2 ...-10 : [optional] Same as $media-layout-1 88 | @mixin container( 89 | $media-layouts... 90 | ){ 91 | $media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns); 92 | 93 | @each $ml in $media-layouts { 94 | @if is-default-layout($ml) { 95 | @include apply-container; 96 | } @else { 97 | @include at-breakpoint($ml) { 98 | @include apply-container; 99 | } 100 | } 101 | } 102 | } 103 | 104 | // --------------------------------------------------------------------------- 105 | // Columns 106 | 107 | // Create a grid element spanning any number of 'columns' in a grid 'context'. 108 | // $columns : The number of columns to span. 109 | // $context : [optional] The context (columns spanned by parent). 110 | // : Context is required on any nested elements. 111 | // : Context MUST NOT be declared on a root element. 112 | // $padding : [optional] Padding applied to the inside of individual grid columns. 113 | // : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) 114 | // : Padding values are applied only on the horizontal axis in from-to order 115 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 116 | // $style : The container style to use. 117 | @mixin span-columns( 118 | $columns, 119 | $context : $total-columns, 120 | $padding : false, 121 | $from : $from-direction, 122 | $style : fix-static-misalignment() 123 | ) { 124 | $from : unquote($from); 125 | $to : opposite-position($from); 126 | $pos : split-columns-value($columns,position); 127 | $cols : split-columns-value($columns,columns); 128 | $pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); 129 | $pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context)); 130 | 131 | @if $padding != false { 132 | $pad-from : nth($padding, 1); 133 | 134 | @if length($padding) > 1 { 135 | $pad-to: nth($padding, 2); 136 | } @else { 137 | $pad-to: $pad-from; 138 | } 139 | 140 | $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context)); 141 | $pad-to : if($style == static, $pad-to, relative-width($pad-to, $context)); 142 | 143 | padding-#{$from}: $pad-from; 144 | padding-#{$to}: $pad-to; 145 | } 146 | 147 | width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from); 148 | 149 | @if ($pos == 'omega') { 150 | @include omega($from); 151 | } @else { 152 | float: $from; 153 | margin-#{$to}: gutter($context, $style); 154 | @include for-legacy-browser(ie, "6") { 155 | display: inline; 156 | } 157 | } 158 | } 159 | 160 | // Apply to elements spanning the last column, to account for the page edge. 161 | // Only needed as an override. Normally 'omega' can just be called by `columns`. 162 | // 163 | // $from : The start-direction for your document. 164 | @mixin omega( 165 | $from : $from-direction 166 | ) { 167 | $from : unquote($from); 168 | $to : opposite-position($from); 169 | $hack : opposite-position($omega-float); 170 | 171 | float: $omega-float; 172 | margin-#{$to}: 0; 173 | 174 | @include for-legacy-browser(ie, "6", "7") { 175 | *margin-#{$hack}: - $gutter-width; 176 | @include for-legacy-browser(ie, "6") { 177 | display: inline; 178 | } 179 | } 180 | } 181 | 182 | // Shortcut to apply omega to a specific subset of elements. 183 | // 184 | // $n : [first | only | last | ] 185 | // $selector : [child | last-child | of-type | last-of-type ] 186 | // $from : The start-direction for your document. 187 | @mixin nth-omega( 188 | $n : last, 189 | $selector : child, 190 | $from : $from-direction 191 | ) { 192 | $from : unquote($from); 193 | 194 | &:#{format-nth($n,$selector)} { 195 | @if $n == "first" { 196 | @include omega($from); 197 | } @else { 198 | @include with-browser-ranges(css-sel3) { 199 | @include omega($from); 200 | } 201 | } 202 | } 203 | } 204 | 205 | 206 | 207 | // --------------------------------------------------------------------------- 208 | // Resets 209 | 210 | // Reset a '+columns' grid element to default block behavior 211 | // 212 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 213 | @mixin reset-columns( 214 | $from: $from-direction 215 | ) { 216 | $from : unquote($from); 217 | $to : opposite-position($from); 218 | $hack : opposite-position($omega-float); 219 | 220 | float: none; 221 | width: auto; 222 | margin-#{$to}: auto; 223 | 224 | @include for-legacy-browser(ie, "6", "7") { 225 | *margin-#{$hack}: auto; 226 | @include for-legacy-browser(ie, "6") { 227 | display: block; 228 | } 229 | } 230 | } 231 | 232 | // Apply to elements previously set as omega. 233 | // This will return floats and margins back to non-omega settigns. 234 | // 235 | // $context : [optional] The context (columns spanned by parent). 236 | // $from : The start-direction for your document. 237 | // $style : The container style to use. 238 | @mixin remove-omega( 239 | $context : $total-columns, 240 | $from : $from-direction, 241 | $style : fix-static-misalignment() 242 | ) { 243 | $from : unquote($from); 244 | $to : opposite-position($from); 245 | $hack : opposite-position($omega-float); 246 | 247 | float: $from; 248 | margin-#{$to}: gutter($context, $style); 249 | 250 | @include for-legacy-browser(ie, "6", "7") { 251 | *margin-#{$hack}: auto; 252 | } 253 | } 254 | 255 | // Shortcut to apply remove-omega to a specific subset of elements. 256 | // 257 | // $n : [first | only | last | ] 258 | // $selector : [child | last-child | of-type | last-of-type ] 259 | // $context : [optional] The context (columns spanned by parent). 260 | // $from : The start-direction for your document. 261 | // $style : The container style to use. 262 | @mixin remove-nth-omega( 263 | $n : last, 264 | $selector : child, 265 | $context : $total-columns, 266 | $from : $from-direction, 267 | $style : fix-static-misalignment() 268 | ) { 269 | $from : unquote($from); 270 | 271 | &:#{format-nth($n,$selector)} { 272 | @if $n == "first" { 273 | @include remove-omega($context, $from, $style); 274 | } @else { 275 | @include with-browser-ranges(css-sel3) { 276 | @include remove-omega($context, $from, $style); 277 | } 278 | } 279 | } 280 | } 281 | 282 | 283 | // --------------------------------------------------------------------------- 284 | // Change Settings 285 | 286 | @mixin with-grid-settings( 287 | $columns: $total-columns, 288 | $width: $column-width, 289 | $gutter: $gutter-width, 290 | $padding: $grid-padding 291 | ) { 292 | // keep the defaults around 293 | $default-columns: $total-columns; 294 | $default-width: $column-width; 295 | $default-gutter: $gutter-width; 296 | $default-padding: $grid-padding; 297 | 298 | // use the new settings 299 | $total-columns: $columns !global; 300 | $column-width: $width !global; 301 | $gutter-width: $gutter !global; 302 | $grid-padding: $padding !global; 303 | 304 | // apply to contents 305 | @content; 306 | 307 | // re-instate the defaults 308 | $total-columns: $default-columns !global; 309 | $column-width: $default-width !global; 310 | $gutter-width: $default-gutter !global; 311 | $grid-padding: $default-padding !global; 312 | } 313 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_isolation.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Isolation 3 | 4 | // Isolate the position of a grid element (use in addition to span-columns) 5 | // 6 | // $location : The grid column to isolate in, relative to the container; 7 | // $context : [optional] The context (columns spanned by parent). 8 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 9 | @mixin isolate( 10 | $location, 11 | $context: $total-columns, 12 | $from: $from-direction, 13 | $style: fix-static-misalignment() 14 | ) { 15 | $to: opposite-position($from); 16 | margin-#{$to}: -100%; 17 | margin-#{$from}: space($location - 1, $context, $style); 18 | } 19 | 20 | // Isolate a group of elements in a grid, using nth-child selectors 21 | // 22 | // $columns : The column-width of each item on the grid; 23 | // $context : [optional] The context (columns spanned by parent). 24 | // $selector : [child | of-type | last-of-type ] (default is 'child') 25 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 26 | @mixin isolate-grid( 27 | $columns, 28 | $context: $total-columns, 29 | $selector: 'child', 30 | $from: $from-direction, 31 | $style: fix-static-misalignment() 32 | ) { 33 | $to: opposite-position($from); 34 | $location: 1; 35 | $line: floor($context / $columns); 36 | 37 | @include span-columns($columns, $context, $from: $from, $style: $style); 38 | margin-#{$to}: -100%; 39 | 40 | @for $item from 1 through $line { 41 | $nth: '#{$line}n + #{$item}'; 42 | &:#{format-nth($nth,$selector)} { 43 | margin-#{$from}: space($location - 1, $context, $style); 44 | @if $location == 1 { clear: $from; } 45 | @else { clear: none; } 46 | 47 | $location: $location + $columns; 48 | @if $location > $context { $location: 1; } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_margin.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Margin Mixins 3 | 4 | // Apply 'columns' margin before an element to push it along the grid. 5 | // 6 | // $columns : The number of columns to span. 7 | // $context : [optional] The context (columns spanned by parent). 8 | // : Context is required on any nested elements. 9 | // : Context MUST NOT be declared on a root element. 10 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 11 | // $style : The container style to use. 12 | @mixin pre( 13 | $columns, 14 | $context : $total-columns, 15 | $from : $from-direction, 16 | $style : fix-static-misalignment() 17 | ) { 18 | $from : unquote($from); 19 | margin-#{$from}: space($columns, $context, $style); 20 | } 21 | 22 | // 'push' is a synonymn for 'pre' 23 | @mixin push( 24 | $columns, 25 | $context : $total-columns, 26 | $from : $from-direction, 27 | $style : fix-static-misalignment() 28 | ) { 29 | $from : unquote($from); 30 | @include pre($columns, $context, $from, $style); 31 | } 32 | 33 | // Apply negative 'columns' margin before an element to pull it along the grid. 34 | // 35 | // $columns : The number of columns to span. 36 | // $context : [optional] The context (columns spanned by parent). 37 | // : Context is required on any nested elements. 38 | // : Context MUST NOT be declared on a root element. 39 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 40 | // $style : The container style to use. 41 | @mixin pull( 42 | $columns, 43 | $context : $total-columns, 44 | $from : $from-direction, 45 | $style : fix-static-misalignment() 46 | ) { 47 | $from : unquote($from); 48 | margin-#{$from}: 0 - space($columns, $context, $style); 49 | } 50 | 51 | // Apply 'columns' margin after an element to contain it in a grid. 52 | // 53 | // $columns : The number of columns to span. 54 | // $context : [optional] The context (columns spanned by parent). 55 | // : Context is required on any nested elements. 56 | // : Context MUST NOT be declared on a root element. 57 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 58 | // $style : The container style to use. 59 | @mixin post( 60 | $columns, 61 | $context : $total-columns, 62 | $from : $from-direction, 63 | $style : fix-static-misalignment() 64 | ) { 65 | $from : unquote($from); 66 | $to : opposite-position($from); 67 | margin-#{$to}: space($columns, $context, $style); 68 | } 69 | 70 | // Apply 'columns' before and/or after an element to contain it on a grid. 71 | // 72 | // $pre : The number of columns to add as margin before. 73 | // $post : The number of columns to add as margin after. 74 | // $context : [optional] The context (columns spanned by parent). 75 | // : Context is required on any nested elements. 76 | // : Context MUST NOT be declared on a root element. 77 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 78 | // $style : The container style to use. 79 | @mixin squish( 80 | $pre : false, 81 | $post : false, 82 | $context : $total-columns, 83 | $from : $from-direction, 84 | $style : fix-static-misalignment() 85 | ) { 86 | $from : unquote($from); 87 | @if $pre { 88 | @include pre($pre, $context, $from, $style) 89 | } 90 | @if $post { 91 | @include post($post, $context, $from, $style) 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_media.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Media Mixins 3 | 4 | // Create a new layout context for (@content) descendants. 5 | // 6 | // $layout-cols : a (unitless) number of columns to use for this layout. 7 | @mixin layout( 8 | $layout-cols 9 | ) { 10 | // store default $total-columns setting for later, then change it. 11 | $default-layout : $total-columns; 12 | $total-columns : $layout-cols !global; 13 | 14 | // apply children in this new layout context. 15 | @content; 16 | 17 | // return to default $total-columns setting. 18 | $total-columns : $default-layout !global; 19 | } 20 | 21 | // Nest a block of code inside a new media-query and layout context. 22 | // 23 | // $media-layout : a list of values [$min $layout $max $ie] including... 24 | // : - one unitless number (columns in a layout) 25 | // : - two optional lengths (min and max-width media-query breakpoints). 26 | // : - one optional boolean or string to trigger fallback support for IE. 27 | // $font-size : [optional] The base font-size of your layout, if you are using ems. 28 | // : - defaults to $base-font-size 29 | @mixin at-breakpoint( 30 | $media-layout, 31 | $font-size: $base-font-size 32 | ) { 33 | $media-layout : medialayout($media-layout,$font-size); 34 | $min : nth($media-layout,1); 35 | $layout : nth($media-layout,2); 36 | $max : nth($media-layout,3); 37 | $ie : nth($media-layout,4); 38 | 39 | @if not($breakpoint-media-output) and not($breakpoint-ie-output) and not($breakpoint-raw-output) { 40 | @warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work."; 41 | } 42 | 43 | // We need to have either a min-width breakpoint or a layout in order to proceed. 44 | @if $min or $layout or $max { 45 | 46 | // If we don't have a layout, we create one based on the min-width. 47 | @if not($layout) { 48 | $layout: get-layout($min); 49 | } 50 | 51 | // If we still don't have a layout, we have a problem. 52 | @if $layout { 53 | // Set our new layout context. 54 | @include layout($layout) { 55 | @if $breakpoint-media-output { 56 | @include with-browser-ranges(css-mediaqueries) { 57 | @if $min and $max { 58 | // Both $min and $max 59 | @media (min-width: $min) and (max-width: $max) { 60 | @content; 61 | } 62 | } @else { 63 | @if not($min) and not($max) { 64 | // Neither $min nor $max: 65 | // We can create a breakpoint based on the number of columns in the layout. 66 | $min: fix-ems(container-outer-width($width: false)); 67 | } 68 | @if $min { 69 | // Min only: 70 | @media (min-width: $min) { 71 | @content; 72 | } 73 | } @else { 74 | // Max only: 75 | @media (max-width: $max) { 76 | @content; 77 | } 78 | } 79 | } 80 | } 81 | } 82 | // Set an IE fallback 83 | @if $ie and $breakpoint-ie-output { 84 | @if (type-of($ie) == 'bool') { 85 | $ie: 'lt-ie9'; 86 | } 87 | .#{$ie} & { 88 | @content; 89 | } 90 | } 91 | 92 | @if $breakpoint-raw-output { 93 | @content; 94 | } 95 | } 96 | } @else { 97 | @warn "We were unable to determine a layout for your breakpoint."; 98 | } 99 | 100 | } @else { 101 | @warn "You need to provide either a valid layout (number of columns)" 102 | + "or a valid media-query min-width breakpoint (length)."; 103 | } 104 | 105 | } 106 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_padding.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Padding Mixins 3 | 4 | // add empty colums as padding before an element. 5 | // $columns : The number of columns to prefix. 6 | // $context : [optional] The context (columns spanned by parent). 7 | // : Context is required on any nested elements. 8 | // : Context MUST NOT be declared on a root element. 9 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 10 | // $style : The container style to use. 11 | @mixin prefix( 12 | $columns, 13 | $context : $total-columns, 14 | $from : $from-direction, 15 | $style : fix-static-misalignment() 16 | ) { 17 | $from : unquote($from); 18 | padding-#{$from}: space($columns, $context, $style); 19 | } 20 | 21 | // add empty colums as padding after an element. 22 | // $columns : The number of columns to suffix. 23 | // $context : [optional] The context (columns spanned by parent). 24 | // : Context is required on any nested elements. 25 | // : Context MUST NOT be declared on a root element. 26 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 27 | // $style : The container style to use. 28 | @mixin suffix( 29 | $columns, 30 | $context : $total-columns, 31 | $from : $from-direction, 32 | $style : fix-static-misalignment() 33 | ) { 34 | $from : unquote($from); 35 | $to : opposite-position($from); 36 | padding-#{$to}: space($columns, $context, $style); 37 | } 38 | 39 | // add empty colums as padding before and after an element. 40 | // $columns : The number of columns to pad. 41 | // $context : [optional] The context (columns spanned by parent). 42 | // : Context is required on any nested elements. 43 | // : Context MUST NOT be declared on a root element. 44 | // $from : The start direction of your layout (e.g. 'left' for ltr languages) 45 | // $style : The container style to use. 46 | @mixin pad( 47 | $prefix : false, 48 | $suffix : false, 49 | $context : $total-columns, 50 | $from : $from-direction, 51 | $style : fix-static-misalignment() 52 | ) { 53 | $from : unquote($from); 54 | @if $prefix { 55 | @include prefix($prefix, $context, $from, $style); 56 | } 57 | @if $suffix { 58 | @include suffix($suffix, $context, $from, $style); 59 | } 60 | } 61 | 62 | // Bleed into colums with margin/padding on any side of an element. 63 | // $width : The side of the bleed. 64 | // : Any unit-length will be used directly. 65 | // : Any unitless number will be used as a column-count. 66 | // : Use "2 of 6" format to represent 2 cals in a 6-col nested context. 67 | // $sides : One or more sides to bleed [ top | right | bottom | left | all ]. 68 | // $style : The container style to use. 69 | @mixin bleed( 70 | $width: $grid-padding, 71 | $sides: left right, 72 | $style: fix-static-misalignment() 73 | ) { 74 | @if $border-box-sizing { @include box-sizing(content-box) } 75 | 76 | @if type-of($width) == 'list' { 77 | $width: filter($width, of); 78 | $width: space(nth($width,1), nth($width,2), $style); 79 | } @else if unitless($width) { 80 | $width: space($width, $style: $style); 81 | } 82 | 83 | @if $sides == 'all' { 84 | margin: - $width; 85 | padding: $width; 86 | } @else { 87 | @each $side in $sides { 88 | margin-#{$side}: - $width; 89 | padding-#{$side}: $width; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /susy/susy/language/susyone/_settings.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------- 2 | // Susy Settings 3 | 4 | // The total number of columns in the grid 5 | $total-columns : 12 !default; 6 | 7 | // The width of columns and gutters. 8 | // These must all be set with the comparable units. 9 | $column-width : 4em !default; 10 | $gutter-width : 1em !default; 11 | 12 | // Padding on the left and right of a Grid Container. 13 | $grid-padding : $gutter-width !default; 14 | 15 | // --------------------------------------------------------------------------- 16 | // Advanced Settings 17 | 18 | // From Direction: 19 | // Controls for right-to-left or bi-directional sites. 20 | $from-direction : left !default; 21 | 22 | // Omega Float Direction: 23 | // The direction that +omega elements are floated by deafult. 24 | $omega-float : opposite-position($from-direction) !default; 25 | 26 | // Container Width: 27 | // Override the total width of your grid, using any length (50em, 75%, etc.) 28 | $container-width : false !default; 29 | 30 | // Container Style: 31 | // 'magic' - Static (fixed or elastic) when there's enough space, 32 | // fluid when there isn't. This is the SUSY MAGIC SAUCE(TM). 33 | // 'static' - Forces the grid container to remain static at all times. 34 | // 'fluid' - Forces the grid to remain fluid at all times. 35 | // (this will overrule any static $container-width settings) 36 | $container-style : magic !default; 37 | 38 | // Border-Box Sizing 39 | // Adjust the grid math appropriately for box-sizing: border-box; 40 | // Warning: This does not actually apply the new box model! 41 | // In most cases you can ignore this setting, 42 | // and simply apply the border-box-sizing mixin. 43 | $border-box-sizing : false !default; 44 | 45 | // Pixel Values only: 46 | // Make sure only pixel values are set for the container width. 47 | $pixel-values-only : false !default; 48 | 49 | // --------------------------------------------------------------------------- 50 | // IE Settings 51 | 52 | // When you are using a seperate IE stylesheet, 53 | // you can use these settings to control the output of at-breakpoint. 54 | // By default, at-breakpoint will output media-queries as well as 55 | // any defined ie-fallback classes. 56 | $breakpoint-media-output : true !default; 57 | $breakpoint-ie-output : true !default; 58 | 59 | // Danger Zone! Only set as 'true' in IE-specific style sheets. 60 | $breakpoint-raw-output : false !default; 61 | -------------------------------------------------------------------------------- /susy/susy/output/_float.scss: -------------------------------------------------------------------------------- 1 | // Float API 2 | // ========= 3 | 4 | @import "shared"; 5 | 6 | @import "float/container"; 7 | @import "float/span"; 8 | @import "float/end"; 9 | @import "float/isolate"; 10 | -------------------------------------------------------------------------------- /susy/susy/output/_shared.scss: -------------------------------------------------------------------------------- 1 | // Shared API 2 | // ========== 3 | 4 | @import "support"; 5 | 6 | @import "shared/inspect"; 7 | @import "shared/output"; 8 | @import "shared/direction"; 9 | @import "shared/background"; 10 | @import "shared/container"; 11 | @import "shared/margins"; 12 | @import "shared/padding"; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /susy/susy/output/_support.scss: -------------------------------------------------------------------------------- 1 | // Susy Browser Support 2 | // ==================== 3 | 4 | @import "support/support"; 5 | @import "support/prefix"; 6 | @import "support/background"; 7 | @import "support/box-sizing"; 8 | @import "support/rem"; 9 | @import "support/clearfix"; 10 | -------------------------------------------------------------------------------- /susy/susy/output/float/_container.scss: -------------------------------------------------------------------------------- 1 | // Float Container API 2 | // =================== 3 | 4 | // Float Container 5 | // --------------- 6 | // - [$width] : 7 | // - [$justify] : left | center | right 8 | // - [$math] : fluid | static 9 | @mixin float-container( 10 | $width, 11 | $justify: auto auto, 12 | $property: max-width 13 | ) { 14 | @include susy-clearfix; 15 | @include container-output($width, $justify, $property); 16 | } 17 | -------------------------------------------------------------------------------- /susy/susy/output/float/_end.scss: -------------------------------------------------------------------------------- 1 | // Float Ends API 2 | // ============== 3 | 4 | // Susy End Defaults 5 | // ----------------- 6 | // - PRIVATE 7 | @include susy-defaults(( 8 | last-flow: to, 9 | )); 10 | 11 | // Float Last 12 | // ---------- 13 | // - [$flow] : ltr | rtl 14 | @mixin float-last( 15 | $flow: map-get($susy-defaults, flow), 16 | $last-flow: map-get($susy-defaults, last-flow), 17 | $margin: 0 18 | ) { 19 | $to: to($flow); 20 | 21 | $output: ( 22 | float: if($last-flow == to, $to, null), 23 | margin-#{$to}: $margin, 24 | ); 25 | 26 | @include output($output); 27 | } 28 | 29 | // Float First 30 | // ----------- 31 | // - [$flow] : ltr | rtl 32 | @mixin float-first( 33 | $flow: map-get($susy-defaults, flow) 34 | ) { 35 | $output: ( 36 | margin-#{from($flow)}: 0, 37 | ); 38 | 39 | @include output($output); 40 | } 41 | -------------------------------------------------------------------------------- /susy/susy/output/float/_isolate.scss: -------------------------------------------------------------------------------- 1 | // Float Isolation API 2 | // =================== 3 | 4 | // Isolate Output 5 | // -------------- 6 | // - $push : 7 | // - [$flow] : ltr | rtl 8 | @mixin isolate-output( 9 | $push, 10 | $flow: map-get($susy-defaults, flow) 11 | ) { 12 | $to: to($flow); 13 | $from: from($flow); 14 | 15 | $output: ( 16 | float: $from, 17 | margin-#{$from}: $push, 18 | margin-#{$to}: -100%, 19 | ); 20 | 21 | @include output($output); 22 | } 23 | -------------------------------------------------------------------------------- /susy/susy/output/float/_span.scss: -------------------------------------------------------------------------------- 1 | // Float Span API 2 | // ============== 3 | 4 | // Float Span Output 5 | // ----------------- 6 | // - $width : 7 | // - [$float] : from | to 8 | // - [$margin-before] : 9 | // - [$margin-after] : 10 | // - [$padding-before] : 11 | // - [$padding-after] : 12 | // - [$flow] : ltr | rtl 13 | @mixin float-span-output( 14 | $width, 15 | $float : from, 16 | $margin-before : null, 17 | $margin-after : null, 18 | $padding-before : null, 19 | $padding-after : null, 20 | $flow : map-get($susy-defaults, flow) 21 | ) { 22 | $to : to($flow); 23 | $from : from($flow); 24 | 25 | $output: ( 26 | width: $width, 27 | float: if($float == to, $to, null) or if($float == from, $from, null), 28 | margin-#{$from}: $margin-before, 29 | margin-#{$to}: $margin-after, 30 | padding-#{$from}: $padding-before, 31 | padding-#{$to}: $padding-after, 32 | ); 33 | 34 | @include output($output); 35 | } 36 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_background.scss: -------------------------------------------------------------------------------- 1 | // Grid Background API 2 | // =================== 3 | // - Sub-pixel rounding can lead to several pixels variation between browsers. 4 | 5 | // Grid Background Output 6 | // ---------------------- 7 | // - $image: background-image 8 | // - $size: background-size 9 | // - $clip: background-clip 10 | // - [$flow]: ltr | rtl 11 | @mixin background-grid-output ( 12 | $image, 13 | $size: null, 14 | $clip: null, 15 | $flow: map-get($susy-defaults, flow) 16 | ) { 17 | $output: ( 18 | background-image: $image, 19 | background-size: $size, 20 | background-origin: $clip, 21 | background-clip: $clip, 22 | background-position: from($flow) top, 23 | ); 24 | 25 | @include output($output); 26 | } 27 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_container.scss: -------------------------------------------------------------------------------- 1 | // Shared Container API 2 | // ==================== 3 | 4 | // Container Output 5 | // ---------------- 6 | // - [$width] : 7 | // - [$justify] : left | center | right 8 | // - [$math] : fluid | static 9 | @mixin container-output( 10 | $width, 11 | $justify: auto auto, 12 | $property: max-width 13 | ) { 14 | $output: ( 15 | #{$property}: $width or 100%, 16 | margin-left: nth($justify, 1), 17 | margin-right: nth($justify, 2), 18 | ); 19 | 20 | @include output($output); 21 | } 22 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_direction.scss: -------------------------------------------------------------------------------- 1 | // Direction Helpers 2 | // ================= 3 | 4 | // Susy Flow Defaults 5 | // ------------------ 6 | // - PRIVATE 7 | @include susy-defaults(( 8 | flow: ltr, 9 | )); 10 | 11 | // Get Direction 12 | // ------------- 13 | // Return the 'from' or 'to' direction of a ltr or rtl flow. 14 | // - [$flow] : ltr | rtl 15 | // - [$key] : from | to 16 | @function get-direction( 17 | $flow: map-get($susy-defaults, flow), 18 | $key: from 19 | ) { 20 | $return: if($flow == rtl, (from: right, to: left), (from: left, to: right)); 21 | @return map-get($return, $key); 22 | } 23 | 24 | // To 25 | // -- 26 | // Return the 'to' direction of a flow 27 | // - [$flow] : ltr | rtl 28 | @function to( 29 | $flow: map-get($susy-defaults, flow) 30 | ) { 31 | @return get-direction($flow, to); 32 | } 33 | 34 | // From 35 | // ---- 36 | // Return the 'from' direction of a flow 37 | // - [$flow] : ltr | rtl 38 | @function from( 39 | $flow: map-get($susy-defaults, flow) 40 | ) { 41 | @return get-direction($flow, from); 42 | } 43 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_inspect.scss: -------------------------------------------------------------------------------- 1 | // Debugging 2 | // ========= 3 | 4 | // Susy Inspect 5 | // ------------ 6 | // Output arguments passed to a inspect. 7 | // - $mixin : 8 | // - $inspec : 9 | 10 | @mixin susy-inspect( 11 | $mixin, 12 | $inspect 13 | ) { 14 | $show: false; 15 | 16 | @each $item in $inspect { 17 | @if index($item, inspect) { 18 | $show: true; 19 | } 20 | } 21 | 22 | @if $show or susy-get(debug inspect) { 23 | -susy-#{$mixin}: inspect($inspect); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_margins.scss: -------------------------------------------------------------------------------- 1 | // Margins API 2 | // =========== 3 | 4 | // Margin Output 5 | // ------------- 6 | // - $before : 7 | // - $after : 8 | // - [$flow] : ltr | rtl 9 | @mixin margin-output( 10 | $before, 11 | $after, 12 | $flow: map-get($susy-defaults, flow) 13 | ) { 14 | $to: to($flow); 15 | $from: from($flow); 16 | 17 | $output: ( 18 | margin-#{$from}: $before, 19 | margin-#{$to}: $after, 20 | ); 21 | 22 | @include output($output); 23 | } 24 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_output.scss: -------------------------------------------------------------------------------- 1 | // Output 2 | // ====== 3 | 4 | // Output 5 | // ------ 6 | // Output CSS with proper browser support. 7 | // - $styles : 8 | @mixin output( 9 | $styles 10 | ) { 11 | @each $prop, $val in $styles { 12 | @include susy-support($prop, $val); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /susy/susy/output/shared/_padding.scss: -------------------------------------------------------------------------------- 1 | // Padding API 2 | // =========== 3 | 4 | // Padding Output 5 | // -------------- 6 | // - $before : 7 | // - $after : 8 | // - [$flow] : ltr | rtl 9 | @mixin padding-output( 10 | $before, 11 | $after, 12 | $flow: map-get($susy-defaults, flow) 13 | ) { 14 | $to: to($flow); 15 | $from: from($flow); 16 | 17 | $output: ( 18 | padding-#{$from}: $before, 19 | padding-#{$to}: $after, 20 | ); 21 | 22 | @include output($output); 23 | } 24 | -------------------------------------------------------------------------------- /susy/susy/output/support/_background.scss: -------------------------------------------------------------------------------- 1 | // Background Properties 2 | // ===================== 3 | 4 | // Susy Background Image 5 | // --------------------- 6 | // Check for an existing support mixin, or provide a simple fallback. 7 | // - $image: 8 | @mixin susy-background-image( 9 | $image 10 | ) { 11 | @if susy-support(background-image, (mixin: background-image), $warn: false) { 12 | @include background-image($image...); 13 | } @else { 14 | background-image: $image; 15 | } 16 | } 17 | 18 | // Susy Background Size 19 | // --------------------- 20 | // Check for an existing support mixin, or provide a simple fallback. 21 | // - $image: 22 | @mixin susy-background-size( 23 | $size 24 | ) { 25 | @if susy-support(background-options, (mixin: background-size)) { 26 | @include background-size($size); 27 | } @else { 28 | background-size: $size; 29 | } 30 | } 31 | 32 | // Susy Background Origin 33 | // ---------------------- 34 | // Check for an existing support mixin, or provide a simple fallback. 35 | // - $image: 36 | @mixin susy-background-origin( 37 | $origin 38 | ) { 39 | @if susy-support(background-options, (mixin: background-origin)) { 40 | @include background-origin($origin); 41 | } @else { 42 | background-origin: $origin; 43 | } 44 | } 45 | 46 | // Susy Background Clip 47 | // -------------------- 48 | // Check for an existing support mixin, or provide a simple fallback. 49 | // - $image: 50 | @mixin susy-background-clip( 51 | $clip 52 | ) { 53 | @if susy-support(background-options, (mixin: background-clip)) { 54 | @include background-clip($clip); 55 | } @else { 56 | background-clip: $clip; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /susy/susy/output/support/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | // Box Sizing 2 | // ========== 3 | 4 | // Box Sizing 5 | // ---------- 6 | // Check for an existing support mixin, or provide a simple fallback. 7 | // - $model: 8 | @mixin susy-box-sizing( 9 | $model: content-box 10 | ) { 11 | @if $model { 12 | @if susy-support(box-sizing, (mixin: box-sizing), $warn: false) { 13 | @include box-sizing($model); 14 | } @else { 15 | $prefix: (moz, webkit, official); 16 | @include susy-prefix(box-sizing, $model, $prefix); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /susy/susy/output/support/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Susy Fallback Clearfix 2 | // ====================== 3 | 4 | 5 | // Clearfix 6 | // -------- 7 | // Check for an existing support mixin, or provide a simple fallback. 8 | @mixin susy-clearfix { 9 | @if susy-support(clearfix, (mixin: clearfix)) { 10 | @include clearfix; 11 | } @else { 12 | &:after { 13 | content: " "; 14 | display: block; 15 | clear: both; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /susy/susy/output/support/_prefix.scss: -------------------------------------------------------------------------------- 1 | // Susy Prefix 2 | // =========== 3 | 4 | // Prefix 5 | // ------ 6 | // Output simple prefixed properties. 7 | // - $prop : 8 | // - $val : 9 | // - [$prefix] : 10 | @mixin susy-prefix( 11 | $prop, 12 | $val, 13 | $prefix: official 14 | ) { 15 | @each $fix in $prefix { 16 | $fix: if($fix == official or not($fix), $prop, '-#{$fix}-#{$prop}'); 17 | @include susy-rem($fix, $val); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /susy/susy/output/support/_rem.scss: -------------------------------------------------------------------------------- 1 | // rem Support 2 | // =========== 3 | 4 | // rem 5 | // --- 6 | // Check for an existing support mixin, or output directly. 7 | // - $prop : 8 | // - $val : 9 | @mixin susy-rem( 10 | $prop, 11 | $val 12 | ) { 13 | $_reqs: ( 14 | variable: rhythm-unit rem-with-px-fallback, 15 | mixin: rem, 16 | ); 17 | @if susy-support(rem, $_reqs, $warn: false) and $rhythm-unit == rem { 18 | @include rem($prop, $val); 19 | } @else { 20 | #{$prop}: $val; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /susy/susy/output/support/_support.scss: -------------------------------------------------------------------------------- 1 | // Browser Support 2 | // =============== 3 | 4 | // Susy Support Defaults 5 | // --------------------- 6 | @include susy-defaults(( 7 | use-custom: ( 8 | clearfix: false, 9 | background-image: true, 10 | background-options: false, 11 | breakpoint: true, 12 | box-sizing: true, 13 | rem: true, 14 | ), 15 | )); 16 | 17 | 18 | // Susy Support [mixin] 19 | // -------------------- 20 | // Send property-value pairs to the proper support modules. 21 | // - $prop : 22 | // - $val : 23 | @mixin susy-support( 24 | $prop, 25 | $val 26 | ) { 27 | // Background Support 28 | @if $prop == background-image { 29 | @include susy-background-image($val); 30 | } @else if $prop == background-size { 31 | @include susy-background-size($val); 32 | } @else if $prop == background-origin { 33 | @include susy-background-origin($val); 34 | } @else if $prop == background-clip { 35 | @include susy-background-clip($val); 36 | } 37 | 38 | // Box-Sizing Support 39 | @else if $prop == box-sizing { 40 | @include susy-box-sizing($val); 41 | } 42 | 43 | // Rem Support 44 | @else { 45 | @include susy-rem($prop, $val); 46 | } 47 | } 48 | 49 | 50 | // Susy Support [function] 51 | // ----------------------- 52 | // Check for support of a feature. 53 | // - $feature : 54 | // - e.g "rem" or "box-sizing" 55 | // - $requirements : 56 | // - e.g (variable: rem-with-px-fallback, mixin: rem) 57 | // - $warn : 58 | @function susy-support( 59 | $feature, 60 | $requirements: (), 61 | $warn: true 62 | ) { 63 | $_support: susy-get(use-custom $feature); 64 | 65 | @if $_support { 66 | $_fail: false; 67 | 68 | @each $_type, $_req in $requirements { 69 | @each $_i in $_req { 70 | $_pass: call(unquote("#{$_type}-exists"), $_i); 71 | 72 | @if not($_pass) { 73 | $_fail: true; 74 | @if $warn { 75 | @warn "You requested custom support of #{$feature}, but the #{$_i} #{$_type} is not available."; 76 | } 77 | } 78 | } 79 | } 80 | 81 | $_support: if($_fail, false, $_support); 82 | } 83 | 84 | @return $_support; 85 | } 86 | -------------------------------------------------------------------------------- /susy/susy/su/_grid.scss: -------------------------------------------------------------------------------- 1 | // Column math 2 | // =========== 3 | 4 | 5 | // Is Symmetrical 6 | // -------------- 7 | // Returns true if a grid is symmetrical. 8 | // - [$columns] : | 9 | @function is-symmetrical( 10 | $columns: susy-get(columns) 11 | ) { 12 | $columns: valid-columns($columns); 13 | @return if(type-of($columns) == number, $columns, null); 14 | } 15 | 16 | 17 | // Susy Count 18 | // ---------- 19 | // Find the number of columns in a given layout 20 | // - [$columns] : | 21 | @function susy-count( 22 | $columns: susy-get(columns) 23 | ) { 24 | $columns: valid-columns($columns); 25 | @return is-symmetrical($columns) or length($columns); 26 | } 27 | 28 | 29 | // Susy Sum 30 | // -------- 31 | // Find the total sum of column-units in a layout 32 | // - [$columns] : | 33 | // - [$gutters] : 34 | // - [$spread] : false/narrow | wide | wider 35 | @function susy-sum( 36 | $columns : susy-get(columns), 37 | $gutters : susy-get(gutters), 38 | $spread : false 39 | ) { 40 | $columns: valid-columns($columns); 41 | $gutters: valid-gutters($gutters); 42 | 43 | $spread: if($spread == wide, 0, if($spread == wider, 1, -1)); 44 | $gutter-sum: (susy-count($columns) + $spread) * $gutters; 45 | $column-sum: is-symmetrical($columns); 46 | 47 | @if not($column-sum) { 48 | @each $column in $columns { 49 | $column-sum: ($column-sum or 0) + $column; 50 | } 51 | } 52 | 53 | @return $column-sum + $gutter-sum; 54 | } 55 | 56 | 57 | // Susy Slice 58 | // ---------- 59 | // Return a subset of columns at a given location. 60 | // - $span : 61 | // - $location : 62 | // - [$columns] : | 63 | @function susy-slice( 64 | $span, 65 | $location, 66 | $columns: susy-get(columns) 67 | ) { 68 | $columns: valid-columns($columns); 69 | $sub-columns: $span; 70 | 71 | @if not(is-symmetrical($columns)) { 72 | $location: $location or 1; 73 | $sub-columns: (); 74 | @for $i from $location to ($location + $span) { 75 | $sub-columns: append($sub-columns, nth($columns, $i)); 76 | } 77 | } 78 | 79 | @return $sub-columns; 80 | } 81 | 82 | 83 | // Susy 84 | // ---- 85 | // Find the sum of a column-span. 86 | // - $span : 87 | // - $location : 88 | // - [$columns] : | 89 | // - [$gutters] : 90 | // - [$spread] : false/narrow | wide | wider 91 | @function susy( 92 | $span, 93 | $location : false, 94 | $columns : susy-get(columns), 95 | $gutters : susy-get(gutters), 96 | $spread : false 97 | ) { 98 | $columns: valid-columns($columns); 99 | $gutters: valid-gutters($gutters); 100 | $span: susy-slice($span, $location, $columns); 101 | 102 | @return susy-sum($span, $gutters, $spread); 103 | } 104 | -------------------------------------------------------------------------------- /susy/susy/su/_settings.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | // ======== 3 | 4 | // Version 5 | // ------- 6 | $su-version: 1.1; 7 | 8 | 9 | // Default Settings 10 | // ---------------- 11 | // PRIVATE: The basic settings 12 | $susy-defaults: ( 13 | columns: 4, 14 | gutters: .25, 15 | ); 16 | 17 | 18 | // User Settings 19 | // ------------- 20 | // - Define the $susy variable with a map of your own settings. 21 | // - Set EITHER $column-width OR $container 22 | // - Use $column-width for static layouts 23 | $susy: () !default; 24 | 25 | 26 | // Susy Defaults 27 | // ------------- 28 | // PRIVATE: Add defaults to Susy 29 | @mixin susy-defaults( 30 | $defaults 31 | ) { 32 | $susy-defaults: map-merge($susy-defaults, $defaults) !global; 33 | } 34 | 35 | 36 | // Susy Set 37 | // -------- 38 | // Change one setting 39 | // - $key : setting name 40 | // - $value : setting value 41 | @mixin susy-set( 42 | $key-value... 43 | ) { 44 | $susy: _susy-deep-set($susy, $key-value...) !global; 45 | } 46 | 47 | 48 | // Susy Get 49 | // -------- 50 | // Return one setting from a grid 51 | // - $key : 52 | // - $layout : 53 | @function susy-get( 54 | $key, 55 | $layout: map-merge($susy-defaults, $susy) 56 | ) { 57 | $layout: parse-grid($layout); 58 | $_options: $layout $susy $susy-defaults; 59 | $_break: false; 60 | $_return: null; 61 | 62 | @each $opt in $_options { 63 | @if type-of($opt) == map and not($_break) { 64 | $_keyset: _susy-deep-has-key($opt, $key...); 65 | @if $_keyset { 66 | $_return: _susy-deep-get($opt, $key...); 67 | $_break: true; 68 | } 69 | } 70 | } 71 | 72 | @return $_return; 73 | } 74 | -------------------------------------------------------------------------------- /susy/susy/su/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Map Functions 2 | // ============= 3 | 4 | 5 | // Truncate List 6 | // ------------- 7 | // - Return a list, truncated to a given length 8 | @function _susy-truncate-list( 9 | $list, 10 | $length 11 | ) { 12 | $_return: (); 13 | 14 | @for $i from 1 through length($list) { 15 | $_return: if($i <= $length, append($_return, nth($list, $i)), $_return); 16 | } 17 | 18 | @return $_return; 19 | } 20 | 21 | 22 | // Deep Get 23 | // -------- 24 | // - Return a value deep in nested maps 25 | @function _susy-deep-get( 26 | $map, 27 | $keys... 28 | ) { 29 | $_return: $map; 30 | 31 | @each $key in $keys { 32 | @if type-of($_return) == map { 33 | $_return: map-get($_return, $key); 34 | } 35 | } 36 | 37 | @return $_return; 38 | } 39 | 40 | 41 | // Deep Set 42 | // -------- 43 | // - Set a value deep in nested maps 44 | @function _susy-deep-set( 45 | $map, 46 | $keys-value... 47 | ) { 48 | $_value: nth($keys-value, -1); 49 | $_keys: _susy-truncate-list($keys-value, length($keys-value) - 1); 50 | $_length: length($_keys); 51 | $_return: (); 52 | 53 | @for $i from 1 through $_length { 54 | $_n: 0 - $i; 55 | $_level: _susy-truncate-list($_keys, $_length + $_n); 56 | $_level: _susy-deep-get($map, $_level...); 57 | $_merge: nth($_keys, $_n); 58 | $_merge: ($_merge: $_value); 59 | $_return: if($_level, map-merge($_level, $_merge), $_merge); 60 | $_value: $_return; 61 | } 62 | 63 | @return $_return; 64 | } 65 | 66 | 67 | // Deep Merge 68 | // ---------- 69 | // Return 2 objects of any depth, merged 70 | @function _susy-deep-merge( 71 | $map1, 72 | $map2 73 | ) { 74 | 75 | @if type-of($map1) != map or type-of($map2) != map { 76 | $map1: $map2; 77 | } @else { 78 | @each $key, $value in $map2 { 79 | $_new: ($key: _susy_deep-merge(map-get($map1, $key), $value)); 80 | $map1: map-merge($map1, $_new); 81 | } 82 | } 83 | 84 | @return $map1; 85 | } 86 | 87 | 88 | // Deep Has-Key 89 | // ------------ 90 | // - Return true if a deep key exists 91 | @function _susy-deep-has-key( 92 | $map, 93 | $keys... 94 | ) { 95 | $_return: null; 96 | $_stop: false; 97 | 98 | @each $key in $keys { 99 | @if not($_stop) { 100 | $_return: map-has-key($map, $key); 101 | } 102 | 103 | @if $_return { 104 | $map: map-get($map, $key); 105 | } @else { 106 | $_stop: true; 107 | } 108 | } 109 | 110 | @return $_return; 111 | } 112 | -------------------------------------------------------------------------------- /susy/susy/su/_validation.scss: -------------------------------------------------------------------------------- 1 | // Math Validation 2 | // =============== 3 | 4 | 5 | // Valid Columns 6 | // ------------- 7 | // Check that a column setting is valid. 8 | @function valid-columns( 9 | $columns, 10 | $silent: false 11 | ) { 12 | $type: type-of($columns); 13 | $return: null; 14 | 15 | @if $type == number and unitless($columns) { 16 | $return: $columns; 17 | } @else if $type == list { 18 | $fail: null; 19 | @each $col in $columns { 20 | @if type-of($col) == number { 21 | $fail: $fail or if(unitless($col), null, true); 22 | } @else { 23 | $fail: true; 24 | } 25 | } 26 | $return: if($fail, $return, $columns); 27 | } 28 | 29 | @if $return != $columns and not($silent) { 30 | $return: null; 31 | $warn: '$columns must be a unitless number or list of unitless numbers.'; 32 | @warn $warn + ' Current value [#{$type}]: #{$columns}'; 33 | } 34 | 35 | @return $return; 36 | } 37 | 38 | 39 | // Valid Gutters 40 | // ------------- 41 | // Check that a gutter setting is valid. 42 | @function valid-gutters( 43 | $gutters, 44 | $silent: false 45 | ) { 46 | $type: type-of($gutters); 47 | $return: null; 48 | 49 | @if $type == number and unitless($gutters) { 50 | $return: $gutters; 51 | } @else if not($silent) { 52 | $warn: '$gutters must be a unitless number.'; 53 | @warn $warn + ' Current value [#{$type}]: #{$gutters}'; 54 | } 55 | 56 | @return $return; 57 | } 58 | --------------------------------------------------------------------------------