loomcss 0.1.0

data/public/docs/assets/js/vendor/prism.min.js

@@ -0,0 +1,9 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+scss */
+var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);;
+Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
+Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});;
+Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
+;
+Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;

data/public/docs/index.html

@@ -0,0 +1,314 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Loomcss - v1.1.8</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Loomcss - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Weave your own pattern libraries.</p>
+"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/sonniesedge/loom#readme">Loomcss - v1.1.8</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="10-global-settings"><a href="#10-global-settings">10-global-settings</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="10-global-settings-variable"><a href="#10-global-settings-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-box-sizing" data-type="variable"><a href="#10-global-settings-variable-LOOM-box-sizing">LOOM-box-sizing</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-mq-breakpoints" data-type="variable"><a href="#10-global-settings-variable-LOOM-mq-breakpoints">LOOM-mq-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-mq-media-type" data-type="variable"><a href="#10-global-settings-variable-LOOM-mq-media-type">LOOM-mq-media-type</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-colors-theme" data-type="variable"><a href="#10-global-settings-variable-LOOM-colors-theme">LOOM-colors-theme</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-colors-list" data-type="variable"><a href="#10-global-settings-variable-LOOM-colors-list">LOOM-colors-list</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-color-black" data-type="variable"><a href="#10-global-settings-variable-LOOM-color-black">LOOM-color-black</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-color-white" data-type="variable"><a href="#10-global-settings-variable-LOOM-color-white">LOOM-color-white</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-color-medium-gray" data-type="variable"><a href="#10-global-settings-variable-LOOM-color-medium-gray">LOOM-color-medium-gray</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-color-dark-gray" data-type="variable"><a href="#10-global-settings-variable-LOOM-color-dark-gray">LOOM-color-dark-gray</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-color-light-gray" data-type="variable"><a href="#10-global-settings-variable-LOOM-color-light-gray">LOOM-color-light-gray</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-use-object-classes" data-type="variable"><a href="#10-global-settings-variable-LOOM-use-object-classes">LOOM-use-object-classes</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-use-utility-classes" data-type="variable"><a href="#10-global-settings-variable-LOOM-use-utility-classes">LOOM-use-utility-classes</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-border-radius" data-type="variable"><a href="#10-global-settings-variable-LOOM-border-radius">LOOM-border-radius</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-border-radius-circle" data-type="variable"><a href="#10-global-settings-variable-LOOM-border-radius-circle">LOOM-border-radius-circle</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-z-layers" data-type="variable"><a href="#10-global-settings-variable-LOOM-z-layers">LOOM-z-layers</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-display-none-breakpoints" data-type="variable"><a href="#10-global-settings-variable-LOOM-display-none-breakpoints">LOOM-display-none-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-transition-duration" data-type="variable"><a href="#10-global-settings-variable-LOOM-transition-duration">LOOM-transition-duration</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-transition-timing-function" data-type="variable"><a href="#10-global-settings-variable-LOOM-transition-timing-function">LOOM-transition-timing-function</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-grid-columns" data-type="variable"><a href="#10-global-settings-variable-LOOM-grid-columns">LOOM-grid-columns</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-grid-columns-responsive" data-type="variable"><a href="#10-global-settings-variable-LOOM-grid-columns-responsive">LOOM-grid-columns-responsive</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-grid-gutter" data-type="variable"><a href="#10-global-settings-variable-LOOM-grid-gutter">LOOM-grid-gutter</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-grid-breakpoints" data-type="variable"><a href="#10-global-settings-variable-LOOM-grid-breakpoints">LOOM-grid-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-border-width" data-type="variable"><a href="#10-global-settings-variable-LOOM-border-width">LOOM-border-width</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-border-style" data-type="variable"><a href="#10-global-settings-variable-LOOM-border-style">LOOM-border-style</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-single-column-width" data-type="variable"><a href="#10-global-settings-variable-LOOM-single-column-width">LOOM-single-column-width</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-spacing-list" data-type="variable"><a href="#10-global-settings-variable-LOOM-spacing-list">LOOM-spacing-list</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-spacing" data-type="variable"><a href="#10-global-settings-variable-LOOM-spacing">LOOM-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-spacing-vertical" data-type="variable"><a href="#10-global-settings-variable-LOOM-spacing-vertical">LOOM-spacing-vertical</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-list" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-list">LOOM-font-list</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-fonts" data-type="variable"><a href="#10-global-settings-variable-LOOM-fonts">LOOM-fonts</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-fonts-loaded" data-type="variable"><a href="#10-global-settings-variable-LOOM-fonts-loaded">LOOM-fonts-loaded</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-weight-bold" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-weight-bold">LOOM-font-weight-bold</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-weight-normal" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-weight-normal">LOOM-font-weight-normal</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-style-italic" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-style-italic">LOOM-font-style-italic</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-style-normal" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-style-normal">LOOM-font-style-normal</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-line-height" data-type="variable"><a href="#10-global-settings-variable-LOOM-line-height">LOOM-line-height</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-sizes" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-sizes">LOOM-font-sizes</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-h-element-sizes" data-type="variable"><a href="#10-global-settings-variable-LOOM-h-element-sizes">LOOM-h-element-sizes</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-generate-sizes-for-default-headings" data-type="variable"><a href="#10-global-settings-variable-LOOM-generate-sizes-for-default-headings">LOOM-generate-sizes-for-default-headings</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-h-object-sizes" data-type="variable"><a href="#10-global-settings-variable-LOOM-h-object-sizes">LOOM-h-object-sizes</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-typography-breakpoint" data-type="variable"><a href="#10-global-settings-variable-LOOM-typography-breakpoint">LOOM-typography-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-family-primary-default" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-family-primary-default">LOOM-font-family-primary-default</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-family-primary-webfont" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-family-primary-webfont">LOOM-font-family-primary-webfont</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-family-seconday-default" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-family-seconday-default">LOOM-font-family-seconday-default</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-family-seconday-webfont" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-family-seconday-webfont">LOOM-font-family-seconday-webfont</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-size-on-smaller-screens" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-size-on-smaller-screens">LOOM-font-size-on-smaller-screens</a></li><li class="sidebar__item sassdoc__item" data-group="10-global-settings" data-name="LOOM-font-size-on-larger-screens" data-type="variable"><a href="#10-global-settings-variable-LOOM-font-size-on-larger-screens">LOOM-font-size-on-larger-screens</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="20-tools"><a href="#20-tools">20-tools</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="20-tools-function"><a href="#20-tools-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-color" data-type="function"><a href="#20-tools-function-get-color">get-color</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-icon-size" data-type="function"><a href="#20-tools-function-get-icon-size">get-icon-size</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-map-deep" data-type="function"><a href="#20-tools-function-get-map-deep">get-map-deep</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-breakpoint" data-type="function"><a href="#20-tools-function-get-breakpoint">get-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-spacing" data-type="function"><a href="#20-tools-function-get-spacing">get-spacing</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-transition" data-type="function"><a href="#20-tools-function-get-transition">get-transition</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-font-family" data-type="function"><a href="#20-tools-function-get-font-family">get-font-family</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-font-size" data-type="function"><a href="#20-tools-function-get-font-size">get-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-line-height" data-type="function"><a href="#20-tools-function-get-line-height">get-line-height</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="convert-px-to-rem" data-type="function"><a href="#20-tools-function-convert-px-to-rem">convert-px-to-rem</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="convert-px-to-em" data-type="function"><a href="#20-tools-function-convert-px-to-em">convert-px-to-em</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="get-z" data-type="function"><a href="#20-tools-function-get-z">get-z</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="20-tools-mixin"><a href="#20-tools-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="grid-columns" data-type="mixin"><a href="#20-tools-mixin-grid-columns">grid-columns</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="mq" data-type="mixin"><a href="#20-tools-mixin-mq">mq</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="add-breakpoint" data-type="mixin"><a href="#20-tools-mixin-add-breakpoint">add-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="font-size" data-type="mixin"><a href="#20-tools-mixin-font-size">font-size</a></li><li class="sidebar__item sassdoc__item" data-group="20-tools" data-name="generic-heading" data-type="mixin"><a href="#20-tools-mixin-generic-heading">generic-heading</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="40-base-elements"><a href="#40-base-elements">40-base-elements</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="40-base-elements-variable"><a href="#40-base-elements-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-input-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-input-color">LOOM-input-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-input-placeholder-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-input-placeholder-color">LOOM-input-placeholder-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-input-border-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-input-border-color">LOOM-input-border-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-input-padding" data-type="variable"><a href="#40-base-elements-variable-LOOM-input-padding">LOOM-input-padding</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-html-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-html-color">LOOM-html-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-html-background-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-html-background-color">LOOM-html-background-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-a-color" data-type="variable"><a href="#40-base-elements-variable-LOOM-a-color">LOOM-a-color</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-a-color-visited" data-type="variable"><a href="#40-base-elements-variable-LOOM-a-color-visited">LOOM-a-color-visited</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-a-color-hover" data-type="variable"><a href="#40-base-elements-variable-LOOM-a-color-hover">LOOM-a-color-hover</a></li><li class="sidebar__item sassdoc__item" data-group="40-base-elements" data-name="LOOM-font-size-default-available" data-type="variable"><a href="#40-base-elements-variable-LOOM-font-size-default-available">LOOM-font-size-default-available</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="60-objects"><a href="#60-objects">60-objects</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="60-objects-variable"><a href="#60-objects-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-absolute-center" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-absolute-center">LOOM-use-object-classes-absolute-center</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-absolute-cover" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-absolute-cover">LOOM-use-object-classes-absolute-cover</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-button" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-button">LOOM-use-object-classes-button</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-clearfix" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-clearfix">LOOM-use-object-classes-clearfix</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-container" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-container">LOOM-use-object-classes-container</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-fixed-ratio" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-fixed-ratio">LOOM-use-object-classes-fixed-ratio</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-headings" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-headings">LOOM-use-object-classes-headings</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-hide-visually" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-hide-visually">LOOM-use-object-classes-hide-visually</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-icon" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-icon">LOOM-use-object-classes-icon</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-list-inline" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-list-inline">LOOM-use-object-classes-list-inline</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-list-reset" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-list-reset">LOOM-use-object-classes-list-reset</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-media" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-media">LOOM-use-object-classes-media</a></li><li class="sidebar__item sassdoc__item" data-group="60-objects" data-name="LOOM-use-object-classes-vertical-center" data-type="variable"><a href="#60-objects-variable-LOOM-use-object-classes-vertical-center">LOOM-use-object-classes-vertical-center</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="80-utilities"><a href="#80-utilities">80-utilities</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="80-utilities-variable"><a href="#80-utilities-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-background-color" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-background-color">LOOM-use-utility-classes-background-color</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-border" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-border">LOOM-use-utility-classes-border</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-color" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-color">LOOM-use-utility-classes-color</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-display" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-display">LOOM-use-utility-classes-display</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-font-family" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-font-family">LOOM-use-utility-classes-font-family</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-font-size" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-font-size">LOOM-use-utility-classes-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-font-style" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-font-style">LOOM-use-utility-classes-font-style</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-font-weight" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-font-weight">LOOM-use-utility-classes-font-weight</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-margin" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-margin">LOOM-use-utility-classes-margin</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-padding" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-padding">LOOM-use-utility-classes-padding</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-position" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-position">LOOM-use-utility-classes-position</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-text-align" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-text-align">LOOM-use-utility-classes-text-align</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-text-transform" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-text-transform">LOOM-use-utility-classes-text-transform</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-vertical-align" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-vertical-align">LOOM-use-utility-classes-vertical-align</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-vertical-align" data-type="variable"><a href="#80-utilities-variable-LOOM-vertical-align">LOOM-vertical-align</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-white-space" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-white-space">LOOM-use-utility-classes-white-space</a></li><li class="sidebar__item sassdoc__item" data-group="80-utilities" data-name="LOOM-use-utility-classes-width" data-type="variable"><a href="#80-utilities-variable-LOOM-use-utility-classes-width">LOOM-use-utility-classes-width</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="10-global-settings"><div class="container">10-global-settings</div></h1><section class="main__sub-section" id="10-global-settings-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="10-global-settings-variable-LOOM-box-sizing"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-box-sizing">LOOM-box-sizing</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-box-sizing: border-box !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global box sizing setting.</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-mq-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-mq-breakpoints">LOOM-mq-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-mq-breakpoints: (
+  small:      320px,
+  medium:     740px,
+  large:      980px,
+  xlarge:     1300px
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Definition map of breakpoint sizes.</p><p>Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-breakpoint"><code>get-breakpoint</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-mq"><code>mq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-add-breakpoint"><code>add-breakpoint</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-mq-media-type"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-mq-media-type">LOOM-mq-media-type</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-mq-media-type: all !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Customize the media type (e.g. <code>@media screen</code> or <code>@media print</code>) By default sass-mq uses an &quot;all&quot; media type (<code>@media all and …</code>)</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-mq"><code>mq</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#changing-media-type">Full documentation and examples</a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-colors-theme"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-colors-theme">LOOM-colors-theme</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-colors-theme: (
+  &#39;black&#39;: #000,
+  &#39;white&#39;: #fff
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The central, default, global color list.</p><p>Retrieve theme colours defined here with get-color(name).</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Using a colour map</p></div><pre class="example__code language-scss"><code>$LOOM-colors-theme: (
+  &#39;brand-primary&#39;: #ed3d68,
+  &#39;brand-secondary&#39;: #30bbba,
+  &#39;white&#39;: #fff,
+  &#39;black&#39;: #000,
+  &#39;meta&#39;: #e4e4e4
+)</code></pre></div><div class="item__example example"><div class="example__description"><p>Using a colour map with predfined variables</p></div><pre class="example__code language-scss"><code>$color-pink: #ed3d68;
+$color-green: #30bbba;
+$color-light-gray: #e4e4e4
+
+$LOOM-colors-theme: (
+  &#39;brand-primary&#39;: $color-pink,
+  &#39;brand-secondary&#39;: $color-green,
+  &#39;white&#39;: #fff,
+  &#39;black&#39;: #000,
+  &#39;meta&#39;: $color-light-gray
+)</code></pre></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-colors-list"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-colors-list">LOOM-colors-list</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-colors-list: $LOOM-colors-theme !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Use your own colour map as the default global color list for use by the get-color() function.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-color-black"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-color-black">LOOM-color-black</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-color-black: #000 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color - black</p><p>Provide a default colour for some Loom objects.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-color-white"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-color-white">LOOM-color-white</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-color-white: #fff !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color - white</p><p>Provide a default colour for some Loom objects.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-color-medium-gray"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-color-medium-gray">LOOM-color-medium-gray</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-color-medium-gray: #999595 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color - medium gray</p><p>Provide a default colour for some Loom objects.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-color-dark-gray"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-color-dark-gray">LOOM-color-dark-gray</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-color-dark-gray: #444 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color - dark gray</p><p>Provide a default colour for some Loom objects.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-color-light-gray"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-color-light-gray">LOOM-color-light-gray</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-color-light-gray: #e5e5e5 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color - light gray</p><p>Provide a default colour for some Loom objects.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-use-object-classes"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes">LOOM-use-object-classes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes: true !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Will object mixins have their own classes generated?</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-use-utility-classes"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes">LOOM-use-utility-classes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes: true !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Will utility modules have their own classes generated?</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-border-radius"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-border-radius">LOOM-border-radius</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-border-radius: 5px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default border-radius for various objects.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-border-radius-circle"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-border-radius-circle">LOOM-border-radius-circle</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-border-radius-circle: 50% !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default border-radius for circular objects.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-z-layers"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-z-layers">LOOM-z-layers</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-z-layers: (
+  &quot;top&quot;:          2,
+  &quot;default&quot;:      1,
+  &quot;below&quot;:        -1,
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default z-index layers used by the get-z() function.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#function-get-z"><code>get-z</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-display-none-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-display-none-breakpoints">LOOM-display-none-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-display-none-breakpoints: (
+  small,
+  large
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default list of breakpoints that is used to generate display-none classes.</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-transition-duration"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-transition-duration">LOOM-transition-duration</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-transition-duration: 0.2s !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default time that all animations takes to complete.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Time</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-transition-timing-function"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-transition-timing-function">LOOM-transition-timing-function</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-transition-timing-function: ease-in-out !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default timing/easing function that all animations will use.</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-grid-columns"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-grid-columns">LOOM-grid-columns</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-grid-columns: (12) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default numbe of columns inside a grid container.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-grid-columns-responsive"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-grid-columns-responsive">LOOM-grid-columns-responsive</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-grid-columns-responsive: (12) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default numbe of columns inside a grid container when combined with breakpoints.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-grid-gutter"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-grid-gutter">LOOM-grid-gutter</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-grid-gutter: xsmall !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default gutter size for grid elements.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-grid-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-grid-breakpoints">LOOM-grid-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-grid-breakpoints: (
+  &#39;small&#39;,
+  &#39;medium&#39;,
+  &#39;large&#39;,
+  &#39;xlarge&#39;
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breakpoints defined here will be used to generate breakpoints in the grid system.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-border-width"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-border-width">LOOM-border-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-border-width: 1px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default border width.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-border-style"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-border-style">LOOM-border-style</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-border-style: solid !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default border style</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-single-column-width"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-single-column-width">LOOM-single-column-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-single-column-width: 55rem !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default width of single-column content</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-spacing-list"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-spacing-list">LOOM-spacing-list</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-spacing-list: (
+  &#39;xsmall&#39;:     0.5rem,
+  &#39;small&#39;:      1rem,
+  &#39;default&#39;:    2rem,
+  &#39;large&#39;:      3rem,
+  &#39;xlarge&#39;:     4rem
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global list of sizing units</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-spacing"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-spacing">LOOM-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-spacing: $LOOM-spacing-list !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Change this to your own list if you wish. This is used by many functions as a default.</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-spacing"><code>get-spacing</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-spacing-vertical"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-spacing-vertical">LOOM-spacing-vertical</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-spacing-vertical: 1rem !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default vertical spacing value.</p><p>Intended to be overridden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-list"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-list">LOOM-font-list</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-list: (
+  &#39;primary&#39;: (
+    &#39;default&#39;: sans-serif,
+    &#39;webfont&#39;: sans-serif
+  ),
+  &#39;secondary&#39;: (
+    &#39;default&#39;: serif,
+    &#39;webfont&#39;: serif
+  )
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The default global font stack for your site. Each font stack has a default and a webfont version.</p><p>Fonts are called using get-font-family().</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Get fonts example</p></div><pre class="example__code language-scss"><code>.class {
+  font-family: get-font-family(primary);
+}</code></pre></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-fonts"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-fonts">LOOM-fonts</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-fonts: $LOOM-font-list !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Use your own font map as the default global font list for use by the get-font-family() function.</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-family"><code>get-font-family</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-fonts-loaded"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-fonts-loaded">LOOM-fonts-loaded</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-fonts-loaded: &#39;fonts-loaded&#39; !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The classname name to use to place loaded webfonts behind.</p><p>If set to &#39;false&#39; webfont strategies in Loom will be disabled.</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code> or <code>Boolean</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-generic-heading"><code>generic-heading</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://fontfaceobserver.com/">See examples of how to use with Fontfaceobserver</a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-weight-bold"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-weight-bold">LOOM-font-weight-bold</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-weight-bold: bold !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set the default bold weight value</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-weight-normal"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-weight-normal">LOOM-font-weight-normal</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-weight-normal: normal !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set the default normal weight value</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-style-italic"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-style-italic">LOOM-font-style-italic</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-style-italic: italic !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set the default italic style value</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-style-normal"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-style-normal">LOOM-font-style-normal</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-style-normal: normal !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set the default normal style value</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-line-height"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-line-height">LOOM-line-height</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-line-height: 1.5 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set the default line-height.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-sizes"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-sizes">LOOM-font-sizes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-sizes: (
+  &#39;default&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 18px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 16px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;alpha&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 36px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 32px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;beta&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 30px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 28px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;gamma&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 26px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 24px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;delta&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 22px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 20px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;epsilon&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 20px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 18px, &#39;line-height&#39;: 1.5)
+  ),
+  &#39;zeta&#39;:   (
+    &#39;smaller-viewport&#39;: (&#39;font-size&#39;: 18px, &#39;line-height&#39;: 1.5),
+    &#39;larger-viewport&#39;: (&#39;font-size&#39;: 16px, &#39;line-height&#39;: 1.5)
+  )
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Defines the font sizes to be used in your site. Each font size has a smaller-viewport and a larger-viewport version, as generally fonts need to be slightly large on mobile devices.</p><p>There should always ideally be an &quot;default&quot; font that defines the base size for the site.</p><p>Fonts are called using get-font-size().</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-size"><code>get-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-line-height"><code>get-line-height</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-h-element-sizes"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-h-element-sizes">LOOM-h-element-sizes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-h-element-sizes: (
+  &#39;h1&#39;: &#39;alpha&#39;,
+  &#39;h2&#39;: &#39;beta&#39;,
+  &#39;h3&#39;: &#39;gamma&#39;,
+  &#39;h4&#39;: &#39;delta&#39;,
+  &#39;h5&#39;: &#39;epsilon&#39;,
+  &#39;h6&#39;: &#39;zeta&#39;
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Sizes that are applied to base HTML element headings</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-generate-sizes-for-default-headings"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-generate-sizes-for-default-headings">LOOM-generate-sizes-for-default-headings</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-generate-sizes-for-default-headings: true !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>If set to TRUE, base headings will receive default sizes and will appear as &quot;traditional&quot; headings. If FALSE, base headings will receive the same sizing and styling as the body text.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-h-object-sizes"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-h-object-sizes">LOOM-h-object-sizes</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-h-object-sizes: (
+  &#39;alpha&#39;,
+  &#39;beta&#39;,
+  &#39;gamma&#39;,
+  &#39;delta&#39;,
+  &#39;epsilon&#39;,
+  &#39;zeta&#39;
+) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>If this list is defined, the following sizes will be generated as object classes (<code>.o-alpha {}</code>).</p><p>Objects be also consumed directly with &#39;@include font-size($name)&#39;;</p></div><h3 class="item__sub-heading">Type</h3><p><code>List</code></p></section><section class="main__item container item" id="10-global-settings-variable-LOOM-typography-breakpoint"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-typography-breakpoint">LOOM-typography-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-typography-breakpoint: medium !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>At what breakpoint does the typography switch from fonts sizes appropiate for smaller devices to font sizes appropiate for larger devices?</p><p>Must match one of the breakpoints in $LOOM-mq-breakpoints.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[variable]</span> <a href="#variable-LOOM-mq-breakpoints"><code>LOOM-mq-breakpoints</code></a></li></ul></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-family-primary-default"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-font-family-primary-default">LOOM-font-family-primary-default</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-family-primary-default: sans-serif !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default value for when primary base fonts are called.</p><p>Intended to be overriden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-family-primary-webfont"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-font-family-primary-webfont">LOOM-font-family-primary-webfont</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-family-primary-webfont: sans-serif !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default value for when primary web fonts are called.</p><p>Intended to be overriden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-family-seconday-default"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-font-family-seconday-default">LOOM-font-family-seconday-default</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-family-seconday-default: serif !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default value for when secondary base fonts are called.</p><p>Intended to be overriden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-family-seconday-webfont"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#variable-LOOM-font-family-seconday-webfont">LOOM-font-family-seconday-webfont</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-family-seconday-webfont: serif !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default value for when secondary web fonts are called.</p><p>Intended to be overriden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-size-on-smaller-screens"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-size-on-smaller-screens">LOOM-font-size-on-smaller-screens</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-size-on-smaller-screens: 18px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default base font size, small screen devices.</p><p>Intended to be overridden by user choices.</p></div></section><section class="main__item container item" id="10-global-settings-variable-LOOM-font-size-on-larger-screens"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-size-on-larger-screens">LOOM-font-size-on-larger-screens</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-size-on-larger-screens: 16px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default font size, large screen devices.</p><p>Intended to be overridden by user choices.</p></div></section></section></section><section class="main__section"><h1 class="main__heading" id="20-tools"><div class="container">20-tools</div></h1><section class="main__sub-section" id="20-tools-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="20-tools-function-get-color"><h3 class="item__heading"><a class="item__name" href="#function-get-color">get-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-color($color-name, $color-list) { 
+  $color-name: inspect($color-name);  // Force value to a string, as if a key value happens to match a CSS colour value, it will be imported as a Sass colour, not a string, causing an error in map-get().
+
+  @if map-has-key($color-list, $color-name) {
+    $output: map-get($color-list, $color-name);
+
+    @if type-of($output) != color {
+      @error $color-name &quot; could not be found in the global colour list.&quot;;
+    }
+
+    @return $output;
+  }
+
+  @else {
+    @return null;
+  }
+ }" data-collapsed="@function get-color($color-name, $color-list) { ... }"><code>@function get-color($color-name, $color-list) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extract a color value from a map.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color-name</code></th><td data-label="desc"><p>The key name for a colour key/value pair.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color-list</code></th><td data-label="desc"><p>A map of spacing key/value pairs to use. Defaults to $LOOM-colors-list.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table></section><section class="main__item container item" id="20-tools-function-get-icon-size"><h3 class="item__heading"><a class="item__name" href="#function-get-icon-size">get-icon-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-icon-size($icon-name, $icon-size-map) { 
+  @if map-has-key($icon-size-map, $icon-name) {
+    @return map-get($icon-size-map, $icon-name);
+  }
+
+  @else {
+    @warn &quot;#{$icon-name} not found in get-icon-size&quot;;
+
+    @return null;
+  }
+ }" data-collapsed="@function get-icon-size($icon-name, $icon-size-map) { ... }"><code>@function get-icon-size($icon-name, $icon-size-map) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get an icon size from a name.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$icon-name</code></th><td data-label="desc"><p>An icon size name, corresponding to a key in $icon-size-map</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$icon-size-map</code></th><td data-label="desc"><p>A map of icon names to sizes.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table></section><section class="main__item container item" id="20-tools-function-get-map-deep"><h3 class="item__heading"><a class="item__name" href="#function-get-map-deep">get-map-deep</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-map-deep($map, $keys...) { 
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+ }" data-collapsed="@function get-map-deep($map, $keys...) { ... }"><code>@function get-map-deep($map, $keys...) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get a value from a nested sass map.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$map</code></th><td data-label="desc"><p>A multi-level Sass map.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$keys</code></th><td data-label="desc"><p>A list of keys, representing a traversel of the nested Sass map.</p></td><td data-label="type"><code>Arglist</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-family"><code>get-font-family</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-size"><code>get-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-line-height"><code>get-line-height</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-breakpoint"><h3 class="item__heading"><a class="item__name" href="#function-get-breakpoint">get-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-breakpoint($name) { 
+  @if map-has-key($breakpoints, $name) {
+    @return map-get($breakpoints, $name);
+  } @else { // stylelint-disable-line
+    @warn &quot;Breakpoint #{$name} wasn&#39;t found in $breakpoints.&quot;;
+  }
+ }" data-collapsed="@function get-breakpoint($name) { ... }"><code>@function get-breakpoint($name) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get a breakpoint&#39;s width</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$name</code></th><td data-label="desc"><p>Name of the breakpoint. One of $LOOM-mq-breakpoints</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> &mdash;<p>Value in pixels</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$tablet-width: get-breakpoint(tablet);
+@media (min-width: get-breakpoint(desktop)) {}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-mq-breakpoints"><code>LOOM-mq-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-spacing"><h3 class="item__heading"><a class="item__name" href="#function-get-spacing">get-spacing</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-spacing($spacing-name, $spacing-list) { 
+  @if map-has-key($spacing-list, $spacing-name) {
+    @return map-get($LOOM-spacing, $spacing-name);
+  }
+
+  @else {
+    @return null;
+  }
+ }" data-collapsed="@function get-spacing($spacing-name, $spacing-list) { ... }"><code>@function get-spacing($spacing-name, $spacing-list) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Retrieve a spacing value.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$spacing-name</code></th><td data-label="desc"><p>The key for a spacing pair. Defaults to &quot;default&quot;.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$spacing-list</code></th><td data-label="desc"><p>A map of spacing key/value pairs to use. Defaults to $LOOM-spacing.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-spacing"><code>LOOM-spacing</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-generic-heading"><code>generic-heading</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-transition"><h3 class="item__heading"><a class="item__name" href="#function-get-transition">get-transition</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-transition($transition-property-name, $transition-duration, $transition-timing-function, $transition-delay) { 
+  @return $transition-property-name $transition-duration $transition-timing-function $transition-delay;
+ }" data-collapsed="@function get-transition($transition-property-name, $transition-duration, $transition-timing-function, $transition-delay) { ... }"><code>@function get-transition($transition-property-name, $transition-duration, $transition-timing-function, $transition-delay) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Retrieve a CSS transition</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$transition-property-name</code></th><td data-label="desc"><p>Which property to animate. Defaults to &quot;all&quot;.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$transition-duration</code></th><td data-label="desc"><p>How long should the animation take.</p></td><td data-label="type"><code>Time</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$transition-timing-function</code></th><td data-label="desc"><p>What timing/easing function should be used.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$transition-delay</code></th><td data-label="desc"><p>What delay is at the start of the transition.</p></td><td data-label="type"><code>Time</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table></section><section class="main__item container item" id="20-tools-function-get-font-family"><h3 class="item__heading"><a class="item__name" href="#function-get-font-family">get-font-family</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-font-family() { 
+  @if map-has-key($font-map, $font-name) {
+    @return get-map-deep($font-map, $font-name, $font-variant);
+  }
+
+  @else {
+    @warn &quot;No matching font found for `#{$font-name}` in global font map.&quot;;
+
+    @return null;
+  }
+ }" data-collapsed="@function get-font-family() { ... }"><code>@function get-font-family() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extracts a font-family name from a font usage</p><p>By default it will grab the &quot;default&quot; font. Specify &quot;webfont&quot; for the webfont version.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-size: get-font-family(primary); // Get default version of font &quot;primary&quot;
+font-size: get-font-family(secondary, webfont); // Get webfont version of font &quot;secondary&quot;</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-map-deep"><code>get-map-deep</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-fonts"><code>LOOM-fonts</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-generic-heading"><code>generic-heading</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-font-size"><h3 class="item__heading"><a class="item__name" href="#function-get-font-size">get-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-font-size() { 
+  @if map-has-key($font-map, $font-name) {
+    @return get-map-deep($font-map, $font-name, $font-size, &#39;font-size&#39;);
+  }
+
+  @else {
+    @warn &quot;No matching font found for `#{$font-name}` in global font map.&quot;;
+
+    @return null;
+  }
+ }" data-collapsed="@function get-font-size() { ... }"><code>@function get-font-size() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extract a font size from the global sizing map.</p><p>By default it will grab the &quot;small breakpoint&quot; version of the font-size.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>font-size: get-font-size(alpha);  // Get default version of size &quot;alpha&quot;
+font-size: get-font-size(beta, large); // Get large version of size &quot;beta&quot;</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-map-deep"><code>get-map-deep</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-font-sizes"><code>LOOM-font-sizes</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-font-size"><code>font-size</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-line-height"><h3 class="item__heading"><a class="item__name" href="#function-get-line-height">get-line-height</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-line-height() { 
+  @if map-has-key($font-map, $font-name) {
+    @return get-map-deep($font-map, $font-name, $font-size, &#39;line-height&#39;);
+  }
+
+  @else {
+    @warn &quot;No matching font found for `#{$font-name}` in global font map.&quot;;
+
+    @return null;
+  }
+ }" data-collapsed="@function get-line-height() { ... }"><code>@function get-line-height() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Extract a line-height from the global sizing map.</p><p>By default it will grab the &quot;small breakpoint&quot; version of the line-height.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-map-deep"><code>get-map-deep</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-font-sizes"><code>LOOM-font-sizes</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-convert-px-to-rem"><h3 class="item__heading"><a class="item__name" href="#function-convert-px-to-rem">convert-px-to-rem</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function convert-px-to-rem($pixels, $browser-content) { 
+  @return ($pixel-size / $root-size) * 1rem;
+ }" data-collapsed="@function convert-px-to-rem($pixels, $browser-content) { ... }"><code>@function convert-px-to-rem($pixels, $browser-content) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Gonverts pixel values to REMs</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pixels</code></th><td data-label="desc"><p>A font size in pixels</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$browser-content</code></th><td data-label="desc"><p>The base font size of the page at the current breakpoint. y default, this is the value of &quot;base&quot; at the &quot;small breakpoint&quot;</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> &mdash;<p>Value in REMs</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-font-size"><code>font-size</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-convert-px-to-em"><h3 class="item__heading"><a class="item__name" href="#function-convert-px-to-em">convert-px-to-em</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function convert-px-to-em($pixels, $browser-content) { 
+  @return ($pixels / $browser-context) + 0em; // stylelint-disable-line length-zero-no-unit
+ }" data-collapsed="@function convert-px-to-em($pixels, $browser-content) { ... }"><code>@function convert-px-to-em($pixels, $browser-content) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Gonverts pixel values to EMs</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$pixels</code></th><td data-label="desc"><p>A font size in pixels</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$browser-content</code></th><td data-label="desc"><p>The base font size of the page at the current breakpoint. y default, this is the value of &quot;base&quot; at the &quot;small breakpoint&quot;</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> &mdash;<p>Value in EMs</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#20-tools-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="20-tools-function-get-z"><h3 class="item__heading"><a class="item__name" href="#function-get-z">get-z</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function get-z($layer, $z-layers) { 
+  @if map-has-key($z-layers, $layer) {
+    @return map-get($z-layers, $layer);
+  }
+
+  @else {
+    @warn &quot;No layer found for `#{$layer}` in $z-layers map. Property omitted.&quot;;
+
+    @return null;
+  }
+ }" data-collapsed="@function get-z($layer, $z-layers) { ... }"><code>@function get-z($layer, $z-layers) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Retrieve a z-index value.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$layer</code></th><td data-label="desc"><p>The name of a layer in $LOOM-z-layers</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$z-layers</code></th><td data-label="desc"><p>A map of z-index layers/integer values.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table></section></section><section class="main__sub-section" id="20-tools-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="20-tools-mixin-grid-columns"><h3 class="item__heading"><a class="item__name" href="#mixin-grid-columns">grid-columns</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin grid-columns($columns, $breakpoint) { 
+  @each $column-item in $columns {
+    @if ($columns == 1) {
+      .l-col-1-of-1#{$breakpoint} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+    } @else { // stylelint-disable-line
+      @for $i from 1 to ($column-item + 1) {
+        .l-col-#{$i}-of-#{$column-item}#{$breakpoint} {
+          flex-basis: ($i / $column-item) * 100%;
+          max-width: ($i / $column-item) * 100%;
+        }
+      }
+    }
+  }
+ }" data-collapsed="@mixin grid-columns($columns, $breakpoint) { ... }"><code>@mixin grid-columns($columns, $breakpoint) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generate grid columns. The column widths will be calculated automatically.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$columns</code></th><td data-label="desc"><p>The number of columns to generate.</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$breakpoint</code></th><td data-label="desc"><p>If defined, each column will have this breakpoint name appended at the end.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table></section><section class="main__item container item" id="20-tools-mixin-mq"><h3 class="item__heading"><a class="item__name" href="#mixin-mq">mq</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin mq($from, $until, $and, $media-type) { 
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: &#39;&#39;;
+
+  // From: this breakpoint (inclusive)
+  @if $from {
+    @if type-of($from) == number {
+      $min-width: convert-px-to-em($from);
+    } @else { // stylelint-disable-line
+      $min-width: convert-px-to-em(get-breakpoint($from, $breakpoints));
+    }
+  }
+
+  // Until: that breakpoint (exclusive)
+  @if $until {
+    @if type-of($until) == number {
+      $max-width: convert-px-to-em($until);
+    } @else { // stylelint-disable-line
+      $max-width: convert-px-to-em(get-breakpoint($until, $breakpoints)) - 0.01em;
+    }
+  }
+
+  @if $min-width != 0 { $media-query: &#39;#{$media-query} and (min-width: #{$min-width})&#39;; }
+
+  @if $max-width != 0 { $media-query: &#39;#{$media-query} and (max-width: #{$max-width})&#39;; }
+
+  @if $and { $media-query: &#39;#{$media-query} and #{$and}&#39;; }
+
+  // Remove unnecessary media query prefix &#39;all and &#39;
+  @if ($media-type == &#39;all&#39; and $media-query != &#39;&#39;) {
+    $media-type: &#39;&#39;;
+    $media-query: str-slice(unquote($media-query), 6);
+  }
+
+  @media #{$media-type + $media-query} {
+    @content;
+  }
+ }" data-collapsed="@mixin mq($from, $until, $and, $media-type) { ... }"><code>@mixin mq($from, $until, $and, $media-type) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Media Query mixin</p><p>Lovingly repurposed from <a href="https://github.com/sass-mq/sass-mq">https://github.com/sass-mq/sass-mq</a></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$from</code></th><td data-label="desc"><p>(false) - One of $LOOM-mq-breakpoints</p></td><td data-label="type"><code>String</code> or <code>Boolean</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$until</code></th><td data-label="desc"><p>(false) - One of $LOOM-mq-breakpoints</p></td><td data-label="type"><code>String</code> or <code>Boolean</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$and</code></th><td data-label="desc"><p>(false) - Additional media query parameters</p></td><td data-label="type"><code>String</code> or <code>Boolean</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$media-type</code></th><td data-label="desc"><p>($LOOM-mq-media-type) - Media type: screen, print…</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Content</h3><p>This mixin allows extra content to be passed (through the <code>@content</code> directive).<h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>.element {
+  @include mq($from: mobile) {
+    color: red;
+  }
+  @include mq($until: tablet) {
+    color: blue;
+  }
+  @include mq(mobile, tablet) {
+    color: green;
+  }
+  @include mq($from: tablet, $and: &#39;(orientation: landscape)&#39;) {
+    color: teal;
+  }
+  @include mq(950px) {
+    color: hotpink;
+  }
+  @include mq(tablet, $media-type: screen) {
+    color: hotpink;
+  }
+}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-mq-media-type"><code>LOOM-mq-media-type</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-mq-breakpoints"><code>LOOM-mq-breakpoints</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-convert-px-to-em"><code>convert-px-to-em</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-breakpoint"><code>get-breakpoint</code></a></li></ul></p></section><section class="main__item container item" id="20-tools-mixin-add-breakpoint"><h3 class="item__heading"><a class="item__name" href="#mixin-add-breakpoint">add-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin add-breakpoint($name, $width) { 
+  $new-breakpoint: ($name: $width);
+  $LOOM-mq-breakpoints: map-merge($LOOM-mq-breakpoints, $new-breakpoint) !global;
+ }" data-collapsed="@mixin add-breakpoint($name, $width) { ... }"><code>@mixin add-breakpoint($name, $width) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Add a breakpoint</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$name</code></th><td data-label="desc"><p>Name of the breakpoint</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$width</code></th><td data-label="desc"><p>Width of the breakpoint</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>@include add-breakpoint(tvscreen, 1920px);
+@include mq(tvscreen) {}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-mq-breakpoints"><code>LOOM-mq-breakpoints</code></a></li></ul></section><section class="main__item container item" id="20-tools-mixin-font-size"><h3 class="item__heading"><a class="item__name" href="#mixin-font-size">font-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin font-size() { 
+  $font-size: null;
+
+  @if (type-of($size-name) == string) {
+    $font-size: get-font-size($size-name, $size-browser-context);
+  }
+
+  @if (type-of($size-name) == number) {
+    $font-size: $size-name;
+  }
+
+  $font-size-context: get-font-size(default, $size-browser-context);
+
+  font-size: $font-size; // NOTE: Fallback to size in pixels
+  font-size: convert-px-to-rem($font-size, $font-size-context); // stylelint-disable-line declaration-block-no-duplicate-properties
+ }" data-collapsed="@mixin font-size() { ... }"><code>@mixin font-size() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generates a font-size ruleset.</p><p>By default it will grab the &quot;small breakpoint&quot; version of the font-size.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-size"><code>get-font-size</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-convert-px-to-rem"><code>convert-px-to-rem</code></a></li></ul></section><section class="main__item container item" id="20-tools-mixin-generic-heading"><h3 class="item__heading"><a class="item__name" href="#mixin-generic-heading">generic-heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin generic-heading() { 
+  font-family: get-font-family($font, default);
+  font-weight: $font-weight;
+
+  @if $margin-size == 0 or $margin-size == none {
+    margin: 0;
+  }
+
+  @else {
+    margin: 0 0 get-spacing($margin-size);
+  }
+
+  text-rendering: optimizeLegibility;
+
+  .#{$LOOM-fonts-loaded} &amp; {
+    font-family: get-font-family($font, webfont);
+  }
+ }" data-collapsed="@mixin generic-heading() { ... }"><code>@mixin generic-heading() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Output styling for a generic heading.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>.o-h1 {
+  @include generic-heading();
+}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-font-family"><code>get-font-family</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#20-tools-function-get-spacing"><code>get-spacing</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#10-global-settings-variable-LOOM-fonts-loaded"><code>LOOM-fonts-loaded</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="40-base-elements"><div class="container">40-base-elements</div></h1><section class="main__sub-section" id="40-base-elements-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="40-base-elements-variable-LOOM-input-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-input-color">LOOM-input-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-input-color: $LOOM-color-dark-gray !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for inputs</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-input-placeholder-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-input-placeholder-color">LOOM-input-placeholder-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-input-placeholder-color: $LOOM-color-medium-gray !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for inputs (placeholder text)</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-input-border-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-input-border-color">LOOM-input-border-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-input-border-color: $LOOM-color-medium-gray !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for borders</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-input-padding"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-input-padding">LOOM-input-padding</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-input-padding: get-spacing(xsmall);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default padding for texty inputs</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-html-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-html-color">LOOM-html-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-html-color: $LOOM-color-black !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for the html root</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-html-background-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-html-background-color">LOOM-html-background-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-html-background-color: $LOOM-color-white !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default background color for the html root</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-a-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-a-color">LOOM-a-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-a-color: $LOOM-color-medium-gray !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for links</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-a-color-visited"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-a-color-visited">LOOM-a-color-visited</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-a-color-visited: $LOOM-color-dark-gray !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for links (visited)</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-a-color-hover"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-a-color-hover">LOOM-a-color-hover</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-a-color-hover: $LOOM-color-black !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Default color for links (hover)</p></div></section><section class="main__item container item" id="40-base-elements-variable-LOOM-font-size-default-available"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-font-size-default-available">LOOM-font-size-default-available</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-font-size-default-available: if(get-font-size(default), true, false) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Check to see if a &quot;default&quot; font is available in the global font LOOM-font-list</p></div></section></section></section><section class="main__section"><h1 class="main__heading" id="60-objects"><div class="container">60-objects</div></h1><section class="main__sub-section" id="60-objects-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-absolute-center"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-absolute-center">LOOM-use-object-classes-absolute-center</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-absolute-center: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle absolute-center class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-absolute-cover"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-absolute-cover">LOOM-use-object-classes-absolute-cover</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-absolute-cover: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle absolute-cover class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-button"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-button">LOOM-use-object-classes-button</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-button: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle button class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-clearfix"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-clearfix">LOOM-use-object-classes-clearfix</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-clearfix: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle clearfix class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-container"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-container">LOOM-use-object-classes-container</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-container: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle container class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-fixed-ratio"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-fixed-ratio">LOOM-use-object-classes-fixed-ratio</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-fixed-ratio: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle fixed-ratio class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-headings"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-headings">LOOM-use-object-classes-headings</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-headings: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle headings class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-hide-visually"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-hide-visually">LOOM-use-object-classes-hide-visually</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-hide-visually: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle hide-visually class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-icon"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-icon">LOOM-use-object-classes-icon</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-icon: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle icon class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-list-inline"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-list-inline">LOOM-use-object-classes-list-inline</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-list-inline: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle list-inline class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-list-reset"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-list-reset">LOOM-use-object-classes-list-reset</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-list-reset: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle list-reset class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-media"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-media">LOOM-use-object-classes-media</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-media: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle media class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="60-objects-variable-LOOM-use-object-classes-vertical-center"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-object-classes-vertical-center">LOOM-use-object-classes-vertical-center</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-object-classes-vertical-center: $LOOM-use-object-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle vertical-center class generation.</p><p>By default uses global setting.</p></div></section></section></section><section class="main__section"><h1 class="main__heading" id="80-utilities"><div class="container">80-utilities</div></h1><section class="main__sub-section" id="80-utilities-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-background-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-background-color">LOOM-use-utility-classes-background-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-background-color: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle background-color class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-border"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-border">LOOM-use-utility-classes-border</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-border: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle border class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-color"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-color">LOOM-use-utility-classes-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-color: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle color class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-display"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-display">LOOM-use-utility-classes-display</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-display: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle display class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-font-family"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-font-family">LOOM-use-utility-classes-font-family</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-font-family: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle font-family class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-font-size"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-font-size">LOOM-use-utility-classes-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-font-size: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle font-size class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-font-style"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-font-style">LOOM-use-utility-classes-font-style</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-font-style: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle font-style class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-font-weight"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-font-weight">LOOM-use-utility-classes-font-weight</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-font-weight: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle font-weight class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-margin"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-margin">LOOM-use-utility-classes-margin</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-margin: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle margin class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-padding"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-padding">LOOM-use-utility-classes-padding</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-padding: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle padding class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-position"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-position">LOOM-use-utility-classes-position</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-position: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle position class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-text-align"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-text-align">LOOM-use-utility-classes-text-align</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-text-align: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle text-align class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-text-transform"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-text-transform">LOOM-use-utility-classes-text-transform</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-text-transform: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle text-transform class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-vertical-align"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-vertical-align">LOOM-use-utility-classes-vertical-align</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-vertical-align: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle vertical-align class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-vertical-align"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-vertical-align">LOOM-vertical-align</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-vertical-align: (
+  baseline,
+  sub,
+  super,
+  text-top,
+  text-bottom,
+  middle,
+  top,
+  bottom,
+);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>List of possible vertical-align values</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-white-space"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-white-space">LOOM-use-utility-classes-white-space</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-white-space: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle white-space class generation.</p><p>By default uses global setting.</p></div></section><section class="main__item container item" id="80-utilities-variable-LOOM-use-utility-classes-width"><h3 class="item__heading"><a class="item__name" href="#variable-LOOM-use-utility-classes-width">LOOM-use-utility-classes-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$LOOM-use-utility-classes-width: $LOOM-use-utility-classes !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Toggle width class generation.</p><p>By default uses global setting.</p></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --><a class="project-info__name" href="https://github.com/sonniesedge/loom#readme">Loomcss</a><!-- Version --> <span class="project-info__version">- v1.1.8</span><!-- License --> <span class="project-info__license">, under MIT</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>

