├── src
├── fonts
│ └── font
├── scss
│ ├── components
│ │ ├── _typography.scss
│ │ ├── _icon.scss
│ │ ├── _form.scss
│ │ ├── _button.scss
│ │ ├── _variables.scss
│ │ └── _normalize.scss
│ ├── postcss.config.js
│ ├── main.scss
│ └── pages
│ │ └── base.scss
├── images
│ ├── logo.png
│ ├── icons
│ │ └── star.png
│ └── general
│ │ └── vertical-horizontal.png
├── blocks
│ ├── footer.html
│ └── header.html
├── pages
│ ├── about.html
│ ├── contact.html
│ └── index.html
└── js
│ └── index.js
├── .gitignore
├── README.md
├── package.json
└── webpack.config.js
/src/fonts/font:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .DS_Store
4 | */.DS_Store
--------------------------------------------------------------------------------
/src/scss/components/_typography.scss:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: $brand-primary;
3 | }
--------------------------------------------------------------------------------
/src/scss/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [require("autoprefixer")]
3 | };
4 |
--------------------------------------------------------------------------------
/src/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/outsourcify/HTMLWebpackStarterKit/HEAD/src/images/logo.png
--------------------------------------------------------------------------------
/src/blocks/footer.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/images/icons/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/outsourcify/HTMLWebpackStarterKit/HEAD/src/images/icons/star.png
--------------------------------------------------------------------------------
/src/images/general/vertical-horizontal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/outsourcify/HTMLWebpackStarterKit/HEAD/src/images/general/vertical-horizontal.png
--------------------------------------------------------------------------------
/src/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import 'components/normalize';
2 | @import 'components/variables';
3 | @import 'components/typography';
4 | @import 'components/icon';
5 | @import 'components/button';
6 | @import 'pages/base';
--------------------------------------------------------------------------------
/src/scss/components/_icon.scss:
--------------------------------------------------------------------------------
1 | i.icon {
2 | display: inline-block;
3 | vertical-align: middle;
4 | background-repeat: no-repeat;
5 | background-size: contain;
6 | background-position: center;
7 | }
8 |
9 | .icon-blog {
10 | display: block;
11 | }
--------------------------------------------------------------------------------
/src/blocks/header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
About
16 |
17 | <%= require('html-loader!../blocks/footer.html') %>
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/pages/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Contact
8 |
9 |
10 |
11 |
12 |
13 | <%= require('html-loader!../blocks/header.html') %>
14 |
15 | Contact
16 |
17 | <%= require('html-loader!../blocks/footer.html') %>
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/pages/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Home
8 |
9 |
10 |
11 |
12 |
13 | <%= require('html-loader!../blocks/header.html') %>
14 |
15 | Home
16 |
17 |
18 | <%= require('html-loader!../blocks/footer.html') %>
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/scss/pages/base.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Base
3 | // --------------------------------------------------
4 | body {
5 | font-family: $font-family-base;
6 | font-size: $font-size-base;
7 | }
8 |
9 | /* width */
10 |
11 | ::-webkit-scrollbar {
12 | width: 0.5rem;
13 | }
14 |
15 | /* Track */
16 |
17 | ::-webkit-scrollbar-track {
18 | background: #a4a4a4;
19 | }
20 |
21 | /* Handle */
22 |
23 | ::-webkit-scrollbar-thumb {
24 | background: #231f20;
25 | transition: 0.2s;
26 | }
27 |
28 | /* Handle on hover */
29 |
30 | ::-webkit-scrollbar-thumb:hover {
31 | background: #161616;
32 | }
--------------------------------------------------------------------------------
/src/scss/components/_form.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Forms
3 | // --------------------------------------------------
4 | form {
5 | padding: 0 1rem;
6 | }
7 |
8 | legend {
9 | display: block;
10 | width: 100%;
11 | padding: 0;
12 | margin-bottom: $line-height-computed;
13 | font-size: 1.5rem;
14 | font-family: $headings-font-family;
15 | line-height: inherit;
16 | color: $text-color;
17 | border: 0;
18 | }
19 |
20 | input,
21 | textarea,
22 | select {
23 | border: 1px solid rgb(204, 204, 204);
24 | width: calc(100% - 2px - 1rem);
25 | min-height: 3rem;
26 | font-family: $font-family-base;
27 | color: $text-color;
28 | font-size: 1.2rem;
29 | border-radius: 0;
30 | padding: 0 1rem;
31 | }
32 |
33 | ::-webkit-input-placeholder {
34 | /* Chrome/Opera/Safari */
35 | color: #ccc;
36 | font-size: 1.2rem;
37 | font-family: $font-family-base;
38 | }
39 |
40 | ::-moz-placeholder {
41 | /* Firefox 19+ */
42 | color: #ccc;
43 | font-size: 1.2rem;
44 | font-family: $font-family-base;
45 | }
46 |
47 | :-ms-input-placeholder {
48 | /* IE 10+ */
49 | color: #ccc;
50 | font-size: 1.2rem;
51 | font-family: $font-family-base;
52 | }
53 |
54 | :-moz-placeholder {
55 | /* Firefox 18- */
56 | color: #ccc;
57 | font-size: 1.2rem;
58 | font-family: $font-family-base;
59 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "outsourcify-html-starter",
3 | "version": "1.0.0",
4 | "author": "Outsourcify ",
5 | "description": "Kit to start HTML pages",
6 | "homepage": "http://outsourcify.net",
7 | "private": true,
8 | "license": "WTFPL",
9 | "scripts": {
10 | "start": "webpack-dev-server --mode development --open",
11 | "build": "webpack --mode development",
12 | "dist": "webpack --mode production",
13 | "watch": "webpack --watch --mode development"
14 | },
15 | "engines": {
16 | "node": ">= 0.12.0",
17 | "npm": ">=2.1.5"
18 | },
19 | "dependencies": {
20 | "jquery": "^3.4.1"
21 | },
22 | "devDependencies": {
23 | "@babel/core": "^7.4.0",
24 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
25 | "@babel/preset-env": "^7.0.0",
26 | "autoprefixer": "^9.6.1",
27 | "babel-loader": "^8.0.6",
28 | "clean-webpack-plugin": "^3.0.0",
29 | "copy-webpack-plugin": "^5.0.3",
30 | "css-loader": "^3.0.0",
31 | "file-loader": "^4.0.0",
32 | "html-beautify-webpack-plugin": "^1.0.5",
33 | "html-loader": "^0.5.5",
34 | "html-webpack-plugin": "^3.2.0",
35 | "img-loader": "^3.0.1",
36 | "mini-css-extract-plugin": "^0.7.0",
37 | "node-sass": "^4.12.0",
38 | "optimize-css-assets-webpack-plugin": "^5.0.3",
39 | "postcss-loader": "^3.0.0",
40 | "sass-loader": "^7.1.0",
41 | "terser-webpack-plugin": "^1.3.0",
42 | "url-loader": "^2.0.1",
43 | "webpack": "^4.35.2",
44 | "webpack-cli": "^3.3.5",
45 | "webpack-dev-server": "^3.7.2"
46 | },
47 | "browserslist": [
48 | "last 2 versions"
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 |
3 | (function($) {
4 | // Use this variable to set up the common and page specific functions. If you
5 | // rename this variable, you will also need to rename the namespace below.
6 | var Sage = {
7 | // All pages
8 | 'common': {
9 | init: function() {
10 | },
11 | finalize: function() {
12 |
13 | console.log("[Ok!]")
14 | }
15 | }
16 | };
17 |
18 | // The routing fires all common scripts, followed by the page specific scripts.
19 | // Add additional events for more control over timing e.g. a finalize event
20 | var UTIL = {
21 | fire: function(func, funcname, args) {
22 | var fire;
23 | var namespace = Sage;
24 | funcname = (funcname === undefined) ? 'init' : funcname;
25 | fire = func !== '';
26 | fire = fire && namespace[func];
27 | fire = fire && typeof namespace[func][funcname] === 'function';
28 |
29 | if (fire) {
30 | namespace[func][funcname](args);
31 | }
32 | },
33 | loadEvents: function() {
34 | // Fire common init JS
35 | UTIL.fire('common');
36 | // Fire page-specific init JS, and then finalize JS
37 | $.each(document.body.className.replace(/-/g, '_').split(/\s+/), function(i, classnm) {
38 | UTIL.fire(classnm);
39 | UTIL.fire(classnm, 'finalize');
40 | });
41 |
42 | // Fire common finalize JS
43 | UTIL.fire('common', 'finalize');
44 | //$(#sh);
45 | }
46 | };
47 |
48 | // Load Events
49 | $(document).ready(UTIL.loadEvents);
50 |
51 | })(jQuery); // Fully reference jQuery after this point.
52 |
--------------------------------------------------------------------------------
/src/scss/components/_button.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | // --------------------------------------------------
4 | .btn {
5 | border: none;
6 | background: #000;
7 | color: #fff;
8 | text-align: center;
9 | padding: 1rem;
10 | transition: 0.2s ease-in-out;
11 | font-family: $font-family-base;
12 | font-size: $font-size-base;
13 | cursor: pointer;
14 | display: inline-block;
15 | text-align: center;
16 | vertical-align: middle;
17 | touch-action: manipulation;
18 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
19 | white-space: nowrap;
20 | box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.28);
21 | transform-origin: bottom;
22 | &:hover,
23 | &:focus,
24 | &.focus {
25 | opacity: 0.8;
26 | box-shadow: none;
27 | transform: scale(0.99);
28 | }
29 | &.disabled,
30 | &[disabled],
31 | fieldset[disabled] & {
32 | cursor: no-drop;
33 | background: #ababab;
34 | }
35 | &.no-shadow {
36 | box-shadow: none;
37 | &:hover,
38 | &:focus,
39 | &.focus {
40 | opacity: 0.8;
41 | box-shadow: none;
42 | transform: none;
43 | }
44 | }
45 | }
46 |
47 | a.btn {
48 | &.disabled,
49 | fieldset[disabled] & {
50 | pointer-events: none; // Future-proof disabling of clicks on `` elements
51 | }
52 | }
53 |
54 | // Alternate buttons
55 | // --------------------------------------------------.
56 |
57 | // Block button
58 | // --------------------------------------------------
59 | .btn-block {
60 | display: block;
61 | width: 100%;
62 | }
63 |
64 | // Vertically space out multiple block buttons
65 | .btn-block+.btn-block {
66 | margin-top: 0.5rem;
67 | }
68 |
69 | // Specificity overrides
70 | input[type="submit"],
71 | input[type="reset"],
72 | input[type="button"] {
73 | &.btn-block {
74 | width: 100%;
75 | }
76 | }
--------------------------------------------------------------------------------
/src/scss/components/_variables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Variables
3 | // --------------------------------------------------
4 |
5 | //== Colors
6 | //
7 | // --------------------------------------------------
8 | $white: #fff !default;
9 | $black: #000 !default;
10 | $gray-darker: lighten($black, 13.5%) !default; // #222
11 | $gray-dark: lighten($black, 20%) !default; // #333
12 | $gray: lighten($black, 33.5%) !default; // #555
13 | $gray-light: lighten($black, 46.7%) !default; // #777
14 | $gray-lighter: lighten($black, 93.5%) !default; // #eee
15 |
16 | $brand-primary: #02474f !default;
17 | $brand: #489889 !default;
18 | $brand-light: #dfedeb !default;
19 | $brand-noteworthy: #f5dcb2 !default;
20 | $yellow: #f2dab1;
21 | $white-dark: #d9d9d9;
22 | $light-green: #c2ddd8;
23 |
24 | //== Scaffolding
25 | //
26 | //## Settings for some of the most global styles.
27 |
28 | //** Background color for ``.
29 | $body-bg: #fff !default;
30 | //** Global text color on ``.
31 | $text-color: $gray-darker !default;
32 |
33 |
34 | //** Global textual link color.
35 | $link-color: $brand-primary !default;
36 | //** Link hover color set via `darken()` function.
37 | $link-hover-color: darken($link-color, 15%) !default;
38 | //** Link hover decoration.
39 | $link-hover-decoration: underline !default;
40 |
41 |
42 |
43 | //== Typography
44 | //
45 | //## Font, line-height, and color for body text, headings, and more.
46 |
47 | $font-family-base: "Gotham Book", Helvetica, Arial, sans-serif !default;
48 |
49 |
50 | $font-size-base: 1.4rem !default;
51 | $font-size-large: 1.6rem !default;
52 | $font-size-small: 1.2rem !default;
53 |
54 | $font-size-h1: 3.6rem !default;
55 | $font-size-h2: 2.4rem !default;
56 | $font-size-h3: 1.8rem !default;
57 | $font-size-h4: 1.6rem !default;
58 | $font-size-h5: $font-size-base !default;
59 | $font-size-h6: 1.2rem !default;
60 |
61 | //** By default, this inherits from the ``.
62 | $headings-font-family-dinot: 'DINOT' !default;
63 | $headings-font-family: 'Playfair Display' !default;
64 | $headings-font-weight: 500 !default;
65 | $headings-line-height: 1.1 !default;
66 | $headings-color: inherit !default;
67 |
68 |
69 | $headings-font-family-gotham: 'Gotham' !default;
70 | //== Screen size
71 | //
72 | // NOTE: calculated from `rem` start with size iPhone5 (568px*320px)
73 | $screen-width: 42.6rem;
74 | $screen-height: 23.6rem;
75 |
76 |
77 |
78 | //== Media queries breakpoints
79 | //
80 | // For Container centered.
81 | $screen-sm: 768px !default;
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require("webpack");
2 | const path = require("path");
3 | const fs = require('fs');
4 |
5 | // include the js minification plugin
6 | const TerserPlugin = require('terser-webpack-plugin');
7 |
8 | // include the css extraction and minification plugins
9 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
10 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
11 |
12 | // include the HTML templating plugin
13 | const HTMLWebpackPlugin = require("html-webpack-plugin");
14 | const HtmlBeautifyPlugin = require('html-beautify-webpack-plugin');
15 | const CopyWebpackPlugin = require('copy-webpack-plugin');
16 |
17 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
18 |
19 | function generateHtmlPlugins (templateDir) {
20 | const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir))
21 | return templateFiles.map(item => {
22 | // Split names and extension
23 | const parts = item.split('.')
24 | const name = parts[0]
25 | const extension = parts[1]
26 | return new HTMLWebpackPlugin({
27 | filename: `${name}.html`,
28 | template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`)
29 | })
30 | })
31 | }
32 |
33 | // We will call the function like this:
34 | const htmlPlugins = generateHtmlPlugins('./src/pages')
35 |
36 | module.exports = {
37 | entry: ["./src/js/index.js", "./src/scss/main.scss"],
38 | output: {
39 | filename: "js/index.[hash:8].js",
40 | path: path.join(__dirname, "./build/")
41 | },
42 | devServer: {
43 | contentBase: "./build"
44 | },
45 | module: {
46 | rules: [
47 | // perform js babelization on all .js files
48 | {
49 | test: /\.js$/,
50 | exclude: /node_modules/,
51 | use: {
52 | loader: "babel-loader",
53 | options: {
54 | presets: ['@babel/preset-env']
55 | }
56 | }
57 | },
58 | {
59 | test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
60 | use: [{
61 | loader: 'file-loader',
62 | options: {
63 | name: '[name].[ext]',
64 | outputPath: 'fonts/',
65 | publicPath: '../'
66 | }
67 | }]
68 | },
69 | {
70 | test: /\.(svg|png|jpe?g)/i,
71 | use: [{
72 | loader: "url-loader",
73 | options: {
74 | name: "./images/[name].[ext]",
75 | limit: 5000
76 | }
77 | },
78 | {
79 | loader: "img-loader"
80 | }
81 | ]
82 | },
83 | {
84 | test: /\.css$/,
85 | use: [
86 | MiniCssExtractPlugin.loader,
87 | {
88 | loader: 'css-loader',
89 | options: {
90 | url: false,
91 | sourceMap: true
92 | }
93 | }
94 | ]
95 | },
96 | {
97 | test: /\.scss$/,
98 | use: [
99 | MiniCssExtractPlugin.loader,
100 | {
101 | loader: 'css-loader',
102 | options: {
103 | url: false,
104 | sourceMap: true
105 | }
106 | },
107 | {
108 | loader: 'sass-loader',
109 | options: {
110 | sourceMap: true
111 | }
112 | }
113 | ]
114 | }
115 | ]
116 | },
117 | plugins: [
118 | new CleanWebpackPlugin(),
119 | new MiniCssExtractPlugin({
120 | filename: "css/main.[contenthash:8].css"
121 | }),
122 | new CopyWebpackPlugin([{
123 | from: 'src/images',
124 | to: 'images'
125 | }]),
126 | new webpack.ProvidePlugin({
127 | $: "jquery",
128 | jQuery: "jquery"
129 | })
130 | ]
131 | .concat(htmlPlugins)
132 | .concat(new HtmlBeautifyPlugin({
133 | config: {
134 | html: {
135 | end_with_newline: true,
136 | indent_size: 2,
137 | indent_with_tabs: true,
138 | indent_inner_html: true,
139 | preserve_newlines: true,
140 | unformatted: ['p', 'i', 'b', 'span']
141 | }
142 | }
143 | })),
144 | optimization: {
145 | minimizer: [
146 | // enable the js minification plugin
147 | new TerserPlugin({
148 | cache: true,
149 | parallel: true,
150 | sourceMap: true,
151 | terserOptions: {
152 | output: {
153 | comments: false,
154 | },
155 | },
156 | }),
157 | // enable the css minification plugin
158 | new OptimizeCSSAssetsPlugin({})
159 | ]
160 | },
161 | resolve: {
162 | alias: {
163 | jquery: "jquery/src/jquery"
164 | }
165 | }
166 | };
--------------------------------------------------------------------------------
/src/scss/components/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in
9 | * IE on Windows Phone and in iOS.
10 | */
11 |
12 | html {
13 | line-height: 1.15; /* 1 */
14 | -ms-text-size-adjust: 100%; /* 2 */
15 | -webkit-text-size-adjust: 100%; /* 2 */
16 | font-size: 62.5%;
17 | }
18 |
19 | * {
20 | box-sizing: border-box;
21 | }
22 |
23 | /* Sections
24 | ========================================================================== */
25 |
26 | /**
27 | * Remove the margin in all browsers (opinionated).
28 | */
29 |
30 | body {
31 | margin: 0;
32 | }
33 |
34 | /**
35 | * Add the correct display in IE 9-.
36 | */
37 |
38 | article,
39 | aside,
40 | footer,
41 | header,
42 | nav,
43 | section {
44 | display: block;
45 | }
46 |
47 | /**
48 | * Correct the font size and margin on `h1` elements within `section` and
49 | * `article` contexts in Chrome, Firefox, and Safari.
50 | */
51 |
52 | h1 {
53 | font-size: 2em;
54 | margin: 0.67em 0;
55 | }
56 |
57 | /* Grouping content
58 | ========================================================================== */
59 |
60 | /**
61 | * Add the correct display in IE 9-.
62 | * 1. Add the correct display in IE.
63 | */
64 |
65 | figcaption,
66 | figure,
67 | main { /* 1 */
68 | display: block;
69 | }
70 |
71 | /**
72 | * Add the correct margin in IE 8.
73 | */
74 |
75 | figure {
76 | margin: 1em 4rem;
77 | }
78 |
79 | /**
80 | * 1. Add the correct box sizing in Firefox.
81 | * 2. Show the overflow in Edge and IE.
82 | */
83 |
84 | hr {
85 | box-sizing: content-box; /* 1 */
86 | height: 0; /* 1 */
87 | overflow: visible; /* 2 */
88 | }
89 |
90 | /**
91 | * 1. Correct the inheritance and scaling of font size in all browsers.
92 | * 2. Correct the odd `em` font sizing in all browsers.
93 | */
94 |
95 | pre {
96 | font-family: monospace, monospace; /* 1 */
97 | font-size: 1em; /* 2 */
98 | }
99 |
100 | /* Text-level semantics
101 | ========================================================================== */
102 |
103 | /**
104 | * 1. Remove the gray background on active links in IE 10.
105 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
106 | */
107 |
108 | a {
109 | background-color: transparent; /* 1 */
110 | -webkit-text-decoration-skip: objects; /* 2 */
111 | color: initial
112 | }
113 |
114 | /**
115 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
116 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
117 | */
118 |
119 | abbr[title] {
120 | border-bottom: none; /* 1 */
121 | text-decoration: underline; /* 2 */
122 | text-decoration: underline dotted; /* 2 */
123 | }
124 |
125 | /**
126 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
127 | */
128 |
129 | b,
130 | strong {
131 | font-weight: inherit;
132 | }
133 |
134 | /**
135 | * Add the correct font weight in Chrome, Edge, and Safari.
136 | */
137 |
138 | b,
139 | strong {
140 | font-weight: bolder;
141 | }
142 |
143 | /**
144 | * 1. Correct the inheritance and scaling of font size in all browsers.
145 | * 2. Correct the odd `em` font sizing in all browsers.
146 | */
147 |
148 | code,
149 | kbd,
150 | samp {
151 | font-family: monospace, monospace; /* 1 */
152 | font-size: 1em; /* 2 */
153 | }
154 |
155 | /**
156 | * Add the correct font style in Android 4.3-.
157 | */
158 |
159 | dfn {
160 | font-style: italic;
161 | }
162 |
163 | /**
164 | * Add the correct background and color in IE 9-.
165 | */
166 |
167 | mark {
168 | background-color: #ff0;
169 | color: #000;
170 | }
171 |
172 | /**
173 | * Add the correct font size in all browsers.
174 | */
175 |
176 | small {
177 | font-size: 80%;
178 | }
179 |
180 | /**
181 | * Prevent `sub` and `sup` elements from affecting the line height in
182 | * all browsers.
183 | */
184 |
185 | sub,
186 | sup {
187 | font-size: 75%;
188 | line-height: 0;
189 | position: relative;
190 | vertical-align: baseline;
191 | }
192 |
193 | sub {
194 | bottom: -0.25em;
195 | }
196 |
197 | sup {
198 | top: -0.5em;
199 | }
200 |
201 | /* Embedded content
202 | ========================================================================== */
203 |
204 | /**
205 | * Add the correct display in IE 9-.
206 | */
207 |
208 | audio,
209 | video {
210 | display: inline-block;
211 | }
212 |
213 | /**
214 | * Add the correct display in iOS 4-7.
215 | */
216 |
217 | audio:not([controls]) {
218 | display: none;
219 | height: 0;
220 | }
221 |
222 | /**
223 | * Remove the border on images inside links in IE 10-.
224 | */
225 |
226 | img {
227 | border-style: none;
228 | }
229 |
230 | /**
231 | * Hide the overflow in IE.
232 | */
233 |
234 | svg:not(:root) {
235 | overflow: hidden;
236 | }
237 |
238 | /* Forms
239 | ========================================================================== */
240 |
241 | /**
242 | * 1. Change the font styles in all browsers (opinionated).
243 | * 2. Remove the margin in Firefox and Safari.
244 | */
245 |
246 | button,
247 | input,
248 | optgroup,
249 | select,
250 | textarea {
251 | font-family: sans-serif; /* 1 */
252 | font-size: 100%; /* 1 */
253 | line-height: 1.15; /* 1 */
254 | margin: 0; /* 2 */
255 | }
256 |
257 | /**
258 | * Show the overflow in IE.
259 | * 1. Show the overflow in Edge.
260 | */
261 |
262 | button,
263 | input { /* 1 */
264 | overflow: visible;
265 | }
266 |
267 | /**
268 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
269 | * 1. Remove the inheritance of text transform in Firefox.
270 | */
271 |
272 | button,
273 | select { /* 1 */
274 | text-transform: none;
275 | }
276 |
277 | /**
278 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
279 | * controls in Android 4.
280 | * 2. Correct the inability to style clickable types in iOS and Safari.
281 | */
282 |
283 | button,
284 | html [type="button"], /* 1 */
285 | [type="reset"],
286 | [type="submit"] {
287 | -webkit-appearance: button; /* 2 */
288 | }
289 |
290 | /**
291 | * Remove the inner border and padding in Firefox.
292 | */
293 |
294 | button::-moz-focus-inner,
295 | [type="button"]::-moz-focus-inner,
296 | [type="reset"]::-moz-focus-inner,
297 | [type="submit"]::-moz-focus-inner {
298 | border-style: none;
299 | padding: 0;
300 | }
301 |
302 | /**
303 | * Restore the focus styles unset by the previous rule.
304 | */
305 |
306 | button:-moz-focusring,
307 | [type="button"]:-moz-focusring,
308 | [type="reset"]:-moz-focusring,
309 | [type="submit"]:-moz-focusring {
310 | outline: 1px dotted ButtonText;
311 | }
312 |
313 | /**
314 | * Correct the padding in Firefox.
315 | */
316 |
317 | fieldset {
318 | padding: 0.35em 0.75em 0.625em;
319 | }
320 |
321 | /**
322 | * 1. Correct the text wrapping in Edge and IE.
323 | * 2. Correct the color inheritance from `fieldset` elements in IE.
324 | * 3. Remove the padding so developers are not caught out when they zero out
325 | * `fieldset` elements in all browsers.
326 | */
327 |
328 | legend {
329 | box-sizing: border-box; /* 1 */
330 | color: inherit; /* 2 */
331 | display: table; /* 1 */
332 | max-width: 100%; /* 1 */
333 | padding: 0; /* 3 */
334 | white-space: normal; /* 1 */
335 | }
336 |
337 | /**
338 | * 1. Add the correct display in IE 9-.
339 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
340 | */
341 |
342 | progress {
343 | display: inline-block; /* 1 */
344 | vertical-align: baseline; /* 2 */
345 | }
346 |
347 | /**
348 | * Remove the default vertical scrollbar in IE.
349 | */
350 |
351 | textarea {
352 | overflow: auto;
353 | }
354 |
355 | /**
356 | * 1. Add the correct box sizing in IE 10-.
357 | * 2. Remove the padding in IE 10-.
358 | */
359 |
360 | [type="checkbox"],
361 | [type="radio"] {
362 | box-sizing: border-box; /* 1 */
363 | padding: 0; /* 2 */
364 | }
365 |
366 | /**
367 | * Correct the cursor style of increment and decrement buttons in Chrome.
368 | */
369 |
370 | [type="number"]::-webkit-inner-spin-button,
371 | [type="number"]::-webkit-outer-spin-button {
372 | height: auto;
373 | }
374 |
375 | /**
376 | * 1. Correct the odd appearance in Chrome and Safari.
377 | * 2. Correct the outline style in Safari.
378 | */
379 |
380 | [type="search"] {
381 | -webkit-appearance: textfield; /* 1 */
382 | outline-offset: -2px; /* 2 */
383 | }
384 |
385 | /**
386 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
387 | */
388 |
389 | [type="search"]::-webkit-search-cancel-button,
390 | [type="search"]::-webkit-search-decoration {
391 | -webkit-appearance: none;
392 | }
393 |
394 | /**
395 | * 1. Correct the inability to style clickable types in iOS and Safari.
396 | * 2. Change font properties to `inherit` in Safari.
397 | */
398 |
399 | ::-webkit-file-upload-button {
400 | -webkit-appearance: button; /* 1 */
401 | font: inherit; /* 2 */
402 | }
403 |
404 | /* Interactive
405 | ========================================================================== */
406 |
407 | /*
408 | * Add the correct display in IE 9-.
409 | * 1. Add the correct display in Edge, IE, and Firefox.
410 | */
411 |
412 | details, /* 1 */
413 | menu {
414 | display: block;
415 | }
416 |
417 | /*
418 | * Add the correct display in all browsers.
419 | */
420 |
421 | summary {
422 | display: list-item;
423 | }
424 |
425 | /* Scripting
426 | ========================================================================== */
427 |
428 | /**
429 | * Add the correct display in IE 9-.
430 | */
431 |
432 | canvas {
433 | display: inline-block;
434 | }
435 |
436 | /**
437 | * Add the correct display in IE.
438 | */
439 |
440 | template {
441 | display: none;
442 | }
443 |
444 | /* Hidden
445 | ========================================================================== */
446 |
447 | /**
448 | * Add the correct display in IE 10-.
449 | */
450 |
451 | [hidden] {
452 | display: none;
453 | }
454 |
--------------------------------------------------------------------------------