├── .gitignore ├── LICENSE ├── README.md ├── _knife.scss ├── bower.json ├── examples ├── _normalize.scss ├── example1.css ├── example1.html ├── example1.scss ├── gruntfile.js ├── package.json ├── tests.css └── tests.scss ├── package.json └── sache.json /.gitignore: -------------------------------------------------------------------------------- 1 | /config.codekit 2 | .sass-cache 3 | /examples/.sass-cache 4 | /examples/node_modules 5 | npm-debug.log 6 | 7 | ### OSX ### 8 | .DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Icon must end with two \r 13 | Icon 14 | 15 | 16 | # Thumbnails 17 | ._* 18 | 19 | # Files that might appear on external disk 20 | .Spotlight-V100 21 | .Trashes 22 | 23 | # Directories potentially created on remote AFP share 24 | .AppleDB 25 | .AppleDesktop 26 | Network Trash Folder 27 | Temporary Items 28 | .apdisk 29 | 30 | ### Windows ### 31 | # Windows image file caches 32 | Thumbs.db 33 | ehthumbs.db 34 | 35 | # Folder config file 36 | Desktop.ini 37 | 38 | # Recycle Bin used on file shares 39 | $RECYCLE.BIN/ 40 | 41 | # Windows Installer files 42 | *.cab 43 | *.msi 44 | *.msm 45 | *.msp 46 | 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Paul van Zyl 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | knife 2 | ===== 3 | Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of Sass/SCSS variables, functions and mixins. 4 | 5 | [Endorse on CoderWall](https://coderwall.com/pushplaybang) 6 | 7 | **Note: This is an early release so expect things to change. I will do my best not to break stuff, and will let you know if something will break in the future..** 8 | 9 | ## Features 10 | * Simple to master and use. 11 | * Responsive friendly. 12 | * Work / think in px - **win in REMs** 13 | * Optional **IE Support** 14 | * Designed to be compatible with [Grid Lover](http://www.gridlover.net/) 15 | * Solves sub pixel rounding errors in different browsers by rounding out your base numbers. 16 | 17 | ## Install 18 | 19 | Install [Sass](http://sass-lang.com/): 20 | 21 | ```bash 22 | gem install sass 23 | ``` 24 | 25 | Install [Knife](http://pushplaybang.github.io/knife/) with [Yarn](https://yarnpkg.com/): 26 | 27 | ```bash 28 | yarn add knife-sass 29 | ``` 30 | 31 | ... or with [NPM](https://www.npmjs.com/): 32 | 33 | ```bash 34 | npm install knife-sass 35 | ``` 36 | 37 | Alternatively, you can simply import the `knife.scss` file into you primary Sass/SCSS stylesheet after downloading and and including it in your project. 38 | 39 | 40 | ```scss 41 | @import "./../../node_modules/knife-sass/_knife.scss"; 42 | ``` 43 | **NB: obviously the path will be specific to your project structure** 44 | 45 | 46 | 47 | ## Usage 48 | Note that this tool is heavily inspired by the fantatstic web app [Grid Lover](http://www.gridlover.net/) and its absolutely one of the eaiest ways to sort out these initial variables. 49 | 50 | Set your **basic variables** 51 | 52 | ```scss 53 | // Basic Type Variabless 54 | $body-font-size: 16px; 55 | $body-line-height: 1.5; 56 | $scale-factor: 1.333; 57 | $ie8compatability: true; 58 | ``` 59 | 60 | 61 | Set Your base font size on the **html ans body** 62 | 63 | ```scss 64 | html { @include khtml(); } 65 | body { @include kbody(); } 66 | ``` 67 | 68 | This can be done in your base or normalization files, or later on before you define youe type. You should be defining your typography straight after your normalize / reset. 69 | 70 | Set up your Typography 71 | 72 | ```scss 73 | h1,h2,h3,h4,h5,h6 {text-transform: uppercase;} 74 | h1 { @include ktype(5, 1, 1); } 75 | h2 { @include ktype(4, 1, 1); } 76 | h3 { @include ktype(3, 1, 1); } 77 | h4 { @include ktype(2, 1, 1); } 78 | h5 { @include ktype(1, 1, 0); } 79 | h6 { 80 | @include ktype(0, 1, 0); 81 | font-weight: normal; 82 | text-transform: capitalize; 83 | } 84 | p, ul, ol {@include ktype(0,0,1);} 85 | small { @include ktype(-1,0,1); } 86 | ``` 87 | 88 | Use the `krem()` mixin to set **any** other value in rems, because no one really spends their life thinking in relative units of measure. 89 | 90 | ```scss 91 | @include krem("height", 160px); 92 | ``` 93 | ### Output : 94 | 95 | note the bloat added by the IE compatability, obviously setting that to false will result in halving the output. Have a look at the basic demo in the example folder for more information. 96 | 97 | ```css 98 | // Type Setup 99 | html { 100 | font-size: 16px; 101 | line-height: 24px; } 102 | 103 | body { 104 | font-size: 16px; 105 | line-height: 24px; 106 | font-size: 1rem; 107 | line-height: 1.5rem; } 108 | 109 | // Typography 110 | h1, h2, h3, h4, h5, h6 { 111 | text-transform: uppercase; } 112 | 113 | h1 { 114 | font-size: 68px; 115 | font-size: 4.25rem; 116 | line-height: 72px; 117 | line-height: 4.5rem; 118 | margin-top: 48px; 119 | margin-top: 3rem; 120 | margin-bottom: 24px; 121 | margin-bottom: 1.5rem; } 122 | 123 | h2 { 124 | font-size: 51px; 125 | font-size: 3.1875rem; 126 | line-height: 72px; 127 | line-height: 4.5rem; 128 | margin-top: 24px; 129 | margin-top: 1.5rem; 130 | margin-bottom: 24px; 131 | margin-bottom: 1.5rem; } 132 | 133 | h3 { 134 | font-size: 38px; 135 | font-size: 2.375rem; 136 | line-height: 48px; 137 | line-height: 3rem; 138 | margin-top: 24px; 139 | margin-top: 1.5rem; 140 | margin-bottom: 24px; 141 | margin-bottom: 1.5rem; } 142 | 143 | h4 { 144 | font-size: 29px; 145 | font-size: 1.8125rem; 146 | line-height: 48px; 147 | line-height: 3rem; 148 | margin-top: 24px; 149 | margin-top: 1.5rem; 150 | margin-bottom: 24px; 151 | margin-bottom: 1.5rem; } 152 | 153 | h5 { 154 | font-size: 22px; 155 | font-size: 1.375rem; 156 | line-height: 24px; 157 | line-height: 1.5rem; 158 | margin-top: 24px; 159 | margin-top: 1.5rem; 160 | margin-bottom: 0px; 161 | margin-bottom: 0rem; } 162 | 163 | h6 { 164 | font-size: 16px; 165 | font-size: 1rem; 166 | line-height: 24px; 167 | line-height: 1.5rem; 168 | margin-top: 24px; 169 | margin-top: 1.5rem; 170 | margin-bottom: 0px; 171 | margin-bottom: 0rem; 172 | text-transform: capitalize; } 173 | 174 | p, ul, ol, dl { 175 | font-size: 16px; 176 | font-size: 1rem; 177 | line-height: 24px; 178 | line-height: 1.5rem; 179 | margin-top: 0px; 180 | margin-top: 0rem; 181 | margin-bottom: 24px; 182 | margin-bottom: 1.5rem; } 183 | 184 | small { 185 | display: inline-block; 186 | font-size: 13px; 187 | font-size: 0.8125rem; 188 | line-height: 24px; 189 | line-height: 1.5rem; 190 | margin-top: 0px; 191 | margin-top: 0rem; 192 | margin-bottom: 0px; 193 | margin-bottom: 0rem; } 194 | 195 | ``` 196 | 197 | 198 | # About 199 | 200 | Typography is an essential art for web and application development, a lot of the internet is essentailly slightly interactive documents, and its therefore imperative that we achieve strong vertical layouts and create a clear visual heirachy to our content. 201 | 202 | Knife is essentially a small collections of mixins leveraging good typographic principals to make setting up strong typographic layouts reasonably quick, easy and intuitive. Right now knife is not seeking to solve every problem or individual instance, but is there to help you get going quickly, and have a great typographic foundation in your SCSS. 203 | 204 | ### Project Goals 205 | 206 | * Make vertical rhythm, modular scale and rem units easy to implement and use. 207 | * Maintain and develop a small inuitive API for typography in scss 208 | * Switchable support for old browsers. 209 | * Stimulate the conversation about good web typography between developers and designers. 210 | 211 | ### Acknowledgements & Inspiration 212 | 213 | heavily inspired by the awesome web app [Grid Lover](http://www.gridlover.net/) and [sevenupcan's sass gridlover mixin](https://github.com/sevenupcan/gridlover-mixin). I've been further pushed to develop this little SASS tool to help "onboard" team members with typographic layout principals, using REM units, speeding up starting dev time on projects and make something without a steep learning curve. **I hope you find it useful too**. 214 | 215 | 216 | #### About Web Typography 217 | 218 | * [More Meaningful Typography](http://alistapart.com/article/more-meaningful-typography) 219 | * [Setting Typeon the Web to Baseline Grid](http://alistapart.com/article/settingtypeontheweb) 220 | * [Composing the New Canon: Music, Harmony, Proportion](http://24ways.org/2011/composing-the-new-canon/) 221 | * [Relational Design](http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html#tips) 222 | * [Aligning type to baseline the right way using SASS](https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b) 223 | * [Scotch.io : Typography and vertical rhythm ](https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm) 224 | 225 | 226 | #### Tools for Better Type 227 | 228 | * [Grid Lover](http://www.gridlover.net/) 229 | * [Modular Scale](http://modularscale.com/) 230 | 231 | ## TODO : 232 | * add shift property to ktype 233 | * ~~Implement tests~~ 234 | * Start thinking about a much stronger API for v1.0 235 | * better naming convention for variables 236 | * More Flexibility 237 | * Consider SASS Maps for handling properties better or changing propoerties for different sections. 238 | * ~~Handle old global variable warning nonsense~~ 239 | * finish type template mixin 240 | * a super quick single mixin for mocking up pages. 241 | * Should have sensible defaults 242 | * should accept a map of properties 243 | * ~~handle unitless values~~ 244 | * handle multiple values for padding / margin etc 245 | * Finish Wiki 246 | * Create awesome examples 247 | * ~~Finish killer logo~~ created by the awesome designer Sol Witcher 248 | * Make sick as f@!% Landing Page 249 | * ~~Finish resolve mixin~~ 250 | * ~~add reduce to kbody~~ 251 | * ~~add reduce to khtnl~~ 252 | * ~~Add sache~~ 253 | * ~~Add bower support~~ 254 | * ~~finish push, pull~~ 255 | * ~~suffix and prefix~~ 256 | * ~~start type template mixin~~ 257 | * ~~add 'offset' to accommodate border etc.~~ 258 | * ~~Add basic Example~~ 259 | * ~~add basic github page~~ 260 | 261 | ## License 262 | [MIT Licensed](https://github.com/Pushplaybang/knife/blob/master/LICENSE) , Paul van Zyl 2015 263 | 264 | 265 | ## Contributors 266 | 267 | Please Feel free to make pull requests or suggest features, this project is super new and still growing into itself, I generally create feat/something branches for specific features, but will create a seperate development branch for contributors to make pull requests against. 268 | 269 | 270 | -------------------------------------------------------------------------------- /_knife.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /* Vars */ 5 | 6 | 7 | 8 | // Modular Scale ratios 9 | $golden: 1.618; 10 | $minor-second: 1.067; 11 | $major-second: 1.125; 12 | $minor-third: 1.2; 13 | $major-third: 1.25; 14 | $perfect-fourth: 1.333; 15 | $augmented-fourth: 1.414; 16 | $perfect-fifth: 1.5; 17 | $minor-sixth: 1.6; 18 | $major-sixth: 1.667; 19 | $minor-seventh: 1.778; 20 | $major-seventh: 1.875; 21 | $octave: 2; 22 | $major-tenth: 2.5; 23 | $major-eleventh: 2.667; 24 | $major-twelfth: 3; 25 | $double-octave: 4; 26 | 27 | // Settings 28 | $body-font-size: 14px !default; 29 | $body-line-height: $golden !default; 30 | $scale-factor: $minor-third !default; 31 | $ie8compatability: true !default; 32 | $outputrems: true !default; 33 | 34 | 35 | 36 | /* - - - - - - - Utility Functions - - - - - - - - - */ 37 | 38 | 39 | 40 | // Sass exponent support 41 | @function exponent($base, $exponent) { 42 | // reset value 43 | $value: $base; 44 | // positive intergers get multiplied 45 | @if ($exponent > 1) { 46 | @for $i from 2 through $exponent { 47 | $value : $value * $base; 48 | } 49 | } 50 | // negitive intergers get divided. A number divided by itself is 1 51 | @if ($exponent < 1) { 52 | @for $i from 0 through -$exponent { 53 | $value : $value / $base; 54 | } 55 | } 56 | // return the last value written 57 | @return ($value); 58 | } 59 | // strip units for rem calculations so that we don't run into errors in case people declare numerical values instead of ##px 60 | @function stripUnits($value) { 61 | @return ($value) / ($value * 0 + 1); 62 | } 63 | 64 | // px to rem 65 | @function calculateRem($size) { 66 | @return stripUnits($size) / stripUnits($body-font-size) * 1rem; 67 | } 68 | 69 | // resolve values to a multiple of our base 70 | @function resolve($value: 0, $roundup: false) { 71 | $kb : ceil($body-font-size * $body-line-height); 72 | $newVal: $value % $kb; 73 | $r : 0; 74 | 75 | @if ($roundup == false) { 76 | $r: $value - $newVal; 77 | } @else if ($roundup == true) { 78 | $x : $kb - $newVal; 79 | $r : $value + $x; 80 | } 81 | 82 | @return $r; 83 | } 84 | 85 | // vertical rythm units for use in layouts and non-type elements, pass rem:true to return rem values 86 | @function kunit($baselines: 1, $rem: false) { 87 | @if ($rem == true) { 88 | @return calculateRem(ceil($body-font-size * $body-line-height) * $baselines); 89 | } 90 | 91 | @return ceil($body-font-size * $body-line-height) * $baselines; 92 | } 93 | 94 | 95 | 96 | /* - - - - - - - - - Utility Mixins - - - - - - - - - - */ 97 | 98 | 99 | 100 | // rem font and line height 101 | @mixin pxType($fontSize, $lineHeight) { 102 | font-size: $fontSize; 103 | line-height: $lineHeight; 104 | } 105 | 106 | // rem font and line height 107 | @mixin remType($fontSize, $lineHeight) { 108 | font-size: calculateRem($fontSize); 109 | line-height: calculateRem($lineHeight); 110 | } 111 | 112 | // margin top and bottom in px 113 | @mixin pxMargin($mb: 0,$ma: 0) { 114 | margin-top: $mb; 115 | margin-bottom: $ma; 116 | } 117 | 118 | // margin top and bottom in rem 119 | @mixin remMargin($mb: 0,$ma: 0) { 120 | margin-top: calculateRem($mb); 121 | margin-bottom: calculateRem($ma); 122 | } 123 | 124 | 125 | 126 | 127 | /* - - - - - - - - - Public Mixins - - - - - - - - - - */ 128 | 129 | 130 | 131 | 132 | // output any attr as rem with IE support 133 | @mixin krem($attr: "",$px: 0, $ie: $ie8compatability, $resolve: false, $roundup: false) { 134 | @if ($resolve == false) { 135 | @if ($ie == true) { 136 | #{$attr} : stripUnits($px) * 1px; 137 | } 138 | #{$attr} : calculateRem($px); 139 | 140 | } @else if ($resolve == true) { 141 | $newVal : resolve($px,$roundup); 142 | @if ($ie == true) { 143 | #{$attr} : stripUnits($newVal) * 1px; 144 | } 145 | #{$attr} : calculateRem($newVal); 146 | } 147 | 148 | } 149 | 150 | // html mixin 151 | @mixin khtml($reduce:0px) { 152 | $kb : (ceil($body-font-size * $body-line-height)) - $reduce; 153 | $px : $body-font-size - $reduce; 154 | @include pxType($px, $kb); 155 | } 156 | 157 | // body mixin 158 | @mixin kbody($reduce:0px) { 159 | $kb : (ceil($body-font-size * $body-line-height)) - $reduce; 160 | $px : $body-font-size - $reduce; 161 | $rkb : $kb+$reduce; 162 | $rpx : $px+$reduce; 163 | 164 | @if ($ie8compatability == true) { 165 | @include pxType($px, $kb); 166 | } 167 | @include remType($rpx, $rkb); 168 | } 169 | 170 | // type mixin 171 | @mixin ktype($scale, $before: 0, $after: 0, $lineheightmod: 0, $offset: 0, $pull: 0, $push: 0, $ie: $ie8compatability) { 172 | 173 | // setup what we've got to work with 174 | $kb : ceil($body-font-size * $body-line-height); 175 | $new-font-size: $body-font-size; 176 | $new-line-height: $kb; 177 | $margin-before: $kb * $before; 178 | $margin-after: $kb * $after; 179 | $compat: $ie; 180 | 181 | // Set new vars 182 | @if ($scale != 0) { 183 | $new-font-size: ceil($body-font-size * exponent($scale-factor, $scale)); 184 | $new-line-height: ceil($new-font-size / $kb) * $kb; 185 | 186 | // push and pull, to be deprecated, see below 187 | @if ($pull != 0) { 188 | $m: ($pull / 2); 189 | $new-line-height: $new-line-height - ($new-line-height*$m); 190 | } @else if ($push != 0) { 191 | $m: ($push / 2); 192 | $new-line-height: $new-line-height + ($new-line-height*$m); 193 | } 194 | } 195 | 196 | //lineheightmod to replace push and pull with a single value, easy declare eg. to bump up lineheight by one whole line (2 half lines) for an element ktype(0,1,1,2) 197 | @if ($lineheightmod < 0) { 198 | $m: ($lineheightmod / 2); 199 | $new-line-height: $new-line-height + ($kb*$m); 200 | } @else if ($lineheightmod > 0) { 201 | $m: ($lineheightmod / 2); 202 | $new-line-height: $new-line-height + ($kb*$m); 203 | } 204 | 205 | // offset 206 | @if ($offset != 0) { 207 | $new-line-height: $new-line-height - $offset; 208 | } 209 | 210 | // Output 211 | @include krem("font-size", $new-font-size, $compat); 212 | @include krem("line-height", $new-line-height, $compat); 213 | @include krem("margin-top", $margin-before, $compat); 214 | @include krem("margin-bottom", $margin-after, $compat); 215 | } 216 | 217 | // prefix : add padding before 218 | @mixin kprefix($multiple, $margin:false) { 219 | $x : (ceil($body-font-size * $body-line-height)) * $multiple; 220 | @if ($margin == false) { 221 | @include krem("padding-top",$x); 222 | } @else { 223 | @include krem("margin-top",$x); 224 | } 225 | } 226 | 227 | // suffix : add padding after 228 | @mixin ksuffix($multiple, $margin:false) { 229 | $x : (ceil($body-font-size * $body-line-height)) * $multiple; 230 | @if ($margin == false) { 231 | @include krem("padding-bottom",$x); 232 | } @else { 233 | @include krem("margin-bottom",$x); 234 | } 235 | } 236 | 237 | 238 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Knife", 3 | "version": "0.3.4", 4 | "homepage": "https://github.com/Pushplaybang/knife", 5 | "authors": [ 6 | "Paul van Zyl " 7 | ], 8 | "description": "Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.", 9 | "main": "_knife.scss", 10 | "keywords": [ 11 | "sass", 12 | "scss", 13 | "typography", 14 | "vertical-rhythm", 15 | "design", 16 | "ui", 17 | "responsive", 18 | "responsive-web-design" 19 | ], 20 | "license": "MIT", 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /examples/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } -------------------------------------------------------------------------------- /examples/example1.css: -------------------------------------------------------------------------------- 1 | /* Vars */ 2 | /* - - - - - - - Utility Functions - - - - - - - - - */ 3 | /* - - - - - - - - - Utility Mixins - - - - - - - - - - */ 4 | /* - - - - - - - - - Public Mixins - - - - - - - - - - */ 5 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 6 | /** 7 | * 1. Set default font family to sans-serif. 8 | * 2. Prevent iOS text size adjust after orientation change, without disabling 9 | * user zoom. 10 | */ 11 | html { 12 | font-family: sans-serif; 13 | /* 1 */ 14 | -ms-text-size-adjust: 100%; 15 | /* 2 */ 16 | -webkit-text-size-adjust: 100%; 17 | /* 2 */ 18 | } 19 | 20 | /** 21 | * Remove default margin. 22 | */ 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /* HTML5 display definitions 28 | ========================================================================== */ 29 | /** 30 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 31 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 32 | * Correct `block` display not defined for `main` in IE 11. 33 | */ 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 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | audio, 54 | canvas, 55 | progress, 56 | video { 57 | display: inline-block; 58 | /* 1 */ 59 | vertical-align: baseline; 60 | /* 2 */ 61 | } 62 | 63 | /** 64 | * Prevent modern browsers from displaying `audio` without controls. 65 | * Remove excess height in iOS 5 devices. 66 | */ 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | [hidden], 77 | template { 78 | display: none; 79 | } 80 | 81 | /* Links 82 | ========================================================================== */ 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | a { 87 | background: transparent; 88 | } 89 | 90 | /** 91 | * Improve readability when focused and also mouse hovered in all browsers. 92 | */ 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | /** 101 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 102 | */ 103 | abbr[title] { 104 | border-bottom: 1px dotted; 105 | } 106 | 107 | /** 108 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 109 | */ 110 | b, 111 | strong { 112 | font-weight: bold; 113 | } 114 | 115 | /** 116 | * Address styling not present in Safari and Chrome. 117 | */ 118 | dfn { 119 | font-style: italic; 120 | } 121 | 122 | /** 123 | * Address variable `h1` font-size and margin within `section` and `article` 124 | * contexts in Firefox 4+, Safari, and Chrome. 125 | */ 126 | h1 { 127 | font-size: 2em; 128 | margin: 0.67em 0; 129 | } 130 | 131 | /** 132 | * Address styling not present in IE 8/9. 133 | */ 134 | mark { 135 | background: #ff0; 136 | color: #000; 137 | } 138 | 139 | /** 140 | * Address inconsistent and variable font size in all browsers. 141 | */ 142 | small { 143 | font-size: 80%; 144 | } 145 | 146 | /** 147 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 148 | */ 149 | sub, 150 | sup { 151 | font-size: 75%; 152 | line-height: 0; 153 | position: relative; 154 | vertical-align: baseline; 155 | } 156 | 157 | sup { 158 | top: -0.5em; 159 | } 160 | 161 | sub { 162 | bottom: -0.25em; 163 | } 164 | 165 | /* Embedded content 166 | ========================================================================== */ 167 | /** 168 | * Remove border when inside `a` element in IE 8/9/10. 169 | */ 170 | img { 171 | border: 0; 172 | } 173 | 174 | /** 175 | * Correct overflow not hidden in IE 9/10/11. 176 | */ 177 | svg:not(:root) { 178 | overflow: hidden; 179 | } 180 | 181 | /* Grouping content 182 | ========================================================================== */ 183 | /** 184 | * Address margin not present in IE 8/9 and Safari. 185 | */ 186 | figure { 187 | margin: 1em 40px; 188 | } 189 | 190 | /** 191 | * Address differences between Firefox and other browsers. 192 | */ 193 | hr { 194 | -moz-box-sizing: content-box; 195 | box-sizing: content-box; 196 | height: 0; 197 | } 198 | 199 | /** 200 | * Contain overflow in all browsers. 201 | */ 202 | pre { 203 | overflow: auto; 204 | } 205 | 206 | /** 207 | * Address odd `em`-unit font size rendering in all browsers. 208 | */ 209 | code, 210 | kbd, 211 | pre, 212 | samp { 213 | font-family: monospace, monospace; 214 | font-size: 1em; 215 | } 216 | 217 | /* Forms 218 | ========================================================================== */ 219 | /** 220 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 221 | * styling of `select`, unless a `border` property is set. 222 | */ 223 | /** 224 | * 1. Correct color not being inherited. 225 | * Known issue: affects color of disabled elements. 226 | * 2. Correct font properties not being inherited. 227 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 228 | */ 229 | button, 230 | input, 231 | optgroup, 232 | select, 233 | textarea { 234 | color: inherit; 235 | /* 1 */ 236 | font: inherit; 237 | /* 2 */ 238 | margin: 0; 239 | /* 3 */ 240 | } 241 | 242 | /** 243 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 244 | */ 245 | button { 246 | overflow: visible; 247 | } 248 | 249 | /** 250 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 251 | * All other form control elements do not inherit `text-transform` values. 252 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 253 | * Correct `select` style inheritance in Firefox. 254 | */ 255 | button, 256 | select { 257 | text-transform: none; 258 | } 259 | 260 | /** 261 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 262 | * and `video` controls. 263 | * 2. Correct inability to style clickable `input` types in iOS. 264 | * 3. Improve usability and consistency of cursor style between image-type 265 | * `input` and others. 266 | */ 267 | button, 268 | html input[type="button"], 269 | input[type="reset"], 270 | input[type="submit"] { 271 | -webkit-appearance: button; 272 | /* 2 */ 273 | cursor: pointer; 274 | /* 3 */ 275 | } 276 | 277 | /** 278 | * Re-set default cursor for disabled elements. 279 | */ 280 | button[disabled], 281 | html input[disabled] { 282 | cursor: default; 283 | } 284 | 285 | /** 286 | * Remove inner padding and border in Firefox 4+. 287 | */ 288 | button::-moz-focus-inner, 289 | input::-moz-focus-inner { 290 | border: 0; 291 | padding: 0; 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | input { 299 | line-height: normal; 300 | } 301 | 302 | /** 303 | * It's recommended that you don't attempt to style these elements. 304 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 305 | * 306 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 307 | * 2. Remove excess padding in IE 8/9/10. 308 | */ 309 | input[type="checkbox"], 310 | input[type="radio"] { 311 | box-sizing: border-box; 312 | /* 1 */ 313 | padding: 0; 314 | /* 2 */ 315 | } 316 | 317 | /** 318 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 319 | * `font-size` values of the `input`, it causes the cursor style of the 320 | * decrement button to change from `default` to `text`. 321 | */ 322 | input[type="number"]::-webkit-inner-spin-button, 323 | input[type="number"]::-webkit-outer-spin-button { 324 | height: auto; 325 | } 326 | 327 | /** 328 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 329 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 330 | * (include `-moz` to future-proof). 331 | */ 332 | input[type="search"] { 333 | -webkit-appearance: textfield; 334 | /* 1 */ 335 | -moz-box-sizing: content-box; 336 | -webkit-box-sizing: content-box; 337 | /* 2 */ 338 | box-sizing: content-box; 339 | } 340 | 341 | /** 342 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 343 | * Safari (but not Chrome) clips the cancel button when the search input has 344 | * padding (and `textfield` appearance). 345 | */ 346 | input[type="search"]::-webkit-search-cancel-button, 347 | input[type="search"]::-webkit-search-decoration { 348 | -webkit-appearance: none; 349 | } 350 | 351 | /** 352 | * Define consistent border, margin, and padding. 353 | */ 354 | fieldset { 355 | border: 1px solid #c0c0c0; 356 | margin: 0 2px; 357 | padding: 0.35em 0.625em 0.75em; 358 | } 359 | 360 | /** 361 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 362 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 363 | */ 364 | legend { 365 | border: 0; 366 | /* 1 */ 367 | padding: 0; 368 | /* 2 */ 369 | } 370 | 371 | /** 372 | * Remove default vertical scrollbar in IE 8/9/10/11. 373 | */ 374 | textarea { 375 | overflow: auto; 376 | } 377 | 378 | /** 379 | * Don't inherit the `font-weight` (applied by a rule above). 380 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 381 | */ 382 | optgroup { 383 | font-weight: bold; 384 | } 385 | 386 | /* Tables 387 | ========================================================================== */ 388 | /** 389 | * Remove most spacing between table cells. 390 | */ 391 | table { 392 | border-collapse: collapse; 393 | border-spacing: 0; 394 | } 395 | 396 | td, 397 | th { 398 | padding: 0; 399 | } 400 | 401 | * { 402 | -webkit-box-sizing: border-box; 403 | -moz-box-sizing: border-box; 404 | box-sizing: border-box; 405 | } 406 | 407 | /* Type Setup */ 408 | html { 409 | font-size: 16px; 410 | line-height: 24px; 411 | } 412 | 413 | body { 414 | font-size: 16px; 415 | line-height: 24px; 416 | font-size: 1rem; 417 | line-height: 1.5rem; 418 | } 419 | 420 | /* Typography */ 421 | h1, h2, h3, h4, h5, h6 { 422 | text-transform: uppercase; 423 | } 424 | 425 | h1 { 426 | font-size: 68px; 427 | font-size: 4.25rem; 428 | line-height: 72px; 429 | line-height: 4.5rem; 430 | margin-top: 48px; 431 | margin-top: 3rem; 432 | margin-bottom: 24px; 433 | margin-bottom: 1.5rem; 434 | } 435 | 436 | h2 { 437 | font-size: 51px; 438 | font-size: 3.1875rem; 439 | line-height: 72px; 440 | line-height: 4.5rem; 441 | margin-top: 24px; 442 | margin-top: 1.5rem; 443 | margin-bottom: 24px; 444 | margin-bottom: 1.5rem; 445 | } 446 | 447 | h3 { 448 | font-size: 38px; 449 | font-size: 2.375rem; 450 | line-height: 48px; 451 | line-height: 3rem; 452 | margin-top: 24px; 453 | margin-top: 1.5rem; 454 | margin-bottom: 24px; 455 | margin-bottom: 1.5rem; 456 | } 457 | 458 | h4 { 459 | font-size: 29px; 460 | font-size: 1.8125rem; 461 | line-height: 48px; 462 | line-height: 3rem; 463 | margin-top: 24px; 464 | margin-top: 1.5rem; 465 | margin-bottom: 24px; 466 | margin-bottom: 1.5rem; 467 | } 468 | 469 | h5 { 470 | font-size: 22px; 471 | font-size: 1.375rem; 472 | line-height: 24px; 473 | line-height: 1.5rem; 474 | margin-top: 24px; 475 | margin-top: 1.5rem; 476 | margin-bottom: 0px; 477 | margin-bottom: 0rem; 478 | } 479 | 480 | h6 { 481 | font-size: 16px; 482 | font-size: 1rem; 483 | line-height: 24px; 484 | line-height: 1.5rem; 485 | margin-top: 24px; 486 | margin-top: 1.5rem; 487 | margin-bottom: 0px; 488 | margin-bottom: 0rem; 489 | text-transform: capitalize; 490 | } 491 | 492 | p, ul, ol, dl { 493 | font-size: 16px; 494 | font-size: 1rem; 495 | line-height: 24px; 496 | line-height: 1.5rem; 497 | margin-top: 0px; 498 | margin-top: 0rem; 499 | margin-bottom: 24px; 500 | margin-bottom: 1.5rem; 501 | } 502 | 503 | small { 504 | display: inline-block; 505 | font-size: 13px; 506 | font-size: 0.8125rem; 507 | line-height: 24px; 508 | line-height: 1.5rem; 509 | margin-top: 0px; 510 | margin-top: 0rem; 511 | margin-bottom: 0px; 512 | margin-bottom: 0rem; 513 | } 514 | 515 | .container, .container footer { 516 | *zoom: 1; 517 | } 518 | .container:before, .container footer:before, .container:after, .container footer:after { 519 | content: " "; 520 | display: table; 521 | } 522 | .container:after, .container footer:after { 523 | clear: both; 524 | } 525 | 526 | .container header, .container footer { 527 | overflow: hidden; 528 | text-align: center; 529 | width: 100%; 530 | } 531 | 532 | .container { 533 | width: 1200px; 534 | width: 75rem; 535 | margin: 0 auto; 536 | } 537 | .container header { 538 | padding: 24px; 539 | padding: 1.5rem; 540 | } 541 | .container .grid { 542 | float: left; 543 | padding-left: 12px; 544 | padding-left: 0.75rem; 545 | padding-right: 12px; 546 | padding-right: 0.75rem; 547 | } 548 | .container .grid1 { 549 | width: 800px; 550 | width: 50rem; 551 | } 552 | .container .grid2 { 553 | width: 400px; 554 | width: 25rem; 555 | } 556 | .container footer { 557 | padding-top: 48px; 558 | padding-top: 3rem; 559 | } 560 | -------------------------------------------------------------------------------- /examples/example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Typography 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Vertical Rhythm

