From d211b2700a8eb173fa79c74ee2eeceda38ec5342 Mon Sep 17 00:00:00 2001
From: Teemu Taskula <teemu.taskula@taitounited.fi>
Date: Mon, 21 Aug 2017 00:13:15 +0300
Subject: [PATCH] docs(Rewrite): Started to rewrite docs page

---
 docs/package.json                         |  18 +-
 docs/public/index.html                    |   1 +
 docs/src/App.css                          |  11 -
 docs/src/App.js                           | 617 +++-------------------
 docs/src/components/Buttons.js            |  99 ++++
 docs/src/components/Cards.js              |  24 +
 docs/src/components/Form.js               | 130 +++++
 docs/src/components/Functions.js          |  24 +
 docs/src/components/Home.js               |  21 +
 docs/src/components/Properties.js         |  92 ++++
 docs/src/components/Sections.js           |  49 ++
 docs/src/components/Sidemenu.js           | 139 +++++
 docs/src/components/Structure.js          |  10 +
 docs/src/components/Tables.js             |  61 +++
 docs/src/{ => components}/ThemeChanger.js |  35 +-
 docs/src/components/Typography.js         |  73 +++
 docs/src/components/Utilities.js          | 120 +++++
 docs/src/index.css                        |   9 +-
 18 files changed, 943 insertions(+), 590 deletions(-)
 delete mode 100644 docs/src/App.css
 create mode 100644 docs/src/components/Buttons.js
 create mode 100644 docs/src/components/Cards.js
 create mode 100644 docs/src/components/Form.js
 create mode 100644 docs/src/components/Functions.js
 create mode 100644 docs/src/components/Home.js
 create mode 100644 docs/src/components/Properties.js
 create mode 100644 docs/src/components/Sections.js
 create mode 100644 docs/src/components/Sidemenu.js
 create mode 100644 docs/src/components/Structure.js
 create mode 100644 docs/src/components/Tables.js
 rename docs/src/{ => components}/ThemeChanger.js (93%)
 create mode 100644 docs/src/components/Typography.js
 create mode 100644 docs/src/components/Utilities.js

diff --git a/docs/package.json b/docs/package.json
index a0d4cda..6021748 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,15 +4,16 @@
   "private": true,
   "homepage": "https://TaitoUnited.github.io/react-components-kit",
   "dependencies": {
-    "color": "^1.0.3",
-    "react": "^15.4.2",
-    "react-color": "^2.11.4",
-    "react-dom": "^15.4.2",
-    "styled-components": "^1.4.4"
+    "color": "^2.0.0",
+    "react": "^15.6.1",
+    "react-color": "^2.13.4",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.1.2",
+    "styled-components": "^2.1.2"
   },
   "devDependencies": {
-    "gh-pages": "^0.12.0",
-    "react-scripts": "0.9.5"
+    "gh-pages": "^1.0.0",
+    "react-scripts": "1.0.11"
   },
   "scripts": {
     "predeploy": "npm run build",
@@ -20,6 +21,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "clear:install": "rm -rf node_modules && npm install"
   }
 }
diff --git a/docs/public/index.html b/docs/public/index.html
index ef6a83a..e20ab6d 100644
--- a/docs/public/index.html
+++ b/docs/public/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
+    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/docs/src/App.css b/docs/src/App.css
deleted file mode 100644
index af3afd1..0000000
--- a/docs/src/App.css
+++ /dev/null
@@ -1,11 +0,0 @@
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  font-size: 16px;
-}
-
-* {
-  box-sizing: border-box;
-}
diff --git a/docs/src/App.js b/docs/src/App.js
index fdc02b7..e681ec8 100644
--- a/docs/src/App.js
+++ b/docs/src/App.js
@@ -1,112 +1,24 @@
 import React, { Component } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
-import ThemeChanger from './ThemeChanger';
-import logo from './taito_ukkeli.png';
-import './App.css';
-
-// Components
-import {
-  Layout,
-  Box,
-  Heading,
-  LineSeparator,
-  Button,
-  Padder,
-  Spinner,
-  ToggleSwitch,
-  PlaceholderRows,
-  Card,
-  CircleProgress,
-  Text,
-  Tooltip,
-  FormControl,
-  Input,
-  Select,
-  Textarea,
-  DateSelect,
-  Badge,
-  Icon,
-  RadioButton,
-  withRipple,
-  createTheme,
-  Table,
-  Head,
-  Row,
-  Cell,
-} from 'react-components-kit';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Layout, Icon, Tooltip, createTheme } from 'react-components-kit';
 
 import { getColorData } from './utils';
-
-const SECTION_SEPARATION = '42px';
-
-const isNumeric = (n) => {
-  return !isNaN(parseFloat(n)) && isFinite(n);
-};
-
-const AppWrapper = styled(Layout)`
-  padding: 32px 42px;
-  position: relative;
-`;
-const Logo = styled.img`
-  width: 30px;
-  height: auto;
-  margin-left: 16px;
-`;
-const ThemeColorChangerButton = styled.div`
-  position: fixed;
-  bottom: 32px;
-  right: 32px;
-`;
-const Fab = styled.button`
-  border-radius: 50%;
-  border: none;
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: tomato;
-  color: #fff;
-`;
-const RippleBlock = withRipple(styled.div`
-  width: 100px;
-  height: 100px;
-  background-color: ${props => props.bg || '#eee'};
-`);
+import ThemeChanger from './components/ThemeChanger';
+import Sidemenu from './components/Sidemenu';
+import Sections from './components/Sections';
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.updateThemeColor = this.updateThemeColor.bind(this);
-    this.openColorPanel = this.openColorPanel.bind(this);
-    this.closeColorPanel = this.closeColorPanel.bind(this);
 
     this.state = {
-      inputOne: '',
-      inputTwo: '',
-      selectInput: 'foo1',
-      textareaOne: '',
       theme: createTheme(),
       colorPanelOpen: false,
-      table: {
-        selected: null,
-      }
     };
   }
 
-  handleInputChange(event) {
-    const target = event.target;
-    const value = (target.type && target.type === 'checkbox')
-      ? target.checked
-      : target.value;
-
-    const name = target.name;
-
-    this.setState({ [name]: value });
-  }
-
-  updateThemeColor(colorName, newColorValue) {
+  updateThemeColor = (colorName, newColorValue) => {
     const { group, isBaseColor } = getColorData(colorName);
     // base colors, e.g. primaryColor
     if (isBaseColor) {
@@ -137,482 +49,79 @@ class App extends Component {
 
   }
 
-  closeColorPanel() {
+  closeColorPanel = () => {
     this.setState({ colorPanelOpen: false });
   }
 
-  openColorPanel() {
+  openColorPanel= () => {
     this.setState({ colorPanelOpen: true });
   }
 
   render() {
-    const people = [
-      {
-        name: 'matt',
-        email: 'matt@gmail.com',
-        editor: 'vim',
-      },
-      {
-        name: 'evaline',
-        email: 'evaline@gmail.com',
-        editor: 'atom',
-      },
-      {
-        name: 'susan',
-        email: 'susan@gmail.com',
-        editor: 'emacs',
-      }
-    ]
+    const { theme, colorPanelOpen } = this.state;
 
     return (
-      <ThemeProvider theme={this.state.theme}>
-        <AppWrapper column>
-          <ThemeChanger
-            theme={this.state.theme}
-            updateThemeColor={this.updateThemeColor}
-            isOpen={this.state.colorPanelOpen}
-            close={this.closeColorPanel}
-          />
-
-          <ThemeColorChangerButton>
-            <Tooltip content='Change theme colors'>
-              <Fab onClick={this.openColorPanel}>
-                <Icon className='ion-android-color-palette' size='24px' />
-              </Fab>
-            </Tooltip>
-          </ThemeColorChangerButton>
-
-          <Layout align='center'>
-            <Box flex='1'>
-              <Heading>react-components-kit</Heading>
-            </Box>
-            <Box>
-              <Logo src={logo} />
-            </Box>
-          </Layout>
-          <LineSeparator horizontal />
-
-          <Heading el='h2'>Buttons</Heading>
-          <Layout column>
-            <Layout align='center'>
-              <Button primary>Primary</Button>
-              <Padder />
-              <Button secondary>Secondary</Button>
-              <Padder />
-              <Button danger>Danger</Button>
-              <Padder />
-              <Button danger disabled>Danger</Button>
-            </Layout>
-
-            <Padder vert='16px' />
-
-            <Layout align='center'>
-              <Button primary outline>Primary</Button>
-              <Padder />
-              <Button secondary outline>Secondary</Button>
-              <Padder />
-              <Button danger outline>Danger</Button>
-              <Padder />
-              <Button danger outline disabled>Danger</Button>
-            </Layout>
-
-            <Padder vert='16px' />
-
-            <Layout align='center'>
-              <Button primary clear>Primary</Button>
-              <Padder />
-              <Button secondary clear>Secondary</Button>
-              <Padder />
-              <Button danger clear>Danger</Button>
-              <Padder />
-              <Button danger clear disabled>Danger</Button>
-            </Layout>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Headings</Heading>
-
-          <Layout align='center'>
-            <Heading color='tomato'>
-              Heading 1
-            </Heading>
-            <Padder horiz='32px' />
-            <Heading el='h2' color='slategrey'>
-              Heading 2
-            </Heading>
-            <Padder horiz='32px' />
-            <Heading el='h3'>
-              Heading 3
-            </Heading>
-            <Padder horiz='32px' />
-            <Heading el='h4' color='rebeccapurple'>
-              Heading 4
-            </Heading>
-          </Layout>
-          <Layout align='center'>
-            <Heading sub el='h2' color='primaryColorLight'>
-              Sub heading 2
-            </Heading>
-            <Padder horiz='32px' />
-            <Heading sub el='h3'>
-              Sub heading 3
-            </Heading>
-            <Padder horiz='32px' />
-            <Heading sub el='h4' color='secondaryColorDark'>
-              Sub heading 4
-            </Heading>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Text</Heading>
-          <Layout align='center'>
-            <Text color='tomato'>
-              Colored span
-            </Text>
-            <Padder horiz='32px' />
-            <Text color='slategrey' el='i' size='12px'>
-              Italic smaller
-            </Text>
-            <Padder horiz='32px' />
-            <Text el='p'>
-              Paragraph
-            </Text>
-            <Padder horiz='32px' />
-            <Text color='rebeccapurple' el='strong' size='18px'>
-              Strong text
-            </Text>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Spinner</Heading>
-          <Layout align='center'>
-            <Spinner sm/>
-            <Padder horiz='32px' />
-            <Spinner md color='tomato'/>
-            <Padder horiz='32px' />
-            <Spinner lg color='papayawhip'/>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Badge</Heading>
-          <Layout align='center'>
-            <Badge mright='16px'>
-              Badge default
-            </Badge>
-            <Badge primary mright='16px'>
-              Badge primary
-            </Badge>
-            <Badge secondary mright='16px'>
-              Badge secondary
-            </Badge>
-            <Badge error mright='16px'>
-              Badge error
-            </Badge>
-            <Badge success>
-              Badge success
-            </Badge>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>ToggleSwitch</Heading>
-          <Padder vert='16px' />
-          <Layout align='center'>
-            <ToggleSwitch onToggle={() => console.log('TOGGLE!')}/>
-            <Padder horiz='32px' />
-            <ToggleSwitch
-              onToggle={() => console.log('TOGGLE!')}
-              ballColor='blue'
-              borderColor='rebeccapurple'
-              bgToggled='rebeccapurple'
-            />
-            <Padder horiz='32px' />
-            <ToggleSwitch
-              onToggle={() => console.log('TOGGLE!')}
-              ballColor='primaryColorLight'
-              borderColor='primaryColorDark'
-              bgToggled='primaryColorLighter'
-              outerLabel='toggle me!'
-              innerLabelLeft='on'
-              innerLabelRight='off'
+      <Router>
+        <ThemeProvider theme={theme}>
+          <AppWrapper column>
+            <ThemeChanger
+              theme={theme}
+              isOpen={colorPanelOpen}
+              updateThemeColor={this.updateThemeColor}
+              close={this.closeColorPanel}
             />
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>RadioButton</Heading>
-          <Padder vert='16px' />
-          <Layout row align='center'>
-            <RadioButton
-              selected='radio-1-3'
-              onSelect={(val) => console.log('pressed ', val)}
-              padding='8px'
-            >
-              <option value='radio-1-1'>
-                A thing
-              </option>
-              <option value='radio-1-2'>
-                <Tooltip content='Click me to select me'>
-                  What Am I?
-                </Tooltip>
-              </option>
-              <option value='radio-1-3'>
-                <Box>
-                  <Icon className='ion-beer' />
-                  <Padder horiz='8px' />
-                  <Text>Custom content!</Text>
-                </Box>
-              </option>
-            </RadioButton>
-
-            <Padder horiz='32px' />
-
-            <RadioButton
-              padding='4px'
-              secondary
-              selected='radio-2-2'
-              column
-              onSelect={(val) => console.log('pressed ', val)}
-            >
-              <option value='radio-2-1'>one</option>
-              <option value='radio-2-2'>two</option>
-            </RadioButton>
 
-            <Padder horiz='32px' />
-
-            <RadioButton
-              padding='4px'
-              warn
-              onSelect={val => console.log(val)}
-            >
-              <option value='radio-3-1'>Nothing</option>
-              <option value='radio-3-2'>Selected</option>
-              <option value='radio-3-3'>At</option>
-              <option value='radio-3-4'>First</option>
-            </RadioButton>
-
-            <Padder horiz='32px' />
-
-            <RadioButton
-              selected='radio-4-1'
-              padding='8px'
-              success
-              onSelect={val => console.log(val)}
-            >
-              <option flex='1' value='radio-4-1'>Flex</option>
-              <option flex='1' value='radio-4-2'>Example</option>
-              <option flex='1' value='radio-4-3'>Big Content Here!</option>
-            </RadioButton>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Card</Heading>
-          <Layout>
-            <Box>
-              <Card depth={1}>Depth 1</Card>
-            </Box>
-            <Padder />
-            <Box>
-              <Card depth={2}>Depth 2</Card>
-            </Box>
-            <Padder />
-            <Box>
-              <Card depth={3}>Depth 3</Card>
-            </Box>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Tooltip</Heading>
-          <Layout>
-            <Box>
-              <Tooltip content='Hovering yey!'>
-                <Text>Hover over me</Text>
+            <ThemeColorChangerButton>
+              <Tooltip content='Change theme colors'>
+                <Fab onClick={this.openColorPanel}>
+                  <Icon className='ion-android-color-palette' size='24px' />
+                </Fab>
               </Tooltip>
-            </Box>
-            <Padder horiz='32px' />
-            <Box>
-              <Tooltip
-                content='Down here!'
-                color='tomato'
-                bg='papayawhip'
-                bottom
-              >
-                <Button secondary>Hover over me too</Button>
-              </Tooltip>
-            </Box>
-            <Padder horiz='32px' />
-            <Box>
-              <Tooltip
-                color='rebeccapurple'
-                bg='white'
-                top
-                content={
-                  <Layout align='center'>
-                    <Spinner color='tomato' sm />
-                    <Padder horiz='8px' />
-                    <Text color='tomato' el='p'>
-                      Custom content works too!
-                    </Text>
-                  </Layout>
-                }
-              >
-                <Button danger>Don't you dare hover over me!</Button>
-              </Tooltip>
-            </Box>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Form stuff</Heading>
-          <Layout>
-            <Box flex='1'>
-              <FormControl label='Label color is based on primary color'>
-                <Input
-                  onChange={this.handleInputChange}
-                  name='inputOne'
-                  value={this.state.inputOne}
-                />
-              </FormControl>
-            </Box>
-            <Padder horiz='24px' />
-            <Box flex='1'>
-              <FormControl label='Try to type something else than a number'>
-                <Input
-                  onChange={this.handleInputChange}
-                  name='inputTwo'
-                  value={this.state.inputTwo}
-                  validator={isNumeric}
-                  validationMessage='Must be a number!'
-                />
-              </FormControl>
-            </Box>
-            <Padder horiz='24px' />
-            <Box flex='1'>
-              <FormControl label='Awesomeness level is:'>
-                <Padder vert='8px' />
-                <Select
-                  onSelect={this.handleInputChange}
-                  value={this.state.selectInput}
-                  name='selectInput'
-                >
-                  <option value='foo1'>Legen...</option>
-                  <option value='foo2'>wait for it</option>
-                  <option value='foo3'>...dary</option>
-                </Select>
-              </FormControl>
-            </Box>
-          </Layout>
-
-          <Padder vert='16px' />
-
-          <Layout>
-            <FormControl label='I`m a textarea - type a lot to make me auto-grow'>
-              <Textarea
-                onChange={this.handleInputChange}
-                name='textareaOne'
-                value={this.state.textareaOne}
-                autoResize
-              />
-            </FormControl>
-            <Padder horiz='32px' />
-            <FormControl label='You can also add an icon!' icon='ion-planet'>
-              <Input
-                onChange={this.handleInputChange}
-                name='inputIcon'
-                value={this.state.inputIcon}
-              />
-            </FormControl>
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>DateSelect</Heading>
-
-          <Layout row>
-            <DateSelect
-              locale='fi-FI'
-              onSelect={date => console.log('selected: ', date)}
-            />
-
-            <Padder horiz='64px' />
-
-            <DateSelect
-              locale='en-US'
-              defaultDate={new Date()}
-              onSelect={date => console.log('selected: ', date)}
-            />
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>Table</Heading>
-
-          <Table>
-            <Head>
-              <Cell flex='1'>Name</Cell>
-              <Cell flex='1'>Email</Cell>
-              <Cell flex='1'>Fave Editor</Cell>
-            </Head>
-            {people.map((thing, idx) => (
-              <Row
-                active={this.state.table.selected === idx}
-                onMouseOver={() => this.setState({
-                  table: { selected: idx },
-                })}
-              >
-                <Cell
-                  flex='1'
-                  active={this.state.table.selected === idx}
-                >
-                  {thing.name}
-                </Cell>
-                <Cell flex='1'>
-                  {thing.email}
-                </Cell>
-                <Cell flex='1'>
-                  {thing.editor}
-                </Cell>
-              </Row>
-            ))}
-          </Table>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>withRipple (HOC)</Heading>
-          <Layout align='center'>
-            <RippleBlock bg='tomato' />
-            <Padder horiz='32px' />
-            <RippleBlock bg='blue' />
-            <Padder horiz='32px' />
-            <RippleBlock bg='mediumseagreen' />
-          </Layout>
+            </ThemeColorChangerButton>
 
-          <Padder vert={SECTION_SEPARATION} />
+            <Content>
+              <Sidemenu />
+              <Sections />
+            </Content>
 
-          <Heading el='h2'>CircleProgress</Heading>
-          <Layout>
-            <CircleProgress
-              size='200px'
-              progress={64}
-            />
-          </Layout>
-
-          <Padder vert={SECTION_SEPARATION} />
-
-          <Heading el='h2'>PlaceholderRows</Heading>
-          <Layout>
-            <PlaceholderRows rows={6} />
-          </Layout>
-        </AppWrapper>
-      </ThemeProvider>
+          </AppWrapper>
+        </ThemeProvider>
+      </Router>
     );
   }
 }
 
+const AppWrapper = styled(Layout)`
+  position: relative;
+`;
+// const Logo = styled.img`
+//   width: 30px;
+//   height: auto;
+//   margin-left: 16px;
+// `;
+const ThemeColorChangerButton = styled.div`
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+`;
+const Fab = styled.button`
+  border-radius: 50%;
+  border: none;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: tomato;
+  color: #fff;
+  box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
+`;
+const Content = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+`;
+
 export default App;
diff --git a/docs/src/components/Buttons.js b/docs/src/components/Buttons.js
new file mode 100644
index 0000000..08ecbf7
--- /dev/null
+++ b/docs/src/components/Buttons.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Layout,
+  Padder,
+  Button,
+  Heading,
+  LineSeparator,
+} from 'react-components-kit';
+
+import Properties from './Properties';
+
+const buttonProperties = [
+  {
+    name: 'primary',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  },
+  {
+    name: 'secondary',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  },
+  {
+    name: 'danger',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  },
+  {
+    name: 'disabled',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  },
+  {
+    name: 'outline',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  },
+  {
+    name: 'clear',
+    type: 'bool',
+    defaultVal: 'false',
+    description: 'Foobar foobar',
+  }
+];
+
+const Buttons = () => (
+  <div>
+    <Heading el='h2'>Buttons</Heading>
+    <Layout column>
+      <Layout align='center'>
+        <Button primary>Primary</Button>
+        <Padder />
+        <Button secondary>Secondary</Button>
+        <Padder />
+        <Button danger>Danger</Button>
+        <Padder />
+        <Button danger disabled>Danger</Button>
+      </Layout>
+
+      <Padder vert='16px' />
+
+      <Layout align='center'>
+        <Button primary outline>Primary</Button>
+        <Padder />
+        <Button secondary outline>Secondary</Button>
+        <Padder />
+        <Button danger outline>Danger</Button>
+        <Padder />
+        <Button danger outline disabled>Danger</Button>
+      </Layout>
+
+      <Padder vert='16px' />
+
+      <Layout align='center'>
+        <Button primary clear>Primary</Button>
+        <Padder />
+        <Button secondary clear>Secondary</Button>
+        <Padder />
+        <Button danger clear>Danger</Button>
+        <Padder />
+        <Button danger clear disabled>Danger</Button>
+      </Layout>
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Layout>
+      <Properties properties={buttonProperties} />
+    </Layout>
+  </div>
+);
+
+export default Buttons;
diff --git a/docs/src/components/Cards.js b/docs/src/components/Cards.js
new file mode 100644
index 0000000..f4bfd3d
--- /dev/null
+++ b/docs/src/components/Cards.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Layout, Padder, Box, Card, Heading } from 'react-components-kit';
+
+const Cards = () => (
+  <div>
+    <Heading el='h2'>Card</Heading>
+    <Layout>
+      <Box>
+        <Card depth={1}>Depth 1</Card>
+      </Box>
+      <Padder />
+      <Box>
+        <Card depth={2}>Depth 2</Card>
+      </Box>
+      <Padder />
+      <Box>
+        <Card depth={3}>Depth 3</Card>
+      </Box>
+    </Layout>
+  </div>
+);
+
+export default Cards;
diff --git a/docs/src/components/Form.js b/docs/src/components/Form.js
new file mode 100644
index 0000000..d7c5076
--- /dev/null
+++ b/docs/src/components/Form.js
@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import {
+  Layout,
+  Padder,
+  ToggleSwitch,
+  Heading,
+  Textarea,
+  TextField,
+  FormControl,
+  Input,
+  Select,
+  DateSelect,
+} from 'react-components-kit';
+
+const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
+
+class Form extends Component {
+  state = {}
+
+  handleInputChange = (event) => {
+    const target = event.target;
+    const value = (target.type && target.type === 'checkbox')
+      ? target.checked
+      : target.value;
+
+    const name = target.name;
+
+    this.setState({ [name]: value });
+  }
+
+  render() {
+    return (
+      <div>
+        <Heading el='h2'>Form stuff</Heading>
+        <Layout>
+          <FormControl label='Awesomeness level is:'>
+            <Padder vert='8px' />
+            <Select
+              name='select'
+              onSelect={this.handleInputChange}
+              value={this.state.select}
+            >
+              <option value='foo1'>Legen...</option>
+              <option value='foo2'>wait for it</option>
+              <option value='foo3'>...dary</option>
+            </Select>
+          </FormControl>
+        </Layout>
+
+        <Padder vert='16px' />
+
+        <Layout>
+          <FormControl label='I`m a textarea - type a lot to make me auto-grow'>
+            <Textarea
+              name='textarea'
+              value={this.state.textarea}
+              onChange={this.handleInputChange}
+              autoResize
+            />
+          </FormControl>
+          <Padder horiz='32px' />
+          <FormControl label='You can also add an icon!' icon='ion-planet'>
+            <Input
+              name='inputWithIcon'
+              onChange={this.handleInputChange}
+              value={this.state.inputWithIcon}
+            />
+          </FormControl>
+        </Layout>
+
+        <Padder vert='16px' />
+
+        <Layout>
+          <TextField
+            name='textfield'
+            label='Teemu testi'
+            onChange={this.handleInputChange}
+            value={this.state.textfield}
+          />
+        </Layout>
+
+        <Padder vert='16px' />
+
+        <Heading el='h2'>DateSelect</Heading>
+
+        <Layout row>
+          <DateSelect
+            locale='fi-FI'
+            onSelect={date => console.log('selected: ', date)}
+          />
+
+          <Padder horiz='64px' />
+
+          <DateSelect
+            locale='en-US'
+            defaultDate={new Date()}
+            onSelect={date => console.log('selected: ', date)}
+          />
+        </Layout>
+
+        <Heading el='h2'>ToggleSwitch</Heading>
+
+        <Padder vert='16px' />
+        <Layout align='center'>
+          <ToggleSwitch onToggle={() => console.log('TOGGLE!')}/>
+          <Padder horiz='32px' />
+          <ToggleSwitch
+            onToggle={() => console.log('TOGGLE!')}
+            ballColor='blue'
+            borderColor='rebeccapurple'
+            bgToggled='rebeccapurple'
+          />
+          <Padder horiz='32px' />
+          <ToggleSwitch
+            onToggle={() => console.log('TOGGLE!')}
+            ballColor='primaryColorLight'
+            borderColor='primaryColorDark'
+            bgToggled='primaryColorLighter'
+            outerLabel='toggle me!'
+            innerLabelLeft='on'
+            innerLabelRight='off'
+          />
+        </Layout>
+      </div>
+    );
+  }
+}
+
+export default Form;
diff --git a/docs/src/components/Functions.js b/docs/src/components/Functions.js
new file mode 100644
index 0000000..eeccb30
--- /dev/null
+++ b/docs/src/components/Functions.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Layout, Padder, Heading, withRipple } from 'react-components-kit';
+
+const Functions = () => (
+  <div>
+    <Heading el='h2'>withRipple (HOC)</Heading>
+    <Layout align='center'>
+      <RippleBlock bg='tomato' />
+      <Padder horiz='32px' />
+      <RippleBlock bg='blue' />
+      <Padder horiz='32px' />
+      <RippleBlock bg='mediumseagreen' />
+    </Layout>
+  </div>
+);
+
+const RippleBlock = withRipple(styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: ${props => props.bg || '#eee'};
+`);
+
+export default Functions;
diff --git a/docs/src/components/Home.js b/docs/src/components/Home.js
new file mode 100644
index 0000000..38c53eb
--- /dev/null
+++ b/docs/src/components/Home.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const propTypes = {
+  something: PropTypes.any,
+};
+
+const Home = () => (
+  <HomeWrapper>
+    HOME
+  </HomeWrapper>
+);
+
+const HomeWrapper = styled.div`
+
+`;
+
+Home.propTypes = propTypes;
+
+export default Home;
diff --git a/docs/src/components/Properties.js b/docs/src/components/Properties.js
new file mode 100644
index 0000000..5aba1ec
--- /dev/null
+++ b/docs/src/components/Properties.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Heading } from 'react-components-kit';
+
+const propTypes = {
+  properties: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      defaultVal: PropTypes.string.isRequired,
+      description: PropTypes.string,
+      required: PropTypes.bool,
+    }).isRequired
+  ).isRequired,
+};
+
+const Properties = ({ properties }) => (
+  <PropertiesWrapper>
+    <Heading sub el='h3'>Properties</Heading>
+
+    <PropertiesTable>
+      <strong>
+        <PropRow>
+          <Name head>Name</Name>
+          <Type head>Type</Type>
+          <DefaultValue head>Default</DefaultValue>
+          <Description head>Description</Description>
+        </PropRow>
+      </strong>
+
+      {properties.map(prop =>
+        <PropRow>
+          <Name>{prop.name}{prop.required ? ' *' : ''}</Name>
+          <Type>{prop.type}</Type>
+          <DefaultValue>{prop.defaultVal}</DefaultValue>
+          <Description>{prop.description || ''}</Description>
+        </PropRow>
+      )}
+    </PropertiesTable>
+  </PropertiesWrapper>
+);
+
+const PropertiesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const PropertiesTable = styled.div`
+  border: 1px solid #eee;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+`;
+const PropRow = styled.div`
+  display: flex;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: #333;
+  border-bottom: 1px solid #eee;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:first-child {
+    border-bottom: 1px solid #eee;
+  }
+`;
+const Name = styled.div`
+  flex: 1;
+  color: ${props => !props.head && '#059642'};
+`;
+const Type = styled.div`
+  width: 80px;
+  font-family: ${props => !props.head &&
+    'Menlo,Monaco,Consolas,Courier New,monospace'
+  };
+`;
+const DefaultValue = styled.div`
+  width: 80px;
+  font-family: ${props => !props.head &&
+    'Menlo,Monaco,Consolas,Courier New,monospace'
+  };
+`;
+const Description = styled.div`
+  flex: 3;
+`;
+
+Properties.propTypes = propTypes;
+
+export default Properties;
diff --git a/docs/src/components/Sections.js b/docs/src/components/Sections.js
new file mode 100644
index 0000000..caf6f3f
--- /dev/null
+++ b/docs/src/components/Sections.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Route } from 'react-router-dom';
+
+import Home from './Home';
+import Buttons from './Buttons';
+import Typography from './Typography';
+import Structure from './Structure';
+import Form from './Form';
+import Utilities from './Utilities';
+import Functions from './Functions';
+import Cards from './Cards';
+
+const propTypes = {
+  something: PropTypes.any,
+};
+
+class Sections extends Component {
+  state = {
+    addSearch: 'TODO',
+  }
+
+  render() {
+    return (
+      <SectionsWrapper>
+        <Route exact path='/' component={Home} />
+        <Route path='/buttons' component={Buttons} />
+        <Route path='/typography' component={Typography} />
+        <Route path='/structure' component={Structure} />
+        <Route path='/form' component={Form} />
+        <Route path='/cards' component={Cards} />
+        <Route path='/utilities' component={Utilities} />
+        <Route path='/functions' component={Functions} />
+      </SectionsWrapper>
+    );
+  }
+}
+
+const SectionsWrapper = styled.div`
+  padding: 16px 24px;
+  min-height: 100vh;
+  flex: 1;
+  overflow: auto;
+`;
+
+Sections.propTypes = propTypes;
+
+export default Sections;
diff --git a/docs/src/components/Sidemenu.js b/docs/src/components/Sidemenu.js
new file mode 100644
index 0000000..3c8ac1e
--- /dev/null
+++ b/docs/src/components/Sidemenu.js
@@ -0,0 +1,139 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Padder } from 'react-components-kit';
+
+import logo from '../taito_ukkeli.png';
+
+const propTypes = {
+  something: PropTypes.any,
+};
+
+class Sidemenu extends Component {
+  state = {
+    filtering: 'TODO',
+  }
+
+  render() {
+    return (
+      <SidemenuWrapper>
+        <Title>react-components-kit</Title>
+        <SectionTitle to='/'>Getting started</SectionTitle>
+        <Padder vert='24px' />
+
+        <SectionTitle to='/buttons'>Buttons</SectionTitle>
+        <MenuItem to='/buttons#button'>Button</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/structure'>Structure</SectionTitle>
+        <MenuItem to='/structure#layout'>Layout</MenuItem>
+        <MenuItem to='/structure#box'>Box</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/typography'>Typography</SectionTitle>
+        <MenuItem to='/typography#heading'>Heading</MenuItem>
+        <MenuItem to='/typography#text'>Text</MenuItem>
+        <MenuItem to='/typography#icon'>Icon</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/form'>Form</SectionTitle>
+        <MenuItem to='/form#textfield'>TextField</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/cards'>Cards</SectionTitle>
+        <MenuItem to='/cards#card'>Card</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/utilities'>Utilities</SectionTitle>
+        <MenuItem to='/utilities#badge'>Badge</MenuItem>
+        <MenuItem to='/utilities#padder'>Padder</MenuItem>
+        <MenuItem to='/utilities#spinner'>Spinner</MenuItem>
+        <MenuItem to='/utilities#tooltip'>Tooltip</MenuItem>
+
+        <Padder vert='24px' />
+
+        <SectionTitle to='/functions'>Functions</SectionTitle>
+        <MenuItem to='/functions#create-theme'>createTheme</MenuItem>
+        <MenuItem to='/functions#with-ripple'>withRipple (HOC)</MenuItem>
+
+        <FooterLink
+          href='http://taitounited.fi/'
+          target='blank'
+          rel='noopener nooreferer'
+        >
+          <PoweredBy>
+            <span>Powered by</span><Logo src={logo} />
+          </PoweredBy>
+        </FooterLink>
+      </SidemenuWrapper>
+    );
+  }
+}
+
+const SidemenuWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+  width: 300px;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid #ccc;
+  box-shadow: 0px 0px 12px rgba(0,0,0,0.5);
+`;
+const Title = styled.div`
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: #222;
+`;
+const SectionTitle = styled(Link)`
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #666;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const MenuItem = styled(Link)`
+  font-size: 14px;
+  padding: 8px 0px;
+  color: #333;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const FooterLink = styled.a`
+  text-decoration: none;
+  color: #888;
+  font-size: 10px;
+  font-style: italic;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const PoweredBy = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 0px;
+  margin-top: 16px;
+  border-top: 1px solid #f5f5f5;
+`;
+const Logo = styled.img`
+  height: 26px;
+  width: auto;
+  margin-left: 10px;
+`;
+
+Sidemenu.propTypes = propTypes;
+
+export default Sidemenu;
diff --git a/docs/src/components/Structure.js b/docs/src/components/Structure.js
new file mode 100644
index 0000000..b1bb8b2
--- /dev/null
+++ b/docs/src/components/Structure.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Structure = () => (
+  <div>
+    Structure
+  </div>
+);
+
+export default Structure;
diff --git a/docs/src/components/Tables.js b/docs/src/components/Tables.js
new file mode 100644
index 0000000..6843cf6
--- /dev/null
+++ b/docs/src/components/Tables.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Table, Head, Cell, Row } from 'react-components-kit';
+
+const people = [
+  {
+    name: 'matt',
+    email: 'matt@gmail.com',
+    editor: 'vim',
+  },
+  {
+    name: 'evaline',
+    email: 'evaline@gmail.com',
+    editor: 'atom',
+  },
+  {
+    name: 'susan',
+    email: 'susan@gmail.com',
+    editor: 'emacs',
+  }
+];
+
+const Tables = () => (
+  <div>
+    <Heading el='h2'>Table</Heading>
+
+    <Table>
+      <Head>
+        <Cell flex='1'>Name</Cell>
+        <Cell flex='1'>Email</Cell>
+        <Cell flex='1'>Fave Editor</Cell>
+      </Head>
+
+      {people.map((thing, idx) => (
+        <Row
+          active={this.state.table.selected === idx}
+          onMouseOver={() => this.setState({
+            table: { selected: idx },
+          })}
+        >
+          <Cell
+            flex='1'
+            active={this.state.table.selected === idx}
+          >
+            {thing.name}
+          </Cell>
+          <Cell flex='1'>
+            {thing.email}
+          </Cell>
+          <Cell flex='1'>
+            {thing.editor}
+          </Cell>
+        </Row>
+      ))}
+    </Table>
+  </div>
+);
+
+Tables.propTypes = propTypes;
+
+export default Tables;
diff --git a/docs/src/ThemeChanger.js b/docs/src/components/ThemeChanger.js
similarity index 93%
rename from docs/src/ThemeChanger.js
rename to docs/src/components/ThemeChanger.js
index 6f3b62a..2796b1b 100644
--- a/docs/src/ThemeChanger.js
+++ b/docs/src/components/ThemeChanger.js
@@ -12,7 +12,7 @@ import {
   Text,
 } from 'react-components-kit';
 
-import { getColorData, getColorName } from './utils';
+import { getColorData, getColorName } from '../utils';
 
 class ColorBox extends Component {
   shouldComponentUpdate(nextProps) {
@@ -36,22 +36,24 @@ class ColorBox extends Component {
   }
 }
 
+const rank = color => [
+  'Darkest', 'Darker', 'Dark', 'Light', 'Lighter', 'Lightest'
+].indexOf(color[0]);
+    
+const sortShades = shades => Object.entries(shades).sort(
+  (a, b) => rank(a) - rank(b)
+);
 
 class ThemeChanger extends Component {
-  constructor(props) {
-    super(props);
-    this.selectColorBox = this.selectColorBox.bind(this);
-    this.exportTheme = this.exportTheme.bind(this);
-    this.state = {
-      selected: null,
-    }
+  state = {
+    selected: null,
   }
 
-  selectColorBox(colorName) {
+  selectColorBox = (colorName) => {
     this.setState({ selected: colorName });
   }
 
-  exportTheme() {
+  exportTheme = () => {
     const { theme } = this.props;
     const data = {};
 
@@ -76,6 +78,7 @@ class ThemeChanger extends Component {
     const baseColors = {};
     const derivedColors = {};
     const otherColors = [];
+
     Object.entries(theme)
       .filter(([colorName]) => colorName.indexOf('Base') === -1)
       .forEach(([colorName, colorValue]) => {
@@ -95,12 +98,6 @@ class ThemeChanger extends Component {
         }
       });
 
-    const rank = color => [
-      'Darkest', 'Darker', 'Dark', 'Light', 'Lighter', 'Lightest'
-    ].indexOf(color[0]);
-    const sortShades = shades => Object.entries(shades)
-      .sort((a, b) => rank(a) - rank(b));
-
     return (
       <ThemeChangerWrapper isOpen={this.props.isOpen}>
         <ThemeChangerPanel isOpen={this.props.isOpen}>
@@ -128,6 +125,7 @@ class ThemeChanger extends Component {
           </Layout>
 
           <LineSeparator horizontal />
+
           <Layout row>
             <Layout column w='48px'>
               {Object.entries(baseColors).map(([group, value]) => {
@@ -143,7 +141,9 @@ class ThemeChanger extends Component {
                 );
               })}
             </Layout>
+
             <LineSeparator vertical />
+
             <div>
               {Object.entries(derivedColors).map(([group, shades]) =>
                 <Layout row>
@@ -163,7 +163,9 @@ class ThemeChanger extends Component {
               )}
             </div>
           </Layout>
+
           <Padder vert='16px' />
+
           <Colors>
             {otherColors.map(([colorName, colorValue]) =>
               <ColorBox
@@ -175,6 +177,7 @@ class ThemeChanger extends Component {
               />
             )}
           </Colors>
+          
           <ColorPicker>
             {this.state.selected &&
               <SketchPicker
diff --git a/docs/src/components/Typography.js b/docs/src/components/Typography.js
new file mode 100644
index 0000000..ce7ae66
--- /dev/null
+++ b/docs/src/components/Typography.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  Layout,
+  Padder,
+  Button,
+  Heading,
+  Text,
+  LineSeparator,
+} from 'react-components-kit';
+
+const Typography = () => (
+  <div>
+    <Heading el='h2'>Headings</Heading>
+
+    <Layout align='center'>
+      <Heading color='tomato'>
+        Heading 1
+      </Heading>
+      <Padder horiz='32px' />
+      <Heading el='h2' color='slategrey'>
+        Heading 2
+      </Heading>
+      <Padder horiz='32px' />
+      <Heading el='h3'>
+        Heading 3
+      </Heading>
+      <Padder horiz='32px' />
+      <Heading el='h4' color='rebeccapurple'>
+        Heading 4
+      </Heading>
+    </Layout>
+
+    <Layout align='center'>
+      <Heading sub el='h2' color='primaryColorLight'>
+        Sub heading 2
+      </Heading>
+      <Padder horiz='32px' />
+      <Heading sub el='h3'>
+        Sub heading 3
+      </Heading>
+      <Padder horiz='32px' />
+      <Heading sub el='h4' color='secondaryColorDark'>
+        Sub heading 4
+      </Heading>
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2'>Text</Heading>
+
+    <Layout align='center'>
+      <Text color='tomato'>
+        Colored span
+      </Text>
+      <Padder horiz='32px' />
+      <Text color='slategrey' el='i' size='12px'>
+        Italic smaller
+      </Text>
+      <Padder horiz='32px' />
+      <Text el='p'>
+        Paragraph
+      </Text>
+      <Padder horiz='32px' />
+      <Text color='rebeccapurple' el='strong' size='18px'>
+        Strong text
+      </Text>
+    </Layout>
+  </div>
+);
+
+export default Typography;
diff --git a/docs/src/components/Utilities.js b/docs/src/components/Utilities.js
new file mode 100644
index 0000000..8f6d5a1
--- /dev/null
+++ b/docs/src/components/Utilities.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  Layout,
+  Box,
+  Padder,
+  Heading,
+  Spinner,
+  LineSeparator,
+  Badge,
+  Tooltip,
+  Text,
+  Button,
+  CircleProgress,
+  PlaceholderRows,
+} from 'react-components-kit';
+
+const Utilities = () => (
+  <div>
+    <Heading el='h2' id='badge'>
+      Badge
+    </Heading>
+
+    <Layout align='center'>
+      <Badge mright='16px'>
+        Badge default
+      </Badge>
+      <Badge primary mright='16px'>
+        Badge primary
+      </Badge>
+      <Badge secondary mright='16px'>
+        Badge secondary
+      </Badge>
+      <Badge error mright='16px'>
+        Badge error
+      </Badge>
+      <Badge success>
+        Badge success
+      </Badge>
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2'>CircleProgress</Heading>
+    <Layout>
+      <CircleProgress size='200px' progress={64} />
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2' id='padder'>
+      Padder
+    </Heading>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2'>PlaceholderRows</Heading>
+    <Layout>
+      <PlaceholderRows rows={6} />
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2' id='spinner'>
+      Spinner
+    </Heading>
+
+    <Layout align='center'>
+      <Spinner sm/>
+      <Padder horiz='32px' />
+      <Spinner md color='tomato'/>
+      <Padder horiz='32px' />
+      <Spinner lg color='papayawhip'/>
+    </Layout>
+
+    <LineSeparator horizontal />
+
+    <Heading el='h2'>Tooltip</Heading>
+    <Layout>
+      <Box>
+        <Tooltip content='Hovering yey!'>
+          <Text>Hover over me</Text>
+        </Tooltip>
+      </Box>
+      <Padder horiz='32px' />
+      <Box>
+        <Tooltip
+          content='Down here!'
+          color='tomato'
+          bg='papayawhip'
+          bottom
+        >
+          <Button secondary>Hover over me too</Button>
+        </Tooltip>
+      </Box>
+      <Padder horiz='32px' />
+      <Box>
+        <Tooltip
+          color='rebeccapurple'
+          bg='white'
+          top
+          content={
+            <Layout align='center'>
+              <Spinner color='tomato' sm />
+              <Padder horiz='8px' />
+              <Text color='tomato' el='p'>
+                Custom content works too!
+              </Text>
+            </Layout>
+          }
+        >
+          <Button danger>Don't you dare hover over me!</Button>
+        </Tooltip>
+      </Box>
+    </Layout>
+  </div>
+);
+
+export default Utilities;
diff --git a/docs/src/index.css b/docs/src/index.css
index b4cc725..8e44a95 100644
--- a/docs/src/index.css
+++ b/docs/src/index.css
@@ -1,5 +1,12 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  height: 100%;
+  width: 100%;
+  font-size: 16px;
+  font-family: 'Poppins', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
 }