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;
+}