base styles based on bootstrap and normalize

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 = () => {
+const Base = module.exports = ({
-  return null;
+  className,
+  style,
+  children
+}) => {
+  const cn = classNames(
+    className,
+    styles.base
+  );
+
+  return (
+    <div style={style} className={cn}>
+      {children}
+    </div>
+  );
+};
+
+Base.propTypes = {
+  className: React.PropTypes.string,
+  style: React.PropTypes.object,
+  children: React.PropTypes.node
 };

ui/src/components/base/readme.md

@@ -1 +1,2 @@
 # `<Base>`
+

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, `<h1>`-`<h6>` 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 `<p>`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 `<pre>` 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, `<img>`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: `<img>`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 `<meta name="viewport" content="width=device-width">` 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;
+    }
+  }
+}
+

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'
+    textAlign: 'center',
-  },
-  p: {
     color: 'white'
   }
 };
 
 nmodule.exports = ReactDOM.renderToString(
-  <Grid style={styles.grid}>
+  <Container style={styles.container}>
     <Row style={styles.row} around>
-      <Column style={styles.column} xs={2}>
+      <Column style={styles.column} xs={2}>1</Column>
-        <p style={styles.p}>1</p>
+      <Column style={styles.column} xs={2}>2</Column>
-      </Column>
+      <Column style={styles.column} xs={2}>3</Column>
-      <Column style={styles.column} xs={2}>
-        <p style={styles.p}>2</p>
-      </Column>
-      <Column style={styles.column} xs={2}>
-        <p style={styles.p}>3</p>
-      </Column>
     </Row>
-  </Grid>
+  </Container>
 );
 ```
 
@@ -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 (
-    <Grid>
+    <Container>
       <Row around>
         <Column xs={2}>1</Column>
         <Column xs={2}>2</Column>
         <Column xs={2}>3</Column>
       </Row>
-    </Grid>
+    </Container>
   );
 };
 ```

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 = () => {
+const React = require('react');
-  return null;
+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 (
+    <div style={style} className={cn}>
+      {children}
+    </div>
+  );
+};
+
+Container.propTypes = {
+  fluid: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  style: React.PropTypes.object,
+  children: React.PropTypes.node
 };

ui/src/components/container/readme.md

@@ -1 +1,16 @@
-# `<Container>`
+# `<Grid>`
+
+## 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(
+  <Grid><Button>Hello World</Button></Grid>
+);
+```
+
+## usage

ui/src/components/grid/index.js

@@ -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 (
-    <div style={style} className={cn}>
-      {children}
-    </div>
-  );
-};
-
-Grid.propTypes = {
-  fluid: React.PropTypes.bool,
-  className: React.PropTypes.string,
-  style: React.PropTypes.object,
-  children: React.PropTypes.node
-};

ui/src/components/grid/readme.md

@@ -1,16 +0,0 @@
-# `<Grid>`
-
-## 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(
-  <Grid><Button>Hello World</Button></Grid>
-);
-```
-
-## usage

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(
-  <Grid>
+  <Container>
     <Row center='xs' start='sm'>
       <Button>1</Button>
       <Button>2</Button>
     </Row>
-  </Grid>
+  </Container>
 );
 ```
 

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 sm-viewport: only screen and (min-width: 48em); /* 768px */
-@value md-viewport: only screen and (min-width: 64em);
+@value md-viewport: only screen and (min-width: 64em); /* 1024px */
-@value lg-viewport: only screen and (min-width: 75em);
+@value lg-viewport: only screen and (min-width: 75em); /* 1200px */

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);

ui/src/constants/forms.css

@@ -0,0 +1,5 @@
+:root {
+  --cursor-disabled: not-allowed;
+}
+
+@value cursor-disabled: var(--cursor-disabled);

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);

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);

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);

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: {
+  FAQ: require('./faq.md')
-    Overview: require('./guidelines/overview.md')
-  }
 };

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')
 };

ui/static/.gitignore

@@ -2,3 +2,5 @@
 !.gitignore
 !theme.css
 !index.html
+!reboot.css
+

ui/static/index.html

@@ -2,8 +2,8 @@
 <html lang='en-US'>
   <head>
     <title>Joyent UI Framework</title>
-    <link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet" type="text/css">
     <link href="/static/theme.css" rel="stylesheet" type="text/css">
+    <link href="/static/reboot.css" rel="stylesheet" type="text/css">
     <link href="/static/docs.css" rel="stylesheet" type="text/css">
   </head>
   <body>

ui/static/reboot.css

@@ -0,0 +1,4 @@
+html, body {
+  font-size: 16px;
+  margin: 0;
+}