Add UI page frame

.gitignore

@@ -2,4 +2,5 @@
 dist
 demo/bundle.js
 demo/index.html
+demo/ui/index.html
 

README.md

@@ -321,6 +321,7 @@ Axs also offers several shorthand styling props for faster development.
 - [ ] axs-ui library
   - [ ] Flexbox props
   - [ ] Element reset style objects
+- [ ] Replace open color with palx
 - [ ] Plugin architecture for style props
 
 ## Related

demo/App.js

@@ -17,6 +17,8 @@ class App extends React.Component {
   }
 
   componentDidMount () {
+    const { pathname } = history.location
+    this.setState({ path: pathname })
     history.listen(({ pathname }) => {
       this.setState({ path: pathname })
     })

demo/Container.js

@@ -3,7 +3,10 @@ import React from 'react'
 import { Box } from '../src'
 
 const Container = props => (
-  <Box {...props} mx='auto' css={cx} />
+  <Box {...props}
+    mx='auto'
+    px3
+    css={cx} />
 )
 
 const cx = {

demo/Cta.js

@@ -5,22 +5,20 @@ import Container from './Container'
 import Dit from './Dit'
 
 const Cta = () => (
-  <Box is='section' px3 py4>
-    <Container>
-      <Dit />
-      <Text size={3} bold>
-        Read the docs and get started
-      </Text>
-      <Text
-        is='a'
-        href='https://github.com/jxnblk/axs'
-        size={2}
-        bold
-        grape
-        children='View on GitHub'
-      />
-    </Container>
-  </Box>
+  <Container is='section' py4>
+    <Dit />
+    <Text size={3} bold>
+      Read the docs and get started
+    </Text>
+    <Text
+      is='a'
+      href='https://github.com/jxnblk/axs'
+      size={2}
+      bold
+      grape
+      children='View on GitHub'
+    />
+  </Container>
 )
 
 export default Cta

demo/Examples.js

@@ -3,22 +3,19 @@ import React from 'react'
 import { Box, Text } from '../src'
 import { Flex, Heading } from 'axs-ui'
 import Container from './Container'
-import Pre from './Pre'
 import ExamplePre from './ExamplePre'
 import examples from './example-source'
 
 const Examples = () => (
-  <Box is='section' px3 py4>
-    <Container>
-      <Heading mb2 children='Examples' />
-      {examples.map((eg, i) => (
-        <Box py3 key={i}>
-          <Heading level={3} mb2 children={eg.name} />
-          <ExamplePre example={eg.comp} />
-        </Box>
-      ))}
-    </Container>
-  </Box>
+  <Container is='section' py4>
+    <Heading mb2 children='Examples' />
+    {examples.map((eg, i) => (
+      <Box py3 key={i}>
+        <Heading level={3} mb2 children={eg.name} />
+        <ExamplePre example={eg.comp} />
+      </Box>
+    ))}
+  </Container>
 )
 
 export default Examples

demo/Features.js

@@ -6,44 +6,42 @@ import Container from './Container'
 import Dit from './Dit'
 
 const Features = () => (
-  <Box is='section' px3>
-    <Container>
-      <Flex mx-3 css={cx.flex}>
-        <Box p3 width={[1, 1/2]}>
-          <Dit />
-          <Heading size={3} mb2 children='Responsive Typography and Layout' />
-          <Text>
-            Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives.
-          </Text>
-        </Box>
-        <Box p3 width={[1, 1/2]}>
-          <Dit />
-          <Heading size={3} mb2 children='From Prototype to UI Library' />
-          <Text>
-            Axs is intended as a way to quickly prototype new UI, handle one-off styles,
-            and serve as a foundation for creating your own custom UI component libraries.
-          </Text>
-        </Box>
-        <Box p3 width={[1, 1/2]}>
-          <Dit />
-          <Heading size={3} mb2 children='UI Component Primitives' />
-          <Text>
-            Use the Box component as a starting point for any visual containers or grid systems in your app.
-            Use the Text component for headings, labels, messages, or any other UI typography.
-          </Text>
-        </Box>
-        <Box p3 width={[1, 1/2]}>
-          <Dit />
-          <Heading size={3} mb2 children='The Power of CSS in JavaScript' />
-          <Text>
-            Each Axs component handles CSS-in-JS with the <code>css</code> prop,
-            with support for media queries and pseudoclasses,
-            to allow for any fine-tuned styling needs.
-          </Text>
-        </Box>
-      </Flex>
-    </Container>
-  </Box>
+  <Container is='section'>
+    <Flex mx-3 css={cx.flex}>
+      <Box p3 width={[1, 1/2]}>
+        <Dit />
+        <Heading size={3} mb2 children='Responsive Typography and Layout' />
+        <Text>
+          Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives.
+        </Text>
+      </Box>
+      <Box p3 width={[1, 1/2]}>
+        <Dit />
+        <Heading size={3} mb2 children='From Prototype to UI Library' />
+        <Text>
+          Axs is intended as a way to quickly prototype new UI, handle one-off styles,
+          and serve as a foundation for creating your own custom UI component libraries.
+        </Text>
+      </Box>
+      <Box p3 width={[1, 1/2]}>
+        <Dit />
+        <Heading size={3} mb2 children='UI Component Primitives' />
+        <Text>
+          Use the Box component as a starting point for any visual containers or grid systems in your app.
+          Use the Text component for headings, labels, messages, or any other UI typography.
+        </Text>
+      </Box>
+      <Box p3 width={[1, 1/2]}>
+        <Dit />
+        <Heading size={3} mb2 children='The Power of CSS in JavaScript' />
+        <Text>
+          Each Axs component handles CSS-in-JS with the <code>css</code> prop,
+          with support for media queries and pseudoclasses,
+          to allow for any fine-tuned styling needs.
+        </Text>
+      </Box>
+    </Flex>
+  </Container>
 )
 
 const cx = {

demo/Footer.js

@@ -7,8 +7,7 @@ import Container from './Container'
 import Logo from './Logo'
 
 const Footer = () => (
-  <Box is='footer'
-    px3 py4>
+  <Box is='footer' py4>
     <Container>
       <Link
         mr2

demo/Header.js

@@ -10,7 +10,7 @@ import Pre from './Pre'
 
 export default () => (
   <Box is='header' px3 mb4>
-    <Box px3 py4 mb4 white bgGrape>
+    <Box py4 mb4 white bgGrape>
       <Container py4>
         <Flex css={cx.flex}>
           <Box border='right' css={cx.pipe} pr3 mr3>

demo/Link.js

@@ -15,13 +15,12 @@ const Link = ({ to, ...props }) => {
       size6
       bold
       grape
+      display='inline-block'
+      py2
       {...props}
       is='a'
       onClick={e => to ? onClick(e, to) : null}
       css={{
-        display: 'inline-block',
-        paddingTop: 16,
-        paddingBottom: 16,
         textDecoration: 'none',
         ':hover': {
           color: colors.grape9

demo/Nav.js

@@ -43,7 +43,8 @@ const Nav = () => (
 
 const cx = {
   root: {
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignItems: 'center'
   },
   space: {
     flex: '1 1 auto'

demo/UI.js

@@ -1,8 +1,46 @@
 
 import React from 'react'
+import { Box, config } from 'axs-ui'
+
+import Container from './Container'
+import UiHeader from './UiHeader'
+import UiNav from './UiNav'
+import UiComponents from './UiComponents'
 
 const UI = () => {
-  return <div>UI</div>
+  return (
+    <Box ml={[ null, null, 192 ]}>
+      <Container>
+        <UiHeader />
+        <UiNav py1
+          px={[ null, null, 2 ]}
+          css={cx.nav} />
+        <UiComponents />
+      </Container>
+    </Box>
+  )
+}
+
+const { breakpoints } = config.get()
+
+const cx = {
+  root: {
+  },
+  nav: {
+    [breakpoints[1]]: {
+      position: 'fixed',
+      top: 100,
+      left: 0,
+      bottom: 0,
+      overflow: 'auto',
+      width: 192,
+      paddingLeft: 32,
+      paddingRight: 32,
+      backgroundColor: '#fff'
+    }
+  },
+  main: {
+  }
 }
 
 export default UI

demo/UiComponents.js

@@ -0,0 +1,20 @@
+
+import React from 'react'
+import { Box, Heading } from 'axs-ui'
+
+import components from './ui-components'
+import ExamplePre from './ExamplePre'
+
+const UiComponents = () => (
+  <Box>
+    {components.map((comp, i) => (
+      <Box key={i} id={comp.name} py3>
+        <Heading level={3} mb2 children={comp.name} />
+        <ExamplePre example={comp.example} />
+      </Box>
+    ))}
+  </Box>
+)
+
+export default UiComponents
+

demo/UiHeader.js

@@ -0,0 +1,26 @@
+
+import React from 'react'
+import {
+  Box,
+  Heading,
+  Text
+} from 'axs-ui'
+import Pre from './Pre'
+
+const UiHeader = () => (
+  <Box py3>
+    <Heading level={1} grape>
+      Axs UI
+    </Heading>
+    <Text bold size={3} grape>
+      UI Component Primitives
+    </Text>
+    <Pre size={4} p0 py2>npm i axs-ui</Pre>
+    <Text py2>
+      In addition to the core Box and Text components,
+      the optional <code>axs-ui</code> package includes several pre-styled UI component primitives.
+    </Text>
+  </Box>
+)
+
+export default UiHeader

demo/UiNav.js

@@ -0,0 +1,23 @@
+
+import React from 'react'
+import { Box } from 'axs'
+import components from './ui-components'
+import Link from './Link'
+
+const UiNav = (props) => (
+  <Box {...props}>
+    {components.map((comp, i) => (
+      <Link
+        key={i}
+        display='block'
+        py0
+        mb1
+        href={`#${comp.name}`}>
+        {comp.name}
+      </Link>
+    ))}
+  </Box>
+)
+
+export default UiNav
+

demo/Usage.js

@@ -15,19 +15,17 @@ const example = (
 )
 
 const Usage = () => (
-  <Box px3>
-    <Container>
-      <Heading children='Usage' />
-      <Flex mx-2 py3 css={{ alignItems: 'center' }}>
-        <Box px2 width={[1, 1/2]}>
-          <Pre bgGray0 children={toJsxString(example)} />
-        </Box>
-        <Box px2 width={[1, 1/2]}>
-          {example}
-        </Box>
-      </Flex>
-    </Container>
-  </Box>
+  <Container>
+    <Heading children='Usage' />
+    <Flex mx-2 py3 css={{ alignItems: 'center' }}>
+      <Box px2 width={[1, 1/2]}>
+        <Pre bgGray0 children={toJsxString(example)} />
+      </Box>
+      <Box px2 width={[1, 1/2]}>
+        {example}
+      </Box>
+    </Flex>
+  </Container>
 )
 
 export default Usage

demo/entry.js

@@ -41,7 +41,7 @@ module.exports = (locals) => {
   }
   const { renderToString, renderToStaticMarkup } = require('react-dom/server')
 
-  const app = renderToStaticMarkup(<App {...locals} />)
+  const app = renderToString(<App {...locals} />)
   const css = cxs.css
   cxs.reset()