feat(core): add css reset

Adds reset css code to the header of the document
when aurelia-ux is started. This can be disabled in the configuration.

resovles aurelia#124

packages/core/src/aurelia-ux.ts

@@ -6,17 +6,18 @@ import { Platform } from './platforms/platform';
 import { Cordova } from './hosts/cordova';
 import { Web } from './hosts/web';
 import { Electron } from './hosts/electron';
+import { UXConfiguration } from './ux-configuration';
 import { DesignProcessor } from './designs/design-processor';
 
-@inject(Container, DesignProcessor)
+@inject(UXConfiguration, Container, DesignProcessor)
 export class AureliaUX {
   private availableHosts: Host[];
 
   public host: Host;
   public platform: Platform;
   public design: Design;
 
-  constructor(container: Container, private designProcessor: DesignProcessor) {
+  constructor(public use: UXConfiguration, container: Container, private designProcessor: DesignProcessor) {
     this.availableHosts = [
       container.get(Cordova),
       container.get(Electron),

packages/core/src/index.ts

@@ -1,5 +1,6 @@
 import { FrameworkConfiguration } from 'aurelia-framework';
 import { AureliaUX } from './aurelia-ux';
+import { PLATFORM } from 'aurelia-pal';
 
 export { swatches } from './colors/swatches';
 export { shadows } from './colors/shadows';
@@ -14,14 +15,20 @@ export { UxTheme } from './styles/ux-theme';
 export { StyleEngine } from './styles/style-engine';
 
 export { AureliaUX } from './aurelia-ux';
+export { UXConfiguration } from './ux-configuration';
 
 export function configure(config: FrameworkConfiguration, callback?: (config: AureliaUX) => Promise<any>) {
   const ux = config.container.get(AureliaUX) as AureliaUX;
 
+  config.globalResources([
+    PLATFORM.moduleName('./reset.css')
+  ]);
+
   if (typeof callback === 'function') {
     return Promise.resolve(callback(ux))
       .then(() => ux.start(config));
   } else {
+    ux.use.defaultConfiguration();
     return ux.start(config);
   }
 }

packages/core/src/reset.css

@@ -0,0 +1,235 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+v2.0 | 20110126
+License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native \`audio\` and \`video\`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 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 {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to \`inherit\` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}

packages/core/src/ux-configuration.ts

@@ -0,0 +1,30 @@
+import { inject } from 'aurelia-dependency-injection';
+import { getLogger } from 'aurelia-logging';
+import { Loader } from 'aurelia-loader';
+import { DOM } from 'aurelia-pal';
+
+@inject(Loader)
+export class UXConfiguration {
+  private logger = getLogger('aurelia-ux');
+
+  constructor(private loader: Loader) { }
+
+  public defaultConfiguration() {
+    this.cssReset();
+    return this;
+  }
+
+  public cssReset() {
+    this.loader.loadText('@aurelia-ux/core/reset.css')
+      .catch(err => {
+        this.logger.warn('Aurelia-UX Core failed to load reset.css, some visual errors may appear.', err);
+      })
+      .then(text => {
+        if (text) {
+          DOM.injectStyles(text);
+        }
+      });
+
+    return this;
+  }
+}