├── .gitignore ├── LICENSE ├── README.md ├── css ├── README.md ├── base │ ├── _dev-helpers.scss │ ├── _fonts.scss │ ├── _mixin-breakpoints.scss │ ├── _mixin-clearfix.scss │ ├── _mixin-font-face-importer.scss │ ├── _mixin-gradual-media-queries.scss │ ├── _print.scss │ ├── _reset.scss │ └── _vars.scss ├── elements │ ├── _body.scss │ ├── _buttons.scss │ ├── _code.scss │ ├── _forms.scss │ ├── _headings.scss │ ├── _hr.scss │ ├── _html.scss │ ├── _icons.scss │ ├── _images.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _quotes.scss │ ├── _tables.scss │ └── _text.scss ├── layout │ ├── _container.scss │ ├── _grids.scss │ ├── _hide.scss │ ├── _media.scss │ ├── _ups.scss │ └── _widths.scss ├── modules │ ├── _alerts.scss │ ├── _blocks.scss │ ├── _callouts.scss │ ├── _heroes.scss │ ├── _modals.scss │ ├── _pages.scss │ ├── _site-footer.scss │ ├── _site-header.scss │ ├── _site-main.scss │ ├── _site.scss │ ├── _thumbnails.scss │ └── _video-embeds.scss ├── screen.css └── screen.scss ├── example-forms.html ├── example-grids.html ├── example-modules.html ├── images ├── fpo-1300x500.jpg ├── fpo-500x300.jpg ├── fpo-icon.png └── fpo-logo.png └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | stylesheets/.sass-cache -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014 Jeff Schram (Crush & Lovely) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Skyline](http://skyline.is/avatar-7aab8b54.png) 2 | 3 | # Skyline 4 | Evolving CSS Architecture 5 | 6 | ### Introduction 7 | Skyline 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. 8 | 9 | Learn more at http://skyline.is 10 | 11 | Take a look at the example pages, with the initial starter styles at [http://crushlovely.github.io/skyline](http://crushlovely.github.io/skyline) 12 | 13 | ### Credits 14 | Developed by the [Crush & Lovely](http://crushlovely.com) Engineering Team 15 | * Jeff Schram / [@jeffschram](http://twitter.com/jeffschram) / [jeffschram.com](http://jeffschram.com) 16 | * with Adam Becker, Jacob Fentress, & Ryan Buttrey 17 | 18 | Feel free to contact Jeff on twitter [@jeffschram](http://twitter.com/jeffschram) with questions, comments, etc. And issues and pull requests are always welcome. 19 | 20 | 21 | ### Setup 22 | We 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. 23 | 24 | ``` 25 | ├── css 26 | | ├── base 27 | | ├── variables, resets, mixins, global assets like fonts 28 | | ├── elements 29 | | ├── styles for base elements (p, ul, img, form, etc.) 30 | | ├── layout 31 | | ├── grids, widths, utilities, etc. 32 | | ├── modules 33 | | ├── styles for objects/modules you create (.site-header, .hero, .page, .bio, .site-footer, etc.) 34 | | ├── README.md (credits and info about Skyline SCSS) 35 | | 36 | | ├── screen.scss (the manifest file that pulls in all the partials and compiles into screen.css) 37 | | 38 | ├── images 39 | | ├── (placeholder images are here for example pages) 40 | | 41 | ├── example-forms.html 42 | | 43 | ├── example-grids.html 44 | | 45 | ├── example-modules.html 46 | | 47 | ├── index.html 48 | | 49 | ├── README.md 50 | 51 | ``` 52 | 53 | ### Skyline's architecture is composed of 4 layers. 54 | Base contains global settings, variables, resets, and mixins. These make up the foundation of your CSS. 55 | 56 | Elements contains all the global styling for basic stand-alone elements; such as links, quotes, tables, and text. 57 | 58 | Layout contains structural helper classes like .container, which restricts content to a consistent max-width, and a responsive grid system as well. 59 | 60 | Modules 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. 61 | 62 | ### See it in action 63 | You 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. 64 | 65 | ### Documentation 66 | Extensive 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. 67 | 68 | ## Copyright 69 | Copyright (c) 2014 Jeff Schram (Crush & Lovely). See LICENSE for further details. 70 | -------------------------------------------------------------------------------- /css/README.md: -------------------------------------------------------------------------------- 1 | 2 | BUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE 3 | ========================================================= 4 | 5 | 6 | 7 | SKYLINE CREATED BY CRUSH & LOVELY ENGINEERING 8 | --------------------------------------------------------- 9 | 10 | Jeff Schram Adam Becker 11 | @jeffschram @adambbecker 12 | jeffschram.com adambbecker.com 13 | 14 | 15 | Jacob Fentress Ryan Buttrey 16 | @jfentress @ryanbuttrey 17 | jacobfentress.com ryanbuttrey.com 18 | 19 | 20 | 21 | 22 | COLOPHON & GUIDELINES 23 | --------------------------------------------------------- 24 | 25 | Skyline is an object-oriented CSS architecture system 26 | written in SCSS with BEM notation and is heavily inspired 27 | by the concepts found in SMACCS, ITCSS, Bootstrap, & 28 | Atomic Design. 29 | 30 | 31 | 32 | 33 | ADDITIONAL CREDITS, INSPIRATION & SHOUT OUTS 34 | --------------------------------------------------------- 35 | 36 | Harry Roberts Chris Coyier Brad Frost 37 | @csswizardry @crishcoyier @bradfrost 38 | csswizardry.com css-tricks.com patternlab.io 39 | inuitcss.com codepen.io bradfrostweb.com 40 | 41 | Jonathan Snook Nicole Sullivan 42 | @snook @stubbornella 43 | smaccs.com stubbornella.org 44 | 45 | - For some mixins, naming conventions and OOCSS concepts 46 | - Check these guys out and learn from their awesomeness 47 | 48 | 49 | Nicolas Gallagher 50 | http://nicolasgallagher.com 51 | http://necolas.github.io/normalize.css/ 52 | 53 | - For the reset 54 | 55 | 56 | HTML5 Boilerplate (@h5bp) 57 | html5boilerplate.com 58 | 59 | - For the print stylesheet 60 | 61 | 62 | Twitter Bootstrap (@twbootstrap) 63 | twitter.github.com/bootstrap 64 | 65 | - For some component ideas, naming conventions and javascript 66 | 67 | 68 | 69 | QUICK NOTE 70 | --------------------------------------------------------- 71 | 72 | A quick note on navigating through the project files: 73 | We are using @waypoints to allow you to easily search 74 | for certain sections. For instance, to get to the 75 | Table Of Contents (or toc) just search for "@toc" 76 | -------------------------------------------------------------------------------- /css/base/_dev-helpers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @dev helpers 4 | -------------------------------------------------------- 5 | base/_dev-helpers.scss 6 | -------------------------------------------------------- 7 | 8 | Dev helpers highlight elements and/or show information 9 | about the site and its current state (breakpoints, etc.) 10 | 11 | These are made active by adding classes to the HTML 12 | element. A JS system to toggle these classes is in 13 | the works. 14 | 15 | This partial requires: 16 | * base/_vars.scss 17 | * base/_mixin-breakpoints.scss 18 | 19 | -------------------------------------------------------- */ 20 | 21 | 22 | 23 | 24 | 25 | // Dev configuration 26 | // -------------------------------------------------------- 27 | // 28 | // Define color variables 29 | // 30 | $dev__color__default: $color__grey; 31 | $dev__color__xs: $color__sky-blue; 32 | $dev__color__sm: $color__green; 33 | $dev__color__md: $color__salmon; 34 | $dev__color__lg: $color__blue; 35 | $dev__color__xl: $color__purple; 36 | $dev__color__xxl: $color__brown; 37 | // 38 | // Define background opacity 39 | $dev__bg-opacity: .25; 40 | 41 | 42 | 43 | /* @highlight elements at breakpoint 44 | -------------------------------------------------------- 45 | 46 | Highlight an element at certain breakpoints by changing 47 | its color; 48 | 49 | Add .dev--highlight to the HTML element to enable this. 50 | 51 | Example: Highlight a title at MD breakpoint 52 |

I will change color at MD breakpoint

53 | 54 | -------------------------------------------------------- */ 55 | 56 | .dev--highlight-elements { 57 | @include bp-at-least($breakpoint__xs) { 58 | [class*="-highlight"] { color: inherit; } 59 | .xs-highlight { color: $dev__color__xs; } 60 | } 61 | @include bp-at-least($breakpoint__sm) { 62 | [class*="-highlight"] { color: inherit; } 63 | .sm-highlight { color: $dev__color__sm; } 64 | } 65 | @include bp-at-least($breakpoint__md) { 66 | [class*="-highlight"] { color: inherit; } 67 | .md-highlight { color: $dev__color__md; } 68 | } 69 | @include bp-at-least($breakpoint__lg) { 70 | [class*="-highlight"] { color: inherit; } 71 | .lg-highlight { color: $dev__color__lg; } 72 | } 73 | @include bp-at-least($breakpoint__xl) { 74 | [class*="-highlight"] { color: inherit; } 75 | .xl-highlight { color: $color__purple; } 76 | } 77 | @include bp-at-least($breakpoint__xxl) { 78 | [class*="-highlight"] { color: inherit; } 79 | .xxl-highlight { color: $dev__color__xxl; } 80 | } 81 | } 82 | 83 | 84 | 85 | 86 | 87 | /* @highlight grids in dev mode 88 | -------------------------------------------------------- 89 | 90 | Indicate grids using responsive widths at certain breakpoints. 91 | 92 | Add .dev--grids to the HTML element to enable this. 93 | 94 | No extra classes are needed on the grids themselves. 95 | 96 | -------------------------------------------------------- */ 97 | 98 | .dev--highlight-grids { 99 | // Grids 100 | // 101 | .g, .grid { 102 | > * { 103 | min-height: 4em; 104 | background: rgba(193, 199, 208, .5); 105 | border: 1px solid rgba(193, 199, 208, .5); 106 | } 107 | @include bp-at-least($breakpoint__xs) { 108 | &[class*="xs-"] > * { 109 | border-color: $dev__color__xs; 110 | background: rgba($dev__color__xs, $dev__bg-opacity); 111 | } 112 | } 113 | @include bp-at-least($breakpoint__sm) { 114 | &[class*="sm-"] > * { 115 | border-color: $dev__color__sm; 116 | background: rgba($dev__color__sm, $dev__bg-opacity); 117 | } 118 | } 119 | @include bp-at-least($breakpoint__md) { 120 | &[class*="md-"] > * { 121 | border-color: $dev__color__md; 122 | background: rgba($dev__color__md, $dev__bg-opacity); 123 | } 124 | } 125 | @include bp-at-least($breakpoint__lg) { 126 | &[class*="lg-"] > * { 127 | border-color: $dev__color__lg; 128 | background: rgba($dev__color__lg, $dev__bg-opacity); 129 | } 130 | } 131 | @include bp-at-least($breakpoint__xl) { 132 | &[class*="xl-"] > * { 133 | border-color: $color__purple; 134 | background: rgba($color__purple, $dev__bg-opacity); 135 | } 136 | } 137 | @include bp-at-least($breakpoint__xxl) { 138 | &[class*="xxl-"] > * { 139 | border-color: $dev__color__xxl; 140 | background: rgba($dev__color__xxl, $dev__bg-opacity); 141 | } 142 | } 143 | } 144 | 145 | // Ups 146 | .gw, .grid-wrap { 147 | @include bp-at-least($breakpoint__xs) { 148 | &[class*="xs-"][class*="-up"] > * > * { 149 | border-color: $dev__color__xs; 150 | background: rgba($dev__color__xs, $dev__bg-opacity); 151 | } 152 | } 153 | @include bp-at-least($breakpoint__sm) { 154 | &[class*="sm-"][class*="-up"] > * > * { 155 | border-color: $dev__color__sm; 156 | background: rgba($dev__color__sm, $dev__bg-opacity); 157 | } 158 | } 159 | @include bp-at-least($breakpoint__md) { 160 | &[class*="md-"][class*="-up"] > * > * { 161 | border-color: $dev__color__md; 162 | background: rgba($dev__color__md, $dev__bg-opacity); 163 | } 164 | } 165 | @include bp-at-least($breakpoint__lg) { 166 | &[class*="lg-"][class*="-up"] > * > * { 167 | border-color: $dev__color__lg; 168 | background: rgba($dev__color__lg, $dev__bg-opacity); 169 | } 170 | } 171 | @include bp-at-least($breakpoint__xl) { 172 | &[class*="xl-"][class*="-up"] > * > * { 173 | border-color: $color__purple; 174 | background: rgba($color__purple, $dev__bg-opacity); 175 | } 176 | } 177 | @include bp-at-least($breakpoint__xxl) { 178 | &[class*="xxl-"][class*="-up"] > * > * { 179 | border-color: $dev__color__xxl; 180 | background: rgba($dev__color__xxl, $dev__bg-opacity); 181 | } 182 | } 183 | } 184 | 185 | } 186 | 187 | 188 | 189 | 190 | /* @show the current breakpoint 191 | -------------------------------------------------------- 192 | 193 | Adds a badge to the bottom right of the body to show 194 | the current breakpoint. 195 | 196 | To enable this, add .dev--show-breakpoint to the HTML 197 | element 198 | 199 | -------------------------------------------------------- */ 200 | 201 | .dev--show-breakpoint { 202 | body:before { 203 | content: "-"; 204 | position: fixed; 205 | bottom: 0; 206 | right: 0; 207 | padding: 1em; 208 | border: 1px solid $dev__color__default; 209 | background: rgba($dev__color__default, $dev__bg-opacity); 210 | font-size: .25em; 211 | line-height: 1; 212 | color: $dev__color__default; 213 | @include bp-at-least($breakpoint__xs) { 214 | content: "XS"; 215 | color: $dev__color__xs; 216 | background: rgba($dev__color__xs, $dev__bg-opacity); 217 | border-color: $dev__color__xs; 218 | } 219 | @include bp-at-least($breakpoint__sm) { 220 | content: "SM"; 221 | color: $dev__color__sm; 222 | background: rgba($dev__color__sm, $dev__bg-opacity); 223 | border-color: $dev__color__sm; 224 | } 225 | @include bp-at-least($breakpoint__md) { 226 | content: "MD"; 227 | color: $dev__color__md; 228 | background: rgba($dev__color__md, $dev__bg-opacity); 229 | border-color: $dev__color__md; 230 | } 231 | @include bp-at-least($breakpoint__lg) { 232 | content: "LG"; 233 | color: $dev__color__lg; 234 | background: rgba($dev__color__lg, $dev__bg-opacity); 235 | border-color: $dev__color__lg; 236 | } 237 | @include bp-at-least($breakpoint__xl) { 238 | content: "XL"; 239 | color: $dev__color__xl; 240 | background: rgba($dev__color__xl, $dev__bg-opacity); 241 | border-color: $dev__color__xl; 242 | } 243 | @include bp-at-least($breakpoint__xxl) { 244 | content: "XXL"; 245 | color: $dev__color__xxl; 246 | background: rgba($dev__color__xxl, $dev__bg-opacity); 247 | border-color: $dev__color__xxl; 248 | } 249 | } 250 | } 251 | -------------------------------------------------------------------------------- /css/base/_fonts.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @fonts 4 | -------------------------------------------------------- 5 | base/_fonts.scss 6 | -------------------------------------------------------- 7 | 8 | Define the fonts used in this app and declare silent 9 | classes to be used in your CSS. 10 | 11 | If you are using a webfont that you're hosting, add 12 | the @embed-font() mixin from base/_mixin-font-face-importer.scs 13 | before you declare your fonts. 14 | 15 | Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions) 16 | @include embed-font("interstate-light", "/fonts/interstate_light-webfont"); 17 | 18 | If you are using Google Fonts, you can add the 19 | import code before you declare your fonts. 20 | 21 | @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700); 22 | 23 | -------------------------------------------------------- */ 24 | 25 | 26 | 27 | 28 | 29 | /* @sans 30 | -------------------------------------------------------- 31 | 32 | This is your basic sans font. 33 | 34 | Usage: use sans regular on a p 35 | p { 36 | @extend %sans--regular; 37 | } 38 | 39 | ------------------------------------------------------ */ 40 | 41 | $sans:sans-serif; 42 | 43 | %sans--light { 44 | font-family: $sans; 45 | font-weight: 300; 46 | font-style: normal; 47 | } 48 | 49 | %sans--regular { 50 | font-family: $sans; 51 | font-weight: 400; 52 | font-style: normal; 53 | } 54 | 55 | %sans--semi-bold { 56 | font-family: $sans; 57 | font-weight: 600; 58 | font-style: normal; 59 | } 60 | 61 | %sans--bold { 62 | font-family: $sans; 63 | font-weight: 700; 64 | font-style: normal; 65 | } 66 | 67 | 68 | 69 | 70 | 71 | /* @serif 72 | -------------------------------------------------------- 73 | 74 | This is your basic serif font. 75 | 76 | Usage: use serif regular on a p 77 | p { 78 | @extend %serif--regular; 79 | } 80 | 81 | -------------------------------------------------------- */ 82 | 83 | $serif: georgia, times; 84 | 85 | %serif--light { 86 | font-family: $serif; 87 | font-weight: 300; 88 | font-style: normal; 89 | } 90 | 91 | %serif--regular { 92 | font-family: $serif; 93 | font-weight: 400; 94 | font-style: normal; 95 | } 96 | 97 | %serif--italic { 98 | font-family: $serif; 99 | font-weight: 400; 100 | font-style: italic; 101 | } 102 | 103 | %serif--semi-bold { 104 | font-family: $serif; 105 | font-weight: 600; 106 | font-style: italic; 107 | } -------------------------------------------------------------------------------- /css/base/_mixin-breakpoints.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @breakpoints mixin 4 | ----------------------------------------------------- 5 | base/_mixin-breakpoints.scss 6 | ----------------------------------------------------- 7 | 8 | This mixin makes using inline media queries easy. 9 | Options include bp-at-least for min-width, bp-until 10 | for max-width, and bp-between for min and max widths. 11 | 12 | You can use your breakpoint vars, or any other value. 13 | 14 | Usage: styles at medium breakpoint 15 | .some-element { 16 | @include bp-at-least($breakpoint__md){ 17 | your-styles: go-here; 18 | } 19 | } 20 | 21 | Usage: styles at custom breakpoint 22 | .another-element { 23 | @include bp-until(83.45em){ 24 | your-styles: go-here; 25 | } 26 | } 27 | 28 | ----------------------------------------------------- */ 29 | 30 | // Breakpoint At Least 31 | @mixin bp-at-least($device-width) { 32 | @media screen and (min-width: $device-width) { 33 | @content 34 | } 35 | } 36 | 37 | // Breakpoint Until 38 | @mixin bp-until($device-width) { 39 | @media screen and (max-width: $device-width - .01) { 40 | @content 41 | } 42 | } 43 | 44 | // Breakpoint Between 45 | @mixin bp-between($device-width, $device-width2) { 46 | @media screen and (min-width: $device-width) and (max-width: $device-width2) { 47 | @content 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /css/base/_mixin-clearfix.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @clearfix mixin 4 | --------------------------------------------------------- 5 | base/_clearfix.scss 6 | -------------------------------------------------------- 7 | 8 | Use @include clearfix(); in your CSS 9 | 10 | Usage: clearfix mixin 11 | .element-to-clearfix { 12 | @include cleafix(); 13 | } 14 | 15 | 16 | --------------------------------------------------------- */ 17 | 18 | @mixin clearfix() { 19 | &:before, 20 | &:after { 21 | content: " "; 22 | display: table; 23 | } 24 | &:after { 25 | clear: both; 26 | } 27 | // For IE 6/7 (trigger hasLayout) 28 | zoom: 1; 29 | } -------------------------------------------------------------------------------- /css/base/_mixin-font-face-importer.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @font-face importer mixin 4 | ----------------------------------------------------------- 5 | _base/_mixin-font-face-importer.scss 6 | ----------------------------------------------------------- 7 | 8 | Use this mixin to embed a font 9 | 10 | $font-name is used in your css in font-family declarations 11 | $font-filepath-and-name is the location of your font 12 | file and the filename WITHOUT the file extension. The 13 | extensions are added here in the mixin 14 | 15 | Usage: 16 | @include embed-font($font-name, $font-filepath-and-name); 17 | 18 | --------------------------------------------------------- */ 19 | 20 | @mixin embed-font($font-name, $font-filepath-and-name){ 21 | @font-face { 22 | font-family: $font-name; 23 | src: url($font-filepath-and-name+".eot"); /* IE9 Compat Modes */ 24 | src: url($font-filepath-and-name+".eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */ 25 | url($font-filepath-and-name+".woff") format('woff'), /* Modern Browsers */ 26 | url($font-filepath-and-name+".ttf") format('truetype'), /* Safari, Android, iOS */ 27 | url($font-filepath-and-name+".svg#svgFontName") format('svg'); /* Legacy iOS */ 28 | } 29 | } -------------------------------------------------------------------------------- /css/base/_mixin-gradual-media-queries.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @gradual media queries mixin 4 | -------------------------------------------------------- 5 | base/_mixin-gradual-media-queries.scss 6 | -------------------------------------------------------- 7 | 8 | The mixin takes arguments of start-width, start-fontsize, 9 | end-width, and end-fontsize and then creates media queries 10 | between those start and end points at another argument 11 | value, increment-width. 12 | 13 | Usage: Gradually increase the font size of the html 14 | html { 15 | @include gradual-queries(20em, 80%, 70em, 100%, 10em) 16 | } 17 | 18 | In the above usage, the html fontsize will start out at 19 | 80% at 20em and end up at 100% at 70em - and the gradual 20 | changes in the fontsize percentage will be calculated 21 | at 10em intervals. 22 | 23 | See http://codepen.io/jeffschram/pen/IixqA 24 | 25 | ------------------------------------------------------ */ 26 | 27 | // FUNCTION TO STRIP UNITS 28 | @function strip-units($number) { 29 | @return $number / ($number * 0 + 1); 30 | } 31 | 32 | // GRADUAL QUERIES MIXIN 33 | @mixin gradual-queries($start-width, $start-fontsize, $end-width, $end-fontsize, $increment-width){ 34 | // Define number of increments, $increments 35 | $increments: ceil((strip-units($end-width) - strip-units($start-width))/strip-units($increment-width)); 36 | // Define the difference between fontsizes 37 | $fontsize-diff: (strip-units($end-fontsize) - strip-units($start-fontsize)); 38 | // The amount of difference, incrementally 39 | $fontsize-increment: $fontsize-diff/$increments; 40 | // Apply adjusted fontsizes 41 | @for $i from 0 to $increments { 42 | $increment-point: $start-width+$i*$increment-width; 43 | @media (min-width: $increment-point){ 44 | font-size: $start-fontsize+($i*$fontsize-increment); 45 | } 46 | } 47 | @media (min-width: $end-width){ 48 | font-size: $end-fontsize; 49 | } 50 | } -------------------------------------------------------------------------------- /css/base/_print.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @print 4 | -------------------------------------------------------- 5 | base/_print.scss 6 | -------------------------------------------------------- 7 | 8 | Print Stylesheet from http://h5bp.com/r 9 | 10 | ----------------------------------------------------- */ 11 | 12 | 13 | 14 | /* ========================================================================== 15 | Print styles. 16 | Inlined to avoid required HTTP connection: h5bp.com/r 17 | CREDIT: HTML5 Boilerplate 18 | ========================================================================== */ 19 | 20 | @media print { 21 | 22 | * { 23 | background: transparent !important; 24 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 25 | box-shadow: none !important; 26 | text-shadow: none !important; 27 | } 28 | 29 | a, 30 | a:visited { 31 | text-decoration: underline; 32 | } 33 | 34 | a[href]:after { 35 | content: " (" attr(href) ")"; 36 | } 37 | 38 | abbr[title]:after { 39 | content: " (" attr(title) ")"; 40 | } 41 | 42 | // Don't show links for images, or javascript/internal links 43 | .ir a:after, 44 | a[href^="javascript:"]:after, 45 | a[href^="#"]:after { 46 | content: ""; 47 | } 48 | 49 | pre, 50 | blockquote { 51 | border: 1px solid #999; 52 | page-break-inside: avoid; 53 | } 54 | 55 | thead { 56 | display: table-header-group; /* h5bp.com/t */ 57 | } 58 | 59 | tr, 60 | img { 61 | page-break-inside: avoid; 62 | } 63 | 64 | img { 65 | max-width: 100% !important; 66 | } 67 | 68 | @page { 69 | margin: 0.5cm; 70 | } 71 | 72 | p, 73 | h2, 74 | h3 { 75 | orphans: 3; 76 | widows: 3; 77 | } 78 | 79 | h2, 80 | h3 { 81 | page-break-after: avoid; 82 | } 83 | } -------------------------------------------------------------------------------- /css/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @reset 4 | --------------------------------------------------------- 5 | base/_reset.scss 6 | -------------------------------------------------------- 7 | 8 | This reset institutes the border-box box model and then 9 | block and margin/padding resets. 10 | 11 | Throughout Skyline, each partial has it's own resets. 12 | This allows you to only use what you need. 13 | 14 | Credit goes to Normalize 15 | http://normalize.css v2.1.0 http://git.io/normalize 16 | 17 | --------------------------------------------------------- */ 18 | 19 | // Apply the new box model definition & reset to no margin on anything 20 | * { 21 | &, 22 | &:before, 23 | &:after{ 24 | -webkit-box-sizing: border-box; 25 | -moz-box-sizing: border-box; 26 | box-sizing: border-box; 27 | padding: 0; 28 | margin: 0; 29 | } 30 | } 31 | 32 | 33 | // Apply display block to new HTML5 elements 34 | article, 35 | aside, 36 | details, 37 | figcaption, 38 | figure, 39 | footer, 40 | header, 41 | hgroup, 42 | main, 43 | nav, 44 | section, 45 | summary, 46 | audio, 47 | canvas, 48 | video { 49 | display: block; 50 | } -------------------------------------------------------------------------------- /css/base/_vars.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @variables 4 | --------------------------------------------------------- 5 | base/_vars.scss 6 | -------------------------------------------------------- 7 | 8 | Global variables are defined here. Define your colors, 9 | spacing and grid settings. 10 | 11 | ----------------------------------------------------- */ 12 | 13 | 14 | 15 | 16 | 17 | /* @colors 18 | -------------------------------------------------------- 19 | 20 | All color variables are defined here. 21 | 22 | We use real color names here. Although naming something 23 | like 'brand' is in fact more generic and reusable, we've 24 | found that you end up creating variables like $brand-2, 25 | $brand-alt, $brand-complimentary etc. While coding, 26 | it's too easy to forget what those mean. 27 | 28 | If the design changes drastically and the brand changes 29 | from, let's say, blue to green, just do a global 30 | find/replace - that's what text editors are for. 31 | 32 | ------------------------------------------------------ */ 33 | 34 | 35 | // Colors 36 | // 37 | $color__black: #515554; 38 | $color__grey: #b0b3b3; 39 | $color__grey--light: #cfd2d2; 40 | $color__offwhite: #f4f4f4; 41 | $color__white: #fff; 42 | 43 | $color__green: #a2bb60; 44 | $color__salmon: #eb6d58; 45 | $color__sky-blue: #94c1c8; 46 | $color__blue: #0D699C; 47 | $color__purple: #c492bc; 48 | $color__navy: #151e23; 49 | $color__brown: #76400b; 50 | 51 | 52 | $color__error: red; 53 | $color__warning: yellow; 54 | $color__info: blue; 55 | $color__success: green; 56 | 57 | 58 | 59 | 60 | 61 | /* @breakpoints 62 | --------------------------------------------------------- 63 | 64 | Define global breakpoints as xs, sm, md, lg, xl, xxl 65 | 66 | --------------------------------------------------------- */ 67 | 68 | // Define breakpoints map to help with some other functions 69 | // and mixins. Very fancy :) 70 | // 71 | $breakpoints: ( 72 | n: 0, 73 | xs: 20em, 74 | sm: 34.375em, 75 | md: 48em, 76 | lg: 64em, 77 | xl: 78.5em, 78 | xxl: 100em 79 | ); 80 | 81 | 82 | // Define individual variables 83 | // 84 | // Extra Small: Small mobile 85 | $breakpoint__xs: map-get($breakpoints, xs); 86 | 87 | // Small: Larger mobile 88 | $breakpoint__sm: map-get($breakpoints, sm); 89 | 90 | // Medium: Tablet 91 | $breakpoint__md: map-get($breakpoints, md); 92 | 93 | // Large: Landscape tablet, beginning desk size 94 | $breakpoint__lg: map-get($breakpoints, lg); 95 | 96 | // Extra Large: Large Desk size 97 | $breakpoint__xl: map-get($breakpoints, xl); 98 | 99 | // Double Extra Large: Huge Desk size 100 | $breakpoint__xxl: map-get($breakpoints, xxl); 101 | 102 | 103 | 104 | 105 | 106 | /* @global spacing unit 107 | --------------------------------------------------------- 108 | 109 | Define an em value for $unit. $unit is a helpful little 110 | variable that serves to keep your spacing consistent. 111 | 112 | Most often, 1 $unit is equal to your baseline height. So 113 | if your baseline height is 1.125ems (which is 18px), that's 114 | the value of 1 $unit. 115 | 116 | --------------------------------------------------------- */ 117 | 118 | $unit: 1.125em; 119 | -------------------------------------------------------------------------------- /css/elements/_body.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @body 4 | -------------------------------------------------------- 5 | elements/_body.scss 6 | -------------------------------------------------------- 7 | 8 | Body should contain the document's default font and 9 | background color for the content, if that background 10 | color is different than the html. 11 | 12 | ------------------------------------------------------ */ 13 | 14 | 15 | body { 16 | @extend %sans--regular; 17 | line-height: 1.5; 18 | color: $color__black; 19 | background: $color__white; 20 | } -------------------------------------------------------------------------------- /css/elements/_buttons.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @buttons 4 | -------------------------------------------------------- 5 | elements/_buttons.scss 6 | -------------------------------------------------------- 7 | 8 | Buttons are a common UI component in sites/apps. They 9 | are usually either anchor, button, or input elements 10 | with a classname of 'btn'. They provide an easily 11 | identified clickable target. 12 | 13 | Buttons commonly have modifying classes that apply 14 | specific styles. Examples of these are .btn--large and 15 | .btn--inline 16 | 17 | Example: Buttons using anchors 18 |

Regular Button

19 | 20 | Example: Buttons using buttons 21 |

22 | 23 | ------------------------------------------------------ */ 24 | 25 | button { 26 | &:focus, 27 | &:active { 28 | outline: none; 29 | box-shadow: none; 30 | border: none; 31 | } 32 | } 33 | 34 | .btn { 35 | -webkit-appearance: none; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | display: inline-block; 39 | background: $color__black; 40 | color: $color__white; 41 | border: none; 42 | @extend %sans--regular; 43 | font-size: 1.25em; 44 | text-transform: uppercase; 45 | text-decoration: none; 46 | letter-spacing: .225em; 47 | padding: 1em 1.25em; 48 | &:hover, 49 | &:focus, 50 | &:active { 51 | outline: none; 52 | opacity: .85; 53 | } 54 | } 55 | 56 | 57 | 58 | 59 | 60 | /* @btn--secondary 61 | -------------------------------------------------------- 62 | 63 | A btn modifier, secondary 64 | 65 | Example: .btn--secondary 66 | Secondary button 67 | 68 | ------------------------------------------------------ */ 69 | 70 | .btn--secondary { 71 | background: none; 72 | border: 1px solid $color__white; 73 | color: $color__white; 74 | } 75 | 76 | 77 | 78 | 79 | 80 | /* @btn--large 81 | -------------------------------------------------------- 82 | 83 | A btn modifier, large 84 | 85 | Example: .btn--large 86 | Large button 87 | 88 | ------------------------------------------------------ */ 89 | 90 | .btn--large { 91 | @include bp-at-least($breakpoint__sm) { 92 | font-size: 1.25em; 93 | padding: 1.25em 2.75em; 94 | } 95 | } 96 | 97 | 98 | 99 | 100 | 101 | /* @btn--inline 102 | -------------------------------------------------------- 103 | 104 | A btn modifier, if this button is in a paragraph or 105 | in anything else that has a defined font-size, this 106 | modifier will make the btn inherit the font-size of 107 | the partent. 108 | 109 | Example: .btn--inline 110 |

Here's some text Cool button text keeps going

111 | 112 | ------------------------------------------------------ */ 113 | 114 | .btn--inline { 115 | font-size: 1em; 116 | } 117 | 118 | 119 | 120 | 121 | 122 | /* @btn--block 123 | -------------------------------------------------------- 124 | 125 | A btn modifier - makes the button display block, 100% 126 | width and aligns the text to the center. Removes left 127 | and right padding since the text is center aligned, it 128 | is not needed. Actually sometimes having the padding 129 | on the left and right causes problems if the centered 130 | text is quite long - so we just remove it. 131 | 132 | Example: .btn--block 133 | Block button 134 | 135 | ------------------------------------------------------ */ 136 | 137 | .btn--block { 138 | display: block; 139 | width: 100%; 140 | text-align: center; 141 | padding-right: 0; 142 | padding-left: 0; 143 | } 144 | 145 | 146 | 147 | 148 | 149 | /* @btn--icon 150 | -------------------------------------------------------- 151 | 152 | A btn modifier - makes the button display block, 100% 153 | width and aligns the text to the center. Removes left 154 | and right padding since the text is center aligned, it 155 | is not needed. Actually sometimes having the padding 156 | on the left and right causes problems if the centered 157 | text is quite long - so we just remove it. 158 | 159 | Example: .btn--icon 160 | 161 | 162 | ------------------------------------------------------ */ 163 | 164 | .btn--icon { 165 | background: transparent; 166 | border: none; 167 | padding: 0; 168 | font-size: 1em; 169 | } 170 | 171 | -------------------------------------------------------------------------------- /css/elements/_code.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 3 | @code 4 | -------------------------------------------------------- 5 | elements/_code.scss 6 | -------------------------------------------------------- 7 | 8 | Code elements like and 
 9 | 
10 |   Example: Code in a paragraph
11 |   
This is a cool paragraph about a classname called .franz

12 | 
13 | 
14 | -----------------------------------------------------  */
15 | 
16 | // Code
17 | //
18 | code {
19 |   vertical-align: middle;
20 |   padding: .25em .5em;
21 |   background: rgba(193, 199, 208, .3);
22 | }
23 | 
24 | // Pre
25 | pre {
26 | 	
27 | }


--------------------------------------------------------------------------------
/css/elements/_forms.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 | 
  3 |   @forms
  4 | ---------------------------------------------------------
  5 |   elements/_forms.scss
  6 | --------------------------------------------------------
  7 | 
  8 |   Base styles for all forms and form related elements
  9 | 
 10 |   Below you'll set styles for all forms, and if you have
 11 |   any specific kinds of forms, like a search form that you
 12 |   create a classname of form--search, put that at the
 13 |   bottom of this partial.
 14 | 
 15 |   This scss partial is pretty big.  Here's how it is
 16 |   organized.
 17 | 
 18 |   * Base styling on form elements
 19 | 
 20 |   * Styles for form & form modules
 21 | 
 22 | 
 23 | --------------------------------------------------------- */
 24 | 
 25 | 
 26 | 
 27 | 
 28 | 
 29 | /* @text inputs
 30 | --------------------------------------------------------
 31 | 
 32 |   Base styles for inputs
 33 | 
 34 |   Example: Text Input
 35 |   
 36 | 
 37 |   Inputs can use sizing classes, .input--s .input--l
 38 | 
 39 |   Example: Text Small Input
 40 |   
 41 | 
 42 |   Example: Text Input
 43 |   
 44 | 
 45 | ------------------------------------------------------ */
 46 | 
 47 | // Input elements
 48 | input {
 49 |   -webkit-appearance: none;
 50 |   border-radius: 0;
 51 |   @extend %serif--light;
 52 |   width: 100%;
 53 |   padding: 1em;
 54 |   border: 1px solid $color__black;
 55 |   color: $color__black;
 56 |   &:focus {
 57 |     outline: none;
 58 |   }
 59 |   // Size modifiers
 60 |   &.input--s {
 61 |     font-size: .5rem;
 62 |   }
 63 | 
 64 |   &.input--l {
 65 |     font-size: 1.5rem;
 66 |   }
 67 | }
 68 | 
 69 | // Define the input placeholder color to be reused in the
 70 | // following code
 71 | $input-placeholder: $color__black;
 72 | 
 73 | // Placeholders
 74 | input {
 75 |   &::-webkit-input-placeholder {
 76 |     color: $input-placeholder;
 77 |     @extend %serif--light;
 78 |   }
 79 |   &:-moz-placeholder {
 80 |     color: $input-placeholder;
 81 |     @extend %serif--light;
 82 |   }
 83 |   &::-moz-placeholder {
 84 |     color: $input-placeholder;
 85 |   }
 86 |   &:-ms-input-placeholder {
 87 |     color: $input-placeholder;
 88 |   }
 89 | }
 90 | // Placeholders on focus
 91 | input:focus {
 92 |   &::-webkit-input-placeholder {
 93 |     opacity: .3;
 94 |   }
 95 |   &:-moz-placeholder {
 96 |     opacity: .3;
 97 |   }
 98 |   &::-moz-placeholder {
 99 |     opacity: .3;
100 |   }
101 |   &:-ms-input-placeholder {
102 |     opacity: .3;
103 |   }
104 | }
105 | 
106 | 
107 | 
108 | 
109 | /* @select inputs
110 | --------------------------------------------------------
111 | 
112 |   Base styling for all selects
113 | 
114 |   Example: Select Input
115 |   
121 | 
122 |   Selects can have added sizing classes, .select--s and .select--l
123 | 
124 |   Example: Small select
125 |   
131 | 
132 |   Example: Large select
133 |   
139 | 
140 | ------------------------------------------------------ */
141 | 
142 | select {
143 |   width: 100%;
144 |   font-size: 1rem;
145 |   &.select--sm {
146 |     font-size: .5rem;
147 |   }
148 |   &.select--lg {
149 |     font-size: 1.5rem;
150 |   }
151 | }
152 | 
153 | 
154 | 
155 | 
156 | 
157 | /* @textareas
158 | --------------------------------------------------------
159 | 
160 |   Base styling for textareas
161 | 
162 |   Textareas can have .textarea--s or .textarea--l classes
163 |   for different sizes
164 | 
165 |   Example: Textarea
166 |   
167 | 
168 |   Example: Small Textarea
169 |   
170 | 
171 |   Example: Large Textarea
172 |   
173 | 
174 | ------------------------------------------------------ */
175 | 
176 | textarea {
177 |   width: 100%;
178 |   min-height: 6em;
179 |   padding: 1em;
180 |   border: solid 1px $color__black;
181 |   @extend %serif--light;
182 |   &:focus {
183 |     outline: none;
184 |   }
185 |   &.textarea--s {
186 |     font-size: .5rem;
187 |   }
188 |   &.textarea--l {
189 |     font-size: 1.5rem;
190 |   }
191 | }
192 | 
193 | 
194 | 
195 | 
196 | 
197 | /* @radio inputs
198 | --------------------------------------------------------
199 | 
200 |   Base styling for radio inputs.  Radios are surrounded
201 |   by a label for better click targets.
202 | 
203 |   Example: Radio
204 |   
205 | 
206 |   Example: Radio with super-long label
207 |   
208 | 
209 | 
210 | ------------------------------------------------------ */
211 | 
212 | input[type=radio] {
213 |   -webkit-appearance: none;
214 |   width: 1em;
215 |   height: 1em;
216 |   padding: 0;
217 |   border-radius: 50%;
218 |   border: 1px solid #444;
219 |   background: transparent;
220 |   &:checked {
221 |     background: #222;
222 |   }
223 | }
224 | 
225 | 
226 | .label--radio {
227 |   display: inline-block;
228 |   position: relative;
229 |   cursor: pointer;
230 |   padding-left: 1em;
231 |   input {
232 |     position: absolute;
233 |     top: .7em;
234 |     left: 0;
235 |   }
236 | }
237 | 
238 | 
239 | 
240 | 
241 | 
242 | /* @checkbox inputs
243 | --------------------------------------------------------
244 | 
245 |   Base styling for checkbox inputs.  Checkboxes are surrounded
246 |   by a label for better click targets.
247 | 
248 |   Example: Checkbox
249 |   
250 | 
251 |   Example: Checkbox with super-long label
252 |   
253 | 
254 | 
255 | ------------------------------------------------------ */
256 | 
257 | input[type=checkbox] {
258 |   -webkit-appearance:none;
259 |   width: 1em;
260 |   height: 1em;
261 |   padding: 0;
262 |   border: 1px solid #444;
263 |   background: transparent;
264 |   &:checked {
265 |     background: #222;
266 |   }
267 | }
268 | 
269 | .label--checkbox {
270 |   display: inline-block;
271 |   position: relative;
272 |   cursor: pointer;
273 |   padding-left: 1em;
274 |   input {
275 |     position: absolute;
276 |     top: .7em;
277 |     left: 0;
278 |   }
279 | }
280 | 
281 | 
282 | 
283 | 
284 | 
285 | /* @textareas
286 | --------------------------------------------------------
287 | 
288 |   Base styling for textareas
289 | 
290 |   Example: Textarea
291 |   
292 | 
293 | ------------------------------------------------------ */
294 | 
295 | textarea {
296 |   width: 100%;
297 | }
298 | 
299 | 
300 | 
301 | 
302 | 
303 | /* @labels
304 | --------------------------------------------------------
305 | 
306 |   Base styling for labels
307 | 
308 |   Example: label
309 |