├── hero.png ├── .gitignore ├── process └── sass │ ├── style.scss │ ├── _base.scss │ ├── _variables.scss │ ├── modules │ ├── _backgrounds.scss │ ├── _media.scss │ ├── _tables.scss │ └── _navigation.scss │ ├── _interface.scss │ ├── _mixins.scss │ └── _normalize.scss ├── package.json ├── gulpfile.js ├── README.md └── .jshintrc /hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/sassEssentials/HEAD/hero.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | .sass-cache 5 | images/** 6 | slides/** 7 | builds/sassEssentials/css/style.css 8 | -------------------------------------------------------------------------------- /process/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "normalize"; 3 | @import "mixins"; 4 | @import "base"; 5 | @import "interface"; 6 | 7 | @import "modules/backgrounds"; 8 | @import "modules/media"; 9 | @import "modules/tables"; 10 | @import "modules/navigation"; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sassessentials", 3 | "version": "1.0.2", 4 | "description": "A website for my Sass Essential Training course on Lynda.com", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/planetoftheweb/sassEssentials.git" 8 | }, 9 | "author": "Ray Villalobos", 10 | "devDependencies": { 11 | "gulp": "^4.0.2", 12 | "gulp-jshint": "^2.1.0", 13 | "gulp-sass": "^4.0.2", 14 | "gulp-sourcemaps": "^2.6.5", 15 | "node-sass": "^4.13.1" 16 | }, 17 | "dependencies": { 18 | "browser-sync": "^2.26.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /process/sass/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 1.8rem; 9 | font-family: $font-main; 10 | color: $color-main; 11 | background-color: $color-backgrounds; 12 | } 13 | 14 | .container { 15 | width: 80%; 16 | margin: 0 auto; 17 | } 18 | 19 | $color-headlines: $blue, $purple, $green, 20 | $red, $orange, $yellow; 21 | 22 | h1,h2,h3,h4,h5,h6 { 23 | font-family: $font-highlight; 24 | } 25 | 26 | @for $item from 1 through length($color-headlines) { 27 | h#{$item} { 28 | color: nth($color-headlines, $item); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /process/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // Load Fonts 2 | 3 | @import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather|Josefin+Slab|Oswald|Bree+Serif); 4 | 5 | $offwhite: #EEE8D6; 6 | $darkblue: #022933; 7 | $yellow: #FFBA00; 8 | $blue: #0076A3; 9 | $green: #548C27; 10 | $orange: #F39856; 11 | $red: #D14348; 12 | $purple: #6D73C2; 13 | 14 | 15 | $color-main: $darkblue; 16 | $color-backgrounds: $offwhite; 17 | $color-headlines: $red; 18 | 19 | 20 | $font-main: Merriweather, Helvetica, sans-serif; 21 | $font-highlight: 'Bree Serif', Helvetica, sans-serif; 22 | 23 | //breakpoints 24 | 25 | $small: 450px; 26 | $medium: 760px; 27 | $large: 1200px; 28 | -------------------------------------------------------------------------------- /process/sass/modules/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | .background { 2 | color: $color-backgrounds; 3 | margin: 20px 0; 4 | width: 100%; 5 | display: table; 6 | 7 | .container { 8 | display: table-cell; 9 | vertical-align: bottom; 10 | padding-bottom: 20px; 11 | 12 | h1 { 13 | color: $yellow; 14 | font-family: $font-main; 15 | font-size: 5rem; 16 | line-height: 105%; 17 | margin-bottom: 0; 18 | padding: 0 10%; 19 | } 20 | 21 | p { 22 | padding: 0 10%; 23 | margin-top: 0; 24 | } 25 | } 26 | } 27 | 28 | .jumbotron { 29 | @include backImage( 30 | '../images/water.jpg', 31 | 600px); 32 | margin-top: 0; 33 | } 34 | 35 | .bridge { 36 | @include backImage( 37 | '../images/bridge.jpg', 38 | 300px, center center); 39 | } -------------------------------------------------------------------------------- /process/sass/_interface.scss: -------------------------------------------------------------------------------- 1 | $color-btn-text: $color-backgrounds; 2 | $roundness: 20px 0 20px 0; 3 | 4 | %btn { 5 | display: inline-block; 6 | padding: 6px 12px; 7 | text-align: center; 8 | white-space: nowrap; 9 | vertical-align: middle; 10 | cursor: pointer; 11 | border: none; 12 | border-radius: 4px; 13 | font-family: $font-highlight; 14 | user-select: none; 15 | color: $color-btn-text; 16 | } 17 | 18 | $color-btns: ( 19 | default: $color-main, 20 | hot: $red, 21 | cool: $blue, 22 | awesome: $purple 23 | ); 24 | 25 | @each $key, $value in $color-btns { 26 | .btn-#{$key} { 27 | @extend %btn; 28 | background-color: $value; 29 | } 30 | } 31 | 32 | .grid { 33 | @include clearfix; 34 | .item { 35 | float: left; 36 | @include imagegrid(3, 2%); 37 | } 38 | img { 39 | display: block; 40 | border-radius: nth($roundness, 1); 41 | max-width: 100%; 42 | } 43 | } -------------------------------------------------------------------------------- /process/sass/modules/_media.scss: -------------------------------------------------------------------------------- 1 | $color-item-border: $red; 2 | $color-media-head: $blue; 3 | 4 | .media { 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | 9 | .item { 10 | padding-bottom: 10px; 11 | padding-top: 10px; 12 | padding-left: 10px; 13 | border-top: 1px dotted $color-item-border; 14 | &:hover { 15 | background: $yellow; 16 | } 17 | &:last-of-type { 18 | border-bottom: 1px dotted $color-item-border; 19 | } 20 | @include clearfix; 21 | } 22 | 23 | .head { 24 | margin: 0; 25 | padding: 0; 26 | color: $color-media-head; 27 | font-size: 2rem; 28 | #typography & { 29 | color: $red; 30 | } 31 | } 32 | 33 | p { 34 | margin: 0; 35 | font-size: 1.5rem; 36 | } 37 | 38 | img { 39 | float: left; 40 | margin-right: 10px; 41 | } 42 | 43 | a { 44 | text-decoration: none; 45 | color: $color-main; 46 | } 47 | } -------------------------------------------------------------------------------- /process/sass/modules/_tables.scss: -------------------------------------------------------------------------------- 1 | $color-even-cells: transparentize($yellow, .8); 2 | 3 | .table { 4 | font-size: 1.5rem; 5 | text-align: left; 6 | width: 100%; 7 | 8 | caption { 9 | font-size: 2.5rem; 10 | text-align: left; 11 | padding-bottom: 5px; 12 | } 13 | 14 | > thead, 15 | > tbody, 16 | > tfoot { 17 | > tr { 18 | 19 | &:hover { 20 | background-color: darken(adjust-hue($color-backgrounds, -20deg), 10%); 21 | } 22 | 23 | &:nth-child(even) { 24 | background-color: $color-even-cells; 25 | 26 | &:hover { 27 | background-color: opacify($color-even-cells, .3); 28 | } 29 | } 30 | > th, 31 | > td { 32 | padding: 10px; 33 | border-bottom: 1px dotted $blue; 34 | } 35 | } 36 | } 37 | 38 | >thead >tr { 39 | background-color: $blue; 40 | color: $color-backgrounds; 41 | &:hover { 42 | background-color: complement($blue); 43 | } 44 | >th { 45 | border-bottom :0; 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /process/sass/modules/_navigation.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | header & { 3 | background-color: darken($blue, 15%); 4 | } 5 | 6 | .branding { 7 | float: left; 8 | display: none; 9 | @include break(1000px) { 10 | display: block; 11 | } 12 | } 13 | 14 | .branding h1 { 15 | font-size: 2.75rem; 16 | overflow: hidden; 17 | margin: 0; 18 | color: $yellow; 19 | } 20 | 21 | ul { 22 | list-style: none; 23 | margin: 0; 24 | padding: 0; 25 | @include clearfix; 26 | } 27 | 28 | ul li { 29 | @include break(760px) { 30 | float: right; 31 | } 32 | padding: 10px 5px; 33 | } 34 | 35 | ul li a { 36 | text-decoration: none; 37 | padding: 10px 5px; 38 | color: $color-backgrounds; 39 | 40 | &:hover { 41 | color: $yellow; 42 | } 43 | 44 | header &:hover { 45 | background-color: darken($blue, 20%); 46 | } 47 | 48 | footer & { 49 | color: white; 50 | } 51 | } 52 | footer & { 53 | margin-top:20px; 54 | min-height: 200px; 55 | background-color: darken($blue, 15%); 56 | 57 | @include break(0, 500px) { 58 | display: none; 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /process/sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin backImage($image, 2 | $height: 100vh, 3 | $bgPos: center center 4 | ) { 5 | background: linear-gradient( to bottom, 6 | rgba(0,0,0,0), 7 | rgba(0,0,0,.6)), 8 | url($image); 9 | background-repeat: no-repeat; 10 | background-position: $bgPos; 11 | background-size: cover; 12 | height: $height; 13 | } 14 | 15 | @mixin clearfix { 16 | &:before, 17 | &:after { 18 | content: ''; 19 | display: table; 20 | } 21 | &:after { 22 | clear: both; 23 | } 24 | } 25 | 26 | @mixin imagegrid($qty, $margin) { 27 | width: ((100% - (($qty - 1) * $margin))/$qty); 28 | &:nth-child(n) { 29 | margin-right: $margin; 30 | margin-bottom: $margin; 31 | } 32 | &:nth-child(#{$qty}n) { 33 | margin-right: 0; 34 | margin-bottom: 0; 35 | } 36 | } 37 | 38 | @mixin break($args...) { 39 | @if length($args) == 1 { 40 | @media (min-width: nth($args, 1)) { 41 | @content; 42 | } 43 | } @else { 44 | @media (min-width: nth($args, 1)) 45 | and (max-width: nth($args, 2)) { 46 | @content; 47 | } 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"), 2 | sass = require("gulp-sass"), 3 | sourcemaps = require("gulp-sourcemaps"), 4 | browserSync = require("browser-sync").create(), 5 | source = "./process/", 6 | dest = "./builds/sassEssentials/"; 7 | 8 | sass.compiler = require("node-sass"); 9 | 10 | function html() { 11 | return gulp.src(dest + "**/*.html"); 12 | } 13 | 14 | function js() { 15 | return gulp.src(dest + "**/*.js"); 16 | } 17 | 18 | function styles() { 19 | return gulp 20 | .src(source + "sass/style.scss") 21 | .pipe(sourcemaps.init()) 22 | .pipe( 23 | sass({ 24 | sourcemap: true, 25 | style: "compressed" 26 | }).on("error", sass.logError) 27 | ) 28 | .pipe(gulp.dest(dest + "css")); 29 | } 30 | 31 | function watch() { 32 | gulp.watch(dest + "js/**/*.js", js).on("change", browserSync.reload); 33 | gulp.watch(source + "sass/**/*", styles).on("change", browserSync.reload); 34 | gulp.watch(dest + "index.html", html).on("change", browserSync.reload); 35 | } 36 | 37 | function server() { 38 | browserSync.init({ 39 | notify: false, 40 | server: { 41 | baseDir: dest 42 | } 43 | }); 44 | 45 | gulp 46 | .watch(source + "sass/**/*.scss", styles) 47 | .on("change", browserSync.reload); 48 | gulp.watch(dest + "js/**/*.js", js).on("change", browserSync.reload); 49 | gulp.watch(dest + "index.html", html).on("change", browserSync.reload); 50 | } 51 | 52 | var build = gulp.series(gulp.parallel(js, styles, html), server, watch); 53 | 54 | gulp.task("default", build); 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sass Essential Training 2 | This is the repository for my course Sass Essential Training. The full course is available on [LinkedIn Learning](https://www.linkedin.com/learning/sass-essential-training?trk=insiders_6787408_learning) and [Lynda.com](https://www.lynda.com/Sass-tutorials/Sass-Essential-Training/375925-2.html) 3 | 4 | [![Sass Essential Training](https://media-exp2.licdn.com/media-proxy/ext?w=1200&h=675&f=n&hash=8W8fRH%2FgFTCEfqqhF%2Fgu91hdO6k%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6plxVUzgUv5K_PrkC9q0RIUJDPBy-iXCCj-NCfY3DscMXaZLSiol4TfCsEkwI1eOivSDTgEY69LcLmY4Yx3A)](https://www.linkedin.com/learning/sass-essential-training?trk=insiders_6787408_learning) 5 | 6 | Learn the fundamentals of Syntactically Awesome Stylesheets (Sass), a modern web development language that helps you write CSS better, faster, and with more advanced features. Ray Villalobos shows you the best way to install Sass and work with its main features: variables, nesting, partials, and mixins. Plus, learn how to use SassScript to create complex functions from Sass lists and control statements. 7 | 8 | ## Instructions 9 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add `/tree/BRANCH_NAME` to the URL to go to the branch you want to peek at. 10 | 11 | ## Branches 12 | The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch `02_03b` then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A `b` means that this is how the code looks at the beginning of the video, an `e` means that is how the code looked at the end of the video. 13 | 14 | You may find additional branches that correspond to other states, so for example, you may see a `t`, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The `master` branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course. 15 | 16 | ## Installing 17 | 1. Make sure you have these installed 18 | - [node.js](http://nodejs.org/) 19 | - [git](http://git-scm.com/) 20 | 2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone CLONEURL` 21 | 3. CD to the folder `cd FOLDERNAME` 22 | 4. Run `npm install` to install the project dependencies 23 | 5. Run `gulp` to start live preview server 24 | 25 | ## More Stuff 26 | Check out some of my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos?trk=insiders_6787408_learning) and [lynda.com](http://lynda.com/rayvillalobos). You can follow me on [LinkedIn](https://www.linkedin.com/in/planetoftheweb/), read [my blog](http://raybo.org), [follow me on twitter](http://twitter.com/planetoftheweb), or check out my [youtube channel](http://youtube.com/planetoftheweb). 27 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "maxerr": 50, // {int} Maximum error before stopping 4 | 5 | // Enforcing 6 | "bitwise": true, // true: Prohibit bitwise operators (&, |, ^, etc.) 7 | "camelcase": false, // true: Identifiers must be in camelCase 8 | "curly": true, // true: Require {} for every new block or scope 9 | "eqeqeq": true, // true: Require triple equals (===) for comparison 10 | "forin": true, // true: Require filtering for..in loops with obj.hasOwnProperty() 11 | "freeze": true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc. 12 | "immed": false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` 13 | "indent": 4, // {int} Number of spaces to use for indentation 14 | "latedef": false, // true: Require variables/functions to be defined before being used 15 | "newcap": false, // true: Require capitalization of all constructor functions e.g. `new F()` 16 | "noarg": true, // true: Prohibit use of `arguments.caller` and `arguments.callee` 17 | "noempty": true, // true: Prohibit use of empty blocks 18 | "nonbsp": true, // true: Prohibit "non-breaking whitespace" characters. 19 | "nonew": false, // true: Prohibit use of constructors for side-effects (without assignment) 20 | "plusplus": false, // true: Prohibit use of `++` & `--` 21 | "quotmark": false, // Quotation mark consistency: 22 | // false : do nothing (default) 23 | // true : ensure whatever is used is consistent 24 | // "single" : require single quotes 25 | // "double" : require double quotes 26 | "undef": true, // true: Require all non-global variables to be declared (prevents global leaks) 27 | "unused": true, // true: Require all defined variables be used 28 | "strict": false, // true: Requires all functions run in ES5 Strict Mode 29 | "maxparams": false, // {int} Max number of formal params allowed per function 30 | "maxdepth": false, // {int} Max depth of nested blocks (within functions) 31 | "maxstatements": false, // {int} Max number statements per function 32 | "maxcomplexity": false, // {int} Max cyclomatic complexity per function 33 | "maxlen": false, // {int} Max number of characters per line 34 | 35 | // Relaxing 36 | "browser": true, //true: Assume this is going to a browser 37 | "devel": true, //true: Allow poor man console.log debugging, make sure you remove for production 38 | "asi": false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) 39 | "boss": false, // true: Tolerate assignments where comparisons would be expected 40 | "debug": false, // true: Allow debugger statements e.g. browser breakpoints. 41 | "eqnull": false, // true: Tolerate use of `== null` 42 | "es5": false, // true: Allow ES5 syntax (ex: getters and setters) 43 | "esnext": false, // true: Allow ES.next (ES6) syntax (ex: `const`) 44 | "moz": false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) 45 | // (ex: `for each`, multiple try/catch, function expression…) 46 | "evil": false, // true: Tolerate use of `eval` and `new Function()` 47 | "expr": false, // true: Tolerate `ExpressionStatement` as Programs 48 | "funcscope": false, // true: Tolerate defining variables inside control statements 49 | "globalstrict": true, // true: Allow global "use strict" (also enables 'strict') 50 | "iterator": false, // true: Tolerate using the `__iterator__` property 51 | "lastsemic": false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block 52 | "laxbreak": false, // true: Tolerate possibly unsafe line breakings 53 | "laxcomma": false, // true: Tolerate comma-first style coding 54 | "loopfunc": false, // true: Tolerate functions being defined in loops 55 | "multistr": false, // true: Tolerate multi-line strings 56 | "noyield": false, // true: Tolerate generator functions with no yield statement in them. 57 | "notypeof": false, // true: Tolerate invalid typeof operator values 58 | "proto": false, // true: Tolerate using the `__proto__` property 59 | "scripturl": false, // true: Tolerate script-targeted URLs 60 | "shadow": false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` 61 | "sub": false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation 62 | "supernew": false, // true: Tolerate `new function () { ... };` and `new Object;` 63 | "validthis": false, // true: Tolerate using this in a non-constructor function 64 | 65 | // Custom Globals 66 | "globals": { 67 | "$": false, 68 | "jquery": false, 69 | "require": false 70 | } // additional predefined global variables 71 | } 72 | -------------------------------------------------------------------------------- /process/sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | 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 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } --------------------------------------------------------------------------------