Add the styleguide docs

docs/style.md

@@ -0,0 +1,50 @@
+---
+id: style
+title: Styleguides
+sidebar_label: Styleguides
+---
+
+---
+
+
+On `amphora-html` using the `data`  and `meta` object that are the instances of the components and site respectively. This state
+will expose the component variations on the state then it will set these variations on the into a structure [Kiln](https://docs.clayplatform.com/clay-kiln/) will need then
+render the `HTML`. 
+
+---
+
+## Get component variations
+
+Using the site name; `amphora-html` build the specific style path that we need to have all stylesheet that we need: 
+`styleguides/siteName/components` 
+
+If the name of the site is not available the `siteName` will be replaced for `_default` then return the list of the variation of the components.
+
+If a component variation exist we will receive a combination of the name of the component and the name of the variation separate by an
+underscore like this example: `componentName_variationName`
+
+if the component variation is no set we will have the name of the component as a default style.
+
+For more information on how to get the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
+
+---
+
+## Set component default variations
+
+After getting the list of the variations expose on the state (or set on the data object that we receive) we can go throw each component defining it default styleguide. The following are the condition that we got to define which is the variation that we will add:
+
+- The component has a variation set, but it doesn't exist in the site's styleguide or the default styleguide; render the component with the default variation;
+
+- The component has no variation set; render the component with the default variation.
+
+- Finally, if the other condition doesn't match to the current component means that we have a component variation define and we use it
+
+For more information on how to set the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
+
+---
+
+## Compose data
+
+After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/).
+
+For more information on how the kiln structure is formed and send; you can check the [render.js](https://github.com/clay/amphora-html/blob/master/lib/render.js) file on the `amphora-html` repository.

website/sidebars.json

@@ -5,6 +5,9 @@
     ],
     "Integration": [
       "integration"
+    ],
+    "Styleguide": [
+      "style"
     ]
   }
 }