From acbf130c2c440adef591187cb39ff04f7302486c Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 18 Jan 2017 10:33:16 +0000 Subject: [PATCH] Seperating Normalization and Bootstrap Reboot - Moving normalizae styles out of component. - Creating CSS file for normalize css in vendor - Moving assets directory - Updating npm storybook script to include new normalize css - Adding normalize css to of storybook - Adding css-loader to frontend webpack - Including normalize.css in root of frontend --- frontend/package.json | 1 + frontend/src/root.js | 2 + frontend/webpack/base.js | 24 +- ui/.storybook/head.html | 2 +- ui/package.json | 2 +- ui/src/{shared => }/assets/close.svg | 0 ui/src/{shared => }/assets/input-confirm.svg | 0 ui/src/components/base/index.js | 453 ------------------ ui/src/shared/assets/close.png | Bin 345 -> 0 bytes ui/src/vendor/normalize.css | 460 +++++++++++++++++++ 10 files changed, 481 insertions(+), 463 deletions(-) rename ui/src/{shared => }/assets/close.svg (100%) rename ui/src/{shared => }/assets/input-confirm.svg (100%) delete mode 100644 ui/src/shared/assets/close.png create mode 100644 ui/src/vendor/normalize.css diff --git a/frontend/package.json b/frontend/package.json index 159bb8a0..5aa3849c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,6 +21,7 @@ "dependencies": { "@tomgco/joyent-portal-ui": "alpha", "constant-case": "^2.0.0", + "css-loader": "^0.26.1", "force-array": "^3.1.0", "hapi": "^16.1.0", "inert": "^4.1.0", diff --git a/frontend/src/root.js b/frontend/src/root.js index 44df3670..7d2dd488 100644 --- a/frontend/src/root.js +++ b/frontend/src/root.js @@ -7,6 +7,8 @@ const ReactRouter = require('react-router'); const App = require('@containers/app'); const Store = require('@state/store'); +require('@ui/vendor/normalize.css'); + const { IntlProvider } = ReactIntlRedux; diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index 3c8ab616..d6f1af81 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -50,7 +50,7 @@ module.exports = { ], loaders: [ 'babel-loader' - ], + ] }, { test: /\.json?$/, exclude: /node_modules/, @@ -60,7 +60,7 @@ module.exports = { ], loaders: [ 'json-loader' - ], + ] }, { test: /\.png/, exclude: /node_modules/, @@ -68,19 +68,27 @@ module.exports = { FRONTEND, UI ], - loaders: [ + loader: [ 'url-loader' - ], + ] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, + exclude: /node_modules/, + loader: 'file-loader', include: [ FRONTEND, UI - ], - loaders: [ - 'file-loader' - ], + ] + }, + { + test: /\.css$/, + exclude: /node_modules/, + loaders: [ 'style-loader', 'css-loader' ], + include: [ + FRONTEND, + UI + ] }] } }; diff --git a/ui/.storybook/head.html b/ui/.storybook/head.html index fe250b6b..20c9ece5 100644 --- a/ui/.storybook/head.html +++ b/ui/.storybook/head.html @@ -1 +1 @@ - + \ No newline at end of file diff --git a/ui/package.json b/ui/package.json index ac423003..f6d0e838 100644 --- a/ui/package.json +++ b/ui/package.json @@ -11,7 +11,7 @@ "lint": "make lint", "test": "make test", "build": "make compile", - "storybook": "start-storybook -s ./src/shared/assets -p 6006", + "storybook": "start-storybook -s ./src/assets,./src/vendor -p 6006", "build-storybook": "build-storybook" }, "dependencies": { diff --git a/ui/src/shared/assets/close.svg b/ui/src/assets/close.svg similarity index 100% rename from ui/src/shared/assets/close.svg rename to ui/src/assets/close.svg diff --git a/ui/src/shared/assets/input-confirm.svg b/ui/src/assets/input-confirm.svg similarity index 100% rename from ui/src/shared/assets/input-confirm.svg rename to ui/src/assets/input-confirm.svg diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index fd2069f0..ad05457a 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -24,459 +24,6 @@ module.exports = styled.div` line-height: 1.5; color: ${colors.fonts.regular}; background-color: #FFFFFF; - - /************************************************************************** - * NORMALIZE.CSS * - **************************************************************************/ - - & article, - & aside, - & details, - & figcaption, - & figure, - & footer, - & header, - & main, - & menu, - & nav, - & section, - & summary { - display: block; - } - - & audio, - & canvas, - & progress, - & video { - display: inline-block; - } - - & audio:not([controls]) { - display: none; - height: 0; - } - - & progress { - vertical-align: baseline; - } - - & template, - & [hidden] { - display: none; - } - - & a { - background-color: transparent; - -webkit-text-decoration-skip: objects; - } - - & a:active, - & a:hover { - outline-width: 0; - } - - & abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; - } - - & b, - & strong { - font-weight: inherit; - } - - & b, - & strong { - font-weight: bolder; - } - - & dfn { - font-style: italic; - } - - & h1 { - margin: 0.67em 0; - } - - & 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; - } - - & img { - border-style: none; - } - - & svg:not(:root) { - overflow: hidden; - } - - & code, - & kbd, - & pre, - & samp { - font-family: monospace, monospace; - font-size: 1em; - } - - & figure { - margin: 1em ${remcalc(40)}; - } - - & hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; - height: 0; - overflow: visible; - } - - & button, - & input, - & optgroup, - & select, - & textarea { - font: inherit; - margin: 0; - } - - & optgroup { - font-weight: bold; - } - - & button, - & input { - overflow: visible; - } - - & button, - & select { - text-transform: none; - } - - & button, - & [type="button"], - & [type="reset"], - & [type="submit"] { - -webkit-appearance: button; - } - - & button::-moz-focus-inner, - & [type="button"]::-moz-focus-inner, - & [type="reset"]::-moz-focus-inner, - & [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } - - & button:-moz-focusring, - & [type="button"]:-moz-focusring, - & [type="reset"]:-moz-focusring, - & [type="submit"]:-moz-focusring { - outline: ${remcalc(1)} dotted ButtonText; - } - - & fieldset { - border: ${remcalc(1)} solid #c0c0c0; - margin: 0 ${remcalc(2)}; - padding: 0.35em 0.625em 0.75em; - } - - & legend { - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; - } - - & textarea { - overflow: auto; - } - - & [type="checkbox"], - & [type="radio"] { - -webkit-box-sizing: border-box; - 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: ${remcalc(-2)}; - } - - & [type="search"]::-webkit-search-cancel-button, - & [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - & ::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; - } - - & ::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; - } - - /************************************************************************** - * BOOTSTRAP REBOOT * - **************************************************************************/ - - & *, - & *::before, - & *::after { - box-sizing: inherit; - } - - & @-ms-viewport { - width: device-width; - } - & [tabindex="-1"]:focus { - outline: none !important; - } - - /** - * Typography - */ - - & h1, - & h2, - & h3, - & h4, - & h5, - & h6 { - margin-top: 0; - margin-bottom: .5rem; - } - - & p { - margin-top: 0; - margin-bottom: 1rem; - } - - & abbr[title], - & abbr[data-original-title] { - cursor: help; - border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor}; - } - - & address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; - } - - & ol, - & ul, - & dl { - margin-top: 0; - margin-bottom: 1rem; - } - - & ol ol, - & ul ul, - & ol ul, - & ul ol { - margin-bottom: 0; - } - - & dt { - font-weight: ${typography.dtFontWeight}; - } - - & dd { - margin-bottom: .5rem; - margin-left: 0; /* Undo browser default */ - } - - & blockquote { - margin: 0 0 1rem; - } - - /** - * Links - */ - - & a { - color: ${colors.brandPrimaryLink}; - text-decoration: underline; - - &:focus, - &:hover { - text-decoration: none; - } - - &:focus { - outline: ${remcalc(5)} auto -webkit-focus-ring-color; - outline-offset: ${remcalc(-2)}; - } - } - - & a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; - - &:focus, - &:hover { - text-decoration: none; - } - - &:focus { - outline: none; - } - } - - /** - * Code - */ - - & pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; - } - - /** - * Figures - */ - - & figure { - margin: 0 0 1rem; - } - - /** - * Images - */ - - & img { - vertical-align: middle; - } - - & [role="button"] { - cursor: pointer; - } - - & a, - & area, - & button, - & [role="button"], - & input, - & label, - & select, - & summary, - & textarea { - touch-action: manipulation; - } - - /** - * Tables - */ - - & table { - border-collapse: collapse; - background-color: ${tables.bg}; - } - - & caption { - padding-top: ${tables.cellPadding}; - padding-bottom: ${tables.cellPadding}; - color: ${typography.textMuted}; - text-align: left; - caption-side: bottom; - } - - & th { - text-align: left; - } - - /** - * Forms - */ - - & label { - display: inline-block; - margin-bottom: .5rem; - } - - & button:focus { - outline: ${remcalc(1)} dotted; - outline: ${remcalc(5)} auto -webkit-focus-ring-color; - } - - & input, - & button, - & select, - & textarea { - line-height: inherit; - } - - & input[type="radio"], - & input[type="checkbox"] { - &:disabled { - cursor: ${forms.cursorDisabled}; - } - } - - & input[type="date"], - & input[type="time"], - & input[type="datetime-local"], - & input[type="month"] { - -webkit-appearance: listbox; - } - - & textarea { - resize: vertical; - } - - & fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; - } - - & legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; - line-height: inherit; - } - - & input[type="search"] { - -webkit-appearance: none; - } `; module.exports.global = require('./global'); diff --git a/ui/src/shared/assets/close.png b/ui/src/shared/assets/close.png deleted file mode 100644 index 94fca5fadc9930a49dbe73bd5231eb6707370e3d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 345 zcmV-f0jBPx$6G=otR45f={{R0!Kg+VkeZrmU~Fvcb?)4`^NeX}Y1RM! z{cB-lWW373!QnW0^5oaZdO(VShVBK52?Eu4GqJO?&jKk13TprO@ne5(ZmuXy1CnAP zpqfoUyoV7a2~q@74AKPB46+Hxmxh`QQoIp}LubvJ^&6}KT@#Rh9f-w&7)3Ei9b5y5 z1G4G+_wNUROid6UXzCUq4g#4B;)4Jago2PDX8>6slVLy+=tlt<2Smd)pm`8vGS+|q zYd}*B@?a3i