metadata

@@ -0,0 +1,172 @@
+--- !ruby/object:Gem::Specification
+name: loomcss
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Charlie Owen
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-11-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: Loom is a Sass framework designed to help you build pattern libraries
+  and design systems quickly and easily. Loom provides a solid base to build your
+  own systems on top of.
+email:
+- charlie@sonniesedge.co.uk
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".nvmrc"
+- ".stylelintrc"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- assets/loom/10-global-settings/_box-sizing.scss
+- assets/loom/10-global-settings/_breakpoints.scss
+- assets/loom/10-global-settings/_color.scss
+- assets/loom/10-global-settings/_icons.scss
+- assets/loom/10-global-settings/_misc.scss
+- assets/loom/10-global-settings/_spacing.scss
+- assets/loom/10-global-settings/_typography.scss
+- assets/loom/20-tools/_color.scss
+- assets/loom/20-tools/_grid-columns.scss
+- assets/loom/20-tools/_icons.scss
+- assets/loom/20-tools/_misc.scss
+- assets/loom/20-tools/_mq.scss
+- assets/loom/20-tools/_spacing.scss
+- assets/loom/20-tools/_transition.scss
+- assets/loom/20-tools/_type-checking.scss
+- assets/loom/20-tools/_typography.scss
+- assets/loom/20-tools/_z-index.scss
+- assets/loom/30-generic/_box-sizing.scss
+- assets/loom/30-generic/_normalize.scss
+- assets/loom/30-generic/_reset.scss
+- assets/loom/40-base-elements/_form-items.scss
+- assets/loom/40-base-elements/_images.scss
+- assets/loom/40-base-elements/_typography.scss
+- assets/loom/50-layout/_grid.scss
+- assets/loom/60-objects/_absolute-center.scss
+- assets/loom/60-objects/_absolute-cover.scss
+- assets/loom/60-objects/_button.scss
+- assets/loom/60-objects/_clearfix.scss
+- assets/loom/60-objects/_container.scss
+- assets/loom/60-objects/_fixed-ratio.scss
+- assets/loom/60-objects/_headings.scss
+- assets/loom/60-objects/_hide-visually.scss
+- assets/loom/60-objects/_icon.scss
+- assets/loom/60-objects/_list-inline.scss
+- assets/loom/60-objects/_list-reset.scss
+- assets/loom/60-objects/_media.scss
+- assets/loom/60-objects/_vertical-center.scss
+- assets/loom/70-ui-components/_example.scss
+- assets/loom/80-utilities/_background-color.scss
+- assets/loom/80-utilities/_border.scss
+- assets/loom/80-utilities/_color.scss
+- assets/loom/80-utilities/_display.scss
+- assets/loom/80-utilities/_font-family.scss
+- assets/loom/80-utilities/_font-size.scss
+- assets/loom/80-utilities/_font-style.scss
+- assets/loom/80-utilities/_font-weight.scss
+- assets/loom/80-utilities/_line-height.scss
+- assets/loom/80-utilities/_margin.scss
+- assets/loom/80-utilities/_padding.scss
+- assets/loom/80-utilities/_position.scss
+- assets/loom/80-utilities/_text-align.scss
+- assets/loom/80-utilities/_text-transform.scss
+- assets/loom/80-utilities/_vertical-align.scss
+- assets/loom/80-utilities/_white-space.scss
+- assets/loom/80-utilities/_width.scss
+- assets/loom/90-trumps/.keepfile
+- assets/loom/_10-global-settings.scss
+- assets/loom/_20-tools.scss
+- assets/loom/_30-generic.scss
+- assets/loom/_40-base-elements.scss
+- assets/loom/_50-layout.scss
+- assets/loom/_60-objects.scss
+- assets/loom/_70-ui-components.scss
+- assets/loom/_80-utilities.scss
+- assets/loom/_90-trumps.scss
+- assets/main-shorthand.scss
+- assets/main.scss
+- bin/console
+- bin/setup
+- gulpfile.js
+- index.html
+- lib/loomcss.rb
+- lib/loomcss/engine.rb
+- lib/loomcss/version.rb
+- loomcss.gemspec
+- main.css
+- package.json
+- public/docs/assets/images/favicon.png
+- public/docs/assets/images/logo_full_compact.svg
+- public/docs/assets/images/logo_full_inline.svg
+- public/docs/assets/images/logo_light_compact.svg
+- public/docs/assets/images/logo_light_inline.svg
+- public/docs/assets/js/main.js
+- public/docs/assets/js/main.min.js
+- public/docs/assets/js/search.js
+- public/docs/assets/js/sidebar.js
+- public/docs/assets/js/vendor/fuse.min.js
+- public/docs/assets/js/vendor/jquery.min.js
+- public/docs/assets/js/vendor/prism.min.js
+- public/docs/index.html
+homepage: https://github.com/sonniesedge/loom
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Weave your own pattern libraries
+test_files: []