├── _mixins.scss ├── _reset.scss ├── readme.md └── style.scss /_mixins.scss: -------------------------------------------------------------------------------- 1 | // PX to REM - Usage: font-size: rem(37px); 2 | @function rem($px, $base: $base-font-size) { 3 | @return ($px / $base) * 1rem; 4 | } -------------------------------------------------------------------------------- /_reset.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } 44 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Simple Typography with Sass 2 | Making the type on your blog beautiful with ease. Using Sass variables to calculate line heights, font sizes, margins and paddings. You create the amazing content and simply make it beautiful. 3 | 4 | ## Getting started 5 | - Copy the `.scss` files to your codebase. 6 | - Make sure to `@import` these files into your own codebase. 7 | - Done 🚀 8 | 9 | ## What's in the box? 10 | ##### Sass files: 11 | - `style.scss` 12 | - Simple Typography Settings - All settings for your type. 13 | - `_mixins.scss` 14 | - REM mixin to calculate all font sizes across type. 15 | - `_reset.scss` 16 | - Eric Meyer’s CSS Reset. 17 | 18 | ### License 19 | Copyright of [Adam Marsden](http://adam-marsden.co.uk/) and contributors. 20 | Licensed under the MIT license. 21 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | @import "_reset.scss"; 2 | @import "_mixins.scss"; 3 | 4 | /*------------------------------------*\ 5 | # Simple Typography Settings 6 | \*------------------------------------*/ 7 | 8 | // Font Family 9 | $font-family: 'Martel', serif; 10 | 11 | // Base Font for HTML 12 | $base-font-size: 16px; 13 | 14 | // Paragraph Styles 15 | $paragraph-color : #505050; 16 | $paragraph-size : rem(17px); 17 | $paragraph-line-height: 1.5em; 18 | $paragraph-margin : 20px; 19 | 20 | // Header Styles 21 | $header-color : #000000; 22 | $header-size : rem(40px); 23 | $header-line-height: 1.25em; 24 | $header-margin : $paragraph-margin * 1.2; 25 | 26 | // Blockquote Styles 27 | $blockquote-color : #505050; 28 | $blockquote-size : rem(23px); 29 | $blockquote-line-height: 1.5em; 30 | $blockquote-margin : $paragraph-margin * 1.5; 31 | 32 | // Links 33 | $link-color: #459bd9; 34 | 35 | // hr 36 | $hr-margin: 30px; 37 | 38 | // Type Misc 39 | $font-weight-bold: 800; 40 | $border-color: #DADADA; 41 | 42 | 43 | 44 | 45 | 46 | /*------------------------------------*\ 47 | # Type 48 | \*------------------------------------*/ 49 | 50 | // Make type normal across browsers 51 | *, html, body { 52 | font-size: $base-font-size; 53 | font-family: $font-family; 54 | -webkit-font-smoothing: antialiased; 55 | -moz-osx-font-smoothing: grayscale; 56 | -webkit-text-size-adjust: 100%; 57 | -ms-text-size-adjust: 100%; 58 | } 59 | 60 | 61 | // Headers 62 | h1, h2, h3, h4, h5, h6 { 63 | margin-top: $header-margin * 1.5; 64 | color: $header-color; 65 | line-height: $header-line-height; 66 | font-weight: 700; 67 | 68 | &:first-child { 69 | margin-top: 0; 70 | } 71 | } 72 | 73 | h1 { 74 | font-size: $header-size; 75 | margin-bottom: $header-margin; 76 | } 77 | 78 | h2 { 79 | font-size: $header-size / 1.3; 80 | margin-bottom: $header-margin / 1.3; 81 | } 82 | 83 | h3 { 84 | font-size: $header-size / 1.5; 85 | margin-bottom: $header-margin / 1.5; 86 | } 87 | 88 | h4 { 89 | font-size: $header-size / 1.7; 90 | margin-bottom: $header-margin / 1.7; 91 | } 92 | 93 | h5 { 94 | font-size: $header-size / 1.8; 95 | margin-bottom: $header-margin / 1.8; 96 | } 97 | 98 | h6 { 99 | font-size: $header-size / 2; 100 | margin-bottom: $header-margin / 2; 101 | } 102 | 103 | 104 | 105 | // Paragraphs 106 | p { 107 | margin-bottom: $paragraph-margin; 108 | font-size: $paragraph-size; 109 | line-height: $paragraph-line-height; 110 | color: $paragraph-color; 111 | 112 | &:last-of-type { 113 | margin-bottom: 0; 114 | } 115 | } 116 | 117 | 118 | 119 | // Links 120 | a { 121 | color: $link-color; 122 | transition: all 0.2s ease; 123 | 124 | &:hover { 125 | color: darken($link-color, 20%); 126 | } 127 | } 128 | 129 | 130 | // Lists 131 | ul, 132 | ol { 133 | margin: $paragraph-margin 0 0 20px; 134 | 135 | li { 136 | margin-top: 10px; 137 | line-height: $paragraph-line-height; 138 | color: $paragraph-color; 139 | } 140 | 141 | ul, 142 | ol { 143 | margin-top: 0; 144 | } 145 | } 146 | 147 | ul { 148 | 149 | li { 150 | list-style: disc; 151 | } 152 | 153 | ul { 154 | 155 | li { 156 | list-style: circle; 157 | } 158 | } 159 | } 160 | 161 | ol { 162 | 163 | li { 164 | list-style: decimal; 165 | } 166 | } 167 | 168 | 169 | // hr 170 | hr { 171 | height: 1px; 172 | margin: $hr-margin 0; 173 | border: none; 174 | background-color: $border-color; 175 | } 176 | 177 | 178 | // Blockquote 179 | blockquote { 180 | margin: $blockquote-margin 0; 181 | font-size: $blockquote-size; 182 | line-height: $blockquote-line-height; 183 | color: $blockquote-color; 184 | text-align: center; 185 | font-style: italic; 186 | } 187 | 188 | 189 | // Tables 190 | table { 191 | width: 100%; 192 | margin: $blockquote-margin 0; 193 | border-collapse: collapse; 194 | } 195 | 196 | table, td, th { 197 | border: 1px solid $border-color; 198 | text-align: left; 199 | } 200 | 201 | th { 202 | font-weight: $font-weight-bold; 203 | } 204 | 205 | th, td { 206 | padding: 15px; 207 | } 208 | 209 | 210 | // Figure 211 | figure { 212 | margin: $blockquote-margin 0; 213 | 214 | img { 215 | margin: 0; 216 | } 217 | } 218 | 219 | figcaption { 220 | margin-top: 10px; 221 | color: lighten($paragraph-color, 10%); 222 | font-size: $paragraph-margin * 0.8; 223 | } 224 | 225 | 226 | // Code 227 | pre { 228 | display: block; 229 | margin: 0 0 40px 0; 230 | padding: 20px; 231 | background-color: lighten($border-color, 12%); 232 | border: 1px solid $border-color; 233 | overflow: auto; 234 | border-radius: 3px; 235 | 236 | code { 237 | position: static; 238 | padding: 0; 239 | border: none; 240 | line-height: 1.5em; 241 | } 242 | } 243 | 244 | code { 245 | position: relative; 246 | top: -0.2em; 247 | padding: 3px; 248 | font-family: Courier New, Courier, monospace; 249 | font-size: $paragraph-size / 1.2; 250 | color: darken($border-color, 70%); 251 | line-height: 1em; 252 | pointer-events: none; 253 | border: 1px solid $border-color; 254 | border-radius: 3px; 255 | } 256 | 257 | 258 | 259 | // Misc Styles 260 | em, 261 | i, 262 | .italic { 263 | font-style: italic; 264 | } 265 | 266 | strong, 267 | b, 268 | .bold { 269 | font-weight: $font-weight-bold; 270 | } 271 | 272 | img { 273 | display: block; 274 | max-width: 100%; 275 | margin: $blockquote-margin 0; 276 | } 277 | --------------------------------------------------------------------------------