Merge pull request #49 from LIN3S/docs/installing-and-configuring

Docs/installing and configuring

Author: gorkalaucirica

docs/first_use_installing_and_configuring.md

@@ -1,3 +1,49 @@
 # Installing and configuring
 
-> TODO
+The easiest way to install this bundle is using Composer
+```bash
+$ composer require lin3s/pattern-library-builder
+```
+Register the Bundle in your AppKernel 
+```php
+$bundles = [
+    ...
+    new Lin3sPatternLibraryBuilderBundle(),
+    ...
+];
+```
+Configure the basic settings in your `config.yml`:
+```yaml
+lin3s_pattern_library_builder:
+    theme:
+        title: "My title"
+        description: "My description"
+        custom_styles:
+            color_primary: "#000"
+        logo: ~
+        javascripts: []
+        stylesheets: []
+    templates_config_files_path: "%kernel.root_dir%/PatternLibrary"
+```
+Add routes to access the Design System in your routing file:
+```yaml
+_pattern_library:
+    resource: "@Lin3sPatternLibraryBuilderBundle/Resources/config/routing.yml"
+```
+Create a folder in your AppBundle kernel root named `PatternLibrary` to store the Pattern Library configuration
+and create an index configuration file.
+```yaml
+status: 0
+description: '<p>This is the icon card component description.</p>'
+renderer:
+    type: homepage
+    options:
+        sections: []
+```
+
+Install assets 
+```bash
+$ bin/console assets:install --symlink
+``` 
+
+Now you can navigate to `http://localhost:8000/design-system` and see the index page.

docs/first_use_your_first_page.md

@@ -1,3 +1,41 @@
 # Your first page
 
-For this example we are showing  
+For rendering components in the Pattern Library first you should create a YAML in your `PatternLibrary` folder for the 
+desired item to render. It is recommended to have separated folders inside PatternLibrary folder for separating 
+different kind of  components.
+
+For example:
+```yaml
+status: 2
+description: '<p>This is the button atom description.</p>'
+renderer:
+    type: twig
+    options:
+        template: 'atoms/button.html.twig'
+        preview_parameters:
+            primary:
+                content: Hola
+            link:
+                content: Hola 2
+                modifier: orange
+                href: test
+                tag: a
+```
+
+Then, reference it in `index.yml` on the desired section with the corresponding slug based on directory structure:
+```yaml
+status: 0
+description: '<p>This is the icon card component description.</p>'
+renderer:
+    type: homepage
+    options:
+        sections:
+            -
+                title: 'Atoms'
+                description: 'These are the atoms'
+                items:
+                    -
+                        slug: 'architecture/atoms/button'
+```
+
+The component to render must exists in the current views folder of your application.

docs/symfony_configuration_reference.md

@@ -1,3 +1,18 @@
 # Symfony Configuration reference
 
-> TODO
+These are the parameters accepted by Pattern Library Builder
+
+```yaml
+lin3s_pattern_library_builder:
+    theme:
+        title: "My title"
+        description: "My description"
+        custom_styles:
+            color_primary: "#000"
+        logo: ~
+        # Javascript files to be injected to the pattern library
+        javascripts: []
+        # CSS files to be injected to the pattern library
+        stylesheets: []
+    templates_config_files_path: "%kernel.root_dir%/PatternLibrary"
+```