tweaks

docs/API/helpers/overview.md

@@ -1,19 +1,36 @@
-# Fliplet Helpers
+# Helpers
+
+## What are Helpers?
 
 Building custom components using traditional development tools can be difficult: that's why Fliplet has created <strong>Helpers</strong>, a UI framework to easily create custom functionality for your Fliplet apps.
 
-Here's how it works:
+Let's break down how helpers work:
 
 1. You define a helper using JavaScript code
 2. The helper is shown into the Fliplet Studio components list alongside Fliplet 1st-party components.
 3. You drop the helper into your app screens. This creates an helper instance.
+4. Clicking on a helper instance shows its configuration interface.
 
-<p class="quote">Note: <strong>Every time you drop an helper into a screen a new "instance" gets created.</strong> Each helper is independent from each other and you can create as many as you want.</p>
+![image](/assets/img/helper-1.png)
+<small style="text-align: center;display: block"><i>A helper in Fliplet Studio, showing the helper instance in the device preview, its JavaScript configuration and the instance in the Screen HTML.<br/><br /></i></small>
 
 As you might be aware of, Fliplet components are also capable of presenting the user a configuration UI to amend their settings once clicked. Helpers easily allow you to define a configuration UI within just a few seconds as you will learn in the next few chapters of the documentation.
 
+## Sample use cases
+
+We now know what Helpers are. The next question is "what can we use them for?"
+
+1. Create an accordion
+2. Create a decision tree
+3. Creating a quiz
+
+...and literally any other use case requiring either static or dynamic content.
+
+
 ---
 
+## Further reading
+
 <section class="blocks alt">
   <a class="bl two" href="quickstart.html">
     <div>

docs/API/helpers/quickstart.md

@@ -6,52 +6,51 @@ Helpers can be created by defining them via **screen or global JavaScript code**
 
 ---
 
-## 1. Define the helper
+## 1. Define your helper
 
-Define your helper in the Screen JS or Global JS of your Fliplet app:
+Define your helper in the <strong>Screen JavaScript or Global JavaScript</strong> of your Fliplet app:
 
 ```js
-Fliplet.Helper('welcome', {
-  template: '<p class="welcome">Hi {! attr.firstName !}, how are you?</p>',
+Fliplet.Helper('accordion', {
+  template: '<div class="accordion"><h3>Title: {! attr.title !}</h3>' +
+            '<p>Content: {! attr.content !}</p></div>',
   configuration: {
     fields: [
-      {
-        name: 'firstName',
-        label: 'First name'
-      }
+      { name: 'title', type: 'text', label: 'Title' },
+      { name: 'content', type: 'text', label: 'Content' }
     ]
   }
 });
 ```
 
 Here's an explanation of what the above helper declares:
-- a HTML template for the helper, which would print a paragraph with some text and the dynamic property `attr.firstName`
-- a configuration UI to set up the value for the dynamic property described above
+- a template string for the helper, which would print some HTML with two dynamic properties such as `attr.title`
+- a configuration UI to set up the value for the two dynamic properties
 
 ## 2. Drop the helper into your screen
 
 Once the helper has been defined it **will be shown in the components list of Fliplet Studio alongside our 1st-party components**. If you drag & drop the helper in your app screen, a new instance of the helper will be created when the helper has been dropped.
 
 The output in the screen should look like the following:
 
-```html
-<p>Hi John, how are you?</p>
-```
+![image](/assets/img/helper-1.png)
+
+<p class="quote">Note: <strong>Every time you drop an helper into a screen a new "instance" gets created.</strong> Each helper is independent from each other and you can create as many as you want.</p>
 
 ## 3. Instance HTML
 
-Finally, if you inspect the resulting HTML either via the developer tools in Fliplet Studio or the browser you will see the produced HTML, which should be alongside these lines:
+Finally, if you check the resulting HTML via the Screen HTML in Fliplet Studio or the browser you will see the produced HTML, which should equal to:
 
 ```html
-<fl-helper data-type="welcome">
-  Hi <fl-prop data-path="name"></fl-prop>, how are you?
-</fl-helper>
+<fl-helper data-type="accordion" data-title="Hello"></fl-helper>
 ```
 
 This is also how you can copy and paste helper instances between your apps or screens of your app.
 
 ---
 
+## Further reading
+
 <section class="blocks alt">
   <a class="bl two" href="templates.html">
     <div>

docs/API/helpers/templates.md

@@ -0,0 +1,59 @@
+# Templates
+Helpers are required to define a HTML template which is used to render them in the app screen.
+
+Templates support the following features:
+
+- Binding to variables
+- Blocks for conditional visibility
+- Loops and iterators for arrays
+
+---
+
+## Binding to variables
+
+Use the `{! attr.name !}` syntax to define dynamic binding to variables in your HTML templates, e.g.:
+
+```html
+<h3>The title is {! attr.title !}</h3>
+```
+
+<p class="quote"><strong>Note:</strong> variables must be declared using the camelCase naming convention, e.g. use something like <code>firstName</code> instead of "first_name" and "first-name".</p>
+
+---
+
+## Blocks for conditional visibility
+
+If you require parts of your HTML to be conditionally visible only when a specific variable is "truthy" we made available the `<fl-if>` block available:
+
+```html
+<fl-if data-path="attr.title">
+  This will only be shown when there is a title. The title is {! attr.title !}
+</fl-if>
+```
+
+---
+
+## Loops and iterators for arrays
+
+You can use the `<fl-each>` block to automatically render an array of items based on a sample template to be compiled with each item in the array as the context
+
+```html
+<fl-each data-path="attr.people" data-context="person">
+  <template>
+    <li>{! person.firstName !}</li>
+  </template>
+</fl-each>
+```
+
+---
+
+<section class="blocks alt">
+  <a class="bl two" href="templates.html">
+    <div>
+      <span class="pin">Next article in this series</span>
+      <h4>Attributes</h4>
+      <p>Learn more about defining attributes in your helpers.</p>
+      <button>Next &rarr;</button>
+    </div>
+  </a>
+</section>

docs/_layouts/default.html

@@ -79,7 +79,7 @@
                   <li><a href="/Introduction.html">Overview & Introduction</a></li>
                   <li><a href="/Quickstart.html">Development tools</a></li>
                   <li><a href="/Building-components.html">Build components</a></li>
-                  <li><a href="/API/helpers/overview.html">Build helpers</a></li>
+                  <li><a href="/API/helpers/overview.html">Build helpers <span class="label">NEW</span></a></li>
                   <li><a href="/Building-themes.html">Build themes</a></li>
                   <li><a href="/Building-menus.html">Build menus</a></li>
                   <li><a href="/components/Using-Providers.html">Using providers</a></li>
@@ -119,6 +119,7 @@
                   <li><p>Components</p></li>
                   <li><a href="/API/components/form-builder.html">Form Builder</a></li>
                   <li><a href="/API/components/list-from-data-source.html">List (from Data Source)</a></li>
+                  <li><a href="/API/helpers/overview.html">Helpers <span class="label">NEW</span></a></li>
                   <li><a href="/API-Documentation.html#fliplet-components">View all &rarr;</a></li>
                 </ul>
               </li>

docs/assets/css/style.scss

@@ -423,6 +423,14 @@ h2, h3, h4, h5, h6 {
                 background-color: $primary;
                 color: #FFF;
               }
+
+              .label {
+                color: #FFF;
+                background: $primary;
+                border-radius: 4px;
+                padding: 1px 3px;
+                font-size: 12px;
+              }
             }
 
             p {