12 |

Building Strong Typography with Knife

13 |
14 | 15 |
16 |

First In line

17 |

Rub face on everything rub face on everything. Sleep on keyboard give attitude, sleep on keyboard but attack feet find something else more interesting and all of a sudden go crazy. Under the bed sweet beast so stick butt in face. Stare at ceiling intrigued by the shower so destroy couch. Lick butt mark territory make muffins

18 |

Second Hand Headings

19 |

Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. Throwup on your pillow play time.

20 |

Third Times the Charm

21 |

Leave hair everywhere hunt anything that moves so climb leg, give attitude so hate dog. Stick butt in face stare at ceiling chase mice stare at ceiling. Cat snacks find something else more

22 |

Common Time

23 |

Sun bathe stick butt in face or chase imaginary bugs missing until dinner time or mark territory or find something else more interesting. Attack feet nap all day. Why must they do that. Under the bed.

24 |
Really Swinging
25 |

Shake treat bag inspect anything brought into the house yet find something else more interesting stick butt in face and chew iPad power cord. Lick butt chew iPad power cord play time attack feet attack feet why must they do that or attack feet.

26 |
a little more sense than that the I see dead people kid.
27 |

Stare at ceiling give attitude sun bathe. All of a sudden go crazy give attitude for sleep on keyboard or leave hair everywhere or missing until dinner time but leave hair everywhere. Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. Throwup on your pillow play time.

