├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── Gemfile ├── Gruntfile.js ├── README.md ├── config.rb ├── css ├── ie.css ├── main.css └── scss │ ├── _functions.scss │ ├── _mixins.scss │ ├── _print.scss │ ├── _variables.scss │ ├── common │ ├── _base.scss │ └── _normalize.scss │ ├── components │ ├── _layout.scss │ ├── _module.scss │ └── _state.scss │ ├── ie.scss │ └── main.scss └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | # editorconfig.org 3 | root = true 4 | 5 | # Unix-style newlines 6 | [*] 7 | end_of_line = LF 8 | indent_style = space 9 | indent_size = 4 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.orig 2 | *.sublime-* 3 | .*.sw* 4 | .DS_Store 5 | .sass-cache 6 | Gemfile.lock 7 | node_modules 8 | style/*.css 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Changelog 2 | 3 | This project attempts to follow the [Semantic Versioning Specification](http://semver.org/). 4 | 5 | ## 2.x 6 | 7 | - 2.1.0 8 | - Upgrade to Normalize v3.0.1 9 | - Remove inline-block mixin 10 | - 2.0.2 - Move compass config back to default config.rb 11 | - 2.0.1 - Fix font-stack inheritance issue 12 | - 2.0.0 - v2 rewrite. 13 | 14 | ## 1.x 15 | 16 | - 1.2.0 17 | - Add more common colour scheme variables 18 | - Rename style.css to main.css to match HTML5 Boilerplate 19 | - 1.1.1 - Fix load path error in ie.scss 20 | - --1.1.0-- 21 | - Standardise variable names 22 | - Added Gemfile, .editorconfig and watch.sh (sass --watch script) 23 | - 1.0.0 Yay! 24 | - Support for Media Queries with IE fallback, based on [http://jakearchibald.github.com/sass-ie/]() 25 | - Functions and mixins moved into dedicated directories 26 | - Modules moved into a dedicated directory 27 | - 0.9.3 Don't wrap layout styles in @media screen { } call. Causes issues with inline media queries. 28 | - 0.9.2 relative-size function now uses $base-fs as a default value for $context so it can be used with a single argument 29 | - 0.9.1 Reset styles in sync with HTML5 Boilerplate 3. Including removal of hot pink. 30 | - 0.9.0 Added base font-size and line-height variables to help when defining a baseline rhythm 31 | - 0.8.1 Minor bugfix, borked comment stopping styles from compiling 32 | - --0.8.0 Colour style merged into main styles.-- 33 | - 0.7.0 Made Compass optional 34 | - 0.6.1 Moved `@media screen` declaration into main style.scss 35 | - 0.6.0 Added default form styles from HTML5 Boilerplate 36 | - 0.5.1 Demo moved to a separate Github repo 37 | - 0.5.0 Full expansion of SMACSS concept plus quality check of all current styles 38 | - 0.4.5 SMACSS inspired file structure added to the README 39 | - 0.4.0 Big changes to the directory structure, SMACSS terminology; see "Thanks & Resources" 40 | - 0.3.0 First fully working toolkit 41 | - 0.2.0 Basic file and directory structure 42 | - 0.1.0 Initial commit 43 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | 3 | # ~> 1.1.0 == >= 1.1.0 but < 1.2.0 4 | gem "sass", "~> 3.2.0" 5 | gem "compass", "~> 0.13.alpha.0" 6 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Load all grunt tasks 4 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 5 | 6 | // Grunt config 7 | grunt.initConfig({ 8 | 9 | pkg: grunt.file.readJSON('package.json'), 10 | 11 | cssPath: 'css', 12 | sassPath: 'css/scss', 13 | 14 | compass: { 15 | development: { 16 | options: { 17 | outputStyle: 'expanded' 18 | } 19 | }, 20 | production: { 21 | options: { 22 | outputStyle: 'compressed' 23 | } 24 | } 25 | }, 26 | 27 | watch: { 28 | compass: { 29 | files: ['<%= sassPath %>/**/*.scss'], 30 | tasks: ['compass:development'] 31 | } 32 | } 33 | 34 | 35 | }); 36 | 37 | // Register tasks 38 | grunt.registerTask('build', [ 39 | 'compass:development' 40 | ]); 41 | grunt.registerTask('build:production', [ 42 | 'compass:production' 43 | ]); 44 | grunt.registerTask('default', [ 45 | 'build' 46 | ]); 47 | 48 | }; 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SCSS Toolkit 2.1.0 2 | 3 | ## UNMAINTAINED 4 | 5 | **Note: This project is unmaintained. I feel there are still some valuable principles in this repo so can still be taken as a starting point but it is unlikely to be updated.** 6 | 7 | --- 8 | 9 | A starter toolkit based on SMACSS for Sass (SCSS) projects, with optional support for Compass. 10 | 11 | SCSS Toolkit uses a combination of recommendations from: 12 | 13 | - [Adaptive Web Design](http://easy-readers.net/) 14 | - [Scalable and Modular Architecture for CSS](http://smacss.com/) (SMACSS) 15 | 16 | Styles are broken down into the following groups: **Base, Layout, Module, State** 17 | 18 | ## Requirements 19 | 20 | * Ruby, along with the `bundler` gem. 21 | * NPM (`brew install node`) 22 | * Grunt CLI (`npm install -g grunt-cli`) 23 | 24 | ## Quick Start 25 | 26 | * Clone the git repo - `git clone git://github.com/davidrapson/scss-toolkit.git` or [download it](https://github.com/davidrapson/scss-toolkit/zipball/master) 27 | * Run `bundle install` at the root of the project 28 | * Run `npm install` at the root of the project 29 | * You should be all set. 30 | 31 | ## Build tasks 32 | 33 | * Run `grunt watch` to watch all `.scss` files in `css/scss` for changes. 34 | * Run `grunt build` to compile the `.scss` files on demand 35 | * Run `grunt build:production` to compile and minify the `.scss` files on demand into `css/build`. 36 | 37 | ## License 38 | 39 | ### Major components: 40 | 41 | - [Normalise.css](http://necolas.github.com/normalize.css/): Public Domain 42 | 43 | ### Everything else: 44 | 45 | The Unlicense (aka: public domain) 46 | 47 | ## Thanks & Resources 48 | 49 | This toolkit is based on the work of the following fine people & projects. 50 | 51 | - [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) 52 | - [Normalise.css](http://necolas.github.com/normalize.css/) 53 | - [Scalable and Modular Architecture for CSS](http://smacss.com/book/type-state) (SMACSS) 54 | - [Adaptive Web Design (book)](http://easy-readers.net/) 55 | - [Jake Archibald](http://jakearchibald.github.com/sass-ie/) for the Sass IE implementation 56 | - [Ben Bodien](http://neutroncreations.com/) for his advice and feedback 57 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # COMPASS CONFIG 2 | # http://compass-style.org/help/tutorials/configuration-reference/ 3 | 4 | # Config 5 | # ====== 6 | 7 | project_type = :stand_alone # :stand_alone or :rails 8 | environment = :development # :production or :development 9 | preferred_syntax = :scss # :sass or :scss 10 | http_path = "/" 11 | css_dir = "css" 12 | sass_dir = "css/scss" 13 | images_dir = "images" 14 | relative_assets = true 15 | 16 | # Disable query vars image.png?1234 when using asset helpers, e.g., image-url() 17 | asset_cache_buster :none 18 | 19 | # Defaults to false in production mode, true in development mode. 20 | line_comments = false 21 | 22 | # Uncomment this line if you want to debug using FireSass 23 | # sass_options = {:debug_info => true} 24 | 25 | # Choose your output style, :nested, :extended, :compact, :compressed 26 | output_style = (environment == :production) ? :compressed : :expanded 27 | # To call: compass compile -e production -s compressed --force 28 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | /** 3 | * 1. Set default font family to sans-serif. 4 | * 2. Prevent iOS text size adjust after orientation change, without disabling 5 | * user zoom. 6 | */ 7 | html { 8 | font-family: sans-serif; 9 | /* 1 */ 10 | -ms-text-size-adjust: 100%; 11 | /* 2 */ 12 | -webkit-text-size-adjust: 100%; 13 | /* 2 */ 14 | } 15 | 16 | /** 17 | * Remove default margin. 18 | */ 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | /** 26 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 27 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 28 | * Correct `block` display not defined for `main` in IE 11. 29 | */ 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | audio, 50 | canvas, 51 | progress, 52 | video { 53 | display: inline-block; 54 | /* 1 */ 55 | vertical-align: baseline; 56 | /* 2 */ 57 | } 58 | 59 | /** 60 | * Prevent modern browsers from displaying `audio` without controls. 61 | * Remove excess height in iOS 5 devices. 62 | */ 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Address `[hidden]` styling not present in IE 8/9/10. 70 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 71 | */ 72 | [hidden], 73 | template { 74 | display: none; 75 | } 76 | 77 | /* Links 78 | ========================================================================== */ 79 | /** 80 | * Remove the gray background color from active links in IE 10. 81 | */ 82 | a { 83 | background: transparent; 84 | } 85 | 86 | /** 87 | * Improve readability when focused and also mouse hovered in all browsers. 88 | */ 89 | a:active, 90 | a:hover { 91 | outline: 0; 92 | } 93 | 94 | /* Text-level semantics 95 | ========================================================================== */ 96 | /** 97 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 98 | */ 99 | abbr[title] { 100 | border-bottom: 1px dotted; 101 | } 102 | 103 | /** 104 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 105 | */ 106 | b, 107 | strong { 108 | font-weight: bold; 109 | } 110 | 111 | /** 112 | * Address styling not present in Safari and Chrome. 113 | */ 114 | dfn { 115 | font-style: italic; 116 | } 117 | 118 | /** 119 | * Address variable `h1` font-size and margin within `section` and `article` 120 | * contexts in Firefox 4+, Safari, and Chrome. 121 | */ 122 | h1 { 123 | font-size: 2em; 124 | margin: 0.67em 0; 125 | } 126 | 127 | /** 128 | * Address styling not present in IE 8/9. 129 | */ 130 | mark { 131 | background: #ff0; 132 | color: #000; 133 | } 134 | 135 | /** 136 | * Address inconsistent and variable font size in all browsers. 137 | */ 138 | small { 139 | font-size: 80%; 140 | } 141 | 142 | /** 143 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 144 | */ 145 | sub, 146 | sup { 147 | font-size: 75%; 148 | line-height: 0; 149 | position: relative; 150 | vertical-align: baseline; 151 | } 152 | 153 | sup { 154 | top: -0.5em; 155 | } 156 | 157 | sub { 158 | bottom: -0.25em; 159 | } 160 | 161 | /* Embedded content 162 | ========================================================================== */ 163 | /** 164 | * Remove border when inside `a` element in IE 8/9/10. 165 | */ 166 | img { 167 | border: 0; 168 | } 169 | 170 | /** 171 | * Correct overflow not hidden in IE 9/10/11. 172 | */ 173 | svg:not(:root) { 174 | overflow: hidden; 175 | } 176 | 177 | /* Grouping content 178 | ========================================================================== */ 179 | /** 180 | * Address margin not present in IE 8/9 and Safari. 181 | */ 182 | figure { 183 | margin: 1em 40px; 184 | } 185 | 186 | /** 187 | * Address differences between Firefox and other browsers. 188 | */ 189 | hr { 190 | -moz-box-sizing: content-box; 191 | box-sizing: content-box; 192 | height: 0; 193 | } 194 | 195 | /** 196 | * Contain overflow in all browsers. 197 | */ 198 | pre { 199 | overflow: auto; 200 | } 201 | 202 | /** 203 | * Address odd `em`-unit font size rendering in all browsers. 204 | */ 205 | code, 206 | kbd, 207 | pre, 208 | samp { 209 | font-family: monospace, monospace; 210 | font-size: 1em; 211 | } 212 | 213 | /* Forms 214 | ========================================================================== */ 215 | /** 216 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 217 | * styling of `select`, unless a `border` property is set. 218 | */ 219 | /** 220 | * 1. Correct color not being inherited. 221 | * Known issue: affects color of disabled elements. 222 | * 2. Correct font properties not being inherited. 223 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 224 | */ 225 | button, 226 | input, 227 | optgroup, 228 | select, 229 | textarea { 230 | color: inherit; 231 | /* 1 */ 232 | font: inherit; 233 | /* 2 */ 234 | margin: 0; 235 | /* 3 */ 236 | } 237 | 238 | /** 239 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 240 | */ 241 | button { 242 | overflow: visible; 243 | } 244 | 245 | /** 246 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 247 | * All other form control elements do not inherit `text-transform` values. 248 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 249 | * Correct `select` style inheritance in Firefox. 250 | */ 251 | button, 252 | select { 253 | text-transform: none; 254 | } 255 | 256 | /** 257 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 258 | * and `video` controls. 259 | * 2. Correct inability to style clickable `input` types in iOS. 260 | * 3. Improve usability and consistency of cursor style between image-type 261 | * `input` and others. 262 | */ 263 | button, 264 | html input[type="button"], 265 | input[type="reset"], 266 | input[type="submit"] { 267 | -webkit-appearance: button; 268 | /* 2 */ 269 | cursor: pointer; 270 | /* 3 */ 271 | } 272 | 273 | /** 274 | * Re-set default cursor for disabled elements. 275 | */ 276 | button[disabled], 277 | html input[disabled] { 278 | cursor: default; 279 | } 280 | 281 | /** 282 | * Remove inner padding and border in Firefox 4+. 283 | */ 284 | button::-moz-focus-inner, 285 | input::-moz-focus-inner { 286 | border: 0; 287 | padding: 0; 288 | } 289 | 290 | /** 291 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 292 | * the UA stylesheet. 293 | */ 294 | input { 295 | line-height: normal; 296 | } 297 | 298 | /** 299 | * It's recommended that you don't attempt to style these elements. 300 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 301 | * 302 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 303 | * 2. Remove excess padding in IE 8/9/10. 304 | */ 305 | input[type="checkbox"], 306 | input[type="radio"] { 307 | box-sizing: border-box; 308 | /* 1 */ 309 | padding: 0; 310 | /* 2 */ 311 | } 312 | 313 | /** 314 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 315 | * `font-size` values of the `input`, it causes the cursor style of the 316 | * decrement button to change from `default` to `text`. 317 | */ 318 | input[type="number"]::-webkit-inner-spin-button, 319 | input[type="number"]::-webkit-outer-spin-button { 320 | height: auto; 321 | } 322 | 323 | /** 324 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 325 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 326 | * (include `-moz` to future-proof). 327 | */ 328 | input[type="search"] { 329 | -webkit-appearance: textfield; 330 | /* 1 */ 331 | -moz-box-sizing: content-box; 332 | -webkit-box-sizing: content-box; 333 | /* 2 */ 334 | box-sizing: content-box; 335 | } 336 | 337 | /** 338 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 339 | * Safari (but not Chrome) clips the cancel button when the search input has 340 | * padding (and `textfield` appearance). 341 | */ 342 | input[type="search"]::-webkit-search-cancel-button, 343 | input[type="search"]::-webkit-search-decoration { 344 | -webkit-appearance: none; 345 | } 346 | 347 | /** 348 | * Define consistent border, margin, and padding. 349 | */ 350 | fieldset { 351 | border: 1px solid #c0c0c0; 352 | margin: 0 2px; 353 | padding: 0.35em 0.625em 0.75em; 354 | } 355 | 356 | /** 357 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 358 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 359 | */ 360 | legend { 361 | border: 0; 362 | /* 1 */ 363 | padding: 0; 364 | /* 2 */ 365 | } 366 | 367 | /** 368 | * Remove default vertical scrollbar in IE 8/9/10/11. 369 | */ 370 | textarea { 371 | overflow: auto; 372 | } 373 | 374 | /** 375 | * Don't inherit the `font-weight` (applied by a rule above). 376 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 377 | */ 378 | optgroup { 379 | font-weight: bold; 380 | } 381 | 382 | /* Tables 383 | ========================================================================== */ 384 | /** 385 | * Remove most spacing between table cells. 386 | */ 387 | table { 388 | border-collapse: collapse; 389 | border-spacing: 0; 390 | } 391 | 392 | td, 393 | th { 394 | padding: 0; 395 | } 396 | 397 | /* ========================================================================== */ 398 | /* @group Base */ 399 | /* ========================================================================== */ 400 | /* ========================================================================== */ 401 | /* @group Global Colors */ 402 | /* ========================================================================== */ 403 | body { 404 | color: #444444; 405 | background-color: white; 406 | } 407 | 408 | /* ========================================================================== */ 409 | /* @group Font Stacks */ 410 | /* ========================================================================== */ 411 | body { 412 | font: 400 100%/1.5 sans-serif; 413 | } 414 | 415 | /* Default font stack */ 416 | html, 417 | body, 418 | button, 419 | input, 420 | select, 421 | textarea { 422 | font-family: sans-serif; 423 | } 424 | 425 | /* Display font stack */ 426 | h1, h2, h3, h4, h5, h6 { 427 | font-family: "Helvetica Neue", sans-serif; 428 | } 429 | 430 | /* Alternate font stack */ 431 | blockquote, figcaption { 432 | font-family: Georgia, serif; 433 | } 434 | 435 | /* Caption font stack, should be suitable for smaller sizes */ 436 | [role=contentinfo], .caption { 437 | font-family: Verdana, sans-serif; 438 | } 439 | 440 | /* Monospace font stack, for code samples and preformatted content */ 441 | pre, code, kbd, samp { 442 | font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", "Droid Mono", monospace; 443 | } 444 | 445 | /* ========================================================================== */ 446 | /* @group Typography */ 447 | /* ========================================================================== */ 448 | /* @group Headings */ 449 | /* ========================================================================== */ 450 | h1, h2, h3, h4, h5, h6 { 451 | font-style: normal; 452 | } 453 | 454 | h1, h2, h3 { 455 | font-weight: 700; 456 | } 457 | 458 | h4, h5, h6 { 459 | font-weight: 400; 460 | } 461 | 462 | h1 { 463 | font-size: 2em; 464 | margin: 0 0 0.65625em 0; 465 | } 466 | 467 | h2 { 468 | font-size: 1.75em; 469 | margin: 0.75em 0 0.25em 0; 470 | } 471 | 472 | h3 { 473 | font-size: 1.5em; 474 | margin: 0.875em 0 0.29167em 0; 475 | } 476 | 477 | h4 { 478 | font-size: 1.3125em; 479 | margin: 1em 0 0.33333em 0; 480 | } 481 | 482 | h5 { 483 | font-size: 1.125em; 484 | margin: 1.16667em 0 0.38889em 0; 485 | } 486 | 487 | h5 { 488 | font-size: 1em; 489 | margin: 1.3125em 0 0.4375em 0; 490 | } 491 | 492 | /* @group Links */ 493 | /* ========================================================================== */ 494 | a { 495 | text-decoration: none; 496 | word-wrap: break-word; 497 | font-weight: bold; 498 | } 499 | 500 | a:focus { 501 | outline: thin dotted; 502 | } 503 | 504 | a:hover, a:active { 505 | outline: 0; 506 | } 507 | 508 | a { 509 | color: black; 510 | } 511 | 512 | a:visited { 513 | color: black; 514 | } 515 | 516 | a:hover { 517 | cursor: pointer; 518 | color: #dddddd; 519 | } 520 | 521 | a:active { 522 | color: #dddddd; 523 | } 524 | 525 | /* @group Text Level Elements */ 526 | /* ========================================================================== */ 527 | /* Default margins */ 528 | p, ul, ol, dl { 529 | margin: 0 0 0.75em 0; 530 | } 531 | 532 | /* Lists */ 533 | /* Text Marking */ 534 | b, strong, mark { 535 | font-weight: bold; 536 | } 537 | 538 | dfn, mark { 539 | font-style: italic; 540 | } 541 | 542 | ins, mark { 543 | color: #0069ff; 544 | background-color: #ff9600; 545 | } 546 | 547 | ins { 548 | text-decoration: none; 549 | } 550 | 551 | del { 552 | text-decoration: line-through; 553 | } 554 | 555 | abbr[title], dfn[title] { 556 | cursor: help; 557 | border-bottom: 1px dotted; 558 | } 559 | 560 | sub, sup { 561 | font-size: 75%; 562 | line-height: 0; 563 | position: relative; 564 | vertical-align: baseline; 565 | } 566 | 567 | sup { 568 | top: -0.5em; 569 | } 570 | 571 | sub { 572 | bottom: -0.25em; 573 | } 574 | 575 | /* 576 | * A better looking default horizontal rule 577 | */ 578 | hr { 579 | display: block; 580 | height: 1px; 581 | border: 0; 582 | border-top: 1px solid #eeeeff; 583 | margin: 0.75em 0; 584 | padding: 0; 585 | } 586 | 587 | /* 588 | * Remove text-shadow in selection highlight: h5bp.com/i 589 | * These selection rule sets have to be separate. 590 | * Customize the background color to match your design. 591 | */ 592 | ::-moz-selection { 593 | background: #b3d4fc; 594 | text-shadow: none; 595 | } 596 | 597 | ::selection { 598 | background: #b3d4fc; 599 | text-shadow: none; 600 | } 601 | 602 | /* @group Embedded Content */ 603 | /* ========================================================================== */ 604 | img { 605 | vertical-align: middle; 606 | } 607 | 608 | /* _width hack is for IE6 and below */ 609 | img, embed, object, video { 610 | max-width: 100%; 611 | _width: 100%; 612 | } 613 | 614 | img { 615 | border: 0; 616 | -ms-interpolation-mode: bicubic; 617 | vertical-align: middle; 618 | } 619 | 620 | /* Correct overflow displayed oddly in IE9 */ 621 | svg:not(:root) { 622 | overflow: hidden; 623 | } 624 | 625 | /* @group Figures */ 626 | /* ========================================================================== */ 627 | figure { 628 | margin: 0; 629 | } 630 | 631 | /* @group Quotes */ 632 | /* ========================================================================== */ 633 | q { 634 | quotes: none; 635 | } 636 | 637 | q:before, q:after { 638 | content: ""; 639 | content: none; 640 | } 641 | 642 | q, cite, blockquote { 643 | font-style: italic; 644 | } 645 | 646 | /* @group Code */ 647 | /* ========================================================================== */ 648 | pre { 649 | white-space: pre; 650 | white-space: pre-wrap; 651 | word-wrap: break-word; 652 | } 653 | 654 | code { 655 | padding: 0 .2em; 656 | color: #333333; 657 | background-color: #f3f3f3; 658 | } 659 | 660 | pre, .code { 661 | color: #d4d4d4; 662 | background-color: #333333; 663 | margin-bottom: 0.75em; 664 | padding: 1em 1.5em; 665 | } 666 | 667 | pre code, .code code { 668 | background-color: transparent; 669 | border: none; 670 | padding: 0; 671 | } 672 | 673 | .code li { 674 | list-style-type: decimal-leading-zero; 675 | } 676 | 677 | /* ========================================================================== */ 678 | /* @group Tables */ 679 | /* ========================================================================== */ 680 | table { 681 | border-collapse: collapse; 682 | border-spacing: 0; 683 | } 684 | 685 | td { 686 | vertical-align: top; 687 | } 688 | 689 | /* ========================================================================== */ 690 | /* @group Forms */ 691 | /* ========================================================================== */ 692 | fieldset { 693 | border: 0; 694 | margin: 0; 695 | padding: 0; 696 | } 697 | 698 | textarea { 699 | resize: vertical; 700 | } 701 | 702 | /* ========================================================================== */ 703 | /* @group Layout */ 704 | /* ========================================================================== */ 705 | /* ========================================================================== */ 706 | /* @group Layout Helpers */ 707 | /* ========================================================================== */ 708 | .l-constrained { 709 | display: block; 710 | width: 95%; 711 | max-width: 720px; 712 | margin: 0 auto; 713 | } 714 | @media only screen and (min-width: 35em) { 715 | .l-constrained { 716 | width: 90%; 717 | } 718 | } 719 | 720 | /* ========================================================================== */ 721 | /* @group Header */ 722 | /* ========================================================================== */ 723 | [role="banner"] { 724 | background-color: #e6e6e6; 725 | border-bottom: 1px solid #d9d9d9; 726 | padding: 1em 0 1em; 727 | margin-bottom: 1.5em; 728 | } 729 | 730 | .branding-logo { 731 | margin: 0; 732 | font-size: 24px; 733 | font-size: 1.5rem; 734 | } 735 | 736 | /* ========================================================================== */ 737 | /* @group Main */ 738 | /* ========================================================================== */ 739 | /* ========================================================================== */ 740 | /* @group Footer */ 741 | /* ========================================================================== */ 742 | [role="contentinfo"] { 743 | clear: both; 744 | font-size: 13px; 745 | font-size: 0.8125rem; 746 | margin-top: 1.5em; 747 | margin-bottom: 1em; 748 | padding-top: .5em; 749 | border-top: 1px solid #d9d9d9; 750 | } 751 | 752 | /* ========================================================================== */ 753 | /* @group Modules */ 754 | /* ========================================================================== */ 755 | /* ========================================================================== */ 756 | /* @group Text */ 757 | /* ========================================================================== */ 758 | .lead { 759 | font-size: 120%; 760 | line-height: 1.3; 761 | } 762 | 763 | .initialism { 764 | font-size: 85%; 765 | text-transform: uppercase; 766 | } 767 | 768 | .note { 769 | color: #666666; 770 | font-style: italic; 771 | font-size: 80%; 772 | margin-bottom: .5em; 773 | } 774 | 775 | .more { 776 | font-weight: bold; 777 | } 778 | .more::after { 779 | content: '\2192'; 780 | margin-left: .5em; 781 | } 782 | 783 | /* ========================================================================== */ 784 | /* @group Opt-in Typography */ 785 | /* ========================================================================== */ 786 | .copy a { 787 | border-bottom: 1px dotted black; 788 | } 789 | 790 | /* ========================================================================== */ 791 | /* @group Navigation */ 792 | /* ========================================================================== */ 793 | .nav, .nav ul, 794 | nav ul, nav ol { 795 | list-style: none; 796 | margin: 0; 797 | padding: 0; 798 | } 799 | .nav > li, .nav > li > a, .nav ul > li, .nav ul > li > a, 800 | nav ul > li, 801 | nav ul > li > a, nav ol > li, nav ol > li > a { 802 | display: inline-block; 803 | vertical-align: middle; 804 | } 805 | 806 | .nav-stacked > li { 807 | display: list-item; 808 | } 809 | .nav-stacked > li > a { 810 | display: block; 811 | } 812 | 813 | .nav-banner { 814 | text-align: center; 815 | } 816 | 817 | .nav-inline li::before { 818 | color: #666666; 819 | content: " | "; 820 | margin: 0 .5em 0 .3em; 821 | } 822 | .nav-inline li:first-child::before { 823 | content: ""; 824 | margin: 0; 825 | } 826 | 827 | /* ========================================================================== */ 828 | /* @group Buttons */ 829 | /* ========================================================================== */ 830 | .btn { 831 | margin: 0; 832 | padding: 0; 833 | border: 0 none; 834 | display: inline-block; 835 | vertical-align: middle; 836 | white-space: nowrap; 837 | font-size: 100%; 838 | cursor: pointer; 839 | overflow: visible; 840 | height: 2em; 841 | line-height: 2; 842 | padding-right: .75em; 843 | padding-left: .75em; 844 | color: white; 845 | background-color: #2b306a; 846 | border-radius: 5%; 847 | } 848 | 849 | .btn, 850 | .btn:hover, 851 | .btn:active, 852 | .btn:focus, 853 | .btn:visited { 854 | color: white; 855 | text-decoration: none; 856 | } 857 | 858 | .btn:hover, 859 | .btn:active { 860 | background-color: #1c2046; 861 | } 862 | 863 | .btn:active, 864 | .btn:focus { 865 | outline: none; 866 | } 867 | 868 | /* ========================================================================== */ 869 | /* @group State (& Helpers) */ 870 | /* ========================================================================== */ 871 | /* 872 | * Image replacement 873 | */ 874 | .ir { 875 | background-color: transparent; 876 | border: 0; 877 | overflow: hidden; 878 | *text-indent: -9999px; 879 | } 880 | .ir:before { 881 | content: ""; 882 | display: block; 883 | width: 0; 884 | height: 150%; 885 | } 886 | 887 | /* 888 | * Hide from both screenreaders and browsers: h5bp.com/u 889 | */ 890 | .hidden, 891 | .is-hidden { 892 | display: none !important; 893 | visibility: hidden; 894 | } 895 | 896 | /* 897 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 898 | * 899 | * .focassable Extends the .visuallyhidden class to allow the element to be focusable 900 | * when navigated to via the keyboard: h5bp.com/p 901 | */ 902 | .visuallyhidden, 903 | .is-visuallyhidden { 904 | border: 0; 905 | clip: rect(0 0 0 0); 906 | height: 1px; 907 | margin: -1px; 908 | overflow: hidden; 909 | padding: 0; 910 | position: absolute; 911 | width: 1px; 912 | } 913 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus, 914 | .is-visuallyhidden.focusable:active, 915 | .is-visuallyhidden.focusable:focus { 916 | clip: auto; 917 | height: auto; 918 | margin: 0; 919 | overflow: visible; 920 | position: static; 921 | width: auto; 922 | } 923 | 924 | /* 925 | * Hide visually and from screenreaders, but maintain layout 926 | */ 927 | .invisible, 928 | .is-invisible { 929 | visibility: hidden; 930 | } 931 | 932 | /* 933 | * Clearfix: contain floats 934 | */ 935 | .group, 936 | .l-constrained, 937 | .cf, .clearfix { 938 | *zoom: 1; 939 | } 940 | .group:before, .group:after, 941 | .l-constrained:before, 942 | .l-constrained:after, 943 | .cf:before, 944 | .cf:after, .clearfix:before, .clearfix:after { 945 | content: " "; 946 | display: table; 947 | } 948 | .group:after, 949 | .l-constrained:after, 950 | .cf:after, .clearfix:after { 951 | clear: both; 952 | } 953 | 954 | .clear { 955 | clear: both; 956 | } 957 | 958 | /* ========================================================================== 959 | Print styles. 960 | Inlined to avoid required HTTP connection: h5bp.com/r 961 | ========================================================================== */ 962 | @media print { 963 | * { 964 | background: transparent !important; 965 | color: #000 !important; 966 | /* Black prints faster: h5bp.com/s */ 967 | box-shadow: none !important; 968 | text-shadow: none !important; 969 | } 970 | 971 | a, 972 | a:visited { 973 | text-decoration: underline; 974 | } 975 | 976 | a[href]:after { 977 | content: " (" attr(href) ")"; 978 | } 979 | 980 | abbr[title]:after { 981 | content: " (" attr(title) ")"; 982 | } 983 | 984 | /* 985 | * Don't show links for images, or javascript/internal links 986 | */ 987 | .ir a:after, 988 | a[href^="javascript:"]:after, 989 | a[href^="#"]:after { 990 | content: ""; 991 | } 992 | 993 | pre, 994 | blockquote { 995 | border: 1px solid #999; 996 | page-break-inside: avoid; 997 | } 998 | 999 | thead { 1000 | display: table-header-group; 1001 | /* h5bp.com/t */ 1002 | } 1003 | 1004 | tr, 1005 | img { 1006 | page-break-inside: avoid; 1007 | } 1008 | 1009 | img { 1010 | max-width: 100% !important; 1011 | } 1012 | 1013 | @page { 1014 | margin: 0.5cm; 1015 | } 1016 | 1017 | p, 1018 | h2, 1019 | h3 { 1020 | orphans: 3; 1021 | widows: 3; 1022 | } 1023 | 1024 | h2, 1025 | h3 { 1026 | page-break-after: avoid; 1027 | } 1028 | } 1029 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | /** 3 | * 1. Set default font family to sans-serif. 4 | * 2. Prevent iOS text size adjust after orientation change, without disabling 5 | * user zoom. 6 | */ 7 | html { 8 | font-family: sans-serif; 9 | /* 1 */ 10 | -ms-text-size-adjust: 100%; 11 | /* 2 */ 12 | -webkit-text-size-adjust: 100%; 13 | /* 2 */ 14 | } 15 | 16 | /** 17 | * Remove default margin. 18 | */ 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | /** 26 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 27 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 28 | * Correct `block` display not defined for `main` in IE 11. 29 | */ 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | audio, 50 | canvas, 51 | progress, 52 | video { 53 | display: inline-block; 54 | /* 1 */ 55 | vertical-align: baseline; 56 | /* 2 */ 57 | } 58 | 59 | /** 60 | * Prevent modern browsers from displaying `audio` without controls. 61 | * Remove excess height in iOS 5 devices. 62 | */ 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Address `[hidden]` styling not present in IE 8/9/10. 70 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 71 | */ 72 | [hidden], 73 | template { 74 | display: none; 75 | } 76 | 77 | /* Links 78 | ========================================================================== */ 79 | /** 80 | * Remove the gray background color from active links in IE 10. 81 | */ 82 | a { 83 | background: transparent; 84 | } 85 | 86 | /** 87 | * Improve readability when focused and also mouse hovered in all browsers. 88 | */ 89 | a:active, 90 | a:hover { 91 | outline: 0; 92 | } 93 | 94 | /* Text-level semantics 95 | ========================================================================== */ 96 | /** 97 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 98 | */ 99 | abbr[title] { 100 | border-bottom: 1px dotted; 101 | } 102 | 103 | /** 104 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 105 | */ 106 | b, 107 | strong { 108 | font-weight: bold; 109 | } 110 | 111 | /** 112 | * Address styling not present in Safari and Chrome. 113 | */ 114 | dfn { 115 | font-style: italic; 116 | } 117 | 118 | /** 119 | * Address variable `h1` font-size and margin within `section` and `article` 120 | * contexts in Firefox 4+, Safari, and Chrome. 121 | */ 122 | h1 { 123 | font-size: 2em; 124 | margin: 0.67em 0; 125 | } 126 | 127 | /** 128 | * Address styling not present in IE 8/9. 129 | */ 130 | mark { 131 | background: #ff0; 132 | color: #000; 133 | } 134 | 135 | /** 136 | * Address inconsistent and variable font size in all browsers. 137 | */ 138 | small { 139 | font-size: 80%; 140 | } 141 | 142 | /** 143 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 144 | */ 145 | sub, 146 | sup { 147 | font-size: 75%; 148 | line-height: 0; 149 | position: relative; 150 | vertical-align: baseline; 151 | } 152 | 153 | sup { 154 | top: -0.5em; 155 | } 156 | 157 | sub { 158 | bottom: -0.25em; 159 | } 160 | 161 | /* Embedded content 162 | ========================================================================== */ 163 | /** 164 | * Remove border when inside `a` element in IE 8/9/10. 165 | */ 166 | img { 167 | border: 0; 168 | } 169 | 170 | /** 171 | * Correct overflow not hidden in IE 9/10/11. 172 | */ 173 | svg:not(:root) { 174 | overflow: hidden; 175 | } 176 | 177 | /* Grouping content 178 | ========================================================================== */ 179 | /** 180 | * Address margin not present in IE 8/9 and Safari. 181 | */ 182 | figure { 183 | margin: 1em 40px; 184 | } 185 | 186 | /** 187 | * Address differences between Firefox and other browsers. 188 | */ 189 | hr { 190 | -moz-box-sizing: content-box; 191 | box-sizing: content-box; 192 | height: 0; 193 | } 194 | 195 | /** 196 | * Contain overflow in all browsers. 197 | */ 198 | pre { 199 | overflow: auto; 200 | } 201 | 202 | /** 203 | * Address odd `em`-unit font size rendering in all browsers. 204 | */ 205 | code, 206 | kbd, 207 | pre, 208 | samp { 209 | font-family: monospace, monospace; 210 | font-size: 1em; 211 | } 212 | 213 | /* Forms 214 | ========================================================================== */ 215 | /** 216 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 217 | * styling of `select`, unless a `border` property is set. 218 | */ 219 | /** 220 | * 1. Correct color not being inherited. 221 | * Known issue: affects color of disabled elements. 222 | * 2. Correct font properties not being inherited. 223 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 224 | */ 225 | button, 226 | input, 227 | optgroup, 228 | select, 229 | textarea { 230 | color: inherit; 231 | /* 1 */ 232 | font: inherit; 233 | /* 2 */ 234 | margin: 0; 235 | /* 3 */ 236 | } 237 | 238 | /** 239 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 240 | */ 241 | button { 242 | overflow: visible; 243 | } 244 | 245 | /** 246 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 247 | * All other form control elements do not inherit `text-transform` values. 248 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 249 | * Correct `select` style inheritance in Firefox. 250 | */ 251 | button, 252 | select { 253 | text-transform: none; 254 | } 255 | 256 | /** 257 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 258 | * and `video` controls. 259 | * 2. Correct inability to style clickable `input` types in iOS. 260 | * 3. Improve usability and consistency of cursor style between image-type 261 | * `input` and others. 262 | */ 263 | button, 264 | html input[type="button"], 265 | input[type="reset"], 266 | input[type="submit"] { 267 | -webkit-appearance: button; 268 | /* 2 */ 269 | cursor: pointer; 270 | /* 3 */ 271 | } 272 | 273 | /** 274 | * Re-set default cursor for disabled elements. 275 | */ 276 | button[disabled], 277 | html input[disabled] { 278 | cursor: default; 279 | } 280 | 281 | /** 282 | * Remove inner padding and border in Firefox 4+. 283 | */ 284 | button::-moz-focus-inner, 285 | input::-moz-focus-inner { 286 | border: 0; 287 | padding: 0; 288 | } 289 | 290 | /** 291 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 292 | * the UA stylesheet. 293 | */ 294 | input { 295 | line-height: normal; 296 | } 297 | 298 | /** 299 | * It's recommended that you don't attempt to style these elements. 300 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 301 | * 302 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 303 | * 2. Remove excess padding in IE 8/9/10. 304 | */ 305 | input[type="checkbox"], 306 | input[type="radio"] { 307 | box-sizing: border-box; 308 | /* 1 */ 309 | padding: 0; 310 | /* 2 */ 311 | } 312 | 313 | /** 314 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 315 | * `font-size` values of the `input`, it causes the cursor style of the 316 | * decrement button to change from `default` to `text`. 317 | */ 318 | input[type="number"]::-webkit-inner-spin-button, 319 | input[type="number"]::-webkit-outer-spin-button { 320 | height: auto; 321 | } 322 | 323 | /** 324 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 325 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 326 | * (include `-moz` to future-proof). 327 | */ 328 | input[type="search"] { 329 | -webkit-appearance: textfield; 330 | /* 1 */ 331 | -moz-box-sizing: content-box; 332 | -webkit-box-sizing: content-box; 333 | /* 2 */ 334 | box-sizing: content-box; 335 | } 336 | 337 | /** 338 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 339 | * Safari (but not Chrome) clips the cancel button when the search input has 340 | * padding (and `textfield` appearance). 341 | */ 342 | input[type="search"]::-webkit-search-cancel-button, 343 | input[type="search"]::-webkit-search-decoration { 344 | -webkit-appearance: none; 345 | } 346 | 347 | /** 348 | * Define consistent border, margin, and padding. 349 | */ 350 | fieldset { 351 | border: 1px solid #c0c0c0; 352 | margin: 0 2px; 353 | padding: 0.35em 0.625em 0.75em; 354 | } 355 | 356 | /** 357 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 358 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 359 | */ 360 | legend { 361 | border: 0; 362 | /* 1 */ 363 | padding: 0; 364 | /* 2 */ 365 | } 366 | 367 | /** 368 | * Remove default vertical scrollbar in IE 8/9/10/11. 369 | */ 370 | textarea { 371 | overflow: auto; 372 | } 373 | 374 | /** 375 | * Don't inherit the `font-weight` (applied by a rule above). 376 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 377 | */ 378 | optgroup { 379 | font-weight: bold; 380 | } 381 | 382 | /* Tables 383 | ========================================================================== */ 384 | /** 385 | * Remove most spacing between table cells. 386 | */ 387 | table { 388 | border-collapse: collapse; 389 | border-spacing: 0; 390 | } 391 | 392 | td, 393 | th { 394 | padding: 0; 395 | } 396 | 397 | /* ========================================================================== */ 398 | /* @group Base */ 399 | /* ========================================================================== */ 400 | /* ========================================================================== */ 401 | /* @group Global Colors */ 402 | /* ========================================================================== */ 403 | body { 404 | color: #444444; 405 | background-color: white; 406 | } 407 | 408 | /* ========================================================================== */ 409 | /* @group Font Stacks */ 410 | /* ========================================================================== */ 411 | body { 412 | font: 400 100%/1.5 sans-serif; 413 | } 414 | 415 | /* Default font stack */ 416 | html, 417 | body, 418 | button, 419 | input, 420 | select, 421 | textarea { 422 | font-family: sans-serif; 423 | } 424 | 425 | /* Display font stack */ 426 | h1, h2, h3, h4, h5, h6 { 427 | font-family: "Helvetica Neue", sans-serif; 428 | } 429 | 430 | /* Alternate font stack */ 431 | blockquote, figcaption { 432 | font-family: Georgia, serif; 433 | } 434 | 435 | /* Caption font stack, should be suitable for smaller sizes */ 436 | [role=contentinfo], .caption { 437 | font-family: Verdana, sans-serif; 438 | } 439 | 440 | /* Monospace font stack, for code samples and preformatted content */ 441 | pre, code, kbd, samp { 442 | font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", "Droid Mono", monospace; 443 | } 444 | 445 | /* ========================================================================== */ 446 | /* @group Typography */ 447 | /* ========================================================================== */ 448 | /* @group Headings */ 449 | /* ========================================================================== */ 450 | h1, h2, h3, h4, h5, h6 { 451 | font-style: normal; 452 | } 453 | 454 | h1, h2, h3 { 455 | font-weight: 700; 456 | } 457 | 458 | h4, h5, h6 { 459 | font-weight: 400; 460 | } 461 | 462 | h1 { 463 | font-size: 2em; 464 | margin: 0 0 0.65625em 0; 465 | } 466 | 467 | h2 { 468 | font-size: 1.75em; 469 | margin: 0.75em 0 0.25em 0; 470 | } 471 | 472 | h3 { 473 | font-size: 1.5em; 474 | margin: 0.875em 0 0.29167em 0; 475 | } 476 | 477 | h4 { 478 | font-size: 1.3125em; 479 | margin: 1em 0 0.33333em 0; 480 | } 481 | 482 | h5 { 483 | font-size: 1.125em; 484 | margin: 1.16667em 0 0.38889em 0; 485 | } 486 | 487 | h5 { 488 | font-size: 1em; 489 | margin: 1.3125em 0 0.4375em 0; 490 | } 491 | 492 | /* @group Links */ 493 | /* ========================================================================== */ 494 | a { 495 | text-decoration: none; 496 | word-wrap: break-word; 497 | font-weight: bold; 498 | } 499 | 500 | a:focus { 501 | outline: thin dotted; 502 | } 503 | 504 | a:hover, a:active { 505 | outline: 0; 506 | } 507 | 508 | a { 509 | color: black; 510 | } 511 | 512 | a:visited { 513 | color: black; 514 | } 515 | 516 | a:hover { 517 | cursor: pointer; 518 | color: #dddddd; 519 | } 520 | 521 | a:active { 522 | color: #dddddd; 523 | } 524 | 525 | /* @group Text Level Elements */ 526 | /* ========================================================================== */ 527 | /* Default margins */ 528 | p, ul, ol, dl { 529 | margin: 0 0 0.75em 0; 530 | } 531 | 532 | /* Lists */ 533 | /* Text Marking */ 534 | b, strong, mark { 535 | font-weight: bold; 536 | } 537 | 538 | dfn, mark { 539 | font-style: italic; 540 | } 541 | 542 | ins, mark { 543 | color: #0069ff; 544 | background-color: #ff9600; 545 | } 546 | 547 | ins { 548 | text-decoration: none; 549 | } 550 | 551 | del { 552 | text-decoration: line-through; 553 | } 554 | 555 | abbr[title], dfn[title] { 556 | cursor: help; 557 | border-bottom: 1px dotted; 558 | } 559 | 560 | sub, sup { 561 | font-size: 75%; 562 | line-height: 0; 563 | position: relative; 564 | vertical-align: baseline; 565 | } 566 | 567 | sup { 568 | top: -0.5em; 569 | } 570 | 571 | sub { 572 | bottom: -0.25em; 573 | } 574 | 575 | /* 576 | * A better looking default horizontal rule 577 | */ 578 | hr { 579 | display: block; 580 | height: 1px; 581 | border: 0; 582 | border-top: 1px solid #eeeeff; 583 | margin: 0.75em 0; 584 | padding: 0; 585 | } 586 | 587 | /* 588 | * Remove text-shadow in selection highlight: h5bp.com/i 589 | * These selection rule sets have to be separate. 590 | * Customize the background color to match your design. 591 | */ 592 | ::-moz-selection { 593 | background: #b3d4fc; 594 | text-shadow: none; 595 | } 596 | 597 | ::selection { 598 | background: #b3d4fc; 599 | text-shadow: none; 600 | } 601 | 602 | /* @group Embedded Content */ 603 | /* ========================================================================== */ 604 | img { 605 | vertical-align: middle; 606 | } 607 | 608 | /* _width hack is for IE6 and below */ 609 | img, embed, object, video { 610 | max-width: 100%; 611 | _width: 100%; 612 | } 613 | 614 | img { 615 | border: 0; 616 | -ms-interpolation-mode: bicubic; 617 | vertical-align: middle; 618 | } 619 | 620 | /* Correct overflow displayed oddly in IE9 */ 621 | svg:not(:root) { 622 | overflow: hidden; 623 | } 624 | 625 | /* @group Figures */ 626 | /* ========================================================================== */ 627 | figure { 628 | margin: 0; 629 | } 630 | 631 | /* @group Quotes */ 632 | /* ========================================================================== */ 633 | q { 634 | quotes: none; 635 | } 636 | 637 | q:before, q:after { 638 | content: ""; 639 | content: none; 640 | } 641 | 642 | q, cite, blockquote { 643 | font-style: italic; 644 | } 645 | 646 | /* @group Code */ 647 | /* ========================================================================== */ 648 | pre { 649 | white-space: pre; 650 | white-space: pre-wrap; 651 | word-wrap: break-word; 652 | } 653 | 654 | code { 655 | padding: 0 .2em; 656 | color: #333333; 657 | background-color: #f3f3f3; 658 | } 659 | 660 | pre, .code { 661 | color: #d4d4d4; 662 | background-color: #333333; 663 | margin-bottom: 0.75em; 664 | padding: 1em 1.5em; 665 | } 666 | 667 | pre code, .code code { 668 | background-color: transparent; 669 | border: none; 670 | padding: 0; 671 | } 672 | 673 | .code li { 674 | list-style-type: decimal-leading-zero; 675 | } 676 | 677 | /* ========================================================================== */ 678 | /* @group Tables */ 679 | /* ========================================================================== */ 680 | table { 681 | border-collapse: collapse; 682 | border-spacing: 0; 683 | } 684 | 685 | td { 686 | vertical-align: top; 687 | } 688 | 689 | /* ========================================================================== */ 690 | /* @group Forms */ 691 | /* ========================================================================== */ 692 | fieldset { 693 | border: 0; 694 | margin: 0; 695 | padding: 0; 696 | } 697 | 698 | textarea { 699 | resize: vertical; 700 | } 701 | 702 | /* ========================================================================== */ 703 | /* @group Layout */ 704 | /* ========================================================================== */ 705 | /* ========================================================================== */ 706 | /* @group Layout Helpers */ 707 | /* ========================================================================== */ 708 | .l-constrained { 709 | display: block; 710 | width: 95%; 711 | max-width: 720px; 712 | margin: 0 auto; 713 | } 714 | @media only screen and (min-width: 35em) { 715 | .l-constrained { 716 | width: 90%; 717 | } 718 | } 719 | 720 | /* ========================================================================== */ 721 | /* @group Header */ 722 | /* ========================================================================== */ 723 | [role="banner"] { 724 | background-color: #e6e6e6; 725 | border-bottom: 1px solid #d9d9d9; 726 | padding: 1em 0 1em; 727 | margin-bottom: 1.5em; 728 | } 729 | 730 | .branding-logo { 731 | margin: 0; 732 | font-size: 24px; 733 | font-size: 1.5rem; 734 | } 735 | 736 | /* ========================================================================== */ 737 | /* @group Main */ 738 | /* ========================================================================== */ 739 | /* ========================================================================== */ 740 | /* @group Footer */ 741 | /* ========================================================================== */ 742 | [role="contentinfo"] { 743 | clear: both; 744 | font-size: 13px; 745 | font-size: 0.8125rem; 746 | margin-top: 1.5em; 747 | margin-bottom: 1em; 748 | padding-top: .5em; 749 | border-top: 1px solid #d9d9d9; 750 | } 751 | 752 | /* ========================================================================== */ 753 | /* @group Modules */ 754 | /* ========================================================================== */ 755 | /* ========================================================================== */ 756 | /* @group Text */ 757 | /* ========================================================================== */ 758 | .lead { 759 | font-size: 120%; 760 | line-height: 1.3; 761 | } 762 | 763 | .initialism { 764 | font-size: 85%; 765 | text-transform: uppercase; 766 | } 767 | 768 | .note { 769 | color: #666666; 770 | font-style: italic; 771 | font-size: 80%; 772 | margin-bottom: .5em; 773 | } 774 | 775 | .more { 776 | font-weight: bold; 777 | } 778 | .more::after { 779 | content: '\2192'; 780 | margin-left: .5em; 781 | } 782 | 783 | /* ========================================================================== */ 784 | /* @group Opt-in Typography */ 785 | /* ========================================================================== */ 786 | .copy a { 787 | border-bottom: 1px dotted black; 788 | } 789 | 790 | /* ========================================================================== */ 791 | /* @group Navigation */ 792 | /* ========================================================================== */ 793 | .nav, .nav ul, 794 | nav ul, nav ol { 795 | list-style: none; 796 | margin: 0; 797 | padding: 0; 798 | } 799 | .nav > li, .nav > li > a, .nav ul > li, .nav ul > li > a, 800 | nav ul > li, 801 | nav ul > li > a, nav ol > li, nav ol > li > a { 802 | display: inline-block; 803 | vertical-align: middle; 804 | } 805 | 806 | .nav-stacked > li { 807 | display: list-item; 808 | } 809 | .nav-stacked > li > a { 810 | display: block; 811 | } 812 | 813 | .nav-banner { 814 | text-align: center; 815 | } 816 | 817 | .nav-inline li::before { 818 | color: #666666; 819 | content: " | "; 820 | margin: 0 .5em 0 .3em; 821 | } 822 | .nav-inline li:first-child::before { 823 | content: ""; 824 | margin: 0; 825 | } 826 | 827 | /* ========================================================================== */ 828 | /* @group Buttons */ 829 | /* ========================================================================== */ 830 | .btn { 831 | margin: 0; 832 | padding: 0; 833 | border: 0 none; 834 | display: inline-block; 835 | vertical-align: middle; 836 | white-space: nowrap; 837 | font-size: 100%; 838 | cursor: pointer; 839 | overflow: visible; 840 | height: 2em; 841 | line-height: 2; 842 | padding-right: .75em; 843 | padding-left: .75em; 844 | color: white; 845 | background-color: #2b306a; 846 | border-radius: 5%; 847 | } 848 | 849 | .btn, 850 | .btn:hover, 851 | .btn:active, 852 | .btn:focus, 853 | .btn:visited { 854 | color: white; 855 | text-decoration: none; 856 | } 857 | 858 | .btn:hover, 859 | .btn:active { 860 | background-color: #1c2046; 861 | } 862 | 863 | .btn:active, 864 | .btn:focus { 865 | outline: none; 866 | } 867 | 868 | /* ========================================================================== */ 869 | /* @group State (& Helpers) */ 870 | /* ========================================================================== */ 871 | /* 872 | * Image replacement 873 | */ 874 | .ir { 875 | background-color: transparent; 876 | border: 0; 877 | overflow: hidden; 878 | *text-indent: -9999px; 879 | } 880 | .ir:before { 881 | content: ""; 882 | display: block; 883 | width: 0; 884 | height: 150%; 885 | } 886 | 887 | /* 888 | * Hide from both screenreaders and browsers: h5bp.com/u 889 | */ 890 | .hidden, 891 | .is-hidden { 892 | display: none !important; 893 | visibility: hidden; 894 | } 895 | 896 | /* 897 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 898 | * 899 | * .focassable Extends the .visuallyhidden class to allow the element to be focusable 900 | * when navigated to via the keyboard: h5bp.com/p 901 | */ 902 | .visuallyhidden, 903 | .is-visuallyhidden { 904 | border: 0; 905 | clip: rect(0 0 0 0); 906 | height: 1px; 907 | margin: -1px; 908 | overflow: hidden; 909 | padding: 0; 910 | position: absolute; 911 | width: 1px; 912 | } 913 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus, 914 | .is-visuallyhidden.focusable:active, 915 | .is-visuallyhidden.focusable:focus { 916 | clip: auto; 917 | height: auto; 918 | margin: 0; 919 | overflow: visible; 920 | position: static; 921 | width: auto; 922 | } 923 | 924 | /* 925 | * Hide visually and from screenreaders, but maintain layout 926 | */ 927 | .invisible, 928 | .is-invisible { 929 | visibility: hidden; 930 | } 931 | 932 | /* 933 | * Clearfix: contain floats 934 | */ 935 | .group, 936 | .l-constrained, 937 | .cf, .clearfix { 938 | *zoom: 1; 939 | } 940 | .group:before, .group:after, 941 | .l-constrained:before, 942 | .l-constrained:after, 943 | .cf:before, 944 | .cf:after, .clearfix:before, .clearfix:after { 945 | content: " "; 946 | display: table; 947 | } 948 | .group:after, 949 | .l-constrained:after, 950 | .cf:after, .clearfix:after { 951 | clear: both; 952 | } 953 | 954 | .clear { 955 | clear: both; 956 | } 957 | 958 | /* ========================================================================== 959 | Print styles. 960 | Inlined to avoid required HTTP connection: h5bp.com/r 961 | ========================================================================== */ 962 | @media print { 963 | * { 964 | background: transparent !important; 965 | color: #000 !important; 966 | /* Black prints faster: h5bp.com/s */ 967 | box-shadow: none !important; 968 | text-shadow: none !important; 969 | } 970 | 971 | a, 972 | a:visited { 973 | text-decoration: underline; 974 | } 975 | 976 | a[href]:after { 977 | content: " (" attr(href) ")"; 978 | } 979 | 980 | abbr[title]:after { 981 | content: " (" attr(title) ")"; 982 | } 983 | 984 | /* 985 | * Don't show links for images, or javascript/internal links 986 | */ 987 | .ir a:after, 988 | a[href^="javascript:"]:after, 989 | a[href^="#"]:after { 990 | content: ""; 991 | } 992 | 993 | pre, 994 | blockquote { 995 | border: 1px solid #999; 996 | page-break-inside: avoid; 997 | } 998 | 999 | thead { 1000 | display: table-header-group; 1001 | /* h5bp.com/t */ 1002 | } 1003 | 1004 | tr, 1005 | img { 1006 | page-break-inside: avoid; 1007 | } 1008 | 1009 | img { 1010 | max-width: 100% !important; 1011 | } 1012 | 1013 | @page { 1014 | margin: 0.5cm; 1015 | } 1016 | 1017 | p, 1018 | h2, 1019 | h3 { 1020 | orphans: 3; 1021 | widows: 3; 1022 | } 1023 | 1024 | h2, 1025 | h3 { 1026 | page-break-after: avoid; 1027 | } 1028 | } 1029 | -------------------------------------------------------------------------------- /css/scss/_functions.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------------- // 2 | // Functions 3 | // -------------------------------------------------------- // 4 | 5 | // Relative Size 6 | // ============= 7 | // Desired font-size ÷ font-size of containing element, or more succinctly: 8 | // target ÷ context = result 9 | 10 | // Based on the relative-size function from Stitch, http://stitchcss.com/ 11 | // To use rems, pass in `rem` as the last parameter 12 | @function relative-size( $target, $context: $base-fs, $unit: em ) { 13 | 14 | @return #{$target/$context}$unit; 15 | 16 | } 17 | 18 | // Short alias 19 | @function rs( $target, $context: $base-fs, $unit: em ) { 20 | 21 | @return relative-size( $target, $context, $unit ); 22 | 23 | } 24 | -------------------------------------------------------------------------------- /css/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------------- // 2 | // Mixins 3 | // -------------------------------------------------------- // 4 | 5 | // Media Queries 6 | // ============= 7 | // @see http://jakearchibald.github.com/sass-ie/ 8 | $fix-mqs: false !default; 9 | @mixin respond-min($width) { 10 | @if $fix-mqs { 11 | @if $fix-mqs >= $width { 12 | @content; 13 | } 14 | } 15 | @else { 16 | @media screen and (min-width: $width) { 17 | @content; 18 | } 19 | } 20 | } 21 | @mixin respond-max($width) { 22 | @if $fix-mqs { 23 | @if $fix-mqs >= $width { 24 | @content; 25 | } 26 | } 27 | @else { 28 | @media screen and (max-width: $width) { 29 | @content; 30 | } 31 | } 32 | } 33 | $old-ie: false !default; 34 | @mixin old-ie { 35 | @if $old-ie { 36 | @content; 37 | } 38 | } 39 | 40 | // Font-size 41 | // ========= 42 | // rem font-size with px fallback 43 | @mixin font-size( $value ) { 44 | font-size: ( $value ) * 1px; 45 | font-size: ( $value / $base-font-size ) * 1rem; 46 | } 47 | 48 | // Box Sizing 49 | // ========== 50 | @mixin box-sizing ($type: border-box) { 51 | // content-box | border-box | inherit 52 | -webkit-box-sizing: $type; 53 | -moz-box-sizing: $type; 54 | box-sizing: $type; 55 | } 56 | @mixin border-box() { 57 | @include box-sizing( border-box ); 58 | } 59 | 60 | // Box reset 61 | // ========= 62 | // Reset border, margin, and padding 63 | @mixin box-reset() { 64 | margin: 0; 65 | padding: 0; 66 | border: 0 none; 67 | } 68 | 69 | // Button 70 | // ====== 71 | // Base button styles, based on https://github.com/csswizardry/beautons 72 | @mixin button() { 73 | @include box-reset(); 74 | display: inline-block; 75 | vertical-align: middle; 76 | white-space: nowrap; 77 | font-size: 100%; 78 | cursor: pointer; 79 | overflow: visible; 80 | } 81 | -------------------------------------------------------------------------------- /css/scss/_print.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Print styles. 3 | Inlined to avoid required HTTP connection: h5bp.com/r 4 | ========================================================================== */ 5 | 6 | @media print { 7 | * { 8 | background: transparent !important; 9 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 10 | box-shadow: none !important; 11 | text-shadow: none !important; 12 | } 13 | 14 | a, 15 | a:visited { 16 | text-decoration: underline; 17 | } 18 | 19 | a[href]:after { 20 | content: " (" attr(href) ")"; 21 | } 22 | 23 | abbr[title]:after { 24 | content: " (" attr(title) ")"; 25 | } 26 | 27 | /* 28 | * Don't show links for images, or javascript/internal links 29 | */ 30 | 31 | .ir a:after, 32 | a[href^="javascript:"]:after, 33 | a[href^="#"]:after { 34 | content: ""; 35 | } 36 | 37 | pre, 38 | blockquote { 39 | border: 1px solid #999; 40 | page-break-inside: avoid; 41 | } 42 | 43 | thead { 44 | display: table-header-group; /* h5bp.com/t */ 45 | } 46 | 47 | tr, 48 | img { 49 | page-break-inside: avoid; 50 | } 51 | 52 | img { 53 | max-width: 100% !important; 54 | } 55 | 56 | @page { 57 | margin: 0.5cm; 58 | } 59 | 60 | p, 61 | h2, 62 | h3 { 63 | orphans: 3; 64 | widows: 3; 65 | } 66 | 67 | h2, 68 | h3 { 69 | page-break-after: avoid; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /css/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | // Colour Scheme 4 | // ============= 5 | // To avoid confusion with CSS properties, 6 | // colour scheme variable names use american english _color_ 7 | 8 | // Main colour palette 9 | $color-primary: #2b306a; 10 | $color-secondary: #06c0db; 11 | $color-highlight: #ff9600; 12 | $color-muted: #eef; 13 | $color-note: #666; 14 | 15 | // Common colours 16 | $color-text: #444; 17 | $color-text-alt: #fff; 18 | $color-background: #fff; 19 | $color-border: #ddd; 20 | 21 | // Links 22 | $color-link-default: #000; 23 | $color-link-visited: #000; 24 | $color-link-hover: #ddd; 25 | $color-link-active: #ddd; 26 | 27 | // Code 28 | $color-code: #333; 29 | $color-code-background: #f3f3f3; 30 | $color-pre: #d4d4d4; 31 | $color-pre-background: #333; 32 | 33 | // Selections 34 | $color-selection: #b3d4fc; 35 | 36 | // Messages 37 | $color-message: #f4ecbb; 38 | $color-success: #2cde2c; 39 | $color-warning: #cf8600; 40 | $color-important: #d00; 41 | $color-notice: #66b; 42 | 43 | 44 | // Base Sizes 45 | // ========== 46 | 47 | // Included shorthands as these may be used a lot. 48 | 49 | $base-font-size: 16; 50 | $base-line-height: 24; 51 | $base-fs: $base-font-size; 52 | $base-lh: $base-line-height; 53 | 54 | 55 | // Font Stacks 56 | // =========== 57 | 58 | $font-family-sans: sans-serif; 59 | $font-family-serif: Georgia, serif; 60 | $font-family-display: "Helvetica Neue", sans-serif; 61 | $font-family-caption: Verdana, sans-serif; 62 | $font-family-monospace: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", "Droid Mono", monospace; 63 | 64 | $font-family-default: $font-family-sans; 65 | 66 | 67 | // Font Weights 68 | // ============ 69 | 70 | $font-weight-light: 300; 71 | $font-weight-normal: 400; 72 | $font-weight-semibold: 700; 73 | $font-weight-bold: 900; 74 | 75 | 76 | // Breakpoints 77 | // =========== 78 | // There are no common breakpoints so these are just a suggestion 79 | // You'll need to define your own breakpoints to suit your design 80 | 81 | $breakpoint-narrow: 35em; 82 | $breakpoint-mid: 48em; 83 | $breakpoint-wide: 60em; 84 | $breakpoint-huge: 100em; 85 | -------------------------------------------------------------------------------- /css/scss/common/_base.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== */ 2 | /* @group Base */ 3 | /* ========================================================================== */ 4 | 5 | /* ========================================================================== */ 6 | /* @group Global Colors */ 7 | /* ========================================================================== */ 8 | 9 | body { 10 | color: $color-text; 11 | background-color: $color-background; 12 | } 13 | 14 | 15 | /* ========================================================================== */ 16 | /* @group Font Stacks */ 17 | /* ========================================================================== */ 18 | 19 | body { 20 | font: $font-weight-normal #{$base-fs/16*100}%/($base-lh/$base-fs) sans-serif; 21 | } 22 | 23 | /* Default font stack */ 24 | html, 25 | body, 26 | button, 27 | input, 28 | select, 29 | textarea { font-family: $font-family-default; } 30 | 31 | /* Display font stack */ 32 | h1,h2,h3,h4,h5,h6 { font-family: $font-family-display; } 33 | 34 | /* Alternate font stack */ 35 | blockquote, figcaption { font-family: $font-family-serif; } 36 | 37 | /* Caption font stack, should be suitable for smaller sizes */ 38 | [role=contentinfo], .caption { font-family: $font-family-caption; } 39 | 40 | /* Monospace font stack, for code samples and preformatted content */ 41 | pre, code, kbd, samp { font-family: $font-family-monospace; } 42 | 43 | 44 | /* ========================================================================== */ 45 | /* @group Typography */ 46 | /* ========================================================================== */ 47 | 48 | /* @group Headings */ 49 | /* ========================================================================== */ 50 | 51 | h1, h2, h3, h4, h5, h6 { 52 | font-style: normal; 53 | } 54 | h1, h2, h3 { 55 | font-weight: $font-weight-semibold; 56 | } 57 | h4, h5, h6 { 58 | font-weight: $font-weight-normal; 59 | } 60 | 61 | h1 { font-size: rs(32); margin: 0 0 rs(21,32) 0; } 62 | h2 { font-size: rs(28); margin: rs(21,28) 0 rs(7,28) 0; } 63 | h3 { font-size: rs(24); margin: rs(21,24) 0 rs(7,24) 0; } 64 | h4 { font-size: rs(21); margin: rs(21,21) 0 rs(7,21) 0; } 65 | h5 { font-size: rs(18); margin: rs(21,18) 0 rs(7,18) 0; } 66 | h5 { font-size: rs(16); margin: rs(21,16) 0 rs(7,16) 0; } 67 | 68 | /* @group Links */ 69 | /* ========================================================================== */ 70 | // Declared: link, visited, hover, active 71 | 72 | a { 73 | text-decoration: none; 74 | word-wrap: break-word; 75 | font-weight: bold; 76 | } 77 | a:focus { outline: thin dotted; } 78 | a:hover, a:active { outline: 0; } 79 | 80 | a { 81 | color: $color-link-default; 82 | } 83 | a:visited { 84 | color: $color-link-visited; 85 | } 86 | a:hover { 87 | cursor: pointer; 88 | color: $color-link-hover; 89 | } 90 | a:active { 91 | color: $color-link-active; 92 | } 93 | 94 | /* @group Text Level Elements */ 95 | /* ========================================================================== */ 96 | 97 | /* Default margins */ 98 | p, ul, ol, dl { 99 | margin: 0 0 rs($base-lh/2) 0; 100 | } 101 | 102 | /* Lists */ 103 | // ul, ol, dl { padding: 0; } 104 | // ul ul, ol ol, dl dl { margin-bottom: 0; } 105 | // ul li, ol li { margin-left: rs($base-lh,$base-fs); } 106 | // ul li { list-style: disc outside; } 107 | // ol li { list-style: outside decimal; } 108 | // ul li ul { margin: rs($base-lh/2) 0 0 rs($base-fs); } 109 | // dl dt { font-weight: bold; } 110 | // dl dd { margin: 0 0 rs($base-fs) 0; } 111 | 112 | 113 | /* Text Marking */ 114 | b, strong, mark { font-weight: bold; } 115 | dfn, mark { font-style: italic; } 116 | ins, mark { 117 | color: invert($color-highlight); 118 | background-color: $color-highlight; 119 | } 120 | ins { text-decoration: none; } 121 | del { text-decoration: line-through; } 122 | 123 | abbr[title], dfn[title] { 124 | cursor: help; 125 | border-bottom: 1px dotted; 126 | } 127 | 128 | // Position subscript and superscript content without affecting line-height: h5bp.com/k 129 | sub, sup { 130 | font-size: 75%; 131 | line-height: 0; 132 | position: relative; 133 | vertical-align: baseline; 134 | } 135 | sup { top: -0.5em; } 136 | sub { bottom: -0.25em; } 137 | 138 | /* 139 | * A better looking default horizontal rule 140 | */ 141 | hr { 142 | display: block; 143 | height: 1px; 144 | border: 0; 145 | border-top: 1px solid $color-muted; 146 | margin: rs($base-lh/2) 0; 147 | padding: 0; 148 | } 149 | 150 | /* 151 | * Remove text-shadow in selection highlight: h5bp.com/i 152 | * These selection rule sets have to be separate. 153 | * Customize the background color to match your design. 154 | */ 155 | ::-moz-selection { 156 | background: $color-selection; 157 | text-shadow: none; 158 | } 159 | ::selection { 160 | background: $color-selection; 161 | text-shadow: none; 162 | } 163 | 164 | /* @group Embedded Content */ 165 | /* ========================================================================== */ 166 | 167 | img { vertical-align: middle; } 168 | 169 | /* _width hack is for IE6 and below */ 170 | img, embed, object, video { max-width: 100%; _width: 100%; } 171 | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } 172 | 173 | /* Correct overflow displayed oddly in IE9 */ 174 | svg:not(:root) { overflow: hidden; } 175 | 176 | /* @group Figures */ 177 | /* ========================================================================== */ 178 | 179 | figure { margin: 0; } 180 | 181 | /* @group Quotes */ 182 | /* ========================================================================== */ 183 | 184 | q { quotes: none; } 185 | q:before, q:after { content: ""; content: none; } 186 | q, cite, blockquote { font-style: italic; } 187 | 188 | blockquote { 189 | 190 | } 191 | 192 | /* @group Code */ 193 | /* ========================================================================== */ 194 | 195 | pre { 196 | white-space: pre; 197 | white-space: pre-wrap; 198 | word-wrap: break-word; 199 | } 200 | code { 201 | padding: 0 .2em; 202 | color: $color-code; 203 | background-color: $color-code-background; 204 | } 205 | pre, .code { 206 | color: $color-pre; 207 | background-color: $color-pre-background; 208 | margin-bottom: rs($base-lh/2); 209 | padding: 1em rs($base-lh); 210 | } 211 | pre code, .code code { 212 | background-color: transparent; 213 | border: none; 214 | padding: 0; 215 | } 216 | .code li { 217 | list-style-type: decimal-leading-zero; 218 | } 219 | 220 | /* ========================================================================== */ 221 | /* @group Tables */ 222 | /* ========================================================================== */ 223 | 224 | table { border-collapse: collapse; border-spacing: 0; } 225 | td { vertical-align: top; } 226 | 227 | /* ========================================================================== */ 228 | /* @group Forms */ 229 | /* ========================================================================== */ 230 | 231 | // Remove default fieldset styles. 232 | fieldset { 233 | border: 0; 234 | margin: 0; 235 | padding: 0; 236 | } 237 | 238 | // Allow only vertical resizing of textareas. 239 | textarea { 240 | resize: vertical; 241 | } 242 | -------------------------------------------------------------------------------- /css/scss/common/_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 | } 426 | -------------------------------------------------------------------------------- /css/scss/components/_layout.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== */ 2 | /* @group Layout */ 3 | /* ========================================================================== */ 4 | 5 | /* ========================================================================== */ 6 | /* @group Layout Helpers */ 7 | /* ========================================================================== */ 8 | 9 | @mixin l-constrained() { 10 | 11 | display: block; 12 | width: 95%; 13 | max-width: 720px; 14 | margin: 0 auto; 15 | 16 | @media only screen and (min-width: $breakpoint-narrow) { 17 | width: 90%; 18 | } 19 | 20 | } 21 | 22 | .l-constrained { 23 | @include l-constrained(); 24 | } 25 | 26 | /* ========================================================================== */ 27 | /* @group Header */ 28 | /* ========================================================================== */ 29 | 30 | [role="banner"] { 31 | background-color: darken( $color-background, 10% ); 32 | border-bottom: 1px solid darken( $color-background, 15% ); 33 | padding: 1em 0 1em; 34 | margin-bottom: 1.5em; 35 | } 36 | .branding {} 37 | .branding-logo { 38 | margin: 0; 39 | @include font-size( 24 ); 40 | } 41 | 42 | 43 | /* ========================================================================== */ 44 | /* @group Main */ 45 | /* ========================================================================== */ 46 | 47 | [role="main"] { 48 | 49 | } 50 | 51 | [role="complementary"] { 52 | 53 | } 54 | 55 | /* ========================================================================== */ 56 | /* @group Footer */ 57 | /* ========================================================================== */ 58 | 59 | [role="contentinfo"] { 60 | 61 | clear: both; 62 | @include font-size( 13 ); 63 | margin-top: 1.5em; 64 | margin-bottom: 1em; 65 | padding-top: .5em; 66 | border-top: 1px solid darken( $color-background, 15% ); 67 | 68 | } 69 | -------------------------------------------------------------------------------- /css/scss/components/_module.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== */ 2 | /* @group Modules */ 3 | /* ========================================================================== */ 4 | 5 | /* ========================================================================== */ 6 | /* @group Text */ 7 | /* ========================================================================== */ 8 | 9 | .lead { 10 | font-size: 120%; 11 | line-height: 1.3; 12 | } 13 | 14 | .initialism { 15 | font-size: 85%; 16 | text-transform: uppercase; 17 | } 18 | 19 | .note { 20 | color: $color-note; 21 | font-style: italic; 22 | font-size: 80%; 23 | margin-bottom: .5em; 24 | } 25 | 26 | .more { 27 | font-weight: bold; 28 | &::after { 29 | content: '\2192'; 30 | margin-left: .5em; 31 | } 32 | } 33 | 34 | /* ========================================================================== */ 35 | /* @group Opt-in Typography */ 36 | /* ========================================================================== */ 37 | 38 | .copy { 39 | 40 | a { 41 | border-bottom: 1px dotted $color-link-default; 42 | } 43 | 44 | } 45 | 46 | /* ========================================================================== */ 47 | /* @group Navigation */ 48 | /* ========================================================================== */ 49 | 50 | .nav, .nav ul, 51 | nav ul, nav ol { 52 | 53 | list-style: none; 54 | margin:0; padding: 0; 55 | 56 | & > li, 57 | & > li > a { 58 | display: inline-block; 59 | vertical-align: middle; 60 | } 61 | 62 | } 63 | 64 | .nav-stacked { 65 | & > li { 66 | display: list-item; 67 | } 68 | & > li > a { 69 | display: block; 70 | } 71 | } 72 | 73 | .nav-banner { 74 | text-align: center; 75 | } 76 | 77 | .nav-inline { 78 | li::before { 79 | color: $color-note; 80 | content: " | "; 81 | margin: 0 .5em 0 .3em; 82 | } 83 | li:first-child::before { content: ""; margin: 0; } 84 | } 85 | 86 | /* ========================================================================== */ 87 | /* @group Buttons */ 88 | /* ========================================================================== */ 89 | 90 | .btn { 91 | 92 | @include button(); 93 | 94 | height: 2em; 95 | line-height: 2; 96 | padding-right: .75em; 97 | padding-left: .75em; 98 | 99 | color: $color-text-alt; 100 | background-color: $color-primary; 101 | border-radius: 5%; 102 | } 103 | 104 | .btn, 105 | .btn:hover, 106 | .btn:active, 107 | .btn:focus, 108 | .btn:visited{ 109 | color: $color-text-alt; 110 | text-decoration: none; 111 | } 112 | .btn:hover, 113 | .btn:active{ 114 | background-color: darken( $color-primary, 10% ); 115 | } 116 | .btn:active, 117 | .btn:focus { 118 | outline: none; 119 | } 120 | -------------------------------------------------------------------------------- /css/scss/components/_state.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== */ 2 | /* @group State (& Helpers) */ 3 | /* ========================================================================== */ 4 | 5 | /* 6 | * Image replacement 7 | */ 8 | .ir { 9 | background-color: transparent; 10 | border: 0; 11 | overflow: hidden; 12 | // IE 6/7 fallback 13 | *text-indent: -9999px; 14 | &:before { 15 | content: ""; 16 | display: block; 17 | width: 0; 18 | height: 150%; 19 | } 20 | } 21 | 22 | /* 23 | * Hide from both screenreaders and browsers: h5bp.com/u 24 | */ 25 | .hidden, 26 | .is-hidden { 27 | display: none !important; 28 | visibility: hidden; 29 | } 30 | 31 | /* 32 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 33 | * 34 | * .focassable Extends the .visuallyhidden class to allow the element to be focusable 35 | * when navigated to via the keyboard: h5bp.com/p 36 | */ 37 | .visuallyhidden, 38 | .is-visuallyhidden { 39 | 40 | border: 0; 41 | clip: rect(0 0 0 0); 42 | height: 1px; 43 | margin: -1px; 44 | overflow: hidden; 45 | padding: 0; 46 | position: absolute; 47 | width: 1px; 48 | 49 | &.focusable:active, 50 | &.focusable:focus { 51 | clip: auto; 52 | height: auto; 53 | margin: 0; 54 | overflow: visible; 55 | position: static; 56 | width: auto; 57 | } 58 | 59 | } 60 | 61 | /* 62 | * Hide visually and from screenreaders, but maintain layout 63 | */ 64 | .invisible, 65 | .is-invisible { 66 | visibility: hidden; 67 | } 68 | 69 | /* 70 | * Clearfix: contain floats 71 | */ 72 | .group, 73 | .l-constrained, 74 | .cf, .clearfix { 75 | &:before, &:after { 76 | content: " "; 77 | display: table; 78 | } 79 | &:after { 80 | clear: both; 81 | } 82 | *zoom: 1; 83 | } 84 | 85 | .clear { clear: both; } 86 | -------------------------------------------------------------------------------- /css/scss/ie.scss: -------------------------------------------------------------------------------- 1 | // @see http://jakearchibald.github.com/sass-ie/ 2 | $old-ie: true; 3 | $fix-mqs: 65em; 4 | @import 'main'; -------------------------------------------------------------------------------- /css/scss/main.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // SCSS Toolkit v2.0.0 4 | // David Rapson 5 | // 6 | // A starter toolkit for Sass/SCSS projects 7 | 8 | 9 | // Compass Plugins 10 | // =============== 11 | 12 | // Optional, if you are using Compass 13 | @import "compass/utilities", "compass/css3"; 14 | 15 | // Sass Features 16 | // ============= 17 | 18 | @import "variables", "functions", "mixins"; 19 | 20 | 21 | // The Styles 22 | // ========== 23 | // Styles are defined in the following order & groupings: 24 | // Base, Layout, Module, State 25 | 26 | // Base styles (reset + elements) 27 | @import "common/normalize", "common/base"; 28 | 29 | // Layout 30 | // ====== 31 | // - Layout = major components, e.g., header, footer etc. 32 | // - Module = minor components, e.g., navigation bar, callout, widgets etc. 33 | // - State = a state is something that augments + overrides all other styles, e.g., success or error state 34 | 35 | @import "components/layout", "components/module", "components/state"; 36 | 37 | // Print styles 38 | @import "print"; 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scss-toolkit", 3 | "version": "2.1.0", 4 | "description": "SCSS Toolkit - A starter toolkit based on SMACSS for Sass (SCSS) projects, with optional support for Compass.", 5 | "main": "Gruntfile.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:davidrapson/scss-toolkit.git" 9 | }, 10 | "author": "David Rapson", 11 | "readmeFilename": "README.md", 12 | "devDependencies": { 13 | "grunt": "~0.4.4", 14 | "grunt-contrib-compass": "~0.7.2", 15 | "grunt-contrib-watch": "~0.6.1", 16 | "grunt-notify": "~0.2.20", 17 | "matchdep": "~0.3.0" 18 | } 19 | } 20 | --------------------------------------------------------------------------------