[ { "path": ".gitignore", "content": ".DS_Store\n.sass-cache\nstylesheets/.sass-cache" }, { "path": "LICENSE", "content": "The MIT License\n\nCopyright (c) 2014 Jeff Schram (Crush & Lovely)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE." }, { "path": "README.md", "content": "![Skyline](http://skyline.is/avatar-7aab8b54.png)\n\n# Skyline\nEvolving CSS Architecture\n\n### Introduction\nSkyline is a starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.\n\nLearn more at http://skyline.is\n\nTake a look at the example pages, with the initial starter styles at [http://crushlovely.github.io/skyline](http://crushlovely.github.io/skyline)\n\n### Credits\nDeveloped by the [Crush & Lovely](http://crushlovely.com) Engineering Team\n* Jeff Schram / [@jeffschram](http://twitter.com/jeffschram) / [jeffschram.com](http://jeffschram.com)\n* with Adam Becker, Jacob Fentress, & Ryan Buttrey\n\nFeel free to contact Jeff on twitter [@jeffschram](http://twitter.com/jeffschram) with questions, comments, etc. And issues and pull requests are always welcome.\n\n\n### Setup\nWe wanted to keep the starter files as lean as possible. This isn't a self-contained app, it has demo images, example HTML, and the Skyline SCSS files in the CSS folder. You'll likely copy the SCSS files into your own app, and use the example HTML files as guides to mark up your own pages.\n\n```\n├── css\n| ├── base\n| ├── variables, resets, mixins, global assets like fonts\n| ├── elements\n| ├── styles for base elements (p, ul, img, form, etc.)\n| ├── layout\n| ├── grids, widths, utilities, etc.\n| ├── modules\n| ├── styles for objects/modules you create (.site-header, .hero, .page, .bio, .site-footer, etc.)\n| ├── README.md (credits and info about Skyline SCSS)\n|\n| ├── screen.scss (the manifest file that pulls in all the partials and compiles into screen.css)\n|\n├── images\n| ├── (placeholder images are here for example pages)\n|\n├── example-forms.html\n|\n├── example-grids.html\n|\n├── example-modules.html\n|\n├── index.html\n|\n├── README.md\n\n```\n\n### Skyline's architecture is composed of 4 layers.\nBase contains global settings, variables, resets, and mixins. These make up the foundation of your CSS.\n\nElements contains all the global styling for basic stand-alone elements; such as links, quotes, tables, and text.\n\nLayout contains structural helper classes like .container, which restricts content to a consistent max-width, and a responsive grid system as well.\n\nModules are custom-made components that are used throughout your site. These include global modules like the site header and footer, and other reusable modules like alerts and heroes.\n\n### See it in action\nYou can view the example pages in a browser, make sure you're compiling the SCSS if you want to see any changes you've made to the Skyline files reflected in the examples.\n\n### Documentation\nExtensive docs are in the works, but not yet released. However, Skyline makes it easy by adding detailed documentation in the comments of the scss partials themselves. Descriptions are right next to the actual code, making it simple to learn how it works.\n\n## Copyright\nCopyright (c) 2014 Jeff Schram (Crush & Lovely). See LICENSE for further details.\n" }, { "path": "css/README.md", "content": "\nBUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE\n=========================================================\n\n\n\nSKYLINE CREATED BY CRUSH & LOVELY ENGINEERING\n---------------------------------------------------------\n\nJeff Schram Adam Becker\n@jeffschram @adambbecker \njeffschram.com adambbecker.com\n\n\nJacob Fentress Ryan Buttrey\n@jfentress @ryanbuttrey\njacobfentress.com ryanbuttrey.com\n\n\n\n\nCOLOPHON & GUIDELINES\n---------------------------------------------------------\n\nSkyline is an object-oriented CSS architecture system\nwritten in SCSS with BEM notation and is heavily inspired\nby the concepts found in SMACCS, ITCSS, Bootstrap, &\nAtomic Design.\n\n\n\n\nADDITIONAL CREDITS, INSPIRATION & SHOUT OUTS\n---------------------------------------------------------\n\nHarry Roberts Chris Coyier Brad Frost\n@csswizardry @crishcoyier @bradfrost\ncsswizardry.com css-tricks.com patternlab.io\ninuitcss.com codepen.io bradfrostweb.com\n\nJonathan Snook Nicole Sullivan\n@snook @stubbornella\nsmaccs.com stubbornella.org\n\n- For some mixins, naming conventions and OOCSS concepts\n- Check these guys out and learn from their awesomeness\n\n\nNicolas Gallagher\nhttp://nicolasgallagher.com\nhttp://necolas.github.io/normalize.css/\n\n- For the reset\n\n\nHTML5 Boilerplate (@h5bp)\nhtml5boilerplate.com\n\n- For the print stylesheet\n\n\nTwitter Bootstrap (@twbootstrap)\ntwitter.github.com/bootstrap\n\n- For some component ideas, naming conventions and javascript\n\n\n\nQUICK NOTE\n---------------------------------------------------------\n\nA quick note on navigating through the project files:\nWe are using @waypoints to allow you to easily search\nfor certain sections. For instance, to get to the\nTable Of Contents (or toc) just search for \"@toc\"\n" }, { "path": "css/base/_dev-helpers.scss", "content": "/**\n\n @dev helpers\n--------------------------------------------------------\n base/_dev-helpers.scss\n--------------------------------------------------------\n\n Dev helpers highlight elements and/or show information\n about the site and its current state (breakpoints, etc.)\n\n These are made active by adding classes to the HTML\n element. A JS system to toggle these classes is in\n the works. \n\n This partial requires:\n * base/_vars.scss\n * base/_mixin-breakpoints.scss\n\n-------------------------------------------------------- */\n\n\n\n\n\n// Dev configuration\n// --------------------------------------------------------\n//\n// Define color variables\n//\n$dev__color__default: $color__grey;\n$dev__color__xs: $color__sky-blue;\n$dev__color__sm: $color__green;\n$dev__color__md: $color__salmon;\n$dev__color__lg: $color__blue;\n$dev__color__xl: $color__purple;\n$dev__color__xxl: $color__brown;\n//\n// Define background opacity \n$dev__bg-opacity: .25;\n\n\n\n/* @highlight elements at breakpoint\n--------------------------------------------------------\n \n Highlight an element at certain breakpoints by changing\n its color;\n\n Add .dev--highlight to the HTML element to enable this.\n\n Example: Highlight a title at MD breakpoint\n

I will change color at MD breakpoint

\n\n-------------------------------------------------------- */\n\n.dev--highlight-elements {\n @include bp-at-least($breakpoint__xs) { \n [class*=\"-highlight\"] { color: inherit; } \n .xs-highlight { color: $dev__color__xs; } \n }\n @include bp-at-least($breakpoint__sm) { \n [class*=\"-highlight\"] { color: inherit; } \n .sm-highlight { color: $dev__color__sm; } \n }\n @include bp-at-least($breakpoint__md) { \n [class*=\"-highlight\"] { color: inherit; } \n .md-highlight { color: $dev__color__md; } \n }\n @include bp-at-least($breakpoint__lg) { \n [class*=\"-highlight\"] { color: inherit; } \n .lg-highlight { color: $dev__color__lg; } \n }\n @include bp-at-least($breakpoint__xl) { \n [class*=\"-highlight\"] { color: inherit; } \n .xl-highlight { color: $color__purple; } \n }\n @include bp-at-least($breakpoint__xxl) { \n [class*=\"-highlight\"] { color: inherit; } \n .xxl-highlight { color: $dev__color__xxl; } \n }\n}\n\n\n\n\n\n/* @highlight grids in dev mode\n--------------------------------------------------------\n \n Indicate grids using responsive widths at certain breakpoints.\n\n Add .dev--grids to the HTML element to enable this.\n\n No extra classes are needed on the grids themselves.\n\n-------------------------------------------------------- */\n\n.dev--highlight-grids { \n // Grids\n //\n .g, .grid {\n > * {\n min-height: 4em;\n background: rgba(193, 199, 208, .5);\n border: 1px solid rgba(193, 199, 208, .5);\n }\n @include bp-at-least($breakpoint__xs) {\n &[class*=\"xs-\"] > * {\n border-color: $dev__color__xs;\n background: rgba($dev__color__xs, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__sm) {\n &[class*=\"sm-\"] > * {\n border-color: $dev__color__sm;\n background: rgba($dev__color__sm, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__md) {\n &[class*=\"md-\"] > * {\n border-color: $dev__color__md;\n background: rgba($dev__color__md, $dev__bg-opacity); \n }\n }\n @include bp-at-least($breakpoint__lg) {\n &[class*=\"lg-\"] > * {\n border-color: $dev__color__lg;\n background: rgba($dev__color__lg, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__xl) {\n &[class*=\"xl-\"] > * {\n border-color: $color__purple;\n background: rgba($color__purple, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__xxl) {\n &[class*=\"xxl-\"] > * {\n border-color: $dev__color__xxl;\n background: rgba($dev__color__xxl, $dev__bg-opacity);\n }\n }\n }\n\n // Ups\n .gw, .grid-wrap {\n @include bp-at-least($breakpoint__xs) {\n &[class*=\"xs-\"][class*=\"-up\"] > * > * {\n border-color: $dev__color__xs;\n background: rgba($dev__color__xs, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__sm) {\n &[class*=\"sm-\"][class*=\"-up\"] > * > * {\n border-color: $dev__color__sm;\n background: rgba($dev__color__sm, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__md) {\n &[class*=\"md-\"][class*=\"-up\"] > * > * {\n border-color: $dev__color__md;\n background: rgba($dev__color__md, $dev__bg-opacity); \n }\n }\n @include bp-at-least($breakpoint__lg) {\n &[class*=\"lg-\"][class*=\"-up\"] > * > * {\n border-color: $dev__color__lg;\n background: rgba($dev__color__lg, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__xl) {\n &[class*=\"xl-\"][class*=\"-up\"] > * > * {\n border-color: $color__purple;\n background: rgba($color__purple, $dev__bg-opacity);\n }\n }\n @include bp-at-least($breakpoint__xxl) {\n &[class*=\"xxl-\"][class*=\"-up\"] > * > * { \n border-color: $dev__color__xxl;\n background: rgba($dev__color__xxl, $dev__bg-opacity);\n }\n }\n }\n\n}\n\n\n\n\n/* @show the current breakpoint\n--------------------------------------------------------\n \n Adds a badge to the bottom right of the body to show\n the current breakpoint.\n\n To enable this, add .dev--show-breakpoint to the HTML\n element\n\n-------------------------------------------------------- */\n\n.dev--show-breakpoint {\n body:before {\n content: \"-\";\n position: fixed;\n bottom: 0;\n right: 0;\n padding: 1em;\n border: 1px solid $dev__color__default;\n background: rgba($dev__color__default, $dev__bg-opacity);\n font-size: .25em;\n line-height: 1;\n color: $dev__color__default;\n @include bp-at-least($breakpoint__xs) {\n content: \"XS\";\n color: $dev__color__xs;\n background: rgba($dev__color__xs, $dev__bg-opacity);\n border-color: $dev__color__xs;\n }\n @include bp-at-least($breakpoint__sm) {\n content: \"SM\";\n color: $dev__color__sm;\n background: rgba($dev__color__sm, $dev__bg-opacity);\n border-color: $dev__color__sm;\n }\n @include bp-at-least($breakpoint__md) {\n content: \"MD\";\n color: $dev__color__md;\n background: rgba($dev__color__md, $dev__bg-opacity);\n border-color: $dev__color__md;\n }\n @include bp-at-least($breakpoint__lg) {\n content: \"LG\";\n color: $dev__color__lg;\n background: rgba($dev__color__lg, $dev__bg-opacity);\n border-color: $dev__color__lg;\n }\n @include bp-at-least($breakpoint__xl) {\n content: \"XL\";\n color: $dev__color__xl;\n background: rgba($dev__color__xl, $dev__bg-opacity);\n border-color: $dev__color__xl;\n }\n @include bp-at-least($breakpoint__xxl) {\n content: \"XXL\";\n color: $dev__color__xxl;\n background: rgba($dev__color__xxl, $dev__bg-opacity);\n border-color: $dev__color__xxl;\n }\n }\n}\n " }, { "path": "css/base/_fonts.scss", "content": "/**\n\n @fonts\n--------------------------------------------------------\n base/_fonts.scss\n--------------------------------------------------------\n\n Define the fonts used in this app and declare silent\n classes to be used in your CSS.\n\n If you are using a webfont that you're hosting, add \n the @embed-font() mixin from base/_mixin-font-face-importer.scs \n before you declare your fonts.\n\n Usage: Create a font-family named \"interstate-light\" using a font at /fonts/interstate_light-webfont.woff (and other extensions)\n @include embed-font(\"interstate-light\", \"/fonts/interstate_light-webfont\");\n \n If you are using Google Fonts, you can add the\n import code before you declare your fonts.\n\n @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);\n\n-------------------------------------------------------- */\n\n\n\n\n\n/* @sans\n--------------------------------------------------------\n\n This is your basic sans font.\n\n Usage: use sans regular on a p\n p {\n @extend %sans--regular;\n }\n\n------------------------------------------------------ */\n\n$sans:sans-serif;\n\n%sans--light {\n font-family: $sans;\n font-weight: 300;\n font-style: normal;\n}\n\n%sans--regular {\n font-family: $sans;\n font-weight: 400;\n font-style: normal;\n}\n\n%sans--semi-bold {\n font-family: $sans;\n font-weight: 600;\n font-style: normal;\n}\n\n%sans--bold {\n font-family: $sans;\n font-weight: 700;\n font-style: normal;\n}\n\n\n\n\n\n/* @serif\n--------------------------------------------------------\n\n This is your basic serif font.\n\n Usage: use serif regular on a p\n p {\n @extend %serif--regular;\n }\n\n-------------------------------------------------------- */\n\n$serif: georgia, times;\n\n%serif--light {\n font-family: $serif;\n font-weight: 300;\n font-style: normal;\n}\n\n%serif--regular {\n font-family: $serif;\n font-weight: 400;\n font-style: normal;\n}\n\n%serif--italic {\n font-family: $serif;\n font-weight: 400;\n font-style: italic;\n}\n\n%serif--semi-bold {\n font-family: $serif;\n font-weight: 600;\n font-style: italic;\n}" }, { "path": "css/base/_mixin-breakpoints.scss", "content": "/**\n\n @breakpoints mixin\n-----------------------------------------------------\n base/_mixin-breakpoints.scss\n-----------------------------------------------------\n\n This mixin makes using inline media queries easy.\n Options include bp-at-least for min-width, bp-until\n for max-width, and bp-between for min and max widths.\n\n You can use your breakpoint vars, or any other value.\n\n Usage: styles at medium breakpoint\n .some-element {\n @include bp-at-least($breakpoint__md){\n your-styles: go-here;\n }\n }\n\n Usage: styles at custom breakpoint\n .another-element {\n @include bp-until(83.45em){\n your-styles: go-here;\n }\n }\n\n----------------------------------------------------- */\n\n// Breakpoint At Least\n@mixin bp-at-least($device-width) {\n @media screen and (min-width: $device-width) {\n @content\n }\n}\n\n// Breakpoint Until\n@mixin bp-until($device-width) {\n @media screen and (max-width: $device-width - .01) {\n @content\n }\n}\n\n// Breakpoint Between\n@mixin bp-between($device-width, $device-width2) {\n @media screen and (min-width: $device-width) and (max-width: $device-width2) {\n @content\n }\n}\n" }, { "path": "css/base/_mixin-clearfix.scss", "content": "/**\n\n @clearfix mixin\n---------------------------------------------------------\n base/_clearfix.scss\n--------------------------------------------------------\n\n Use @include clearfix(); in your CSS\n\n Usage: clearfix mixin\n .element-to-clearfix {\n @include cleafix();\n }\n\n\n--------------------------------------------------------- */\n\n@mixin clearfix() {\n &:before,\n &:after {\n content: \" \";\n display: table;\n }\n &:after {\n clear: both;\n }\n // For IE 6/7 (trigger hasLayout)\n zoom: 1;\n}" }, { "path": "css/base/_mixin-font-face-importer.scss", "content": "/**\n\n @font-face importer mixin\n-----------------------------------------------------------\n _base/_mixin-font-face-importer.scss\n-----------------------------------------------------------\n\n Use this mixin to embed a font\n\n $font-name is used in your css in font-family declarations\n $font-filepath-and-name is the location of your font\n file and the filename WITHOUT the file extension. The\n extensions are added here in the mixin\n\n Usage:\n @include embed-font($font-name, $font-filepath-and-name);\n\n--------------------------------------------------------- */\n\n@mixin embed-font($font-name, $font-filepath-and-name){\n @font-face {\n \tfont-family: $font-name;\n \tsrc: url($font-filepath-and-name+\".eot\"); /* IE9 Compat Modes */\n \tsrc: url($font-filepath-and-name+\".eot?#iefix\") format('embedded-opentype'), /* IE6-IE8 */\n \t url($font-filepath-and-name+\".woff\") format('woff'), /* Modern Browsers */\n \t url($font-filepath-and-name+\".ttf\") format('truetype'), /* Safari, Android, iOS */\n \t url($font-filepath-and-name+\".svg#svgFontName\") format('svg'); /* Legacy iOS */\n \t}\n}" }, { "path": "css/base/_mixin-gradual-media-queries.scss", "content": "/**\n\n @gradual media queries mixin\n--------------------------------------------------------\n base/_mixin-gradual-media-queries.scss\n--------------------------------------------------------\n\n The mixin takes arguments of start-width, start-fontsize,\n end-width, and end-fontsize and then creates media queries\n between those start and end points at another argument\n value, increment-width.\n\n Usage: Gradually increase the font size of the html\n html {\n @include gradual-queries(20em, 80%, 70em, 100%, 10em)\n }\n\n In the above usage, the html fontsize will start out at\n 80% at 20em and end up at 100% at 70em - and the gradual\n changes in the fontsize percentage will be calculated\n at 10em intervals.\n\n See http://codepen.io/jeffschram/pen/IixqA\n\n------------------------------------------------------ */\n\n// FUNCTION TO STRIP UNITS\n@function strip-units($number) {\n @return $number / ($number * 0 + 1);\n}\n\n// GRADUAL QUERIES MIXIN\n@mixin gradual-queries($start-width, $start-fontsize, $end-width, $end-fontsize, $increment-width){\n // Define number of increments, $increments\n $increments: ceil((strip-units($end-width) - strip-units($start-width))/strip-units($increment-width));\n // Define the difference between fontsizes\n $fontsize-diff: (strip-units($end-fontsize) - strip-units($start-fontsize));\n // The amount of difference, incrementally\n $fontsize-increment: $fontsize-diff/$increments;\n // Apply adjusted fontsizes\n @for $i from 0 to $increments {\n $increment-point: $start-width+$i*$increment-width;\n @media (min-width: $increment-point){\n font-size: $start-fontsize+($i*$fontsize-increment);\n }\n }\n @media (min-width: $end-width){\n font-size: $end-fontsize;\n }\n}" }, { "path": "css/base/_print.scss", "content": "/**\n\n @print\n--------------------------------------------------------\n base/_print.scss\n--------------------------------------------------------\n\n Print Stylesheet from http://h5bp.com/r\n\n----------------------------------------------------- */\n\n\n\n/* ==========================================================================\n Print styles.\n Inlined to avoid required HTTP connection: h5bp.com/r\n CREDIT: HTML5 Boilerplate\n ========================================================================== */\n\n@media print {\n\n * {\n background: transparent !important;\n color: #000 !important; /* Black prints faster: h5bp.com/s */\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n a,\n a:visited {\n text-decoration: underline;\n }\n\n a[href]:after {\n content: \" (\" attr(href) \")\";\n }\n\n abbr[title]:after {\n content: \" (\" attr(title) \")\";\n }\n\n // Don't show links for images, or javascript/internal links\n .ir a:after,\n a[href^=\"javascript:\"]:after,\n a[href^=\"#\"]:after {\n content: \"\";\n }\n\n pre,\n blockquote {\n border: 1px solid #999;\n page-break-inside: avoid;\n }\n\n thead {\n display: table-header-group; /* h5bp.com/t */\n }\n\n tr,\n img {\n page-break-inside: avoid;\n }\n\n img {\n max-width: 100% !important;\n }\n\n @page {\n margin: 0.5cm;\n }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n h2,\n h3 {\n page-break-after: avoid;\n }\n}" }, { "path": "css/base/_reset.scss", "content": "/**\n\n @reset\n---------------------------------------------------------\n base/_reset.scss\n--------------------------------------------------------\n\n This reset institutes the border-box box model and then\n block and margin/padding resets.\n\n Throughout Skyline, each partial has it's own resets.\n This allows you to only use what you need.\n\n Credit goes to Normalize\n http://normalize.css v2.1.0 http://git.io/normalize\n\n--------------------------------------------------------- */\n\n// Apply the new box model definition & reset to no margin on anything\n* {\n &,\n &:before,\n &:after{\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n}\n\n\n// Apply display block to new HTML5 elements\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary,\naudio,\ncanvas,\nvideo {\n display: block;\n}" }, { "path": "css/base/_vars.scss", "content": "/**\n\n @variables\n---------------------------------------------------------\n base/_vars.scss\n--------------------------------------------------------\n\n Global variables are defined here. Define your colors,\n spacing and grid settings.\n\n----------------------------------------------------- */\n\n\n\n\n\n/* @colors\n--------------------------------------------------------\n\n All color variables are defined here.\n\n We use real color names here. Although naming something\n like 'brand' is in fact more generic and reusable, we've\n found that you end up creating variables like $brand-2,\n $brand-alt, $brand-complimentary etc. While coding,\n it's too easy to forget what those mean.\n\n If the design changes drastically and the brand changes\n from, let's say, blue to green, just do a global\n find/replace - that's what text editors are for.\n\n------------------------------------------------------ */\n\n\n// Colors\n//\n$color__black: #515554;\n$color__grey: #b0b3b3;\n$color__grey--light: #cfd2d2;\n$color__offwhite: #f4f4f4;\n$color__white: #fff;\n\n$color__green: #a2bb60;\n$color__salmon: #eb6d58;\n$color__sky-blue: #94c1c8;\n$color__blue: #0D699C;\n$color__purple: #c492bc;\n$color__navy: #151e23;\n$color__brown: #76400b;\n\n\n$color__error: red;\n$color__warning: yellow;\n$color__info: blue;\n$color__success: green;\n\n\n\n\n\n/* @breakpoints\n---------------------------------------------------------\n\n Define global breakpoints as xs, sm, md, lg, xl, xxl\n\n--------------------------------------------------------- */\n\n// Define breakpoints map to help with some other functions\n// and mixins. Very fancy :)\n//\n$breakpoints: (\n n: 0,\n xs: 20em,\n sm: 34.375em,\n md: 48em,\n lg: 64em,\n xl: 78.5em,\n xxl: 100em\n);\n\n\n// Define individual variables\n//\n// Extra Small: Small mobile\n$breakpoint__xs: map-get($breakpoints, xs);\n\n// Small: Larger mobile\n$breakpoint__sm: map-get($breakpoints, sm);\n\n// Medium: Tablet\n$breakpoint__md: map-get($breakpoints, md);\n\n// Large: Landscape tablet, beginning desk size\n$breakpoint__lg: map-get($breakpoints, lg);\n\n// Extra Large: Large Desk size\n$breakpoint__xl: map-get($breakpoints, xl);\n\n// Double Extra Large: Huge Desk size\n$breakpoint__xxl: map-get($breakpoints, xxl);\n\n\n\n\n\n/* @global spacing unit\n---------------------------------------------------------\n\n Define an em value for $unit. $unit is a helpful little\n variable that serves to keep your spacing consistent.\n\n Most often, 1 $unit is equal to your baseline height. So\n if your baseline height is 1.125ems (which is 18px), that's\n the value of 1 $unit.\n\n--------------------------------------------------------- */\n\n$unit: 1.125em;\n" }, { "path": "css/elements/_body.scss", "content": "/**\n\n @body\n--------------------------------------------------------\n elements/_body.scss\n--------------------------------------------------------\n\n Body should contain the document's default font and\n background color for the content, if that background\n color is different than the html.\n\n------------------------------------------------------ */\n\n\nbody {\n @extend %sans--regular;\n line-height: 1.5;\n color: $color__black;\n background: $color__white;\n}" }, { "path": "css/elements/_buttons.scss", "content": "/**\n\n @buttons\n--------------------------------------------------------\n elements/_buttons.scss\n--------------------------------------------------------\n\n Buttons are a common UI component in sites/apps. They\n are usually either anchor, button, or input elements\n with a classname of 'btn'. They provide an easily\n identified clickable target.\n\n Buttons commonly have modifying classes that apply\n specific styles. Examples of these are .btn--large and\n .btn--inline\n\n Example: Buttons using anchors\n

Regular Button

\n\n Example: Buttons using buttons\n

\n\n------------------------------------------------------ */\n\nbutton {\n &:focus,\n &:active {\n outline: none;\n box-shadow: none;\n border: none;\n }\n}\n\n.btn {\n -webkit-appearance: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n display: inline-block;\n background: $color__black;\n color: $color__white;\n border: none;\n @extend %sans--regular;\n font-size: 1.25em;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: .225em;\n padding: 1em 1.25em;\n &:hover,\n &:focus,\n &:active {\n outline: none;\n opacity: .85;\n }\n}\n\n\n\n\n\n/* @btn--secondary\n--------------------------------------------------------\n\n A btn modifier, secondary\n\n Example: .btn--secondary\n Secondary button\n\n------------------------------------------------------ */\n\n.btn--secondary {\n background: none;\n border: 1px solid $color__white;\n color: $color__white;\n}\n\n\n\n\n\n/* @btn--large\n--------------------------------------------------------\n\n A btn modifier, large\n\n Example: .btn--large\n Large button\n\n------------------------------------------------------ */\n\n.btn--large {\n @include bp-at-least($breakpoint__sm) {\n font-size: 1.25em;\n padding: 1.25em 2.75em;\n }\n}\n\n\n\n\n\n/* @btn--inline\n--------------------------------------------------------\n\n A btn modifier, if this button is in a paragraph or\n in anything else that has a defined font-size, this\n modifier will make the btn inherit the font-size of\n the partent.\n\n Example: .btn--inline\n

Here's some text Cool button text keeps going

\n\n------------------------------------------------------ */\n\n.btn--inline {\n font-size: 1em;\n}\n\n\n\n\n\n/* @btn--block\n--------------------------------------------------------\n\n A btn modifier - makes the button display block, 100%\n width and aligns the text to the center. Removes left\n and right padding since the text is center aligned, it\n is not needed. Actually sometimes having the padding\n on the left and right causes problems if the centered\n text is quite long - so we just remove it.\n\n Example: .btn--block\n Block button\n\n------------------------------------------------------ */\n\n.btn--block {\n display: block;\n width: 100%;\n text-align: center;\n padding-right: 0;\n padding-left: 0;\n}\n\n\n\n\n\n/* @btn--icon\n--------------------------------------------------------\n\n A btn modifier - makes the button display block, 100%\n width and aligns the text to the center. Removes left\n and right padding since the text is center aligned, it\n is not needed. Actually sometimes having the padding\n on the left and right causes problems if the centered\n text is quite long - so we just remove it.\n\n Example: .btn--icon\n \n\n------------------------------------------------------ */\n\n.btn--icon {\n background: transparent;\n border: none;\n padding: 0;\n font-size: 1em;\n}\n\n" }, { "path": "css/elements/_code.scss", "content": "/**\n\n @code\n--------------------------------------------------------\n elements/_code.scss\n--------------------------------------------------------\n\n Code elements like and 
\n\n  Example: Code in a paragraph\n  
This is a cool paragraph about a classname called .franz
\n\n\n-----------------------------------------------------  */\n\n// Code\n//\ncode {\n  vertical-align: middle;\n  padding: .25em .5em;\n  background: rgba(193, 199, 208, .3);\n}\n\n// Pre\npre {\n\t\n}"
  },
  {
    "path": "css/elements/_forms.scss",
    "content": "/**\n\n  @forms\n---------------------------------------------------------\n  elements/_forms.scss\n--------------------------------------------------------\n\n  Base styles for all forms and form related elements\n\n  Below you'll set styles for all forms, and if you have\n  any specific kinds of forms, like a search form that you\n  create a classname of form--search, put that at the\n  bottom of this partial.\n\n  This scss partial is pretty big.  Here's how it is\n  organized.\n\n  * Base styling on form elements\n\n  * Styles for form & form modules\n\n\n--------------------------------------------------------- */\n\n\n\n\n\n/* @text inputs\n--------------------------------------------------------\n\n  Base styles for inputs\n\n  Example: Text Input\n  \n\n  Inputs can use sizing classes, .input--s .input--l\n\n  Example: Text Small Input\n  \n\n  Example: Text Input\n  \n\n------------------------------------------------------ */\n\n// Input elements\ninput {\n  -webkit-appearance: none;\n  border-radius: 0;\n  @extend %serif--light;\n  width: 100%;\n  padding: 1em;\n  border: 1px solid $color__black;\n  color: $color__black;\n  &:focus {\n    outline: none;\n  }\n  // Size modifiers\n  &.input--s {\n    font-size: .5rem;\n  }\n\n  &.input--l {\n    font-size: 1.5rem;\n  }\n}\n\n// Define the input placeholder color to be reused in the\n// following code\n$input-placeholder: $color__black;\n\n// Placeholders\ninput {\n  &::-webkit-input-placeholder {\n    color: $input-placeholder;\n    @extend %serif--light;\n  }\n  &:-moz-placeholder {\n    color: $input-placeholder;\n    @extend %serif--light;\n  }\n  &::-moz-placeholder {\n    color: $input-placeholder;\n  }\n  &:-ms-input-placeholder {\n    color: $input-placeholder;\n  }\n}\n// Placeholders on focus\ninput:focus {\n  &::-webkit-input-placeholder {\n    opacity: .3;\n  }\n  &:-moz-placeholder {\n    opacity: .3;\n  }\n  &::-moz-placeholder {\n    opacity: .3;\n  }\n  &:-ms-input-placeholder {\n    opacity: .3;\n  }\n}\n\n\n\n\n/* @select inputs\n--------------------------------------------------------\n\n  Base styling for all selects\n\n  Example: Select Input\n  \n\n  Selects can have added sizing classes, .select--s and .select--l\n\n  Example: Small select\n  \n\n  Example: Large select\n  \n\n------------------------------------------------------ */\n\nselect {\n  width: 100%;\n  font-size: 1rem;\n  &.select--sm {\n    font-size: .5rem;\n  }\n  &.select--lg {\n    font-size: 1.5rem;\n  }\n}\n\n\n\n\n\n/* @textareas\n--------------------------------------------------------\n\n  Base styling for textareas\n\n  Textareas can have .textarea--s or .textarea--l classes\n  for different sizes\n\n  Example: Textarea\n  \n\n  Example: Small Textarea\n  \n\n  Example: Large Textarea\n  \n\n------------------------------------------------------ */\n\ntextarea {\n  width: 100%;\n  min-height: 6em;\n  padding: 1em;\n  border: solid 1px $color__black;\n  @extend %serif--light;\n  &:focus {\n    outline: none;\n  }\n  &.textarea--s {\n    font-size: .5rem;\n  }\n  &.textarea--l {\n    font-size: 1.5rem;\n  }\n}\n\n\n\n\n\n/* @radio inputs\n--------------------------------------------------------\n\n  Base styling for radio inputs.  Radios are surrounded\n  by a label for better click targets.\n\n  Example: Radio\n  \n\n  Example: Radio with super-long label\n  \n\n\n------------------------------------------------------ */\n\ninput[type=radio] {\n  -webkit-appearance: none;\n  width: 1em;\n  height: 1em;\n  padding: 0;\n  border-radius: 50%;\n  border: 1px solid #444;\n  background: transparent;\n  &:checked {\n    background: #222;\n  }\n}\n\n\n.label--radio {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  padding-left: 1em;\n  input {\n    position: absolute;\n    top: .7em;\n    left: 0;\n  }\n}\n\n\n\n\n\n/* @checkbox inputs\n--------------------------------------------------------\n\n  Base styling for checkbox inputs.  Checkboxes are surrounded\n  by a label for better click targets.\n\n  Example: Checkbox\n  \n\n  Example: Checkbox with super-long label\n  \n\n\n------------------------------------------------------ */\n\ninput[type=checkbox] {\n  -webkit-appearance:none;\n  width: 1em;\n  height: 1em;\n  padding: 0;\n  border: 1px solid #444;\n  background: transparent;\n  &:checked {\n    background: #222;\n  }\n}\n\n.label--checkbox {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  padding-left: 1em;\n  input {\n    position: absolute;\n    top: .7em;\n    left: 0;\n  }\n}\n\n\n\n\n\n/* @textareas\n--------------------------------------------------------\n\n  Base styling for textareas\n\n  Example: Textarea\n  \n\n------------------------------------------------------ */\n\ntextarea {\n  width: 100%;\n}\n\n\n\n\n\n/* @labels\n--------------------------------------------------------\n\n  Base styling for labels\n\n  Example: label\n