diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b52715a..373f376f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,15 @@ Future Todo List - Make typography and utility classes silent extenders (so that they can be extended by components without importing all utility classes). +v5.1.0 +------------------------------ +*September 13, 2021* + +### Changed +- Move normalize styles from base to optional. We had to copy the styles straight into the project to be able to make them optional wrapping them into a mixin. +!!Note: If you don't use `$includeBaseFramework` or `$includeMinimalFramework` vars and want to have normalize styles in you project, you need to `@include normalize()` mixin starting from this version. + + v5.0.0 ------------------------------ *August 23, 2021* diff --git a/package.json b/package.json index fe83645b..dd99330e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@justeat/fozzie", "title": "Fozzie – Just Eat UI Web Framework", "description": "UI Web Framework for the Just Eat Global Platform", - "version": "5.0.0", + "version": "5.1.0", "main": "dist/js/index.js", "files": [ "dist/js", @@ -38,8 +38,7 @@ "@justeat/f-utils": "2.0.0", "@justeat/pie-design-tokens": "0.19.0", "fontfaceobserver": "2.1.0", - "include-media": "1.4.10", - "normalize-scss": "7.0.1" + "include-media": "1.4.10" }, "devDependencies": { "@justeat/browserslist-config-fozzie": "1.2.0", diff --git a/src/scss/_templates.scss b/src/scss/_templates.scss index dca01433..eb78c91d 100644 --- a/src/scss/_templates.scss +++ b/src/scss/_templates.scss @@ -3,6 +3,7 @@ * as part of Fozzie v4 (useful for anyone upgrading that wants to keep things as-is) **/ @if $includeBaseFramework { + @include normalize(); @include reset(); @include typography(); @@ -38,6 +39,7 @@ * that provides styling for most use-cases (links, lists, buttons, grid) **/ @if $includeMinimalFramework { + @include normalize(); @include reset(); @include typography(); diff --git a/src/scss/base/_normalize.scss b/src/scss/base/_normalize.scss new file mode 100644 index 00000000..eb0d7f82 --- /dev/null +++ b/src/scss/base/_normalize.scss @@ -0,0 +1,198 @@ +@mixin normalize() { + /** + * Normalize Styles + * ================================= + * We use normalize.css for the bulk of our 'reset' (https://www.npmjs.com/package/normalize-scss). + * We wrap it into a mixin to be able to make it optional. + * + * This is an optional component within Fozzie. + * If you'd like to use it in your project you can include it by adding `@include normalize();` into your SCSS dependencies file. + */ + + /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss v7.0.1*/ + html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + } + body { + margin: 0; + } + article, + aside, + footer, + header, + nav, + section { + display: block; + } + h1 { + font-size: 2em; + margin: 0.67em 0; + } + figcaption, + figure { + display: block; + } + figure { + margin: 1em 40px; + } + hr { + box-sizing: content-box; + height: 0; + overflow: visible; + } + main { + display: block; + } + pre { + font-family: monospace; + font-size: 1em; + } + a { + background-color: transparent; + -webkit-text-decoration-skip: objects; + } + abbr[title] { + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + b, strong { + font-weight: inherit; + font-weight: bolder; + } + code, + kbd, + samp { + font-family: monospace; + font-size: 1em; + } + dfn { + font-style: italic; + } + mark { + background-color: #ff0; + color: #000; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + audio, + video { + display: inline-block; + } + audio:not([controls]) { + display: none; height: 0; + } + img { + border-style: none; + } + svg:not(:root) { + overflow: hidden; + } + button, + input, + optgroup, + select, + textarea { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + } + button { + overflow: visible; + } + button, + select { + text-transform: none; + } + [type='reset'], + [type='submit'], + button, + html [type='button'] { + -webkit-appearance: button; + } + [type='button']::-moz-focus-inner, + [type='reset']::-moz-focus-inner, + [type='submit']::-moz-focus-inner, + button::-moz-focus-inner { + border-style: none; padding: 0; + } + [type='button']:-moz-focusring, + [type='reset']:-moz-focusring, + [type='submit']:-moz-focusring, + button:-moz-focusring { + outline: 1px dotted ButtonText; + } + input { + overflow: visible; + } + [type='checkbox'], + [type='radio'] { + box-sizing: border-box; + padding: 0; + } + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + height: auto; + } + [type='search'] { + -webkit-appearance: textfield; outline-offset: -2px; + } + [type='search']::-webkit-search-cancel-button, + [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-file-upload-button { + -webkit-appearance: button; font: inherit; + } + fieldset { + padding: 0.35em 0.75em 0.625em; + } + legend { + box-sizing: border-box; + display: table; + max-width: 100%; + padding: 0; + color: inherit; + white-space: normal; + } + progress { + display: inline-block; + vertical-align: baseline; + } + textarea { + overflow: auto; + } + details { + display: block; + } + summary { + display: list-item; + } + menu { + display: block; + } + canvas { + display: inline-block; + } + [hidden], + template { + display: none; + } +} diff --git a/yarn.lock b/yarn.lock index 75ab52c1..9e849dc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11195,11 +11195,6 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= -normalize-scss@7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/normalize-scss/-/normalize-scss-7.0.1.tgz#74485e82bb5d0526371136422a09fdb868ffc1a4" - integrity sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A== - normalize-selector@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"