28 |
29 |
30 |

Side bar title

31 |

Sweet beast cat snacks chase imaginary bugs stand in front of the computer screen hate dog yet give attitude. Climb leg leave hair everywhere or shake treat bag yet throwup on your pillow shake treat bag behind the couch yet lick butt.

32 | 33 |
Really Swinging
34 |

Shake treat bag inspect anything brought into the house yet find something else more interesting stick butt in face and chew iPad power cord. Lick butt chew iPad power cord play time attack feet attack feet why must they do that or attack feet.

35 |

36 | NB : Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. 37 |

38 |
Stick it in a list :
39 |
    40 |
  1. Stare at ceiling
    2. 41 |
  2. give attitude sun bathe
    3. 42 |
  3. go crazy
    4. 43 |
  4. give attitude
    5. 44 |
  5. sleep on keyboard
    6. 45 |
  6. chew iPad power cord
    7. 46 |
  7. Throwup on your pillow
    8. 47 |
  8. play time
    9. 48 |
49 |
50 | 53 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /examples/example1.scss: -------------------------------------------------------------------------------- 1 | 2 | // Imports 3 | @import '../knife.scss'; 4 | @import 'normalize'; 5 | 6 | * { 7 | -webkit-box-sizing:border-box; 8 | -moz-box-sizing:border-box; 9 | box-sizing:border-box; 10 | } 11 | 12 | /* Type Setup */ 13 | $body-font-size: 16px; 14 | $body-line-height: 1.5; 15 | $scale-factor: 1.333; 16 | $ie8compatability: true; 17 | 18 | html { @include khtml(); } 19 | body { @include kbody(); } 20 | 21 | /* Typography */ 22 | h1,h2,h3,h4,h5,h6 {text-transform: uppercase;} 23 | h1 { @include ktype(5, 2, 1); } 24 | h2 { @include ktype(4, 1, 1); } 25 | h3 { @include ktype(3, 1, 1); } 26 | h4 { @include ktype(2, 1, 1); } 27 | h5 { @include ktype(1, 1, 0); } 28 | h6 { 29 | @include ktype(0, 1, 0); 30 | text-transform: capitalize; 31 | } 32 | p, ul, ol,dl {@include ktype(0,0,1);} 33 | small { 34 | display: inline-block; 35 | @include ktype(-1,0,0); 36 | } 37 | 38 | 39 | // helpers 40 | %clearfix { 41 | *zoom: 1; 42 | &:before, &:after { 43 | content: " "; 44 | display: table; 45 | } 46 | &:after { 47 | clear: both; 48 | } 49 | } 50 | 51 | %fullblock { 52 | overflow: hidden; 53 | text-align: center; 54 | width:100%; 55 | } 56 | 57 | 58 | // main layout 59 | .container { 60 | @include krem("width",1200px); 61 | margin:0 auto; 62 | @extend %clearfix; 63 | 64 | header { 65 | @extend %fullblock; 66 | @include krem("padding",24px); 67 | } 68 | .grid { 69 | float: left; 70 | @include krem("padding-left",12px); 71 | @include krem("padding-right",12px); 72 | } 73 | .grid1 { 74 | @include krem("width",800px); 75 | } 76 | .grid2 { 77 | @include krem("width",400px); 78 | } 79 | footer { 80 | @include krem("padding-top", 48px); 81 | @extend %fullblock; 82 | @extend %clearfix; 83 | } 84 | } 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /examples/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | /* JIT inclusion of plugins */ 4 | require('jit-grunt')(grunt); 5 | 6 | /* Cool task timer */ 7 | require('time-grunt')(grunt); 8 | 9 | grunt.initConfig({ 10 | // link to package file 11 | pkg : grunt.file.readJSON('package.json'), 12 | 13 | // Sass 14 | sass: { 15 | test: { 16 | options: { 17 | style: 'expanded', 18 | loadPath: './node_modules/bootcamp/dist' // or './bower_components/bootcamp/dist' 19 | }, 20 | files: [{ 21 | expand: true, 22 | cwd: './', 23 | src: ['*.scss', '../knife.scss'], 24 | dest: './', 25 | ext: '.css' 26 | }] 27 | } 28 | }, 29 | 30 | // Bootcamp 31 | bootcamp: { 32 | test: { 33 | files: { 34 | src: ['./tests.css'] 35 | } 36 | } 37 | }, 38 | 39 | watch: { 40 | dist: { 41 | files: ['./**/*.scss'], 42 | tasks: ['sass', 'bootcamp'] 43 | }, 44 | justBuild : { 45 | files: ['./**/*.scss'], 46 | tasks: ['sass'] 47 | } 48 | } 49 | 50 | }); 51 | 52 | /* Our Grunt Tasks */ 53 | grunt.registerTask('default', 'build all the examples and run tests and then keep watching', ['sass','bootcamp','watch']); 54 | grunt.registerTask('test','running the bootcamp test suite', ['sass','bootcamp']); 55 | grunt.registerTask('build','Just building the example files', ['sass','watch:justBuild']); 56 | }; -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Knife-examples-and-tests", 3 | "version": "0.0.1", 4 | "description": "Basic grunt setup for compiling examples and running tests for the sass typographic library knife", 5 | "main": "", 6 | "devDependencies": { 7 | "bootcamp": "^1.1.7", 8 | "grunt-notify": "^0.4.1", 9 | "grunt": "^0.4.5", 10 | "grunt-contrib-sass": "^0.8.1", 11 | "grunt-contrib-watch": "^0.6.1" 12 | }, 13 | "scripts": { 14 | "test": "" 15 | }, 16 | "author": "Paul van Zyl", 17 | "license": "MIT" 18 | } 19 | -------------------------------------------------------------------------------- /examples/tests.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! sassyjson - v1.1.8 - 2014-06-01 */ 3 | /* Vars */ 4 | /* - - - - - - - Utility Functions - - - - - - - - - */ 5 | /* - - - - - - - - - Utility Mixins - - - - - - - - - - */ 6 | /* - - - - - - - - - Public Mixins - - - - - - - - - - */ 7 | /* >> Bootcamp >> */ 8 | Test Results { 9 | Success: true; 10 | Stats: ✔ ✔ ✔ ✔ ✔ ✔; 11 | Tests: 6; 12 | Asserts: 19; 13 | Passed: 6; 14 | Failed: 0; 15 | Skipped: 0; 16 | } 17 | 18 | /* << Bootcamp << */ 19 | -------------------------------------------------------------------------------- /examples/tests.scss: -------------------------------------------------------------------------------- 1 | // test script 2 | @import "bootcamp"; 3 | @import "../knife.scss"; 4 | 5 | // Kick everything off. 6 | @include runner-start; 7 | 8 | @include describe("Knife Utility Functions Test Suite") { 9 | @include it('tests the variable default values') { 10 | $body : $body-font-size; 11 | $line : $body-line-height; 12 | $scale : $scale-factor; 13 | $ie : $ie8compatability; 14 | $rem : $outputrems; 15 | 16 | @include should( expect($body), to( be(14px) ) ); 17 | @include should( expect($line), to( equal(1.618) ) ); 18 | @include should( expect($scale), to( equal(1.2) ) ); 19 | @include should( expect($ie), to( be(true) ) ); 20 | @include should( expect($rem), to( be(true) ) ); 21 | } 22 | 23 | // exponent 24 | @include it("tests the exponent function") { 25 | @include should( expect( exponent(10,3) ), to( equal(1000) ) ); 26 | @include should( expect( exponent(2,-2) ), to( equal(0.25) ) ); 27 | 28 | } 29 | 30 | // Strip Units 31 | @include it('will return unitless values') { 32 | $a : 16px; 33 | $b : 16; 34 | 35 | @include should( expect( stripUnits($a) ), to(be(16) ) ); 36 | @include should( expect( stripUnits($b) ), to(be(16) ) ); 37 | 38 | // NB : this function will not handle numbers passed as strings (eg: "16px") 39 | 40 | } 41 | 42 | // Calculate Rem 43 | @include it('converts pixel values to rem values') { 44 | @include should( expect( calculateRem(14px) ), to( be(1rem) ) ); 45 | @include should( expect( calculateRem(14) ), to( be(1rem) ) ); 46 | } 47 | 48 | // Resolve 49 | @include it('resolves the value passed to a multiple of the bassline') { 50 | @include should( expect( resolve(50) ), to( be(46) ) ); 51 | @include should( expect( resolve(50,true) ), to( be(69) ) ); 52 | @include should( expect( resolve(50px) ), to( be(46px) ) ); 53 | @include should( expect( resolve(50px,true) ), to( be(69px) ) ); 54 | } 55 | 56 | // K unit 57 | @include it('returns a multiple of the baseline') { 58 | @include should( expect( kunit(1) ), to( be(23px) ) ); 59 | @include should( expect( kunit(5) ), to( be(115px) ) ); 60 | @include should( expect( kunit(1,true) ), to( be-close-to(1.64286rem,5) ) ); // precise to 5 decimal places 61 | @include should( expect( kunit(5,true) ), to( be-close-to(8.21429rem,5) ) ); // precise to 5 decimal places 62 | } 63 | 64 | } 65 | 66 | 67 | 68 | // Finish Up 69 | @include runner-end; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "knife-sass", 3 | "version": "0.3.5", 4 | "description": "Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.", 5 | "main": "package.json", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/Pushplaybang/knife.git" 15 | }, 16 | "keywords": [ 17 | "sass", 18 | "scss", 19 | "typography", 20 | "vertical-rhythm", 21 | "design", 22 | "ui", 23 | "responsive", 24 | "responsive-web-design" 25 | ], 26 | "author": "Paul van Zyl ", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/Pushplaybang/knife/issues" 30 | }, 31 | "homepage": "https://github.com/Pushplaybang/knife#readme" 32 | } 33 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Knife", 3 | "description": "Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.", 4 | "tags": ["design", "ui", "typography", "baseline", "vertical-rhythm", "responsive", "responsive-web-design"] 5 | } 6 | --------------------------------------------------------------------------------