Add custom ui documentation (#1963)

source/_cookbook/custom_ui_by_andrey-git.markdown

@@ -0,0 +1,12 @@
+---
+layout: page
+title: "Custom UI light state-card by andrey-git"
+description: ""
+date: 2017-02-04 10:45
+sidebar: true
+comments: false
+sharing: true
+footer: true
+ha_category: User Interface
+ha_external_link: https://github.com/andrey-git/home-assistant-custom-ui
+---

source/_includes/asides/developers_navigation.html

@@ -58,6 +58,7 @@
           <li>{% active_link /developers/frontend_add_card/ Add State Card %}</li>
           <li>{% active_link /developers/frontend_add_more_info/ Add More Info Dialog %}</li>
           <li>{% active_link /developers/frontend_creating_custom_panels/ Add Custom Panels %}</li>
+          <li>{% active_link /developers/frontend_creating_custom_ui/ Add Custom UI %}</li>
         </ul>
       </li>
       <li>

source/developers/frontend_creating_custom_ui.markdown

@@ -0,0 +1,35 @@
+---
+layout: page
+title: "Creating custom UI"
+description: "Introduction to create custom ui for Home Assistant."
+date: 2017-02-04 13:00
+sidebar: true
+comments: false
+sharing: true
+footer: true
+ha_release: 0.38
+---
+If you would like to use your own [State card](/developers/frontend_add_card/) without merging your code into [home-assistant-polymer](https://github.com/home-assistant/home-assistant-polymer/) you can create your own implementation.
+
+- Put the element source file and its dependencies in `www/custom_ui/` directory under you homeassistant config.
+
+For example if creating a state card for the `light` domain named `my_custom_light_card` put `state-card-my_custom_light_card.html` in `www/custom_ui/`.
+
+That file should implement `<state-card-my_custom_light_card>` tag with Polymer.
+
+In `state-card-my_custom_light_card.html` you should use `<link rel="import">` to import all the dependencies **not** used by Homeassistant UI.
+Do not import any dependencies used by Homeassistant UI.
+Importing those will work in `development: 1` mode, but will fail in production mode.
+
+- In the `customize:` section of `configuration.yaml` put `custom_ui_state_card: <element-name>`.
+
+For example:
+```yaml
+homeassistant:
+  customize:
+    - entity_id: light
+      custom_ui_state_card: my_custom_light_card
+```
+
+
+For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.