Innitial commit for GITdocumentation

docs/EN/prototype/elements.md

@@ -0,0 +1,90 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 2.2 Elements
+In the ["Getting started" chapter](http://) we have talked about the basic structure of the application. To do that we used sections and articles. But Lungo uses the semantic language markup introduced with HTML5, so you can add this elements using the new semantic tags.
+
+### 2.2.1 Section & Article
+A `<section>` is a view of our application where content will be displayed and where there may be subelements as `<header>`, `<footer>` and `<article>`.
+
+```
+<section id="main">
+    <article id="main-article" class="active">
+        {{CONTENT}}
+    </article>
+</section>
+```
+
+The content a particular `<section>` is structured by `<article>`. Within a section may be as many `<article>` as you like. The article of the section that will be shown first must have th `class="active"` attribute set.
+
+```
+<section id="main_section">
+    <header data-title="example"></header>
+
+    <article id="main-article" class="active">
+        {{CONTENT}}
+    </article>
+</section>
+```
+
+
+### 2.2.2 Headers
+Each `<section>` can contain a `<header>` where the tittle of the section will be shown. Optionally you can add navigation buttons, to go to another section, go back to a previous one, go to another article or just open the aside menu.
+
+```
+<section id="main_section">
+    <header data-title="example"></header>
+
+    <article id="main-article" class="active">
+        {{CONTENT}}
+    </article>
+</section>
+```
+
+
+### 2.2.3 Footers
+Each `<section>` can contain a `<footer>`. There you can add buttons to navigate through articles, sections and even asides.
+
+```
+<section id="main_section">
+    <article id="main" class="active">
+        {{CONTENT}}
+    </article>
+    <footer>
+        <nav>
+            <a href="#" data-icon="menu" class="active"></a>
+            <a href="#" data-icon="share"></a>
+            <a href="#" data-icon="user"></a>
+            <a href="#" data-icon="users"></a>
+        </nav>
+    </footer>
+</section>
+```
+
+
+### 2.2.4 Aside
+The `<aside>` element gives us a lateral area which will appear depending on the device (tablet) or hidden (mobile). Its structure is very similar to the section one's. We can create a link that references a `<aside>` with a particular id using the navigation system of Lungo. We will use the attribute data-router (which will be discussed in subsequent chapters). We can also define the positioning of it, using style classes. The default position is left.
+
+```
+<aside id="features">
+    <header data-title="Options"></header>
+    <article class="active">
+        {{CONTENT}}
+    </article>
+</aside>
+```
+
+In your section you need link your aside (#features) with `data-aside` attribute, and you can display/hide with attribute `data-view-aside`:
+
+```
+<section id="main_section" data-aside="features">
+    <header data-title="Aside">
+        <nav>
+            <button data-view-aside="features" data-icon="menu"></button>
+        </nav>
+    </header>
+    <article id="main-article" class="active indented">
+        {{CONTENT}}
+    </article>
+</section>
+```

docs/EN/prototype/get_started.md

@@ -0,0 +1,45 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 2. How to prototype
+Here you have the minimum structure of your Lungo application's body. It must contain at least: 
+
+```
+<section id="main">
+	<article id="main-article">
+		Your content
+	</article>
+</section>
+```
+
+`<section>` it's the main container of your UI Components in your App and `<article>` it must be placed inside your section and must have…. Each section and article must contain an unique ID. The JavaScript function that initializes Lungo it's:
+
+```
+Lungo.init({
+    name: 'example'
+});
+```
+
+#### Load Sync resources on init
+To make easier to create and modify your app you can create the sections in separate html files and load the synchonously, making your main file smaller and having your code organized better.
+
+```
+//Load resource on app init
+Lungo.init({
+    name: 'example',
+    resources: ['section_to_load.html']
+});
+```
+
+#### Load async resources by link
+There is other way to load resources asynchronously, just add to the `<a>` tag element the attribute data-async with the link to the section.
+
+```
+<section id="loader" data-transition="">
+    <article id="art1" class="active">
+        <a href="#main" data-router="section" data-async="section_to_load.html">
+            Go to section
+        </a>
+    </article>
+</section>
+```

docs/EN/prototype/navigation.md

@@ -0,0 +1,124 @@
+Lungo - *Cross-Device Framework*
+================================
+
+## 2.3 Navigation
+The navigation in Lungo is entirely semantic, and you will use the element `<a>` or `<button>` and his data attribute "view-*" to tell the system which `<section>`, `<article>` or `<aside>` you want to go to.
+
+### 2.3.1 Data-View-* attribute
+The `data-view-*` attribute is set in the `<a>` or `<button>` element to set the type of element we are going to navigate to (`<section>`, `<article>` or `<aside>`) and in the href attribute the hashbang plus the id of the element has to be set. For this purpopuse Lungo uses the bread crumbs.
+
+```
+<section id="main">
+    <article id="article_1" class="active">
+        <button class="button" data-view-article="article_1" data-icon="forward">To article_2</button>
+    </article>
+    
+    <article id="article_2">
+        <button class="button" data-view-article="article_2" data-icon="home" data-label="To article_1"></button>
+    </article>
+</section>
+```
+
+
+### 2.3.2 Data-back attribute
+As it has been said before, Lungo's navigation is based on the bread crumbs pattern, so navigation backwards between sections is done using the data-back functionality. You can set a button in your header using the data-back attribute or use in `<a>` or `button` tags data-router="section" with href="#back"
+
+```
+<section id="main">
+    <article id="main_1" class="active">{{CONTENT}}</article>
+    <article id="main_2">{{CONTENT}}</article>
+</section>
+
+<section id="second">
+    <header data-back="home"></header>
+    <article id="second_1" class="active">
+        Same as header:
+        <button data-view-section="back" data-icon="left" data-label="Return to previous section"></button>
+    </article>
+</section>
+```
+
+
+### 2.3.3 Nav
+To create simple structures of navigation buttons within a footer or header the nav element has to be used. In the header, the nav element's position will depend on the class applied to it. `left` to the left and `right` to the right.
+
+```
+<section id="main">
+    <header data-title="<nav> example">
+        <nav class="on-left">
+            <button data-view-article="article_1" data-label="Home"></button>
+        </nav>
+        <nav class="on-right">
+            <button data-view-section="second" data-label="Section"></button>
+        </nav>
+    </header>
+
+    <article id="article_1" class="active">{{CONTENT}}</article>
+    <article id="article_2">{{OTHER_CONTENT}}</article>
+    
+    <footer>
+        <nav>
+            <a href="#" data-view-article="article_1" data-icon="home"></a>
+            <a href="#" data-view-article="article_2" data-icon="user"></a>
+            <a href="#" data-view-section="second" data-icon="right"></a>
+        </nav>
+    </footer>
+</section>
+
+<section id="second">
+    <header data-back="home" data-title="example"></header>
+    <article id="second_1">{{CONTENT}}</article>
+</section>
+```
+
+
+### 2.3.4 Groupbar
+Lungo gives you the capability to have a special menu at the top of your UI. To do this you have to extend the header element using class="extended" and create inside of it a nav element with class="groupbar"
+
+```
+<section id="main">
+    <header data-title="groupbar" class="extended"></header>
+    
+    <nav class="groupbar">
+        <a href="#" data-view-article="article_1" class="active">Art-1</a>
+        <a href="#" data-view-article="article_2">Art-2</a>
+    </nav>
+    
+    <article id="article_1" class="active">{{CONTENT}}</article>
+    <article id="article_2">{{OTHER_CONTENT}}</article>
+</section>
+```
+
+
+### 2.3.5 Title Bindings
+To update the title of a section through the navigation, just use the attribute `data-title` in your navigation element.
+
+```
+<section id="main">
+    <header data-title="Default title"></header>
+    <article id="first" class="active">
+        <button data-view-article="second" data-title="Second Article"></button>
+    </article>
+    <article id="second">
+        <button data-view-article="first" data-title="First Article"></button>
+    </article>
+</section>
+```
+
+
+### 2.3.6 Visualization bindings
+You can show nav elements when a particular article is visible.
+
+```
+<section id="main">
+    <header data-title="Title of section">
+        <nav class="on-right">
+            <button data-article="second" data-view-article="first" data-icon="left"></button>
+            <button data-article="first" data-view-article="second" data-icon="right"></button>
+        </nav>
+    </header>
+    
+    <article id="first" class="active">{{CONTENT}}</article>
+    <article id="second">{{OTHER_CONTENT}}</article>
+</section>
+```