├── .gitignore ├── LICENSE ├── atoms ├── _flag.scss ├── _grids.scss ├── _icon.scss └── _nav.scss ├── control-panel.scss ├── molecules ├── _custom-post.scss ├── _footer.scss └── _primary-nav.scss ├── quarks ├── _blockquotes.scss ├── _headings.scss ├── _images.scss ├── _links.scss ├── _lists.scss ├── _micros.scss └── _smallprint.scss ├── readme.mdown └── utilities ├── _base-spacing.scss ├── _clearfix.scss ├── _colors.scss ├── _defaults.scss ├── _font-stack.scss ├── _mixins.scss ├── _normalize.scss └── _reset.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files # 2 | ###################### 3 | .DS_Store 4 | .DS_Store? 5 | 6 | # Stylesheets # 7 | ############## 8 | *.scssc 9 | *.sublime-project 10 | *.sublime-workspace -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Robin Rendle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /atoms/_flag.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $FLAG 3 | \*------------------------------------*/ 4 | /** 5 | * Inspired by (read: mostly stolen from) – http://csswizardry.com/2013/05/the-flag-object/ 6 | */ 7 | .flag { 8 | display: table; 9 | width: 100%; 10 | } 11 | 12 | .flag__image, 13 | .flag__body { 14 | display: table-cell; 15 | vertical-align: middle; 16 | 17 | .flag--top & { 18 | vertical-align: top; 19 | } 20 | 21 | .flag--bottom & { 22 | vertical-align: bottom; 23 | } 24 | } 25 | 26 | .flag__image { 27 | padding-right: $half-spacing-unit; 28 | padding-right: calc-rem($half-spacing-unit); 29 | 30 | img { 31 | display: block; 32 | max-width: none; 33 | } 34 | 35 | .flag--rev & { 36 | padding-right: 0; 37 | padding-left: $half-spacing-unit; 38 | padding-left: calc-rem($half-spacing-unit); 39 | } 40 | } 41 | 42 | .flag__body { 43 | width: 100%; 44 | } 45 | -------------------------------------------------------------------------------- /atoms/_grids.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $GRIDS 3 | \*------------------------------------*/ 4 | /** 5 | * The Frameless grid, courtesy of Joni Korpi: 6 | * https://github.com/jonikorpi/Frameless/blob/master/frameless.scss 7 | */ 8 | 9 | 10 | // The column-width of grid in pixels 11 | $column: 60px; 12 | // The gutter-width of grid in pixels 13 | $gutter: $base-spacing-unit; 14 | 15 | $rem: $base-font-size / 1rem; 16 | 17 | 18 | $cols1: ( 1 * ($column + $gutter) - $gutter) / $rem; 19 | $cols2: ( 2 * ($column + $gutter) - $gutter) / $rem; 20 | $cols3: ( 3 * ($column + $gutter) - $gutter) / $rem; 21 | $cols4: ( 4 * ($column + $gutter) - $gutter) / $rem; 22 | $cols5: ( 5 * ($column + $gutter) - $gutter) / $rem; 23 | $cols6: ( 6 * ($column + $gutter) - $gutter) / $rem; 24 | $cols7: ( 7 * ($column + $gutter) - $gutter) / $rem; 25 | $cols8: ( 8 * ($column + $gutter) - $gutter) / $rem; 26 | $cols9: ( 9 * ($column + $gutter) - $gutter) / $rem; 27 | $cols10: (10 * ($column + $gutter) - $gutter) / $rem; 28 | $cols11: (11 * ($column + $gutter) - $gutter) / $rem; 29 | $cols12: (12 * ($column + $gutter) - $gutter) / $rem; 30 | $cols13: (13 * ($column + $gutter) - $gutter) / $rem; 31 | $cols14: (14 * ($column + $gutter) - $gutter) / $rem; 32 | $cols15: (15 * ($column + $gutter) - $gutter) / $rem; 33 | $cols16: (16 * ($column + $gutter) - $gutter) / $rem; 34 | 35 | 36 | /** 37 | * Column widths in a function, in rems 38 | */ 39 | 40 | @mixin max-width ($cols:1) { 41 | max-width: ($cols * ($column + $gutter) - $gutter); 42 | max-width: ($cols * ($column + $gutter) - $gutter) / $rem; 43 | } 44 | 45 | @mixin width ($cols:1) { 46 | width: ($cols * ($column + $gutter) - $gutter); 47 | width: ($cols * ($column + $gutter) - $gutter) / $rem; 48 | } -------------------------------------------------------------------------------- /atoms/_icon.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $ICON 3 | \*------------------------------------*/ 4 | /** 5 | * For text-links etc that have an icon with them: 6 | * 7 | * 8 | * inbox 9 | *
10 | * Get regular updates from the blog 11 | *
12 | * 13 | */ 14 | 15 | .icon { 16 | display:inline; 17 | vertical-align: middle; 18 | line-height: 0; 19 | } 20 | -------------------------------------------------------------------------------- /atoms/_nav.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $NAV 3 | \*------------------------------------*/ 4 | /** 5 | * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction 6 | * When used on an `ol` or `ul`, this class throws the list into horizontal mode 7 | * 8 | */ 9 | .nav{ 10 | @extend .cf; 11 | list-style:none; 12 | margin-left:0; 13 | 14 | > li{ 15 | 16 | &, 17 | > a{ 18 | display:inline-block; 19 | *display:inline; 20 | zoom:1; 21 | } 22 | 23 | &:before { 24 | content:""; 25 | display:none; 26 | } 27 | } 28 | } 29 | 30 | /** 31 | * `.nav--stacked` extends `.nav` and throws the list into vertical mode 32 | * 33 | */ 34 | .nav--stacked{ 35 | 36 | > li{ 37 | display:list-item; 38 | 39 | > a{ 40 | display:block; 41 | } 42 | 43 | &:before { 44 | content:""; 45 | } 46 | } 47 | } 48 | 49 | 50 | /** 51 | * Give nav links a big, blocky hit area. 52 | * 53 | */ 54 | .nav--block{ 55 | line-height:1; 56 | /** 57 | * Remove whitespace caused by `inline-block`. 58 | */ 59 | letter-spacing:-0.31em; 60 | word-spacing:-0.43em; 61 | white-space:nowrap; 62 | 63 | > li{ 64 | letter-spacing:normal; 65 | word-spacing:normal; 66 | 67 | > a{ 68 | padding:$half-spacing-unit; 69 | } 70 | } 71 | } 72 | 73 | -------------------------------------------------------------------------------- /control-panel.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | ATOMIC DESIGN WITH SASS 3 | ========================================================================== */ 4 | 5 | /** 6 | * This is the control panel where all of the quarks, atoms and molecules are imported. 7 | */ 8 | 9 | 10 | /* Utilities 11 | ========================================================================== */ 12 | /* 13 | * Global classes, mixins and styles that can be used anywhere and at any time. 14 | */ 15 | 16 | @import "utilities/mixins"; 17 | @import "utilities/reset"; 18 | @import "utilities/normalize"; 19 | @import "utilities/clearfix"; 20 | @import "utilities/font-stack"; 21 | @import "utilities/defaults"; 22 | @import "utilities/base-spacing"; 23 | @import "utilities/colors"; 24 | 25 | // external Compass includes 26 | @import "toolkit"; // https://github.com/Team-Sass/toolkit 27 | @import "breakpoint"; // https://github.com/Team-Sass/breakpoint 28 | 29 | 30 | /* Quarks 31 | ========================================================================== */ 32 | /* 33 | * Styles reserved for default HTML elements only. Default paragraphs, links, lists and micros. Style 34 | * guide stuff. 35 | */ 36 | @import "quarks/blockquotes"; 37 | @import "quarks/headings"; 38 | @import "quarks/images"; 39 | @import "quarks/links"; 40 | @import "quarks/lists"; 41 | @import "quarks/micros"; 42 | @import "quarks/smallprint"; 43 | 44 | 45 | /* Atoms 46 | ========================================================================== */ 47 | /* 48 | * CSS objects that can be extended from and into other elements of the site. Think of these as 49 | * the default relationships that can be used again and again without bloating the codebase. 50 | */ 51 | @import "atoms/grids"; 52 | @import "atoms/flag"; 53 | @import "atoms/icon"; 54 | @import "atoms/nav"; 55 | 56 | 57 | /* Molecules 58 | ========================================================================== */ 59 | /* 60 | * Sometimes we need one-off structures, such as a banner or navigation element or footer, that we 61 | * don’t intend to replicate. This is where we can combine multiple quarks and atoms, without 62 | * interfering with any of our global styles. 63 | */ 64 | @import "molecules/primary-nav"; 65 | @import "molecules/footer"; 66 | @import "molecules/primary-nav"; -------------------------------------------------------------------------------- /molecules/_custom-post.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $CUSTOM-POST 3 | \*------------------------------------*/ 4 | /** 5 | * Custom molecule for custom post styles 6 | */ 7 | 8 | 9 | /* 1. 10 | * /url-slug-goes-here or template name goes here 11 | /*----------------------------------------------- */ 12 | 13 | .post__molecules-and-atoms { 14 | color: $color__text--reverse; 15 | padding: ($base-spacing-unit*2) 0 0 0; 16 | padding: calc-rem($base-spacing-unit * 2) 0 0 0; 17 | background-color: $color__background--black; 18 | border-top: 5px solid lighten($color__background--black, 10); 19 | } 20 | 21 | .post__container--molecules-and-atoms { 22 | width: 85%; 23 | margin: 0 auto; 24 | background-color: darken($color__background--black, 20); 25 | } 26 | 27 | 28 | /* 2. 29 | * /url-slug-goes-here or template name goes here 30 | /*------------------------------------ */ 31 | 32 | .post__oh-you { 33 | @extend .cf; 34 | background-image: url(http://cl.ly/image/0x2H0h3x0K2D/oh-you.jpg); 35 | } 36 | 37 | .post__container--oh-you { 38 | width: 25%; 39 | float: left; 40 | background-color: darken($color__background--white, 20); 41 | } -------------------------------------------------------------------------------- /molecules/_footer.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $FOOTER 3 | \*------------------------------------*/ 4 | /** 5 | * Custom molecule for footer styles 6 | */ 7 | 8 | 9 | .footer-main { 10 | @extend .cf; 11 | color: $color__text--reverse; 12 | padding: ($base-spacing-unit*2) 0 0 0; 13 | padding: calc-rem($base-spacing-unit * 2) 0 0 0; 14 | background-color: $color__background--black; 15 | border-top: 5px solid lighten($color__background--black, 10); 16 | 17 | @include breakpoint(680px){ 18 | float:left; 19 | width: 100%; 20 | } 21 | 22 | @include breakpoint($breakpoint__large){ 23 | .wide-wrapper { 24 | padding-right: 90px; 25 | padding-right: calc-rem(90px); 26 | } 27 | } 28 | } 29 | 30 | .footer-main__item { 31 | @include max-width(7); 32 | padding: 0; 33 | margin: 0 auto; 34 | margin-bottom: $base-spacing-unit * 2; 35 | margin-bottom: calc-rem($base-spacing-unit * 2); 36 | 37 | @include breakpoint($breakpoint__small){ 38 | @include max-width(7); 39 | } 40 | 41 | @include breakpoint(1260px) { 42 | border-right: 1px solid lighten($color__background--black, 10); 43 | padding-top: $base-spacing-unit; 44 | padding-top: calc-rem($base-spacing-unit); 45 | padding-bottom: $base-spacing-unit; 46 | padding-bottom: calc-rem($base-spacing-unit); 47 | margin-bottom: 0; 48 | min-height: 220px; 49 | min-height: calc-rem(220px); 50 | 51 | &:nth-child(3) { 52 | border: none; 53 | } 54 | } 55 | 56 | >h3 { 57 | font-size: $h4-size; 58 | font-size: calc-rem($h4-size); 59 | color: $color__white; 60 | margin-bottom:0; 61 | } 62 | } -------------------------------------------------------------------------------- /molecules/_primary-nav.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $PRIMARY-NAV 3 | \*------------------------------------*/ 4 | /** 5 | * Custom molecule for the primary navigation in the header 6 | */ 7 | 8 | .primary-nav { 9 | background-color: $color__background--black; 10 | width: 83%; 11 | float: right; 12 | } -------------------------------------------------------------------------------- /quarks/_blockquotes.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $BLOCKQUOTES 3 | \*------------------------------------*/ 4 | 5 | blockquote { 6 | margin-left:0; 7 | position:relative; 8 | font-style: italic; 9 | color: lighten($base-color, 10); 10 | 11 | &:before { 12 | @extend %font__text--bold; 13 | content: "\201C"; 14 | position: absolute; 15 | font-size: 30px; 16 | font-size: calc-rem(30px); 17 | color: $color__orange--primary; 18 | left: - ($base-spacing-unit); 19 | left: - calc-rem($base-spacing-unit); 20 | top: - $half-spacing-unit; 21 | top: - calc-rem($half-spacing-unit); 22 | } 23 | } -------------------------------------------------------------------------------- /quarks/_headings.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $HEADINGS 3 | \*------------------------------------*/ 4 | 5 | h1, .alpha { 6 | font-size: $h1-size; 7 | font-size: calc-rem($h1-size); 8 | line-height: ($line-height-ratio - .25); 9 | text-rendering: optimizeLegibility; 10 | } 11 | 12 | h2, .beta { 13 | font-size: $h2-size; 14 | font-size: calc-rem($h2-size); 15 | line-height: ($line-height-ratio - .2); 16 | } 17 | 18 | h3, .gamma { 19 | font-size: $h3-size; 20 | line-height: ($line-height-ratio - .25); 21 | margin-bottom: 0; 22 | } 23 | 24 | h4, .delta { 25 | font-size: $h4-size; 26 | line-height: ($line-height-ratio - .1); 27 | } 28 | 29 | h5, .epsilon { 30 | font-size: $h5-size; 31 | line-height: $line-height-ratio; 32 | } -------------------------------------------------------------------------------- /quarks/_images.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $IMAGES 3 | \*------------------------------------*/ 4 | 5 | img{ 6 | max-width:100%; 7 | height:auto; 8 | } 9 | 10 | /** 11 | * Image placement variations. 12 | */ 13 | .img--right{ 14 | float:right; 15 | margin-bottom:$base-spacing-unit; 16 | margin-left:$base-spacing-unit; 17 | } 18 | .img--left{ 19 | float:left; 20 | margin-right:$base-spacing-unit; 21 | margin-bottom:$base-spacing-unit; 22 | } 23 | .img--center{ 24 | display:block; 25 | margin-right:auto; 26 | margin-bottom:$base-spacing-unit; 27 | margin-left:auto; 28 | } 29 | 30 | /** 31 | * Images in `figure` elements. 32 | */ 33 | figure > img{ 34 | display:block; 35 | } -------------------------------------------------------------------------------- /quarks/_links.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $LINKS 3 | \*------------------------------------*/ 4 | 5 | a { 6 | @include transition(all 0.2s ease-in-out); 7 | color:$color__orange--primary; 8 | border-bottom: 1px dotted $color__orange--primary; 9 | line-height:1; 10 | 11 | &:hover, 12 | &:focus { 13 | text-decoration:none; 14 | color: darken($color__orange--primary, 15); 15 | border-bottom: 1px solid $color__orange--active; 16 | } 17 | } -------------------------------------------------------------------------------- /quarks/_lists.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $LISTS 3 | \*------------------------------------*/ 4 | /** 5 | * Remove vertical spacing from nested lists. 6 | */ 7 | li{ 8 | > ul, 9 | > ol{ 10 | margin-bottom:0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /quarks/_micros.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $MICRO 3 | \*------------------------------------*/ 4 | /** 5 | * Micro typographic styles 6 | * 7 | **/ 8 | 9 | dl { 10 | dt { 11 | @extend %font__text--bold; 12 | } 13 | 14 | dd { 15 | margin-left:0; 16 | margin-bottom: $base-spacing-unit; 17 | } 18 | 19 | dl { 20 | padding-left: $base-spacing-unit; 21 | padding-left: calc-rem($base-spacing-unit); 22 | } 23 | } 24 | 25 | q:before {content: '“'; content: open-quote;} 26 | q:after {content: '”'; content: close-quote;} 27 | 28 | hr { 29 | border-bottom: 1px dotted $color__border--standard; 30 | margin-bottom: $base-spacing-unit; 31 | } 32 | 33 | pre { 34 | @extend %font__text--regular; 35 | font-style:italic; 36 | } -------------------------------------------------------------------------------- /quarks/_smallprint.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $SMALLPRINT 3 | \*------------------------------------*/ 4 | /** 5 | * Classes for setting tiny type; for use in smallprint etc. 6 | */ 7 | .smallprint, 8 | .milli{ 9 | font-size:$micro-size; 10 | font-size:calc-rem($micro-size); 11 | } -------------------------------------------------------------------------------- /readme.mdown: -------------------------------------------------------------------------------- 1 | # Atomic Sass Framework 2 | 3 | This is an outline of the framework that I discussed in [The Other Interface](http://coding.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/). The aim is to decrease the complexity of making large design systems with Sass by scoping similar styles together. 4 | 5 | :warning: **This *framework* is not production ready.** :warning: 6 | 7 | It’s simply an example and isn’t intended to be used on live projects, although you’re certainly free to extend the ideas contained within and make them more awesome. 8 | 9 | 10 | ## Control panel 11 | Simply imports all of the utilities, quarks, atoms and molecules into a single stylesheet so that developers can quickly scan it and get a general overview of the system. 12 | 13 | ## Utilities 14 | The basic plumbing of the website; global classes, mixins and styles that can be used anywhere and at any time. For example if we need to use color variables throughout the site, then this is the directory that we would place that code. 15 | 16 | ## Quarks 17 | Styles reserved for default HTML elements only. Default paragraphs, links, lists and micros such as *i* and *em*. Style guide stuff. 18 | 19 | ## Atoms 20 | CSS objects that can be extended from and into other elements of the site. Think of these ase the *default relationships* that can be used again and again without bloating the codebase. 21 | 22 | ## Molecules 23 | Sometimes we need one-off structures, such as a banner or navigation element or footer, that we don’t intend to replicate. This is where we can combine multiple quarks and atoms, without interfering with any of our global styles. 24 | 25 | 26 | 27 | ## Acknowledgements 28 | - [Harry Roberts](http://twitter.com/csswizardry) + the [Inuit.css](http://inuitcss.com/) framework 29 | - [Brad Frost](http://twitter.com/bradfrost) + his article about [atomic design](http://bradfrostweb.com/blog/post/atomic-web-design/) 30 | - [Allen Tan](http://twitter.com/tealtan) + his thoughts from [Contents Magazine](http://contentsmagazine.com/articles/made-to-measure/) 31 | - [Nicole Sullivan](http://twitter.com/stubbornella) + her talk at Webstock called [CSS tools for massive websites](http://talks.webstock.org.nz/speakers/nicole-sullivan/css-tools-massive-websites/) 32 | - [Nicholas Gallagher](http://twitter.com/necolas) + his thoughts on [idiomatic CSS](https://github.com/necolas/idiomatic-css) 33 | -------------------------------------------------------------------------------- /utilities/_base-spacing.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $BASE SPACING 3 | \*------------------------------------*/ 4 | /** 5 | * Based on the super fantastic work shown here: csswizardry.com/2012/06/single-direction-margin-declarations 6 | */ 7 | /** 8 | * Elements 9 | */ 10 | h1,h2,h3,h4,h5,h6, 11 | ul,ol,dl, 12 | blockquote,p,address, 13 | table, 14 | fieldset,figure, 15 | pre,form, 16 | iframe, 17 | 18 | /** 19 | * Objects and abstractions 20 | */ 21 | .media, 22 | .island, 23 | .islet { 24 | margin-bottom: $base-spacing-unit; 25 | margin-bottom: calc-rem($base-spacing-unit); 26 | 27 | .islet &{ 28 | margin-bottom: $base-spacing-unit / 2; 29 | margin-bottom: calc-rem($base-spacing-unit / 2); 30 | } 31 | } 32 | 33 | /** 34 | * `hr` elements only take up a few pixels, so we need to give them special 35 | * treatment regarding vertical rhythm. 36 | */ 37 | hr { 38 | margin-bottom: $base-spacing-unit - 2px; 39 | margin-bottom: calc-rem($base-spacing-unit - 2px); 40 | } 41 | 42 | /** 43 | * Where `margin-left` is concerned we want to try and indent certain elements 44 | * by a consistent amount. Define that amount once, here. 45 | */ 46 | ul,ol,dd { 47 | margin-left: (2 * $base-spacing-unit); 48 | margin-left: calc-rem(2 * $base-spacing-unit); 49 | } -------------------------------------------------------------------------------- /utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $CLEARFIX 3 | \*------------------------------------*/ 4 | /** 5 | * As per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php 6 | 7 | * Extend this clearfix class with Sass 8 | */ 9 | .cf{ 10 | &:after{ 11 | content:""; 12 | display:table; 13 | clear:both; 14 | } 15 | } -------------------------------------------------------------------------------- /utilities/_colors.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $COLORS 3 | \*------------------------------------*/ 4 | 5 | $color__background--black: #333333; 6 | $color__background--dark: #555555; 7 | $color__background--grey: #F5F5F5; 8 | $color__background--white: #FDFDFD; 9 | 10 | $color__orange--primary: #FF8039; 11 | $color__orange--secondary:#FD6D16; 12 | $color__orange--active: #F24125; 13 | $color__orange--dark: #DB6000; -------------------------------------------------------------------------------- /utilities/_defaults.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $DEFAULTS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Font-sizes in pixels. 7 | */ 8 | 9 | $base-line-height: 25px!default; 10 | 11 | $micro-size: 13px!default; 12 | $milli-size: 15px!default; 13 | $base-font-size: 16px!default; 14 | 15 | $h5-size: $base-font-size !default; 16 | $h4-size: 18px!default; 17 | $h3-size: 22px!default; 18 | $h2-size: 28px!default; 19 | $h1-size: 35px!default; 20 | 21 | 22 | /** 23 | * Font-family 24 | */ 25 | 26 | $base-font-family: "Poynter Serif RE", Georgia, serif!default; 27 | 28 | 29 | /** 30 | * Color defaults 31 | */ 32 | 33 | $base-color: #252525!default; 34 | $base-ui-color: #EEEEEE!default; 35 | 36 | 37 | /*------------------------------------*\ 38 | $BASE-SPACING 39 | \*------------------------------------*/ 40 | /** 41 | * As per: csswizardry.com/2012/06/single-direction-margin-declarations 42 | */ 43 | $base-spacing-unit: ($base-line-height - 5) !default; 44 | $half-spacing-unit: $base-spacing-unit / 2!default; 45 | $quarter-spacing-unit: $base-spacing-unit / 4!default; 46 | $line-height-ratio: $base-line-height / $base-font-size; 47 | -------------------------------------------------------------------------------- /utilities/_font-stack.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $FONT-STACK 3 | \*------------------------------------*/ 4 | 5 | 6 | /** 7 | * Font weights 8 | */ 9 | $lighter:300; 10 | $normal:400; 11 | $semibold:600; 12 | $bold:700; 13 | 14 | 15 | /** 16 | * Default text font-family and font weights 17 | */ 18 | %font__serif--text { 19 | font-family: "Poynter Serif RE", Georgia, serif; 20 | font-style: normal; 21 | font-weight: normal; 22 | } 23 | 24 | %font__sans--display { 25 | font-family: "Griffith Gothic", Verdana, sans-serif; 26 | font-style: normal; 27 | font-weight: normal; 28 | } 29 | 30 | %font__icon--gizmo { 31 | font-style:normal; 32 | font-family: "SSGizmo"; 33 | white-space: nowrap; 34 | text-decoration: none; 35 | -webkit-font-feature-settings: "liga"; 36 | -moz-font-feature-settings: "liga=1"; 37 | -moz-font-feature-settings: "liga"; 38 | -ms-font-feature-settings: "liga" 1; 39 | -o-font-feature-settings: "liga"; 40 | font-feature-settings: "liga"; 41 | -webkit-font-smoothing: antialiased; 42 | text-rendering: optimizeLegibility; 43 | } -------------------------------------------------------------------------------- /utilities/_mixins.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $MIXINS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Calculate rems. $target = pixel size. $context = base pixel size 7 | */ 8 | 9 | @function calc-rem($target, $context: $base-font-size) { 10 | @return ($target / $context) * 1rem; 11 | } 12 | 13 | 14 | /** 15 | * Output vendor properties 16 | */ 17 | 18 | @mixin vendor($property, $value...){ 19 | -webkit-#{$property}:$value; 20 | -moz-#{$property}:$value; 21 | -ms-#{$property}:$value; 22 | -o-#{$property}:$value; 23 | } 24 | -------------------------------------------------------------------------------- /utilities/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /* 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /* 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /* 47 | * Address styling not present in IE 8/9. 48 | */ 49 | 50 | [hidden] { 51 | display: none; 52 | } 53 | 54 | /* ========================================================================== 55 | Base 56 | ========================================================================== */ 57 | 58 | /* 59 | * 1. Set default font family to sans-serif. 60 | * 2. Prevent iOS text size adjust after orientation change, without disabling 61 | * user zoom. 62 | */ 63 | 64 | html { 65 | font-family: sans-serif; /* 1 */ 66 | -webkit-text-size-adjust: 100%; /* 2 */ 67 | -ms-text-size-adjust: 100%; /* 2 */ 68 | } 69 | 70 | /* 71 | * Remove default margin. 72 | */ 73 | 74 | body { 75 | margin: 0; 76 | } 77 | 78 | /* ========================================================================== 79 | Links 80 | ========================================================================== */ 81 | 82 | /* 83 | * Address `outline` inconsistency between Chrome and other browsers. 84 | */ 85 | 86 | a:focus { 87 | outline: thin dotted; 88 | } 89 | 90 | /* 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | 94 | a:active, 95 | a:hover { 96 | outline: 0; 97 | } 98 | 99 | /* ========================================================================== 100 | Typography 101 | ========================================================================== */ 102 | 103 | /* 104 | * Address variable `h1` font-size and margin within `section` and `article` 105 | * contexts in Firefox 4+, Safari 5, and Chrome. 106 | */ 107 | 108 | h1 { 109 | font-size: 2em; 110 | margin: 0.67em 0; 111 | } 112 | 113 | /* 114 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: 1px dotted; 119 | } 120 | 121 | /* 122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: bold; 128 | } 129 | 130 | /* 131 | * Address styling not present in Safari 5 and Chrome. 132 | */ 133 | 134 | dfn { 135 | font-style: italic; 136 | } 137 | 138 | /* 139 | * Address differences between Firefox and other browsers. 140 | */ 141 | 142 | hr { 143 | -moz-box-sizing: content-box; 144 | box-sizing: content-box; 145 | height: 0; 146 | } 147 | 148 | /* 149 | * Address styling not present in IE 8/9. 150 | */ 151 | 152 | mark { 153 | background: #ff0; 154 | color: #000; 155 | } 156 | 157 | /* 158 | * Correct font family set oddly in Safari 5 and Chrome. 159 | */ 160 | 161 | code, 162 | kbd, 163 | pre, 164 | samp { 165 | font-family: monospace, serif; 166 | font-size: 1em; 167 | } 168 | 169 | /* 170 | * Improve readability of pre-formatted text in all browsers. 171 | */ 172 | 173 | pre { 174 | white-space: pre-wrap; 175 | } 176 | 177 | /* 178 | * Set consistent quote types. 179 | */ 180 | 181 | q { 182 | quotes: "\201C" "\201D" "\2018" "\2019"; 183 | } 184 | 185 | /* 186 | * Address inconsistent and variable font size in all browsers. 187 | */ 188 | 189 | small { 190 | font-size: 80%; 191 | } 192 | 193 | /* 194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 195 | */ 196 | 197 | sub, 198 | sup { 199 | font-size: 75%; 200 | line-height: 0; 201 | position: relative; 202 | vertical-align: baseline; 203 | } 204 | 205 | sup { 206 | top: -0.5em; 207 | } 208 | 209 | sub { 210 | bottom: -0.25em; 211 | } 212 | 213 | /* ========================================================================== 214 | Embedded content 215 | ========================================================================== */ 216 | 217 | /* 218 | * Remove border when inside `a` element in IE 8/9. 219 | */ 220 | 221 | img { 222 | border: 0; 223 | } 224 | 225 | /* 226 | * Correct overflow displayed oddly in IE 9. 227 | */ 228 | 229 | svg:not(:root) { 230 | overflow: hidden; 231 | } 232 | 233 | /* ========================================================================== 234 | Figures 235 | ========================================================================== */ 236 | 237 | /* 238 | * Address margin not present in IE 8/9 and Safari 5. 239 | */ 240 | 241 | figure { 242 | margin: 0; 243 | } 244 | 245 | /* ========================================================================== 246 | Forms 247 | ========================================================================== */ 248 | 249 | /* 250 | * Define consistent border, margin, and padding. 251 | */ 252 | 253 | fieldset { 254 | border: 1px solid #c0c0c0; 255 | margin: 0 2px; 256 | padding: 0.35em 0.625em 0.75em; 257 | } 258 | 259 | /* 260 | * 1. Correct `color` not being inherited in IE 8/9. 261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 262 | */ 263 | 264 | legend { 265 | border: 0; /* 1 */ 266 | padding: 0; /* 2 */ 267 | } 268 | 269 | /* 270 | * 1. Correct font family not being inherited in all browsers. 271 | * 2. Correct font size not being inherited in all browsers. 272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 273 | */ 274 | 275 | button, 276 | input, 277 | select, 278 | textarea { 279 | font-family: inherit; /* 1 */ 280 | font-size: 100%; /* 2 */ 281 | margin: 0; /* 3 */ 282 | } 283 | 284 | /* 285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 286 | * the UA stylesheet. 287 | */ 288 | 289 | button, 290 | input { 291 | line-height: normal; 292 | } 293 | 294 | /* 295 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 296 | * All other form control elements do not inherit `text-transform` values. 297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 298 | * Correct `select` style inheritance in Firefox 4+ and Opera. 299 | */ 300 | 301 | button, 302 | select { 303 | text-transform: none; 304 | } 305 | 306 | /* 307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 308 | * and `video` controls. 309 | * 2. Correct inability to style clickable `input` types in iOS. 310 | * 3. Improve usability and consistency of cursor style between image-type 311 | * `input` and others. 312 | */ 313 | 314 | button, 315 | html input[type="button"], /* 1 */ 316 | input[type="reset"], 317 | input[type="submit"] { 318 | -webkit-appearance: button; /* 2 */ 319 | cursor: pointer; /* 3 */ 320 | } 321 | 322 | /* 323 | * Re-set default cursor for disabled elements. 324 | */ 325 | 326 | button[disabled], 327 | html input[disabled] { 328 | cursor: default; 329 | } 330 | 331 | /* 332 | * 1. Address box sizing set to `content-box` in IE 8/9. 333 | * 2. Remove excess padding in IE 8/9. 334 | */ 335 | 336 | input[type="checkbox"], 337 | input[type="radio"] { 338 | box-sizing: border-box; /* 1 */ 339 | padding: 0; /* 2 */ 340 | } 341 | 342 | /* 343 | * 1. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 344 | * (include `-moz` to future-proof). 345 | */ 346 | 347 | input[type="search"] { 348 | -moz-box-sizing: content-box; 349 | -webkit-box-sizing: content-box; /* 1 */ 350 | box-sizing: content-box; 351 | } 352 | 353 | /* 354 | * Remove inner padding and search cancel button in Safari 5 and Chrome 355 | * on OS X. 356 | */ 357 | 358 | input[type="search"]::-webkit-search-cancel-button, 359 | input[type="search"]::-webkit-search-decoration { 360 | -webkit-appearance: none; 361 | } 362 | 363 | /* 364 | * Remove inner padding and border in Firefox 4+. 365 | */ 366 | 367 | button::-moz-focus-inner, 368 | input::-moz-focus-inner { 369 | border: 0; 370 | padding: 0; 371 | } 372 | 373 | /* 374 | * 1. Remove default vertical scrollbar in IE 8/9. 375 | * 2. Improve readability and alignment in all browsers. 376 | */ 377 | 378 | textarea { 379 | overflow: auto; /* 1 */ 380 | vertical-align: top; /* 2 */ 381 | } 382 | 383 | /* ========================================================================== 384 | Tables 385 | ========================================================================== */ 386 | 387 | /* 388 | * Remove most spacing between table cells. 389 | */ 390 | 391 | table { 392 | border-collapse: collapse; 393 | border-spacing: 0; 394 | } 395 | -------------------------------------------------------------------------------- /utilities/_reset.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $RESET 3 | \*------------------------------------*/ 4 | /** 5 | * As per: csswizardry.com/2011/10/reset-restarted 6 | */ 7 | *{ 8 | &, 9 | &:before, 10 | &:after{ 11 | @include vendor(box-sizing, border-box); 12 | -webkit-font-smoothing: antialiased; 13 | } 14 | } 15 | 16 | /** 17 | * The usual... 18 | */ 19 | h1,h2,h3,h4,h5,h6, 20 | p,blockquote,pre, 21 | dl,dd,ol,ul, 22 | form,fieldset,legend, 23 | table,th,td,caption, 24 | hr{ 25 | margin:0; 26 | padding:0; 27 | } 28 | 29 | /** 30 | * Give a help cursor to elements that give extra info on `:hover`. 31 | */ 32 | abbr[title],dfn[title]{ 33 | cursor:help; 34 | } 35 | 36 | abbr[title] { 37 | text-decoration:none; 38 | border: none; 39 | } 40 | 41 | /** 42 | * Remove underlines from potentially troublesome elements. 43 | */ 44 | a,u,ins{ 45 | text-decoration:none; 46 | } 47 | 48 | /** 49 | * Apply faux underline via `border-bottom`. 50 | */ 51 | ins{ 52 | border-bottom:1px solid; 53 | } 54 | 55 | /** 56 | * So that `alt` text is visually offset if images don’t load. 57 | */ 58 | img{ 59 | font-style:italic; 60 | } 61 | 62 | /** 63 | * Remove borders from fieldset 64 | */ 65 | fieldset { 66 | border:none; 67 | } 68 | 69 | /** 70 | * Give form elements some cursor interactions... 71 | */ 72 | label, 73 | input, 74 | textarea, 75 | button, 76 | select, 77 | option{ 78 | cursor:pointer; 79 | } 80 | .text-input:active, 81 | .text-input:focus, 82 | textarea:active, 83 | textarea:focus{ 84 | cursor:text; 85 | outline:none; 86 | } --------------------------------------------------------------------------------