diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..7e5a583 Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..dd68a0d Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..c776426 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/compare.html b/compare.html new file mode 100644 index 0000000..1da3f90 --- /dev/null +++ b/compare.html @@ -0,0 +1,302 @@ + + + + + + + Destyle.css - Compared to other resets + + + + + + + + + + + + + +
+
+ ← Back +

Compare resets

+
+
⚠️
+

+ Use a larger screen to view a side-by-side comparison +

+
+
+ + +
+
+
+

+ Destyle.css +

+ + + + View destyle.css test page + + + ↗︎ + + +
+ + +
+ +
+
+

+ + Normalize.css + +

+ + + + View normalize.css test page + + + ↗︎ + + +
+ + +
+ +
+
+

+ + Eric Meyer's reset + +

+ + + + View Eric Meyer's reset test page + + + ↗︎ + + +
+ + +
+
+
+ + + diff --git a/docs/destyle.css b/destyle.css similarity index 73% rename from docs/destyle.css rename to destyle.css index ba6d0a3..3c62d5f 100644 --- a/docs/destyle.css +++ b/destyle.css @@ -1,4 +1,4 @@ -/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */ +/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */ /* Reset box-model and set borders */ /* ============================================ */ @@ -70,7 +70,6 @@ h4, h5, h6 { font-size: inherit; - line-height: inherit; font-weight: inherit; margin: 0; } @@ -147,7 +146,6 @@ a { */ abbr[title] { - text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } @@ -201,13 +199,14 @@ sup { top: -0.5em; } -/* Embedded content */ +/* Replaced content */ /* ============================================ */ /** * Prevent vertical alignment issues. */ +svg, img, embed, object, @@ -219,7 +218,9 @@ iframe { /* ============================================ */ /** - * Reset form fields to make them styleable + * Reset form fields to make them styleable. + * 1. Make form elements stylable across systems iOS especially. + * 2. Inherit text-transform from parent. */ button, @@ -227,7 +228,7 @@ input, optgroup, select, textarea { - -webkit-appearance: none; + -webkit-appearance: none; /* 1 */ appearance: none; vertical-align: middle; color: inherit; @@ -235,9 +236,9 @@ textarea { background: transparent; padding: 0; margin: 0; - outline: 0; border-radius: 0; text-align: inherit; + text-transform: inherit; /* 2 */ } /** @@ -255,29 +256,7 @@ textarea { } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. + * Correct cursors for clickable elements. */ button, @@ -285,46 +264,25 @@ button, [type="reset"], [type="submit"] { cursor: pointer; - -webkit-appearance: none; - appearance: none; } -button[disabled], -[type="button"][disabled], -[type="reset"][disabled], -[type="submit"][disabled] { +button:disabled, +[type="button"]:disabled, +[type="reset"]:disabled, +[type="submit"]:disabled { cursor: default; } /** - * Remove the inner border and padding in Firefox. + * Improve outlines for Firefox and unify style with input elements & buttons. */ -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; +:-moz-focusring { + outline: auto; } -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Remove arrow in IE10 & IE11 - */ - -select::-ms-expand { - display: none; +select:disabled { + opacity: inherit; } /** @@ -345,19 +303,8 @@ fieldset { min-width: 0; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ + padding: 0; } /** @@ -403,7 +350,7 @@ textarea { /** * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. + * 2. Fix font inheritance. */ ::-webkit-file-upload-button { @@ -442,16 +389,19 @@ summary { * Remove outline for editable content. */ -[contenteditable] { - outline: none; +[contenteditable]:focus { + outline: auto; } -/* Table */ +/* Tables */ /* ============================================ */ +/** +1. Correct table border color inheritance in all Chrome and Safari. +*/ + table { - border-collapse: collapse; - border-spacing: 0; + border-color: inherit; /* 1 */ } caption { @@ -468,22 +418,3 @@ th { text-align: left; font-weight: bold; } - -/* Misc */ -/* ============================================ */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/docs/android-chrome-192x192.png b/docs/android-chrome-192x192.png deleted file mode 100755 index f9e63c4..0000000 Binary files a/docs/android-chrome-192x192.png and /dev/null differ diff --git a/docs/android-chrome-512x512.png b/docs/android-chrome-512x512.png deleted file mode 100755 index 4283160..0000000 Binary files a/docs/android-chrome-512x512.png and /dev/null differ diff --git a/docs/apple-touch-icon.png b/docs/apple-touch-icon.png deleted file mode 100755 index 2dbe449..0000000 Binary files a/docs/apple-touch-icon.png and /dev/null differ diff --git a/docs/compare.html b/docs/compare.html deleted file mode 100644 index cdd6ef1..0000000 --- a/docs/compare.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - Destyle.css - Compared to other resets - - - - - - - - - - - -
-
- 👈 Back -

Compare resets

- -

- ⚠️ Use a larger screen to view a side-by-side comparison -

-
- -
-
-
-

- Destyle.css -

- - - View destyle.css test page - -
- - -
- -
-
-

- - Normalize.css - -

- - - View normalize.css test page - -
- - -
- -
-
-

- - Eric Meyer's reset - -

- - - View Eric Meyer's reset test page - -
- - -
-
-
- - - diff --git a/docs/favicon-16x16.png b/docs/favicon-16x16.png deleted file mode 100755 index d2d8116..0000000 Binary files a/docs/favicon-16x16.png and /dev/null differ diff --git a/docs/favicon-32x32.png b/docs/favicon-32x32.png deleted file mode 100755 index 50752b4..0000000 Binary files a/docs/favicon-32x32.png and /dev/null differ diff --git a/docs/favicon.ico b/docs/favicon.ico deleted file mode 100755 index d36a92f..0000000 Binary files a/docs/favicon.ico and /dev/null differ diff --git a/docs/github.svg b/docs/github.svg deleted file mode 100644 index 1231683..0000000 --- a/docs/github.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 88db713..0000000 --- a/docs/index.html +++ /dev/null @@ -1,300 +0,0 @@ - - - - - - - - Destyle.css - a clean slate for writing CSS without user agent styles - - - - - - - - - - - - -
-

Destyle.css

-

- Opinionated reset stylesheet that provides a clean slate for styling - your html. -

- - - -
- - npm install - --save destyle.css - - -
- View source on GitHub - - CDN - – - - Download - -
-
- -
- See it in action - - Docs - - - -
- -
-
- Tested with: -
- - - - -
-
- - - - - - diff --git a/docs/style.css b/docs/style.css deleted file mode 100644 index 257f278..0000000 --- a/docs/style.css +++ /dev/null @@ -1,363 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600'); - -html { - height: 100%; -} - -body { - font: 16px/1.4 'Fira Sans', sans-serif; - color: #333; - height: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -/* Home - ========================================================== */ - -.container { - padding: 30px 20px; - max-width: 600px; - margin: 0 auto; - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; -} - -@media (min-width: 400px) { - .container { - padding: 60px 20px 70px; - } -} - -.main-title { - font-size: 2em; - font-weight: 600; - margin-bottom: 20px; -} - -.sub-title { - font-size: 1.4em; - margin-bottom: 50px; -} - -.features { - margin-bottom: 50px; -} - -.features li { - margin-bottom: 10px; - position: relative; - padding-left: 30px; -} -.features li::before { - content: '☑️'; - position: absolute; - top: 0.2em; - left: 0; - font-size: 90%; -} - -.features a { - text-decoration: underline; -} - -.install { - margin-bottom: 50px; -} - -.install code { - display: block; - background-color: #f4f4f4; - padding: 10px 15px; - margin-bottom: 10px; -} - -.install-links { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.install span, -.install a { - color: dodgerblue; - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; -} - -.install a:active, -.install a:focus, -.install a:hover { - text-decoration: underline; -} - -.install span, -.install-link { - font-size: 90%; -} - -.install span::before, -.install span::after { - content: '\00a0'; -} - -.install-link-first { - margin-right: auto; -} - -@media (min-width: 500px) { - .actions { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.btn { - background-color: dodgerblue; - color: #fff; - padding: 0.7em 1.4em; - font-weight: 600; - border-radius: 3px; - display: inline-block; - vertical-align: middle; - border: 2px solid dodgerblue; -} - -.btn-outline { - background-color: transparent; - color: dodgerblue; -} - -.btn + .btn { - margin-left: 15px; -} - -.social { - padding-top: 40px; -} - -.social a { - display: inline-block; - vertical-align: middle; -} -.social a:not(:last-child) { - margin-right: 15px; -} - -@media (min-width: 500px) { - .social { - margin-left: auto; - padding-top: 0; - } -} - -.bs { - padding-top: 50px; -} - -.bs-label { - margin-bottom: 10px; - opacity: 0.5; -} - -.bs-logo { - width: 130px; -} - -/* Footer - ========================================================== */ - -.footer { - background-color: #f4f4f4; - text-align: center; - padding: 30px 20px; - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; -} - -.footer a { - text-decoration: underline; -} - -/* Compare - ========================================================== */ - -.compare-container { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} - -.header { - position: relative; - text-align: center; - max-width: 600px; - margin: 0 auto; - padding: 30px 20px; - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; - width: 100%; -} - -@media (min-width: 750px) { - .header { - max-width: none; - } -} - -.header-title { - font-weight: 600; - font-size: 1.4em; -} - -.header-back { - position: absolute; - top: 30px; - left: 20px; - padding-top: 0.4em; -} - -.header-back:active, -.header-back:focus, -.header-back:hover { - text-decoration: underline; -} - -.header-note { - margin-top: 20px; - font-size: 95%; - padding: 10px; - background-color: lemonchiffon; -} - -@media (min-width: 750px) { - .header-note { - display: none; - } -} - -/* Compare */ - -.compare { - width: 100%; -} - -@media (max-width: 749px) { - .compare { - max-width: 600px; - margin: 0 auto; - padding: 20px 20px 70px; - } -} - -@media (min-width: 750px) { - .compare { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - } -} - -.compare-item { - margin-bottom: 30px; -} - -@media (min-width: 750px) { - .compare-item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - width: 33.33333%; - padding: 20px 20px 0; - margin-bottom: 0; - } -} - -@media (min-width: 750px) { - .compare-item-header { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; - margin-bottom: 0; - padding-bottom: 20px; - border-bottom: 1px solid #eee; - } -} - -.compare-title { - font-weight: 600; - font-size: 1.2em; - margin-bottom: 4px; -} - -.compare-title a:active, -.compare-title a:focus, -.compare-title a:hover { - color: dodgerblue; -} - -@media (min-width: 750px) { - .compare-title { - margin-bottom: 0; - } -} - -.compare-btn { - text-decoration: underline; -} - -@media (min-width: 750px) { - .compare-btn { - font-size: 85%; - text-decoration: none; - } - .compare-btn:active, - .compare-btn:focus, - .compare-btn:hover { - text-decoration: underline; - } -} - -.compare-frame { - display: none; -} - -@media (min-width: 750px) { - .compare-frame { - display: block; - width: 100%; - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - } -} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..bca1621 Binary files /dev/null and b/favicon.ico differ diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..538c60f --- /dev/null +++ b/icon.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/docs/iframe.html b/iframe.html similarity index 62% rename from docs/iframe.html rename to iframe.html index 393614e..7ceab7d 100644 --- a/docs/iframe.html +++ b/iframe.html @@ -4,9 +4,9 @@ Iframe Content - - - + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a8b98cb --- /dev/null +++ b/index.html @@ -0,0 +1,297 @@ + + + + + + + + Destyle.css - Opinionated reset stylesheet that provides a clean slate for + styling your html. + + + + + + + + + + + + +
+

Destyle.css

+

+ Opinionated reset stylesheet that provides
a clean slate for + styling your html. +

+ +

Features

+ + +

Get it

+ + +
+ See it in action + + View on GitHub + +
+
+ + + + + + diff --git a/docs/normalize.html b/normalize.html similarity index 98% rename from docs/normalize.html rename to normalize.html index 69e326b..42a95c4 100644 --- a/docs/normalize.html +++ b/normalize.html @@ -4,9 +4,9 @@ HTML5 Test Page - - - + + + diff --git a/docs/reset.html b/reset.html similarity index 98% rename from docs/reset.html rename to reset.html index c143799..7b73a4e 100644 --- a/docs/reset.html +++ b/reset.html @@ -4,9 +4,9 @@ HTML5 Test Page - - - + + + diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..3980f92 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Destyle.css", + "short_name": "Destyle.css", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..667f28f --- /dev/null +++ b/style.css @@ -0,0 +1,353 @@ +html { + height: 100%; +} + +body { + font: 1.2rem/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color: #333; + height: 100%; + display: flex; + flex-direction: column; +} + +code { + font-size: 1rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; +} + +/* Home + ========================================================== */ + +.container { + max-width: 52rem; + flex: 1 0 auto; + padding-left: 1.3rem; + padding-right: 1.3rem; +} + +@media (min-width: 700px) { + .container { + padding-left: 4rem; + padding-right: 4rem; + } +} + +.container-main { + padding-top: 2rem; + padding-bottom: 2rem; +} + +@media (min-width: 700px) { + .container-main { + padding-top: 4rem; + padding-bottom: 4rem; + } +} + +.main-title { + font-size: 2.3em; + font-weight: 700; + margin-bottom: 2rem; +} + +.sub-title { + font-size: 1.4em; + margin-bottom: 3rem; +} + +.sub-title-break { + display: none; +} + +@media (min-width: 700px) { + .sub-title-break { + display: block; + } +} + +.list-title { + font-size: 1.1em; + margin-bottom: 1rem; + font-weight: 700; +} + +.list { + margin-bottom: 3rem; +} + +.list li { + margin-bottom: 10px; + position: relative; + padding-left: 30px; +} +.list li::before { + content: "●"; + position: absolute; + top: 0; + left: 0; + font-size: 90%; +} + +.list a { + border-bottom: 4px solid rgba(0, 0, 0, 0.15); +} + +@media (min-width: 500px) { + .actions { + display: flex; + align-items: center; + } +} + +.btn { + background-color: #333; + color: #fff; + padding: 0.5em 1.4em; + font-weight: 600; + border-radius: 6px; + display: inline-block; + vertical-align: middle; + border: 2px solid #333; +} + +.btn-outline { + background-color: transparent; + color: #333; +} + +.btn + .btn { + margin-left: 1.2rem; +} + +/* Footer +========================================================== */ + +.footer { + /* background-color: #f4f4f4; */ + padding-top: 2rem; + padding-bottom: 2rem; + flex: none; + font-size: 1.1rem; + color: rgba(51, 51, 51, 0.7); +} + +.footer-container { + padding-left: 1.3rem; + padding-right: 1.3rem; +} + +@media (min-width: 1250px) { + .footer-container { + padding-left: 4rem; + padding-right: 4rem; + } +} + +.credits { + padding-top: 15px; +} + +.credits a { + border-bottom: 4px solid rgba(0, 0, 0, 0.15); +} + +.bs { + display: flex; + align-items: center; +} + +.bs-label { + margin-right: 10px; + flex: none; +} + +.bs-logo { + width: 130px; + flex: none; +} + +/* Compare + ========================================================== */ + +.compare-layout { + flex: 1 0 auto; + display: flex; + flex-direction: column; +} + +.header { + flex: none; + width: 100%; + padding: 1.3rem; +} + +@media (min-width: 1250px) { + .header { + padding: 2rem 4rem; + } +} + +.header-back { + border-bottom: 4px solid rgba(0, 0, 0, 0.15); +} + +.header-title { + font-size: 1.6em; + font-weight: 700; + padding-top: 0.6rem; +} + +.header-note { + padding: 1rem 1.4rem; + background-color: lemonchiffon; + margin-top: 1.6rem; + display: flex; + font-size: 95%; +} + +.header-note-icon { + flex: none; + margin-right: 1.2rem; +} + +.header-note-content { + flex: auto; +} + +@media (min-width: 950px) { + .header-note { + display: none; + } +} + +/* Compare */ + +.compare { + width: 100%; + padding: 3rem 1.3rem; +} + +@media (min-width: 950px) { + .compare { + padding: 0 1.3rem; + display: flex; + flex: 1 0 auto; + gap: 1.3rem; + } +} + +@media (min-width: 1250px) { + .compare { + gap: 4rem; + padding: 0 4rem 1rem; + } +} + +.compare-item { + margin-bottom: 30px; +} + +@media (min-width: 950px) { + .compare-item { + display: flex; + flex-direction: column; + width: 33.33333%; + margin-bottom: 0; + border-radius: 8px 8px 0 0; + box-shadow: 0 2px 30px rgba(0,0,0,0.1); + } +} + +@media (min-width: 950px) { + .compare-item-header { + flex: none; + margin-bottom: 0; + background-color: #ddd; + border-radius: 8px 8px 0 0; + height: 1.4rem; + position: relative; + text-align: center; + font-size: .9rem; + line-height: 1.4rem; + } + + .compare-item-header::before { + content: ""; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #aaa; + position: absolute; + left: 8px; + top: 5px; + box-shadow: 18px 0 0 0 #aaa, 36px 0 0 0 #aaa; + } +} + +.compare-title { + font-weight: 600; + font-size: 1.2em; + margin-bottom: 4px; +} + +.compare-title a:active, +.compare-title a:focus, +.compare-title a:hover { + color: dodgerblue; +} + +@media (min-width: 950px) { + .compare-title { + margin-bottom: 0; + font-size: inherit; + font-weight: inherit; + } +} + +.compare-btn { + border-bottom: 4px solid rgba(0, 0, 0, 0.15); +} + +.compare-btn-icon { + display: none; +} + +@media (min-width: 950px) { + .compare-btn { + border-bottom: 0; + } + + .compare-btn:active, + .compare-btn:focus, + .compare-btn:hover { + color: dodgerblue; + } + + .compare-btn-label { + display: none; + } + + .compare-btn-icon { + display: block; + position: absolute; + right: 0; + top: 50%; + padding: 0.2rem 0.5rem; + transform: translate(0, -50%); + } +} + +.compare-frame { + display: none; +} + +@media (min-width: 950px) { + .compare-frame { + display: block; + width: 100%; + flex: 1 0 auto; + } +} diff --git a/docs/test.html b/test.html similarity index 98% rename from docs/test.html rename to test.html index 9bd70b8..7c27add 100644 --- a/docs/test.html +++ b/test.html @@ -4,9 +4,9 @@ HTML5 Test Page - - - + + +