From 6df1d14049751defe29ea2750f06700f0649b785 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 25 Oct 2016 02:15:43 +0100 Subject: [PATCH] base styles based on bootstrap and normalize --- ui/src/components/base/index.js | 25 +- ui/src/components/base/readme.md | 1 + ui/src/components/base/style.css | 596 ++++++++++++++++++ ui/src/components/column/readme.md | 31 +- ui/src/components/container/index.js | 34 +- ui/src/components/container/readme.md | 17 +- .../components/{grid => container}/style.css | 0 ui/src/components/grid/index.js | 33 - ui/src/components/grid/readme.md | 16 - ui/src/components/row/readme.md | 6 +- ui/src/constants/breakpoints.css | 6 +- ui/src/constants/colors.css | 9 + ui/src/constants/forms.css | 5 + ui/src/constants/links.css | 13 + ui/src/constants/tables.css | 7 + ui/src/constants/typography.css | 11 + ui/src/docs.js | 13 +- ui/src/index.js | 4 +- ui/src/layout.md | 0 ui/static/.gitignore | 2 + ui/static/index.html | 2 +- ui/static/reboot.css | 4 + 22 files changed, 749 insertions(+), 86 deletions(-) create mode 100644 ui/src/components/base/style.css rename ui/src/components/{grid => container}/style.css (100%) delete mode 100644 ui/src/components/grid/index.js delete mode 100644 ui/src/components/grid/readme.md create mode 100644 ui/src/constants/colors.css create mode 100644 ui/src/constants/forms.css create mode 100644 ui/src/constants/links.css create mode 100644 ui/src/constants/tables.css create mode 100644 ui/src/constants/typography.css create mode 100644 ui/src/layout.md create mode 100644 ui/static/reboot.css diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index 32dd9ac6..9021ba18 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -1,5 +1,26 @@ const React = require('react'); +const classNames = require('classnames'); +const styles = require('./style.css'); -module.exports = () => { - return null; +const Base = module.exports = ({ + className, + style, + children +}) => { + const cn = classNames( + className, + styles.base + ); + + return ( +
+ {children} +
+ ); +}; + +Base.propTypes = { + className: React.PropTypes.string, + style: React.PropTypes.object, + children: React.PropTypes.node }; diff --git a/ui/src/components/base/readme.md b/ui/src/components/base/readme.md index b698ffc7..51196cf3 100644 --- a/ui/src/components/base/readme.md +++ b/ui/src/components/base/readme.md @@ -1 +1,2 @@ # `` + diff --git a/ui/src/components/base/style.css b/ui/src/components/base/style.css new file mode 100644 index 00000000..883ba034 --- /dev/null +++ b/ui/src/components/base/style.css @@ -0,0 +1,596 @@ +/* from: + * + * reboot.css v4.0.0-alpha.5 + * MIT License + * github.com/twbs/bootstrap + * + * normalize.css v4.2.0 + * MIT License + * github.com/necolas/normalize.css + */ + +@value cursor-disabled from "../../constants/forms.css"; +@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css"; +@value table-bg, table-cell-padding from "../../constants/tables.css"; +@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css"; + +:root { + --cursor-disabled: cursor-disabled; + --link-color: link-color; + --link-decoration: link-decoration; + --link-hover-color: link-hover-color; + --link-hover-decoration: link-hover-decoration; + --table-bg: table-bg; + --table-cell-padding: table-cell-padding; + --dt-font-weight: dt-font-weight; + --text-muted: text-muted; + --abbr-border-color: abbr-border-color; +} + +.base { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1rem; + line-height: 1.5; + color: #373a3c; + background-color: #fff; + + & :global { + + /************************************************************************** + * 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 { + font-size: 2em; + 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 40px; + } + + & 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: 1px dotted ButtonText; + } + + & fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + 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: -2px; + } + + & [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; + } + + /* + * Suppress the focus outline on elements that cannot be accessed via keyboard. + * This prevents an unwanted focus outline from appearing around elements that + * might still respond to pointer events. + * + * Credit: https://github.com/suitcss/base + */ + & [tabindex="-1"]:focus { + outline: none !important; + } + + /** + * Typography + */ + + /* Remove top margins from headings + * + * By default, `

`-`

` all receive top and bottom margins. We nuke the top + * margin for easier control within type scales as it avoids margin collapsing. + */ + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + margin-top: 0; + margin-bottom: .5rem; + } + + /* Reset margins on paragraphs + * + * Similarly, the top margin on `

`s get reset. However, we also reset the + * bottom margin to use `rem` units instead of `em`. + */ + & p { + margin-top: 0; + margin-bottom: 1rem; + } + + /* Abbreviations and acronyms */ + & abbr[title], + /* Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 */ + & abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted var(--abbr-border-color); + } + + & 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: var(--dt-font-weight); + } + + & dd { + margin-bottom: .5rem; + margin-left: 0; /* Undo browser default */ + } + + & blockquote { + margin: 0 0 1rem; + } + + /** + * Links + */ + + & a { + color: var(--link-color); + text-decoration: var(--link-decoration); + + &:focus, + &:hover { + color: var(--link-hover-color); + text-decoration: var(--link-hover-decoration); + } + + &:focus { + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + } + } + + /* And undo these styles for placeholder links/named anchors (without href) + * which have not been made explicitly keyboard-focusable (without tabindex). + * It would be more straightforward to just use a[href] in previous block, but that + * causes specificity issues in many other styles that are too complex to fix. + * See https://github.com/twbs/bootstrap/issues/19402 + */ + + & a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; + + &:focus, + &:hover { + color: var(--link-hover-color); + text-decoration: var(--link-hover-decoration); + } + + &:focus { + outline: none; + } + } + + /** + * Code + */ + + & pre { + /* Remove browser default top margin */ + margin-top: 0; + /* Reset browser default of `1em` to use `rem`s */ + margin-bottom: 1rem; + /* Normalize v4 removed this property, causing `

` content to break out of wrapping code snippets */
+      overflow: auto;
+    }
+
+    /**
+     * Figures
+     */
+
+    & figure {
+      /* Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
+       * We reset that to create a better flow in-page.
+       */
+      margin: 0 0 1rem;
+    }
+
+    /**
+     * Images
+     */
+
+    & img {
+      /* By default, ``s are `inline-block`. This assumes that, and vertically
+       * centers them. This won't apply should you reset them to `block` level.
+       */
+      vertical-align: middle;
+      /* Note: ``s are deliberately not made responsive by default.
+       * For the rationale behind this, see the comments on the `.img-fluid` class.
+       */
+    }
+
+    /* iOS "clickable elements" fix for role="button"
+     *
+     * Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+     * for traditionally non-focusable elements with role="button"
+     * see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+     */
+
+    & [role="button"] {
+      cursor: pointer;
+    }
+
+    /* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+     *
+     * In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+     * DON'T remove the click delay when `` is present.
+     * However, they DO support removing the click delay via `touch-action: manipulation`.
+     * See:
+     * * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+     * * http://caniuse.com/#feat=css-touch-action
+     * * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+     */
+
+    & a,
+    & area,
+    & button,
+    & [role="button"],
+    & input,
+    & label,
+    & select,
+    & summary,
+    & textarea {
+      touch-action: manipulation;
+    }
+
+    /**
+     * Tables
+     */
+
+    & table {
+      /* No longer part of Normalize since v4 */
+      border-collapse: collapse;
+      /* Reset for nesting within parents with `background-color`. */
+      background-color: var(--table-bg);
+    }
+
+    & caption {
+      padding-top: var(--table-cell-padding);
+      padding-bottom: var(--table-cell-padding);
+      color: var(--text-muted);
+      text-align: left;
+      caption-side: bottom;
+    }
+
+    & th {
+      /* Centered by default, but left-align-ed to match the `td`s below. */
+      text-align: left;
+    }
+
+    /**
+     * Forms
+     */
+
+    & label {
+      /* Allow labels to use `margin` for spacing. */
+      display: inline-block;
+      margin-bottom: .5rem;
+    }
+
+    /* Work around a Firefox/IE bug where the transparent `button` background
+     * results in a loss of the default `button` focus styles.
+     *
+     * Credit: https://github.com/suitcss/base/
+     */
+    & button:focus {
+      outline: 1px dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+
+    & input,
+    & button,
+    & select,
+    & textarea {
+      /* Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are */
+      /* properly inherited. However, `line-height` isn't inherited there. */
+      line-height: inherit;
+    }
+
+    & input[type="radio"],
+    & input[type="checkbox"] {
+      /* Apply a disabled cursor for radios and checkboxes.
+       *
+       * Note: Neither radios nor checkboxes can be readonly.
+       */
+      &:disabled {
+        cursor: var(--cursor-disabled);
+      }
+    }
+
+    & input[type="date"],
+    & input[type="time"],
+    & input[type="datetime-local"],
+    & input[type="month"] {
+      /* Remove the default appearance of temporal inputs to avoid a Mobile Safari
+       * bug where setting a custom line-height prevents text from being vertically
+       * centered within the input.
+       *
+       * Bug report: https://github.com/twbs/bootstrap/issues/11266
+       */
+      -webkit-appearance: listbox;
+    }
+
+    & textarea {
+      /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
+      resize: vertical;
+    }
+
+    & fieldset {
+      /* Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+       * so we reset that to ensure it behaves more like a standard block element.
+       * See https://github.com/twbs/bootstrap/issues/12359.
+       */
+      min-width: 0;
+      /* Reset the default outline behavior of fieldsets so they don't affect page layout. */
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+
+    & legend {
+      /* Reset the entire legend element to match the `fieldset` */
+      display: block;
+      width: 100%;
+      padding: 0;
+      margin-bottom: .5rem;
+      font-size: 1.5rem;
+      line-height: inherit;
+    }
+
+    & input[type="search"] {
+      /* This overrides the extra rounded corners on search inputs in iOS so that our
+       * `.form-control` class can properly style them. Note that this cannot simply
+       * be added to `.form-control` as it's not specific enough. For details, see
+       * https://github.com/twbs/bootstrap/issues/11586.
+       */
+      -webkit-appearance: none;
+    }
+
+    /* todo: needed? */
+    & output {
+      display: inline-block;
+    }
+
+    /* Always hide an element with the `hidden` HTML attribute (from PureCSS). */
+    & [hidden] {
+      display: none !important;
+    }
+  }
+}
+
diff --git a/ui/src/components/column/readme.md b/ui/src/components/column/readme.md
index 73363d69..0668b307 100644
--- a/ui/src/components/column/readme.md
+++ b/ui/src/components/column/readme.md
@@ -5,12 +5,13 @@
 ```embed
 const React = require('react');
 const ReactDOM = require('react-dom/server');
-const Grid = require('../grid');
+const Base = require('../base');
+const Container = require('../container');
 const Row = require('../row');
 const Column = require('./index');
 
 const styles = {
-  grid: {
+  container: {
     backgroundColor: '#FFEBEE'
   },
   row: {
@@ -18,27 +19,19 @@ const styles = {
   },
   column: {
     backgroundColor: '#B71C1C',
-    textAlign: 'center'
-  },
-  p: {
+    textAlign: 'center',
     color: 'white'
   }
 };
 
 nmodule.exports = ReactDOM.renderToString(
-  
+  
     
-      
-        

1

-
- -

2

-
- -

3

-
+ 1 + 2 + 3
-
+ ); ``` @@ -46,19 +39,19 @@ nmodule.exports = ReactDOM.renderToString( ```js const React = require('react'); -const Grid = require('ui/grid'); +const Container = require('ui/container'); const Row = require('ui/row'); const Column = require('ui/index'); module.exports = () => { return ( - + 1 2 3 - + ); }; ``` \ No newline at end of file diff --git a/ui/src/components/container/index.js b/ui/src/components/container/index.js index 32dd9ac6..537fdd6d 100644 --- a/ui/src/components/container/index.js +++ b/ui/src/components/container/index.js @@ -1,5 +1,33 @@ -const React = require('react'); +/* + * based on + * https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js + */ -module.exports = () => { - return null; +const React = require('react'); +const classNames = require('classnames'); +const styles = require('./style.css'); + +const Container = module.exports = ({ + fluid = false, + className, + children, + style +}) => { + const cn = classNames( + className, + styles[fluid ? 'container-fluid' : 'container'] + ); + + return ( +
+ {children} +
+ ); +}; + +Container.propTypes = { + fluid: React.PropTypes.bool, + className: React.PropTypes.string, + style: React.PropTypes.object, + children: React.PropTypes.node }; diff --git a/ui/src/components/container/readme.md b/ui/src/components/container/readme.md index bd33d693..8e051721 100644 --- a/ui/src/components/container/readme.md +++ b/ui/src/components/container/readme.md @@ -1 +1,16 @@ -# `` +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Container = require('./index.js'); +const Button = require('../button'); + +nmodule.exports = ReactDOM.renderToString( + +); +``` + +## usage diff --git a/ui/src/components/grid/style.css b/ui/src/components/container/style.css similarity index 100% rename from ui/src/components/grid/style.css rename to ui/src/components/container/style.css diff --git a/ui/src/components/grid/index.js b/ui/src/components/grid/index.js deleted file mode 100644 index 11a35b8b..00000000 --- a/ui/src/components/grid/index.js +++ /dev/null @@ -1,33 +0,0 @@ -/* - * based on - * https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js - */ - -const React = require('react'); -const classNames = require('classnames'); -const styles = require('./style.css'); - -const Grid = module.exports = ({ - fluid = false, - className, - children, - style -}) => { - const cn = classNames( - className, - styles[fluid ? 'container-fluid' : 'container'] - ); - - return ( -
- {children} -
- ); -}; - -Grid.propTypes = { - fluid: React.PropTypes.bool, - className: React.PropTypes.string, - style: React.PropTypes.object, - children: React.PropTypes.node -}; diff --git a/ui/src/components/grid/readme.md b/ui/src/components/grid/readme.md deleted file mode 100644 index 3a0d806c..00000000 --- a/ui/src/components/grid/readme.md +++ /dev/null @@ -1,16 +0,0 @@ -# `` - -## demo - -```embed -const React = require('react'); -const ReactDOM = require('react-dom/server'); -const Grid = require('./index.js'); -const Button = require('../button'); - -nmodule.exports = ReactDOM.renderToString( - -); -``` - -## usage diff --git a/ui/src/components/row/readme.md b/ui/src/components/row/readme.md index 50c7ad08..c03b0ef8 100644 --- a/ui/src/components/row/readme.md +++ b/ui/src/components/row/readme.md @@ -6,16 +6,16 @@ const React = require('react'); const ReactDOM = require('react-dom/server'); const Row = require('./index.js'); -const Grid = require('../grid'); +const Container = require('../container'); const Button = require('../button'); nmodule.exports = ReactDOM.renderToString( - + - +
); ``` diff --git a/ui/src/constants/breakpoints.css b/ui/src/constants/breakpoints.css index d200c9b6..46649d0e 100644 --- a/ui/src/constants/breakpoints.css +++ b/ui/src/constants/breakpoints.css @@ -3,6 +3,6 @@ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css */ -@value sm-viewport: only screen and (min-width: 48em); -@value md-viewport: only screen and (min-width: 64em); -@value lg-viewport: only screen and (min-width: 75em); +@value sm-viewport: only screen and (min-width: 48em); /* 768px */ +@value md-viewport: only screen and (min-width: 64em); /* 1024px */ +@value lg-viewport: only screen and (min-width: 75em); /* 1200px */ diff --git a/ui/src/constants/colors.css b/ui/src/constants/colors.css new file mode 100644 index 00000000..201a0797 --- /dev/null +++ b/ui/src/constants/colors.css @@ -0,0 +1,9 @@ +@value brand-primary from "./colors.css"; + +:root { + --brand-primary: #0275d8; + --gray-light: #818a91; +} + +@value brand-primary: var(--brand-primary); +@value gray-light: var(--gray-light); diff --git a/ui/src/constants/forms.css b/ui/src/constants/forms.css new file mode 100644 index 00000000..6e05ef58 --- /dev/null +++ b/ui/src/constants/forms.css @@ -0,0 +1,5 @@ +:root { + --cursor-disabled: not-allowed; +} + +@value cursor-disabled: var(--cursor-disabled); diff --git a/ui/src/constants/links.css b/ui/src/constants/links.css new file mode 100644 index 00000000..feb603ec --- /dev/null +++ b/ui/src/constants/links.css @@ -0,0 +1,13 @@ +@value brand-primary from "./colors.css"; + +:root { + --link-color: brand-primary; + --link-decoration: none; + --link-hover-color: darken(var(--link-color), 15%); + --link-hover-decoration: underline; +} + +@value link-color: var(--link-color); +@value link-decoration: var(--link-decoration); +@value link-hover-color: var(--link-hover-color); +@value link-hover-decoration: var(--link-hover-decoration); diff --git a/ui/src/constants/tables.css b/ui/src/constants/tables.css new file mode 100644 index 00000000..ad0bd842 --- /dev/null +++ b/ui/src/constants/tables.css @@ -0,0 +1,7 @@ +:root { + --table-bg: transparent; + --table-cell-padding: .75rem; +} + +@value table-bg: var(--table-bg); +@value table-cell-padding: var(--table-cell-padding); diff --git a/ui/src/constants/typography.css b/ui/src/constants/typography.css new file mode 100644 index 00000000..976d0f63 --- /dev/null +++ b/ui/src/constants/typography.css @@ -0,0 +1,11 @@ +@value gray-light from "./colors.css"; + +:root { + --dt-font-weight: bold; + --text-muted: gray-light; + --abbr-border-color: gray-light; +} + +@value dt-font-weight: var(--dt-font-weight); +@value text-muted: var(--text-muted); +@value abbr-border-color: var(--abbr-border-color); diff --git a/ui/src/docs.js b/ui/src/docs.js index 225bfb3b..ce2e8d4f 100644 --- a/ui/src/docs.js +++ b/ui/src/docs.js @@ -1,10 +1,15 @@ module.exports = { - components: { + 'Getting Started': require('./getting-started.md'), + Layout: require('./layout.md'), + Guidelines: { + Overview: require('./guidelines/overview.md') + }, + Components: { Base: require('./components/base/readme.md'), Container: require('./components/container/readme.md'), + Row: require('./components/row/readme.md'), + Column: require('./components/column/readme.md'), Button: require('./components/button/readme.md') }, - guidelines: { - Overview: require('./guidelines/overview.md') - } + FAQ: require('./faq.md') }; diff --git a/ui/src/index.js b/ui/src/index.js index 17f7cd30..c58772cb 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -1,5 +1,7 @@ module.exports = { + Base: require('./components/base'), Button: require('./components/button'), + Column: require('./components/column'), Container: require('./components/container'), - Base: require('./components/base') + Row: require('./components/row') }; diff --git a/ui/src/layout.md b/ui/src/layout.md new file mode 100644 index 00000000..e69de29b diff --git a/ui/static/.gitignore b/ui/static/.gitignore index 8b6785f3..e736ca10 100644 --- a/ui/static/.gitignore +++ b/ui/static/.gitignore @@ -2,3 +2,5 @@ !.gitignore !theme.css !index.html +!reboot.css + diff --git a/ui/static/index.html b/ui/static/index.html index 6d962aeb..d10c4d51 100644 --- a/ui/static/index.html +++ b/ui/static/index.html @@ -2,8 +2,8 @@ Joyent UI Framework - + diff --git a/ui/static/reboot.css b/ui/static/reboot.css new file mode 100644 index 00000000..6b503062 --- /dev/null +++ b/ui/static/reboot.css @@ -0,0 +1,4 @@ +html, body { + font-size: 16px; + margin: 0; +}