Last active
October 17, 2015 08:05
-
-
Save tunnela/cbab3451c8be84061f07 to your computer and use it in GitHub Desktop.
How Sassiin was used in Drobbits.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| @import "sassiin/_sassiin.scss"; // @see https://github.com/tunnela/sassiin | |
| @import "_helpers.scss"; | |
| @include breakpoint(typo-s, 360); | |
| @include breakpoint(typo-m, 430); | |
| @include breakpoint(typo-l, 560); | |
| @include breakpoint(typo-xl, 620); | |
| @include breakpoint(s, 760); | |
| @include breakpoint(m, 940); | |
| @include breakpoint(l, 1280); | |
| @include breakpoint(xl, 1680); | |
| @include breakpoint(xxl, 1920); | |
| @include breakpoint(print, print); | |
| @include breakpoint(screen, screen); | |
| @include breakpoint(portrait, (orientation portrait)); | |
| @include breakpoint(landscape, (orientation landscape)); | |
| @include breakpoint-group(typography, typo-xl typo-l typo-m typo-s); | |
| @include breakpoint-group(all, xl l m s typo-xl typo-l typo-m typo-s); | |
| @include breakpoint-group(large, xxl xl l m s); | |
| @include default-breakpoint(typography); | |
| @include fallback-breakpoint(typo-m); | |
| @include default-direction(right); | |
| @include spaceless-font; | |
| @include pre-declaration-handler(h-units); | |
| @include post-declaration-handler(h-remove-underscore, 1000); | |
| @include post-declaration-handler(h-prefix, | |
| box-sizing transform transition border-radius | |
| animation box-shadow transform-origin transform-style | |
| ); | |
| @include pre-declaration-handler(h-filter-empty, 1001); | |
| //********** VARIABLES ********** | |
| $variables: ( | |
| color-lightest: #ffffff, | |
| color-lighter: #F9F9F9, | |
| color-light: #888888, | |
| color-normal: #777777, | |
| color-dark: #434343, | |
| color-darker: #3C3C3C, | |
| color-highlight: #47AFFF, | |
| font-family-sans: ('Source Sans Pro', sans-serif), | |
| cc: 2.04, | |
| size-4th: "@math" ("@get" golden-line-height) "/" 4, | |
| size-3rd: "@math" ("@get" golden-line-height) "/" 3, | |
| size-half: "@math" ("@get" golden-line-height) "/" 2, | |
| size-normal: "@get" golden-line-height, | |
| size-2: "@math" ("@get" golden-line-height) "*" 2, | |
| size-3: "@math" ("@get" golden-line-height) "*" 3, | |
| size-4: "@math" ("@get" golden-line-height) "*" 4, | |
| size-5: "@math" ("@get" golden-line-height) "*" 4, | |
| size-6: "@math" ("@get" golden-line-height) "*" 4, | |
| h0-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 2.8), | |
| h0-color: "@get" color-lightest, | |
| h0-line-height: "@math" ("@get" golden-font-size) "*" 3, | |
| h0-font-weight: 600, | |
| h1-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 2.5), | |
| h1-color: "@get" color-darker, | |
| h1-line-height: "@math" ("@get" golden-font-size) "*" 3, | |
| h1-font-weight: 600, | |
| h2-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 2.0), | |
| h2-color: "@get" color-darker, | |
| h2-line-height: "@math" ("@get" golden-font-size) "*" 3, | |
| h2-font-weight: 600, | |
| h3-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 1.3), | |
| h3-color: "@get" color-dark, | |
| h3-line-height: "@math" ("@get" golden-font-size) "*" 2, | |
| h3-font-weight: normal, | |
| h4-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 1.6), | |
| h4-color: "@get" color-darker, | |
| h4-line-height: "@math" ("@get" golden-font-size) "*" 2, | |
| h4-font-weight: normal, | |
| h5-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 0.3), | |
| h5-color: "@get" color-lightest, | |
| h5-line-height: "@math" ("@get" golden-font-size) "*" 0.5, | |
| h5-font-weight: normal, | |
| normal-color: "@get" color-normal, | |
| normal-font-size: "@get" golden-font-size, | |
| normal-line-height: "@get" golden-line-height, | |
| normal-font-weight: 300 | |
| ); | |
| $variables-typo-s: ( | |
| h0-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 2.2), | |
| h0-line-height: "@math" ("@get" golden-font-size) "*" 3, | |
| h1-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 1.7), | |
| h1-line-height: "@math" ("@get" golden-font-size) "*" 2, | |
| h2-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 1.7), | |
| h2-line-height: "@math" ("@get" golden-font-size) "*" 2 | |
| ); | |
| $variables-typo-m: ( | |
| h0-font-size: "@round" ("@math" ("@get" golden-font-size) "*" 2.5), | |
| h0-line-height: "@math" ("@get" golden-font-size) "*" 3 | |
| ); | |
| @include set($variables); | |
| @include on(typo-xl) { @include set(cpl, 70); } | |
| @include on(typo-l) { @include set(cpl, 66); } | |
| @include on(typo-m) { @include set(cpl, 56); @include set($variables-typo-m); } | |
| @include on(typo-s) { @include set(cpl, 45); @include set($variables-typo-s); } | |
| @include on($fallback: false) { | |
| @include golden-typography($cc: get(cc), $cpl: get(cpl)); | |
| } | |
| @include on(typo-xl) { | |
| @include _set(golden-line-height, get(golden-line-height)); | |
| @include _set(golden-font-size, get(golden-font-size)); | |
| } | |
| // The rest of the stylesheet |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment