Move docs to the website

README.md

@@ -6,32 +6,14 @@
 [![npm Version](https://img.shields.io/npm/v/@julmot/form-components.svg?style=flat-square)](https://www.npmjs.com/package/@julmot/form-components)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/julmot/form-components/master/LICENSE)
 
-## Installation
+## Further Information
 
-Using npm:
+**Please view the [website](https://form-components.io/) for documentation and further information!**
 
-```bash
-$ npm install @julmot/form-components
-```
+## Contributing
 
-Using a CDN:
+See the [contribution guidelines](./CONTRIBUTING.md).
 
-- [jsDelivr](https://www.jsdelivr.com/package/npm/@julmot/form-components?path=dist)
+## Changelog
 
-You can embed individual form components from the `dist` folder. They are available as CommonJS (e.g. Webpack), AMD (e.g. RequireJS) and global (attached to the `window` object) packages with their corresponding CSS files.
-
-## Currently Available Components
-
-- [x] Select
-- [x] Text Field (single and multi line)
-- [x] Checkbox
-- [x] Message (e.g. to output validation messages at the top of a document)
-- [ ] Radio
-- [ ] File Upload
-
-
-## Requirements
-
-- Root _content_ element must be the `<main>` element (necessary for detection of inline messages)
-- Work best with embedded [normalize.css](https://github.com/necolas/normalize.css)
-- Inherits your app-specific fonts
+Changes are documented in [release](https://github.com/julmot/form-components/releases) descriptions.  

build/fractal.js

@@ -4,9 +4,11 @@ const path = require('path'),
   hbs = require('@frctl/handlebars'),
   pkg = require(path.join(__dirname, '../package.json'));
 
-fractal.set('project.title', `${pkg.name.split('/').pop().replace(
-  '-', ' '
-).replace(/\b\w/g, l => l.toUpperCase())} v${pkg.version}`);
+const title = `${pkg.name.split('/').pop().replace('-', ' ').replace(
+  /\b\w/g, l => l.toUpperCase())
+}`;
+fractal.set('project.title', `${title} v${pkg.version}`);
+fractal.docs.set('indexLabel', title);
 fractal.components.set('path', path.join(__dirname, '../src/components'));
 fractal.docs.set('path', path.join(__dirname, '../src/docs'));
 fractal.web.set('static.path', path.join(__dirname, '../dist'));

src/components/_common/development.js

@@ -16,6 +16,11 @@ class Bootstrap {
       console.debug('Listening for ready event');
       document.addEventListener('DOMContentLoaded', () => this.initOnce());
     }
+
+    // Add class to only add transitions if the page is loaded
+    window.addEventListener('load', () => {
+      document.body.classList.add('transition-ready');
+    });
   }
 
   initOnce() {

src/components/_common/development.scss

@@ -1,6 +1,16 @@
+// This file is only used for development purposes and won't be integrated into
+// other components in any way.
 @import url('https://fonts.googleapis.com/css?family=Lato');
 
 html,
 body {
   font-family: 'Lato', sans-serif;
 }
+
+// transitions only after page load
+body:not(.transition-ready) {
+  &,
+  * {
+    transition: none !important;
+  }
+}

src/docs/index.md

@@ -1,5 +1,53 @@
-# Form Components
-
 > Custom Form Components. Without Any Framework.
 
-Have a look at the component list on the left side.
+## Installation
+
+Using npm:
+
+```bash
+$ npm install @julmot/form-components
+```
+
+Using a CDN:
+
+- [jsDelivr](https://www.jsdelivr.com/package/npm/@julmot/form-components?path=dist)
+
+You can embed individual form components from the `dist` folder. They are available as CommonJS (e.g. Webpack), AMD (e.g. RequireJS) and global (attached to the `window` object) packages with their corresponding CSS files.
+
+## Getting Started
+
+After you've embedded the components you want to use (including their CSS files), you need to initialize them. Create a new class instance of the exported `default` class. In case you'd like to dynamically initialize instances, you can use the also exported `selector` string to determine if a component exists.
+
+For example when using Webpack with ES6:
+
+```js
+import '@julmot/form-components/dist/message/message.css';
+import * as Message from '@julmot/form-components/dist/message/message';
+
+new Message.default(document.querySelector(Message.selector));
+```
+
+## Currently Available Components
+
+- Select
+- Text Field (single and multi line)
+- Checkbox
+- Message (e.g. to output validation messages at the top of a document)
+
+
+## Browser Compatibility
+
+Successfully tested in:
+
+- IE11 (Windows)
+- Latest Edge (Windows)
+- Latest Chrome (macOS and Windows)
+- Latest Firefox (macOS and Windows)
+- Latest Chrome Mobile (Android)
+- Latest Safari Mobile (iOS)
+
+## Requirements
+
+- Root _content_ element must be the `<main>` element (necessary for detection of inline messages)
+- Work best with embedded [normalize.css](https://github.com/necolas/normalize.css)
+- Inherits your app-specific fonts