Merge branch 'master' into feature-more-form-types

2018-02-07 14:24:48 +01:00 · 2018-02-07 14:24:48 +01:00 · acd8800081
parent 780295b2a7 3326823565
commit acd8800081
57 changed files with 5370 additions and 281 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,13 +1,3 @@
 {
-	"parserOptions": {
-		"ecmaVersion": 6,
-		"sourceType": "module",
-		"ecmaFeatures": {
-			"jsx": true
-		}
-	},
-	"rules": {
-		"semi": 2,
-		"quotes": ["error", "single"]
-	}
+	"extends": "styled"
 }
--- a/.npmignore
+++ b/.npmignore
@ -1,16 +0,0 @@
-.appveyor.yml
-.editorconfig
-.eslintrc
-.github
-.gitignore
-.npmignore
-.sasslintrc
-.travis.yml
-backstop.conf.js
-bower.json
-changelog.md
-composer.json
-package.js
-package.json
-src
-test
--- a/backstop.conf.js
+++ b/backstop.conf.js
@ -1,14 +1,20 @@
-module.exports = {
-	viewports: [
-		{ name: 'phone', width: 320, height: 480 },
-		{ name: 'laptop', width: 1280, height: 800 }
-	],
+'use strict'
+const config = {
+	viewports: [{
+		name: 'phone',
+		width: 320,
+		height: 480
+	}, {
+		name: 'laptop',
+		width: 1280,
+		height: 800
+	}],
 	scenarios: [{
 		label: 'Typography',
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#typography'],
+		selectors: ['#typography .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -19,7 +25,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#blockquotes'],
+		selectors: ['#blockquotes .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -30,7 +36,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#buttons'],
+		selectors: ['#buttons .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -41,7 +47,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#lists'],
+		selectors: ['#lists .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -52,7 +58,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#forms'],
+		selectors: ['#forms .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -63,7 +69,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#tables'],
+		selectors: ['#tables .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -74,7 +80,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#grids'],
+		selectors: ['#grids .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -85,7 +91,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#codes'],
+		selectors: ['#codes .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -96,7 +102,7 @@ module.exports = {
 		url: 'http://localhost:3000',
 		hideSelectors: [],
 		removeSelectors: [],
-		selectors: ['#utilities'],
+		selectors: ['#utilities .example'],
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
@ -111,8 +117,14 @@ module.exports = {
 		ci_report: 'node_modules/backstopjs/.tmp/ci_report'
 	},
 	engine: 'phantomjs',
-	report: ['browser', 'CLI', 'CI'],
+	report: [
+		'browser',
+		'CLI',
+		'CI'
+	],
 	casperFlags: [],
 	debug: false,
 	port: 3002
-};
+}
+
+module.exports = config
--- a/bower.json
+++ b/bower.json
@ -1,8 +1,8 @@
 {
 	"name": "milligram",
-	"version": "1.2.4",
+	"version": "1.3.0",
 	"description": "A minimalist CSS framework.",
-	"homepage": "http://milligram.github.io",
+	"homepage": "https://milligram.github.io",
 	"repository": "milligram/milligram",
 	"license": "MIT",
 	"author": "CJ Patoilo <cjpatoilo@gmail.com>",
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,5 @@
 # Changelog

-Milligram uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
+**Milligram** uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.

-See our [releases](https://github.com/milligram/milligram/releases) to accompany at the improvements for each version of Milligram.
+See our [releases](https://github.com/milligram/milligram/releases) to accompany at the improvements for each version of **Milligram**.
--- a/composer.json
+++ b/composer.json
@ -1,8 +1,8 @@
 {
 	"name": "milligram/milligram",
-	"version": "1.2.4",
+	"version": "1.3.0",
 	"description": "A minimalist CSS framework.",
-	"homepage": "http://milligram.github.io",
+	"homepage": "https://milligram.github.io",
 	"repository": "milligram/milligram",
 	"license": "MIT",
 	"author": "CJ Patoilo <cjpatoilo@gmail.com>",
--- a/dist/milligram.css
+++ b/dist/milligram.css
@ -1,8 +1,8 @@
 /*!
- * Milligram v1.2.4
- * http://milligram.github.io
+ * Milligram v1.3.0
+ * https://milligram.github.io
 *
- * Copyright (c) 2017 CJ Patoilo
+ * Copyright (c) 2018 CJ Patoilo
 * Licensed under the MIT license
 */

@ -210,6 +210,7 @@ input[type='month'],
 input[type='week'],
 input[type='datetime'],
 input[type='datetime-local'],
+input:not([type]),
 textarea,
 select {
  -webkit-appearance: none;
@ -238,6 +239,7 @@ input[type='month']:focus,
 input[type='week']:focus,
 input[type='datetime']:focus,
 input[type='datetime-local']:focus,
+input:not([type]):focus,
 textarea:focus,
 select:focus {
  border-color: #9b4dca;
@ -245,12 +247,12 @@ select:focus {
 }

 select {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
  padding-right: 3.0rem;
 }

 select:focus {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
 }

 textarea {
@ -561,7 +563,7 @@ h6 {
 }

 h1 {
-  font-size: 4.0rem;
+  font-size: 4.6rem;
  line-height: 1.2;
 }

@ -571,12 +573,12 @@ h2 {
 }

 h3 {
-  font-size: 3.0rem;
+  font-size: 2.8rem;
  line-height: 1.3;
 }

 h4 {
-  font-size: 2.4rem;
+  font-size: 2.2rem;
  letter-spacing: -.08rem;
  line-height: 1.35;
 }
@ -593,27 +595,6 @@ h6 {
  line-height: 1.4;
 }

-@media (min-width: 40rem) {
-  h1 {
-    font-size: 5.0rem;
-  }
-  h2 {
-    font-size: 4.2rem;
-  }
-  h3 {
-    font-size: 3.6rem;
-  }
-  h4 {
-    font-size: 3.0rem;
-  }
-  h5 {
-    font-size: 2.4rem;
-  }
-  h6 {
-    font-size: 1.5rem;
-  }
-}
-
 img {
  max-width: 100%;
 }
--- a/dist/milligram.css.map
+++ b/dist/milligram.css.map
--- a/dist/milligram.min.css
+++ b/dist/milligram.min.css
--- a/dist/milligram.min.css.map
+++ b/dist/milligram.min.css.map
--- a/examples/index.html
+++ b/examples/index.html
@ -6,11 +6,11 @@
 		<meta name="author" content="CJ Patoilo">
 		<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
 		<title>Milligram | A minimalist CSS framework.</title>
-		<link rel="icon" href="https://milligram.github.io/images/favicon.ico">
+		<link rel="icon" href="https://milligram.github.io/images/icon.png">
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
 		<link rel="stylesheet" href="../dist/milligram.min.css">
-		<link rel="stylesheet" href="https://milligram.github.io/styles/main.min.css">
+		<link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
 	</head>
 	<body>

@ -18,75 +18,77 @@

 			<nav class="navigation">
 				<section class="container">
-
 					<a class="navigation-title" href="https://milligram.github.io/">
-						<img class="img" src="https://milligram.github.io/images/logo.svg" height="30" alt="Milligram" title="Milligram">
+						<svg class="img" version="1.1" viewBox="0 0 463 669">
+							<g transform="translate(0.000000,669.000000) scale(0.100000,-0.100000)">
+								<path d="M2303 6677c-11-13-58-89-393-627-128-206-247-397-265-425-18-27-85-135-150-240-65-104-281-451-480-770-358-575-604-970-641-1032-10-18-45-74-76-126-47-78-106-194-107-212-1-3-11-26-24-53-60-118-132-406-157-623-19-158-8-491 20-649 82-462 291-872 619-1213 192-199 387-340 646-467 335-165 638-235 1020-235 382 0 685 70 1020 235 259 127 454 268 646 467 328 341 537 751 619 1213 28 158 39 491 20 649-25 217-97 505-157 623-13 27-23 50-23 53 0 16-57 127-107 210-32 52-67 110-77 128-37 62-283 457-641 1032-199 319-415 666-480 770-65 105-132 213-150 240-18 28-137 219-265 425-354 570-393 630-400 635-4 3-12-1-17-8zm138-904c118-191 654-1050 1214-1948 148-236 271-440 273-452 2-13 8-23 11-23 14 0 72-99 125-212 92-195 146-384 171-598 116-974-526-1884-1488-2110-868-205-1779 234-2173 1046-253 522-257 1124-10 1659 45 97 108 210 126 225 4 3 9 13 13 22 3 9 126 209 273 445 734 1176 1102 1766 1213 1946 67 108 124 197 126 197 2 0 59-89 126-197zM1080 3228c-75-17-114-67-190-243-91-212-128-368-137-580-34-772 497-1451 1254-1605 77-15 112-18 143-11 155 35 212 213 106 329-32 36-62 48-181 75-223 50-392 140-552 291-115 109-178 192-242 316-101 197-136 355-128 580 3 111 10 167 30 241 30 113 80 237 107 267 11 12 20 26 20 32 0 6 8 22 17 36 26 41 27 99 3 147-54 105-142 149-250 125z"></path>
+							</g>
+						</svg>
+						&nbsp;
 						<h1 class="title">Milligram</h1>
 					</a>
-
 					<ul class="navigation-list float-right">
-					<li class="navigation-item">
-						<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
-						<div class="popover" id="popover-grid">
-							<ul class="popover-list">
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#examples" title="Examples">Examples</a></li>
-								<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#contributing" title="Contributing">Contributing</a></li>
-							</ul>
-						</div>
-					</li>
-					<li class="navigation-item">
-						<a class="navigation-link" href="#popover-support" data-popover>Support</a>
-						<div class="popover" id="popover-support">
-							<ul class="popover-list">
-								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram" title="On Github">On Github</a></li>
-								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>
-								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>
-								<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>
-							</ul>
-						</div>
-					</li>
+						<li class="navigation-item">
+							<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
+							<div class="popover" id="popover-grid">
+								<ul class="popover-list">
+									<li class="popover-item"><a class="popover-link" href="#getting-started" title="Getting Started">Getting Started</a></li>
+									<li class="popover-item"><a class="popover-link" href="#typography" title="Typography">Typography</a></li>
+									<li class="popover-item"><a class="popover-link" href="#blockquotes" title="Blockquotes">Blockquotes</a></li>
+									<li class="popover-item"><a class="popover-link" href="#buttons" title="Buttons">Buttons</a></li>
+									<li class="popover-item"><a class="popover-link" href="#lists" title="Lists">Lists</a></li>
+									<li class="popover-item"><a class="popover-link" href="#forms" title="Forms">Forms</a></li>
+									<li class="popover-item"><a class="popover-link" href="#tables" title="Tables">Tables</a></li>
+									<li class="popover-item"><a class="popover-link" href="#grids" title="Grids">Grids</a></li>
+									<li class="popover-item"><a class="popover-link" href="#codes" title="Codes">Codes</a></li>
+									<li class="popover-item"><a class="popover-link" href="#utilities" title="Utilities">Utilities</a></li>
+									<li class="popover-item"><a class="popover-link" href="#tips" title="Tips">Tips</a></li>
+									<li class="popover-item"><a class="popover-link" href="#browser-support" title="Browser Support">Browser Support</a></li>
+									<li class="popover-item"><a class="popover-link" href="#examples" title="Examples">Examples</a></li>
+									<li class="popover-item"><a class="popover-link" href="#contributing" title="Contributing">Contributing</a></li>
+								</ul>
+							</div>
+						</li>
+						<li class="navigation-item">
+							<a class="navigation-link" href="#popover-support" data-popover>Support</a>
+							<div class="popover" id="popover-support">
+								<ul class="popover-list">
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram" title="On Github">On Github</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://codepen.io/milligramcss" title="On Codepen">On Codepen</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://facebook.com/milligramcss" title="On Facebook">On Facebook</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://twitter.com/milligramcss" title="On Twitter">On Twitter</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>
+									<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>
+								</ul>
+							</div>
+						</li>
 					</ul>
-					<a class="hidden-xs github-corner" href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
-						<svg width="80" height="80" viewBox="0 0 250 250" class="github-corner">
-							<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-							<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-							<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
-						</svg>
+					<a href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
+						<svg class="octocat" viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path class="octocat-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path><path class="octocat-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path></svg>
 					</a>
 				</section>
 			</nav>

 			<section class="container" id="examples">
-			<h5 class="title">Examples</h5>
-			<p>You can view more examples of using Milligram.</p>
-			<p>
-				<ul>
-					<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
-					<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
-					<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
-					<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
-					<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
-					<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
-					<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
-					<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
-					<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
-					<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
-					<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
-					<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
-				</ul>
-			</p>
+				<h5 class="title">Examples</h5>
+				<p>You can view more examples of using Milligram.</p>
+				<p>
+					<ul>
+						<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
+						<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
+						<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
+						<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
+						<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
+						<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
+						<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
+						<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
+						<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
+						<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
+						<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
+						<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
+					</ul>
+				</p>
 			</section>

 			<section class="container" id="contributing">
@ -102,7 +104,7 @@

 		</main>

-		<script src="https://milligram.github.io/scripts/main.min.js"></script>
+		<script src="https://milligram.github.io/scripts/main.js"></script>

 	</body>
 </html>
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright © 2016 CJ Patoilo <cjpatoilo@gmail.com>
+Copyright © 2017 CJ Patoilo <cjpatoilo@gmail.com>

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/package.js
+++ b/package.js
@ -1,14 +1,14 @@
 Package.describe({
 	name: 'milligram:milligram',
-	version: '1.2.4',
+	version: '1.3.0',
 	summary: 'A minimalist CSS framework.',
 	git: 'https://github.com/milligram/milligram.git',
 	documentation: 'readme.md'
-});
+})

-Package.onUse(function (api) {
-	api.versionsFrom('METEOR@1.0');
+Package.onUse((api) => {
+	api.versionsFrom('METEOR@1.0')
 	api.addFiles([
 		'dist/milligram.css'
-	], 'client');
-});
+	], 'client')
+})
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
 	"name": "milligram",
-	"version": "1.2.4",
+	"version": "1.3.0",
 	"description": "A minimalist CSS framework.",
-	"homepage": "http://milligram.github.io",
+	"homepage": "https://milligram.github.io",
 	"repository": "milligram/milligram",
 	"license": "MIT",
 	"author": "CJ Patoilo <cjpatoilo@gmail.com>",
@ -52,8 +52,11 @@
 		"autoprefixer": "^6.5.4",
 		"ava": "^0.17.0",
 		"backstopjs": "^2.3.5",
-		"banner-cli": "^0.9.2",
+		"banner-cli": "^0.11.0",
 		"browser-sync": "^2.18.5",
+		"editorconfig-tools": "^0.1.1",
+		"eslint": "^3.14.0",
+		"eslint-config-styled": "^0.0.0",
 		"husky": "^0.11.9",
 		"node-sass": "^3.13.1",
 		"npm-run-all": "^2.3.0",
@ -73,16 +76,14 @@
 		"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
 		"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
 		"banner": "banner-cli dist/*.css",
-		"watch": "onchange src -- run-s build",
+		"watch": "onchange src -- run-p build",
 		"serve": "browser-sync start --no-notify -s test --ss dist -f dist",
-		"test": "run-s lint ava",
-		"lint": "sass-lint -c .sasslintrc \"src/*.sass\" --verbose --no-exit",
-		"ava": "nyc ava",
 		"backstop": "run-s build && run-p serve compare",
 		"reference": "backstop reference --configPath=backstop.conf.js",
 		"compare": "backstop test --configPath=backstop.conf.js",
-		"precommit": "run-s build test",
-		"prestart": "npm install",
-		"pretest": "npm install"
+		"lint": "sass-lint -c .sasslintrc src --verbose --no-exit && eslint test -c styled && editorconfig-tools check .",
+		"ava": "nyc ava",
+		"test": "run-s build lint ava",
+		"precommit": "run-p test"
 	}
 }
--- a/readme.md
+++ b/readme.md
@ -1,4 +1,4 @@
-<a align="center" href="http://milligram.github.io"><img width="100%" src="https://milligram.github.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a>
+<a align="center" href="https://milligram.github.io"><img width="100%" src="https://milligram.github.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a>

 > A minimalist CSS framework.

@ -11,7 +11,7 @@
 [![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram)


-## Why it's awesome?
+## Why it's awesome

 Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! **Only 2kb gzipped!** It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

@ -30,22 +30,28 @@ $ bower install milligram
 $ npm install milligram
 ```

+**Install with Yarn**
+
+```sh
+$ yarn add milligram
+```
+

 ## Table of Contents

- [Getting Started](http://milligram.github.io/#getting-started)
- [Typography](http://milligram.github.io/#typography)
- [Blockquotes](http://milligram.github.io/#blockquotes)
- [Buttons](http://milligram.github.io/#buttons)
- [Lists](http://milligram.github.io/#lists)
- [Forms](http://milligram.github.io/#forms)
- [Tables](http://milligram.github.io/#tables)
- [Grids](http://milligram.github.io/#grids)
- [Codes](http://milligram.github.io/#codes)
- [Utilities](http://milligram.github.io/#utilities)
- [Tips](http://milligram.github.io/#tips)
- [Browser Support](http://milligram.github.io/#browser-support)
- [Examples](http://milligram.github.io/#examples)
+- [Getting Started](https://milligram.github.io/#getting-started)
+- [Typography](https://milligram.github.io/#typography)
+- [Blockquotes](https://milligram.github.io/#blockquotes)
+- [Buttons](https://milligram.github.io/#buttons)
+- [Lists](https://milligram.github.io/#lists)
+- [Forms](https://milligram.github.io/#forms)
+- [Tables](https://milligram.github.io/#tables)
+- [Grids](https://milligram.github.io/#grids)
+- [Codes](https://milligram.github.io/#codes)
+- [Utilities](https://milligram.github.io/#utilities)
+- [Tips](https://milligram.github.io/#tips)
+- [Browser Support](https://milligram.github.io/#browser-support)
+- [Examples](https://milligram.github.io/#examples)


 ## Contributing
--- a/src/_Form.sass
+++ b/src/_Form.sass
@ -15,6 +15,7 @@ input[type='month'],
 input[type='week'],
 input[type='datetime'],
 input[type='datetime-local'],
+input:not([type]),
 textarea,
 select
 	appearance: none // Removes awkward default styles on some inputs for iOS
@ -32,11 +33,11 @@ select
 		outline: 0

 select
-	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
+	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
 	padding-right: 3.0rem

 	&:focus
-		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')

 textarea
 	min-height: 6.5rem
--- a/src/_Typography.sass
+++ b/src/_Typography.sass
@ -21,7 +21,7 @@ h6
 	margin-top: 0

 h1
-	font-size: 4.0rem
+	font-size: 4.6rem
 	line-height: 1.2

 h2
@ -29,11 +29,11 @@ h2
 	line-height: 1.25

 h3
-	font-size: 3.0rem
+	font-size: 2.8rem
 	line-height: 1.3

 h4
-	font-size: 2.4rem
+	font-size: 2.2rem
 	letter-spacing: -.08rem
 	line-height: 1.35

@ -46,24 +46,3 @@ h6
 	font-size: 1.6rem
 	letter-spacing: 0
 	line-height: 1.4
-
-// Larger than mobile screen
-@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
-
-	h1
-		font-size: 5.0rem
-
-	h2
-		font-size: 4.2rem
-
-	h3
-		font-size: 3.6rem
-
-	h4
-		font-size: 3.0rem
-
-	h5
-		font-size: 2.4rem
-
-	h6
-		font-size: 1.5rem
--- a/test/index.html
+++ b/test/index.html
@ -6,11 +6,11 @@
 		<meta name="author" content="CJ Patoilo">
 		<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
 		<title>Milligram | A minimalist CSS framework.</title>
-		<link rel="icon" href="https://milligram.github.io/images/favicon.ico">
+		<link rel="icon" href="https://milligram.github.io/images/icon.png">
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
 		<link rel="stylesheet" href="milligram.min.css"><!-- to generate this style run `$ npm start` -->
-		<link rel="stylesheet" href="https://milligram.github.io/styles/main.min.css">
+		<link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
 	</head>
 	<body>

@ -26,12 +26,12 @@
 				<div class="example">
 					<div class="row">
 						<div class="column">
-							<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1>
-							<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2>
-							<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3>
-							<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4>
-							<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5>
-							<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6>
+							<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 4.6rem (46px)</span></h1>
+							<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 3.6rem (36px)</span></h2>
+							<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 2.8rem (28px)</span></h3>
+							<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 2.2rem (22px)</span></h4>
+							<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 1.8rem (18px)</span></h5>
+							<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.6rem (16px)</span></h6>
 						</div>
 						<div class="column">
 							<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>
--- a/test/regression/486021560_Blockquotes_0_blockquotes_0_phone.png
+++ b/test/regression/486021560_Blockquotes_0_blockquotes_0_phone.png
--- a/test/regression/486021560_Blockquotes_0_blockquotes_1_laptop.png
+++ b/test/regression/486021560_Blockquotes_0_blockquotes_1_laptop.png
--- a/test/regression/486021560_Blockquotes_0_blockquotesexample_0_phone.png
+++ b/test/regression/486021560_Blockquotes_0_blockquotesexample_0_phone.png
--- a/test/regression/486021560_Blockquotes_0_blockquotesexample_1_laptop.png
+++ b/test/regression/486021560_Blockquotes_0_blockquotesexample_1_laptop.png
--- a/test/regression/486021560_Buttons_0_buttons_0_phone.png
+++ b/test/regression/486021560_Buttons_0_buttons_0_phone.png
--- a/test/regression/486021560_Buttons_0_buttons_1_laptop.png
+++ b/test/regression/486021560_Buttons_0_buttons_1_laptop.png
--- a/test/regression/486021560_Buttons_0_buttonsexample_0_phone.png
+++ b/test/regression/486021560_Buttons_0_buttonsexample_0_phone.png
--- a/test/regression/486021560_Buttons_0_buttonsexample_1_laptop.png
+++ b/test/regression/486021560_Buttons_0_buttonsexample_1_laptop.png
--- a/test/regression/486021560_Codes_0_codes_0_phone.png
+++ b/test/regression/486021560_Codes_0_codes_0_phone.png
--- a/test/regression/486021560_Codes_0_codes_1_laptop.png
+++ b/test/regression/486021560_Codes_0_codes_1_laptop.png
--- a/test/regression/486021560_Codes_0_codesexample_0_phone.png
+++ b/test/regression/486021560_Codes_0_codesexample_0_phone.png
--- a/test/regression/486021560_Codes_0_codesexample_1_laptop.png
+++ b/test/regression/486021560_Codes_0_codesexample_1_laptop.png
--- a/test/regression/486021560_Forms_0_forms_0_phone.png
+++ b/test/regression/486021560_Forms_0_forms_0_phone.png
--- a/test/regression/486021560_Forms_0_forms_1_laptop.png
+++ b/test/regression/486021560_Forms_0_forms_1_laptop.png
--- a/test/regression/486021560_Forms_0_formsexample_0_phone.png
+++ b/test/regression/486021560_Forms_0_formsexample_0_phone.png
--- a/test/regression/486021560_Forms_0_formsexample_1_laptop.png
+++ b/test/regression/486021560_Forms_0_formsexample_1_laptop.png
--- a/test/regression/486021560_Grids_0_grids_0_phone.png
+++ b/test/regression/486021560_Grids_0_grids_0_phone.png
--- a/test/regression/486021560_Grids_0_grids_1_laptop.png
+++ b/test/regression/486021560_Grids_0_grids_1_laptop.png
--- a/test/regression/486021560_Grids_0_gridsexample_0_phone.png
+++ b/test/regression/486021560_Grids_0_gridsexample_0_phone.png
--- a/test/regression/486021560_Grids_0_gridsexample_1_laptop.png
+++ b/test/regression/486021560_Grids_0_gridsexample_1_laptop.png
--- a/test/regression/486021560_Lists_0_lists_0_phone.png
+++ b/test/regression/486021560_Lists_0_lists_0_phone.png
--- a/test/regression/486021560_Lists_0_lists_1_laptop.png
+++ b/test/regression/486021560_Lists_0_lists_1_laptop.png
--- a/test/regression/486021560_Lists_0_listsexample_0_phone.png
+++ b/test/regression/486021560_Lists_0_listsexample_0_phone.png
--- a/test/regression/486021560_Lists_0_listsexample_1_laptop.png
+++ b/test/regression/486021560_Lists_0_listsexample_1_laptop.png
--- a/test/regression/486021560_Tables_0_tables_0_phone.png
+++ b/test/regression/486021560_Tables_0_tables_0_phone.png
--- a/test/regression/486021560_Tables_0_tables_1_laptop.png
+++ b/test/regression/486021560_Tables_0_tables_1_laptop.png
--- a/test/regression/486021560_Tables_0_tablesexample_0_phone.png
+++ b/test/regression/486021560_Tables_0_tablesexample_0_phone.png
--- a/test/regression/486021560_Tables_0_tablesexample_1_laptop.png
+++ b/test/regression/486021560_Tables_0_tablesexample_1_laptop.png
--- a/test/regression/486021560_Typography_0_typography_0_phone.png
+++ b/test/regression/486021560_Typography_0_typography_0_phone.png
--- a/test/regression/486021560_Typography_0_typography_1_laptop.png
+++ b/test/regression/486021560_Typography_0_typography_1_laptop.png
--- a/test/regression/486021560_Typography_0_typographyexample_0_phone.png
+++ b/test/regression/486021560_Typography_0_typographyexample_0_phone.png
--- a/test/regression/486021560_Typography_0_typographyexample_1_laptop.png
+++ b/test/regression/486021560_Typography_0_typographyexample_1_laptop.png
--- a/test/regression/486021560_Utilities_0_utilities_0_phone.png
+++ b/test/regression/486021560_Utilities_0_utilities_0_phone.png
--- a/test/regression/486021560_Utilities_0_utilities_1_laptop.png
+++ b/test/regression/486021560_Utilities_0_utilities_1_laptop.png
--- a/test/regression/486021560_Utilities_0_utilitiesexample_0_phone.png
+++ b/test/regression/486021560_Utilities_0_utilitiesexample_0_phone.png
--- a/test/regression/486021560_Utilities_0_utilitiesexample_1_laptop.png
+++ b/test/regression/486021560_Utilities_0_utilitiesexample_1_laptop.png
--- a/test/unit/build.js
+++ b/test/unit/build.js
@ -1,33 +1,33 @@
-const test = require('ava');
-const fs = require('fs');
-const path = require('path');
+const test = require('ava')
+const fs = require('fs')
+const path = require('path')

-let dist = path.join(__dirname, '../../dist');
+let dist = path.join(__dirname, '../../dist')

 test.before('`dist` path should be created', t => {
-	t.true(fs.lstatSync(dist).isDirectory());
-});
+	t.true(fs.lstatSync(dist).isDirectory())
+})

 test('`milligram.css` should be created', t => {
 	fs.readdirSync(dist).map(file => {
-		if (file === 'milligram.css') t.is(file, 'milligram.css');
-	});
-});
+		if (file === 'milligram.css') t.is(file, 'milligram.css')
+	})
+})

 test('`milligram.min.css` should be created', t => {
 	fs.readdirSync(dist).map(file => {
-		if (file === 'milligram.min.css') t.is(file, 'milligram.min.css');
-	});
-});
+		if (file === 'milligram.min.css') t.is(file, 'milligram.min.css')
+	})
+})

 test('`milligram.css.map` should be created', t => {
 	fs.readdirSync(dist).map(file => {
-		if (file === 'milligram.css.map') t.is(file, 'milligram.css.map');
-	});
-});
+		if (file === 'milligram.css.map') t.is(file, 'milligram.css.map')
+	})
+})

 test('`milligram.min.css.map` should be created', t => {
 	fs.readdirSync(dist).map(file => {
-		if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map');
-	});
-});
+		if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map')
+	})
+})
--- a/test/unit/packages.js
+++ b/test/unit/packages.js
@ -1,92 +1,92 @@
-const test = require('ava');
-const npm = require('../../package.json');
-const bower = require('../../bower.json');
-const composer = require('../../composer.json');
+const test = require('ava')
+const npm = require('../../package.json')
+const bower = require('../../bower.json')
+const composer = require('../../composer.json')

 const packages = [
 	npm,
 	bower,
 	composer
-];
+]

 test(`Name should be equal "${npm.name}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1];
-			if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name);
-		});
-	});
-});
+			if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1]
+			if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name)
+		})
+	})
+})

 test(`Version should be equal to "v${npm.version}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.version, compareValue.version);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.version, compareValue.version)
+		})
+	})
+})

 test(`Description should be equal to "${npm.description}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.description, compareValue.description);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.description, compareValue.description)
+		})
+	})
+})

 test(`Homepage should be equal to "${npm.homepage}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.homepage, compareValue.homepage);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.homepage, compareValue.homepage)
+		})
+	})
+})

 test(`Repository should be equal to "${npm.repository}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.repository, compareValue.repository);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.repository, compareValue.repository)
+		})
+	})
+})

 test(`License should be equal to "${npm.license}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.license, compareValue.license);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.license, compareValue.license)
+		})
+	})
+})

 test(`Author Name should be equal to "${npm.author}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.author, compareValue.author);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.author, compareValue.author)
+		})
+	})
+})

 test(`Main File should be equal to "${npm.main}"`, t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(referenceValue.main, compareValue.main);
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(referenceValue.main, compareValue.main)
+		})
+	})
+})

 test('Ignore should be equal', t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.ignore), JSON.stringify(compareValue.ignore));
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.ignore), JSON.stringify(compareValue.ignore))
+		})
+	})
+})

 test('Keywords should be equal', t => {
 	packages.map((referenceValue, referenceIndex) => {
 		packages.map((compareValue, compareIndex) => {
-			if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.keywords), JSON.stringify(compareValue.keywords));
-		});
-	});
-});
+			if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.keywords), JSON.stringify(compareValue.keywords))
+		})
+	})
+})

--- a/yarn.lock
+++ b/yarn.lock