Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AST generated from tachyons
Root {
raws: { semicolon: false, after: '\n\n' },
type: 'root',
nodes:
[ Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'TACHYONS' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Variables' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS and IE text size adjust after device orientation change,\n * without disabling user zoom.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'html' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove default margin.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'body' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'HTML5 display definitions\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\n * Correct `block` display not defined for `details` or `summary` in IE 10/11\n * and Firefox.\n * Correct `block` display not defined for `main` in IE 11.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,\nnav, section, summary' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Correct `inline-block` display not defined in IE 8/9.\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'audio, canvas, progress, video' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'audio:not([controls])' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address `[hidden]` styling not present in IE 8/9/10.\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '[hidden], template' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Links\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove the gray background color from active links in IE 10.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'a' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Improve readability of focused elements when they are also in an\n * active/hover state.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'a:active, a:hover' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Text-level semantics\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'abbr[title]' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'b, strong' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address styling not present in Safari and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'dfn' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari, and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'h1' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address styling not present in IE 8/9.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'mark' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address inconsistent and variable font size in all browsers.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'small' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'sub, sup' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'sup' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'sub' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Embedded content\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove border when inside `a` element in IE 8/9/10.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'img' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Correct overflow not hidden in IE 9/10/11.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'svg:not(:root)' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Grouping content\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address margin not present in IE 8/9 and Safari.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'figure' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address differences between Firefox and other browsers.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'hr' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Contain overflow in all browsers.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'pre' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address odd `em`-unit font size rendering in all browsers.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'code, kbd, pre, samp' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Forms\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\n * styling of `select`, unless a `border` property is set.' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Correct color not being inherited.\n * Known issue: affects color of disabled elements.\n * 2. Correct font properties not being inherited.\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button, input, optgroup, select, textarea' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address `overflow` set to `hidden` in IE 8/9/10/11.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\n * Correct `select` style inheritance in Firefox.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button, select' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button, html input[type="button"], \ninput[type="reset"],\ninput[type="submit"]' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Re-set default cursor for disabled elements.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button[disabled], html input[disabled]' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove inner padding and border in Firefox 4+.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'button::-moz-focus-inner, input::-moz-focus-inner' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'input' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * It\'s recommended that you don\'t attempt to style these elements.\n * Firefox\'s implementation doesn\'t respect box-sizing, padding, or width.\n *\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'input[type="checkbox"], input[type="radio"]' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Fix the cursor style for Chrome\'s increment/decrement buttons. For certain\n * `font-size` values of the `input`, it causes the cursor style of the\n * decrement button to change from `default` to `text`.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'input[type="number"]::-webkit-inner-spin-button,\ninput[type="number"]::-webkit-outer-spin-button' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'input[type="search"]' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\n * Safari (but not Chrome) clips the cancel button when the search input has\n * padding (and `textfield` appearance).' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'input[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-decoration' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Define consistent border, margin, and padding.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'fieldset' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\n * 2. Remove padding so people aren\'t caught out if they zero out fieldsets.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'legend' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove default vertical scrollbar in IE 8/9/10/11.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'textarea' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Don\'t inherit the `font-weight` (applied by a rule above).\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'optgroup' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Tables\n ==========================================================================' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: '*\n * Remove most spacing between table cells.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'table' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'td, th' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'CUSTOM MEDIA QUERIES\n\n Media query values can be changed to fit your own content.\n There are no magic bullets when it comes to media query width values.\n They should be declared in em units - and they should be set to meet\n the needs of your content.\n\n These media queries can be referenced like so:\n\n @media (--breakpoint-not-small) {\n .medium-and-larger-specific-style {\n background-color: red;\n }\n }\n\n @media (--breakpoint-medium) {\n .medium-screen-specific-style {\n background-color: red;\n }\n }\n\n @media (--breakpoint-large) {\n .large-screen-specific-style {\n background-color: red;\n }\n }\n\n @media (--breakpoint-extra-large) {\n .extra-large-screen-specific-style {\n background-color: red;\n }\n }' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Tachyons\n COLOR VARIABLES\n\n - Grayscale\n - Blues\n - Teals\n - Green\n - Reds\n - Oranges\n - Yellows\n - Pink\n - Purple' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Modules' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Box Sizing' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'html, body, div, article, section, main, footer, header, form, fieldset, pre,\ncode, p, ul, ol, li, dl, dt, dd, textarea, input[type="text"], input[type="tel"],\ninput[type="email"], input[type="url"], input[type="password"], .border-box' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BACKGROUND SIZE\n\n Base:\n bg = background-size\n\n Modifiers:\n -cv = cover\n -cn = contain\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-cv' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-cn' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BORDER BASE\n\n Legend\n\n a = all\n t = top\n r = right\n b = bottom\n l = left' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.ba' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bt' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bb' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bl' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Tachyons\n COLOR VARIABLES\n\n Grayscale\n - Solids\n - Transparencies' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BORDER COLORS' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--near-black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--dark-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--mid-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--light-silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--light-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--near-white' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-05' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-025' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--white-0125' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-05' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-025' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--black-0125' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--transparent' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BORDER RADIUS\n\n Base:\n br = border-radius\n\n Modifiers:\n 0 = 0/none\n 1 = 1st step in scale\n 2 = 2nd step in scale\n 3 = 3rd step in scale\n 4 = 4th step in scale\n -100 = 100%\n\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br-100' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br--bottom' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.br--top' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BORDER STYLES\n\n Base:\n bs = border-style\n\n Modifiers:\n none = none\n dotted = dotted\n dashed = dashed\n solid = solid\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--none' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--dotted' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--dashed' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b--solid' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'BORDER WIDTHS\n\n Base:\n bw = border-width\n\n Modifiers:\n 0 = 0 width border\n 1 = 1st step in border-width scale\n 2 = 2nd step in border-width scale\n 3 = 3rd step in border-width scale\n 4 = 4th step in border-width scale\n 5 = 5th step in border-width scale\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bw5' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'CODE' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pre' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.code' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'COORDINATES\n\n Use in combination with the position module.' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.top-0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.right-0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bottom-0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.left-0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.top-1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.right-1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bottom-1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.left-1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.top-2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.right-2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bottom-2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.left-2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.top--1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.right--1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bottom--1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.left--1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.top--2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.right--2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bottom--2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.left--2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pos-abs--fill' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'CLEARS' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Nicolas Gallaghers Clearfix solution\n Ref: http://nicolasgallagher.com/micro-clearfix-hack/' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.cf:before, .cf:after' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.cf:after' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.cf' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'DISPLAY\n\n Base:\n d = display\n\n Modifiers:\n n = none\n b = block\n ib = inline-block\n it = inline-table\n t = table\n tc = table-cell\n tr = table-row\n tcol = table-column\n tcolg = table-column-group\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dn' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.di' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.db' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dib' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dit' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dt' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dtc' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dt-row' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dt-row-group' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dt-column' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dt-column-group' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Media Query Variables' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'FLOATS\n\n 1. Floated elements are automatically rendered as block level elements.\n Setting floats to display inline will fix the double margin bug in\n ie6. You know... just in case.\n\n 2. Don\'t forget to clearfix your floats with .cf\n\n Base:\n f = float\n\n Modifiers:\n l = left\n r = right\n n = none\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fl' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fr' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fn' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'FONT FAMILY GROUPS' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.sans-serif' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.serif' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.system-sans-serif' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.system-serif' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Monospaced Typefaces (for code)' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'From http://cssfontstack.com' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: 'code, .code' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Sans-Serif Typefaces' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.helvetica' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Serif Typefaces' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.georgia' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.times' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bodoni' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.calisto' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.garamond' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'FONT STYLE' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.i' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fsn' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'FONT WEIGHT' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.normal' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.b' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw5' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw6' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw7' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw8' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fw9' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'FORMS' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.input-reset' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.input-invisible' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'HEIGHTS' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Height Scale' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h5' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Height Percentages' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-25' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-75' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-100' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'String Properties' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-at' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.h-i' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'LETTER SPACING' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.tracked' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.tracked-tight' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.tracked-mega' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'LINE HEIGHT / LEADING' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.lh' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.lh-title' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.lh-copy' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'LINKS' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.link' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.link:link, .link:visited' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.link:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.link:active' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.link:focus' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'LISTS' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.list' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Opacity' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-100' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-05' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.o-025' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'MAX WIDTHS' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Max Width Percentages' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw-100' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Max Width Scale' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw5' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw6' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw7' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw8' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw9' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Max Width String Properties' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mw-none' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'WIDTHS\n\n Base:\n w = width\n\n Modifiers\n 1 = 1st step in width scale\n 2 = 2nd step in width scale\n 3 = 3rd step in width scale\n 4 = 4th step in width scale\n 5 = 5th step in width scale\n\n -10 = literal value 10%\n -20 = literal value 20%\n -25 = literal value 25%\n -33 = literal value 33%\n -34 = literal value 34%\n -40 = literal value 40%\n -50 = literal value 50%\n -60 = literal value 60%\n -75 = literal value 75%\n -80 = literal value 80%\n -100 = literal value 100%\n\n -auto = string value auto\n\n\n Media Query Extensions:\n -ns = not-small\n -m = medium\n -l = large' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Width Scale' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w5' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-25' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-33' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-34' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-75' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-100' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.w-auto' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'OVERFLOW' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-visible' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-hidden' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-scroll' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-auto' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-x-visible' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-x-hidden' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-x-scroll' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-x-auto' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-y-visible' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-y-hidden' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-y-scroll' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.overflow-y-auto' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'POSITIONING' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.static' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.relative' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.absolute' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.fixed' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'COLOR VARIABLES\n\n Variables to set colors for\n color, background-color, and border-color' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'variables' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'SKINS' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Text colors' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black-05' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black-05' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-90' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-80' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-70' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-60' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-50' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-40' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-30' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-20' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white-10' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.near-black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.dark-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.mid-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.light-silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.light-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.near-white' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.white' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Background colors' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-near-black' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-dark-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-mid-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-light-silver' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-light-gray' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-near-white' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-white' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Skins for specific pseudoclasses' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-black:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-near-black:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-dark-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-mid-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-silver:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-light-silver:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-moon-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-light-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-near-white:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.focus-white:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-black:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-near-black:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-dark-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-mid-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-silver:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-light-silver:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-moon-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-light-gray:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-near-white:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-focus-white:focus' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-black:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-near-black:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-dark-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-mid-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-silver:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-light-silver:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-moon-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-light-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-near-white:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.hover-white:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-black:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-near-black:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-dark-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-mid-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-silver:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-light-silver:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-moon-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-light-gray:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-near-white:hover' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.bg-hover-white:hover' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Variables' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Spacing Scale - based on a ratio of 1:2' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'Media Queries' },
Comment {
raws: [Object],
type: 'comment',
parent: [Circular],
source: [Object],
text: 'SPACING\n\n An eight step powers of two scale ranging from 0 to 16rem.\n Namespaces are composab4e and thus high4y grockab4e - check the legend below\n\n Legend:\n\n p = padding\n m = margin\n\n a = all\n h = horizontal\n v = vertical\n t = top\n r = right\n b = bottom\n l = left\n\n 0 = none\n 1 = 1st step in spacing scale\n 2 = 2nd step in spacing scale\n 3 = 3rd step in spacing scale\n 4 = 4th step in spacing scale\n 5 = 5th step in spacing scale\n 6 = 6th step in spacing scale\n 7 = 7th step in spacing scale' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa3' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa4' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa5' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa6' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pa7' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pl0' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pl1' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pl2' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Object],
parent: [Circular],
source: [Object],
selector: '.pl3' },
Rule {