From 36e9e45f123910eca5cdfb2ca016f6604837d02d Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Fri, 9 Feb 2018 02:30:58 +0700 Subject: [PATCH 1/4] [WIP] Add base style with good defaults While `modern-normalize.css` is great for ensuring consistency, the default browser styles are not that nice. The goal of `modern-base.css` is to be a better base, that you use in addition to `modern-normalize.css`. This base can afford to be opinionated. --- modern-base.css | 133 ++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 8 +-- readme.md | 6 +++ 3 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 modern-base.css diff --git a/modern-base.css b/modern-base.css new file mode 100644 index 0000000..3394bed --- /dev/null +++ b/modern-base.css @@ -0,0 +1,133 @@ +/*! modern-base | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/** + * 1. Break up words and URLs so they don't break your layout. + * 2. Improve font rendering in Chrome and Safari on macOS. + */ + +html { + word-break: break-all; /* 1 */ + -webkit-font-smoothing: antialiased; /* 2 */ +} + +/** + * Remove default spacing. + */ + +h1, +h2, +h3, +h4, +h5, +h6, +p, +figure, +blockquote, +dd, +dl, +pre { + margin: 0; +} + +/** + * Show link underline only on hover. + */ + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/** + * Remove outline on active/hovered focused links. + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * Correct the text style of placeholders in Chrome and Safari. + * See discussion: https://github.com/necolas/normalize.css/issues/550 + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove text shadow from selections. + */ + +::selection { + background: #b3d7fd; + text-shadow: none; +} + +/** + * Remove outline from `:focus` pseudo element. + * Note: Don't forget to apply some styling for the focus state of elements that support it. + */ + +:focus { + outline-width: 0; +} + +/** + * Remove the list style on navigation lists. + */ + +nav ol, +nav ul { + list-style: none; +} + +/** + * Better looking default horizontal rule + */ + +hr { + display: block; + margin: 1em 0; + padding: 0; + border: 0; + border-top: 1px solid #ccc; +} + +/** + * Remove default fieldset styles. + */ + +fieldset { + margin: 0; + padding: 0; + border: 0; +} + +/** + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + + +/** + * Remove the gap between these elements and the bottom of their containers. + * See: https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +svg, +img, +canvas, +video, +audio, +iframe { + vertical-align: middle; +} diff --git a/package.json b/package.json index 7d015e3..82eceab 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,11 @@ "node": ">=6" }, "scripts": { - "test": "stylelint modern-normalize.css" + "test": "stylelint *.css" }, "files": [ - "modern-normalize.css" + "modern-normalize.css", + "modern-base.css" ], "keywords": [ "normalize", @@ -35,7 +36,8 @@ "extends": "stylelint-config-xo", "rules": { "font-family-no-duplicate-names": null, - "no-duplicate-selectors": null + "no-duplicate-selectors": null, + "selector-no-vendor-prefix": null } } } diff --git a/readme.md b/readme.md index fd5edea..1980105 100644 --- a/readme.md +++ b/readme.md @@ -48,6 +48,12 @@ or ``` +This package also includes a base style with better defaults: + +```css +@import 'node_modules/modern-normalize/modern-base.css'; +``` + ## License From a373054eea6506c7e23029e918d558c5474ba452 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Sun, 11 Feb 2018 22:13:31 +0700 Subject: [PATCH 2/4] Improve font rendering on HiDPI devices Fixes #19 --- modern-base.css | 20 ++++++++++++++++---- package.json | 3 ++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/modern-base.css b/modern-base.css index 3394bed..b6f32b8 100644 --- a/modern-base.css +++ b/modern-base.css @@ -1,13 +1,25 @@ /*! modern-base | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/** + * Improve font rendering on HiDPI devices. + */ + +@media + screen and (-webkit-min-device-pixel-ratio: 2), + screen and (min-resolution: 2dppx) { + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } +} + /** - * 1. Break up words and URLs so they don't break your layout. - * 2. Improve font rendering in Chrome and Safari on macOS. + * Break up words and URLs so they don't break your layout. */ html { - word-break: break-all; /* 1 */ - -webkit-font-smoothing: antialiased; /* 2 */ + word-break: break-all; } /** diff --git a/package.json b/package.json index 82eceab..2d1c58c 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "rules": { "font-family-no-duplicate-names": null, "no-duplicate-selectors": null, - "selector-no-vendor-prefix": null + "selector-no-vendor-prefix": null, + "media-feature-name-no-vendor-prefix": null } } } From 2c7209302533e258b4171a9c7af5857f8dc16d41 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Wed, 25 Apr 2018 09:56:52 +0700 Subject: [PATCH 3/4] Don't use break-all It causes some many weird problems. I tried `break-word` too, but it also causes problems, like `10%` being split up into two lines of `10` and `%` when using Flexbox. --- modern-base.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/modern-base.css b/modern-base.css index b6f32b8..22e20ae 100644 --- a/modern-base.css +++ b/modern-base.css @@ -14,14 +14,6 @@ } } -/** - * Break up words and URLs so they don't break your layout. - */ - -html { - word-break: break-all; -} - /** * Remove default spacing. */ From e811a7e61cea17589f7668335b9edd1f03662fb2 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Wed, 17 Oct 2018 14:48:40 +0700 Subject: [PATCH 4/4] Prevent overflow of media containers --- modern-base.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modern-base.css b/modern-base.css index 22e20ae..4853e79 100644 --- a/modern-base.css +++ b/modern-base.css @@ -121,17 +121,20 @@ textarea { resize: vertical; } - -/** - * Remove the gap between these elements and the bottom of their containers. - * See: https://github.com/h5bp/html5-boilerplate/issues/440 - */ - svg, img, canvas, video, audio, iframe { + /** + * Remove the gap between these elements and the bottom of their containers. + * See: https://github.com/h5bp/html5-boilerplate/issues/440 + */ vertical-align: middle; + + /** + * Prevent overflow. + */ + max-width: 100%; }