ui_bibz 1.0.0 → 1.1.0

data/README.md

@@ -1,4 +1,4 @@
-![Ui Bibz logo](doc/images/ui-bibz-logo-without-border.gif)
+![Ui Bibz logo](images/ui-bibz-logo-without-border.gif)
 
 [![Build Status](https://travis-ci.org/thooams/Ui-Bibz.svg)](https://travis-ci.org/thooams/Ui-Bibz)
 [![Code Climate](https://codeclimate.com/github/thooams/Ui-Bibz/badges/gpa.svg)](https://codeclimate.com/github/thooams/Ui-Bibz)
@@ -9,21 +9,17 @@ This project rocks and uses MIT-LICENSE.
 # Ui Bibz
 > Ui Bibz est un [framework d'interface](http://fr.wikipedia.org/wiki/Framework_d%27interface)
 > permettant de construire une interface très rapidement et simplement
-> à l'aide de Ruby on Rails 4 et de Boostrap 3.
+> à l'aide de [Ruby on Rails 4](http://rubyonrails.org/) et de [Boostrap 3](http://getbootstrap.com/).
 
 Ui Bibz charge la librairie [boostrap](http://getbootstrap.com/) et
 [awesomefont](http://fontawesome.io/) en [CDN](https://fr.wikipedia.org/wiki/Content_delivery_network).
 
-**NB** : [HAML](http://haml.info/) est utilisé pour présenter les exemples de chaque élément.
-Vous pouvez bien entendu utiliser l'interpréteur [ERB](https://en.wikipedia.org/wiki/ERuby) dans votre application Rails.
-
 Tous les composants du framework Ui Bibz comportent l'agument *options* et l'argument *html_options*.
 Ces éléments sont basés sur l'élément ```Component```.
 Un ```component``` accepte un contenu par variable ou par block.
 
 ### Component
 
-
 L'élément ```component``` accepte dans content et block :
 
 * le contenu
@@ -44,9 +40,9 @@ L'élément ```component``` à pour ```html_options``` un Hash acceptant les cle
 
 Exemple :
 
-```ruby
+```
 Component.new 'Exemple', { state: :success, glyph: { name: 'pencil', size: 3} }, { class: 'exemple' }
-# ou
+
 Component.new { state: :success, glyph: 'eye' }, { class: 'exemple' } do
   'Exemple'
 end
@@ -54,7 +50,7 @@ end
 
 Signature :
 
-```ruby
+```
 Component.new content = nil, options = nil, html_options = nil, &block
 ```
 
@@ -66,23 +62,24 @@ dans ```options``` et ```html_options```.
 
 Ajouter la gem dans Rails :
 
-```ruby
+```
 gem "ui_bibz", '~> 1.0.0'
 ```
 
 Lancer la command suivante :
 
-```console
+```
 bundle install
 ```
 
 Placer la ligne suivante dans ```/app/views/layouts/application.rb```
-```ruby
+
+```
  = ui_bibz_meta_links
 ```
 
-Exemple :
-```ruby
+Exemple ([haml](http://haml.info/)):
+```
 !!!
 %html
   %head
@@ -93,59 +90,65 @@ Exemple :
 ```
 
 Placer la ligne suivante dans ```/app/assets/stylesheets/applications.css```
-```ruby
+
+```
 ...
 *= require ui_bibz
 ...
 ```
 
 Placer la ligne suivante dans ```/app/assets/javascripts/applications.js```
-```ruby
+
+```
 ...
 //= require ui_bibz
 ...
 ```
 
-
 ## Utilisation
 
 ### Alert
 
-![alert](doc/images/alert.png)
+![alert](images/alert.png)
 
 L'élément ```notify``` à pour ```options``` un Hash acceptant les clefs :
 
 * [state](#state-values)
 * [glyph](#glyph-arguments)
 
-```ruby
-= notify 'toto', state: :info, glyph: 'eye'
+```
+notify 'Alert', state: :info, glyph: 'eye'
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Alert.html)
+
 ### Breadcrumb (fil d'ariane)
 
-![breadcrumb](doc/images/breadcrumb.png)
+![breadcrumb](images/breadcrumb.png)
 
-L'élément ```breadcrumb``` à pour ```options``` un Hash acceptant les clefs :
+L'élément ```breadcrumb``` à pour enfant l'élément ```link``` qui accepte pour option un Hash avec les clefs :
 
 * [status](#status-values)
 * [glyph](#glyph-arguments)
 * url
 
-L'élément ```link``` est un [component](#component).
-
-```ruby
-= breadcrumb do |b|
-  - b.link 'toto', url: '#toto', glyph: 'home'
-  - b.link 'momo', url: '#momo'
-  - b.link 'nono', status: :active
+```
+breadcrumb do |b|
+  b.link 'Exemple 1', url: '#exemple-1', glyph: 'home'
+  b.link({ url: '#exemple-2' }, { class:'link' }) do
+    'Exemple 2'
+  end
+  b.link 'Exemple 3', status: :active
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Breadcrumb.html)
+
 ### Buttons (Boutons)
 
 #### Button
 
-![button](doc/images/button.png)
+![button](images/button.png)
 
 L'élément ```button``` à pour ```options``` un Hash acceptant les clefs :
 
@@ -154,28 +157,34 @@ L'élément ```button``` à pour ```options``` un Hash acceptant les clefs :
 * [glyph](#glyph-arguments)
 * [size](#size-values)
 
-```ruby
-= button 'Button', { state: :danger, size: :xs, glyph: 'star' } , { class: 'my-button' }
 ```
+button 'Button', { state: :danger, size: :xs, glyph: 'star' } , { class: 'my-button' }
+```
+
+Voir la [doc](UiBibz/Ui/Core/Button.html)
 
 #### Button Dropdown
 
 L'élément ```button_dropdown``` accepte pour options les mêmes clefs que l'élément
 [dropdown](#dropdown).
 
-![button_link](doc/images/button_dropdown.png)
-```ruby
-= button_dropdown 'Button Dropdown' do |bd|
-  - bd.list link_to 'toto', '#'
-  - bd.list 'header', type: :header
-  - bd.list link_to 'momo', '#'
-  - bd.list '---'
-  - bd.list link_to 'lolo', '#'
+![button_link](images/button_dropdown.png)
+
 ```
+button_dropdown 'Button Dropdown' do |bd|
+  bd.list link_to('Link 1', '#')
+  bd.list 'Header 1', type: :header
+  bd.list link_to('Link 2', '#')
+  bd.list '---'
+  bd.list link_to('Link 3', '#')
+end
+```
+
+Voir la [doc](UiBibz/Ui/Core/ButtonLink.html)
 
 #### Button group
 
-![button_group](doc/images/button_group.png)
+![button_group](images/button_group.png)
 
 L'élément ```button_group``` à pour ```options``` un Hash acceptant les clefs :
 
@@ -188,49 +197,60 @@ L'élément ```list``` à pour ```options``` un Hash acceptant les clefs :
 * [state](#state-values)
 
 ```ruby
-= button_group position: :vertical, size: :xs do
-  = button 'toto', status: :active
-  = button 'momo'
-  = button 'lolo'
-
-= button_group do
-  = button 'toto', status: :active
-  = button 'momo'
-  = button 'lolo'
-  = button_dropdown 'Button Dropdown' do |bd|
-    - bd.list 'header', type: :header
-    - bd.list link_to 'momo', '#'
-    - bd.list '---'
-    - bd.list link_to 'lolo', '#'
+button_group({ position: :vertical, size: :xs }) do
+  button 'Button 1', status: :active
+  button 'Button 2'
+  button 'Button 3'
+end
+
+button_group do
+  button 'Button 1', status: :active
+  button 'Button 2'
+  button 'Button 3'
+  button_dropdown 'Button Dropdown' do |bd|
+    bd.list 'header', type: :header
+    bd.list link_to('Link 1', '#')
+    bd.list '---'
+    bd.list link_to('Link 2', '#')
+  end
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Core/ButtonGroup.html)
+
 #### Button Link (Lien Bouton)
 
-![button_link](doc/images/button_link.png)
+![button_link](images/button_link.png)
 
 L'élément ```button_link``` à pour ```options``` un Hash acceptant les clefs :
 
 ```ruby
-= button_link 'Button', { url: '#button', state: :primary, glyph: 'star' }, { class: 'my-button' }
+button_link 'Button', { url: '#button', state: :primary, glyph: 'star' }, { class: 'my-button' }
 ```
 
+Voir la [doc](UiBibz/Ui/Core/ButtonLink.html)
+
 #### Button Split Dropdown
 
-![button_group](doc/images/button_split_dropdown.png)
+![button_group](images/button_split_dropdown.png)
 
 L'élément ```button_split_dropdown```accepte pour options les mêmes clefs
 que l'élément [dropdown](#dropdown).
 
 ```ruby
-= button_split_dropdown 'Dropdown', state: :primary do |d|
-  - d.list do
-    = link_to 'toto', "#"
-  - d.list 'header', type: :header
-  - d.list link_to 'momo', '#'
-  - d.list '---'
-  - d.list link_to 'lolo', '#'
+button_split_dropdown 'Dropdown', state: :primary do |d|
+  d.list do
+    link_to 'Link 1', "#"
+  end
+  d.list 'Header 1', type: :header
+  d.list link_to 'Link 2', '#'
+  d.list '---'
+  d.list link_to 'Link 3', '#'
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Core/ButtonSplitDropdown.html)
+
 ### Dropdown
 
 L'élément ```dropdown``` à pour ```options``` un Hash acceptant les clefs :
@@ -245,13 +265,15 @@ L'élément ```list``` est un [component](#component) qui accepte pour options l
 * [glyph](#glyph-arguments)
 
 ```ruby
-= dropdown 'Dropdown', state: :success do |d|
-  - d.list do
-    = link_to 'toto', "#"
-  - d.list 'header', type: :header
-  - d.list link_to 'momo', '#'
-  - d.list '---'
-  - d.list link_to 'lolo', '#'
+dropdown 'Dropdown', state: :success do |d|
+  d.list do
+    link_to 'Link 1', "#"
+  end
+  d.list 'Header 1', type: :header
+  d.list link_to 'Link 2', '#'
+  d.list '---'
+  d.list link_to 'Link 3', '#'
+end
 ```
 
 Pour ajouter une ligne séparatrice, il suffit d'insérer 3 "-" à la suite
@@ -264,9 +286,11 @@ d.list '--'
 ...
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Dropdown.html)
+
 ### Progress Bar
 
-![glyph](doc/images/progress_bar.png)
+![glyph](images/progress_bar.png)
 
 L'élément ```progress_bar``` à pour ```options``` un Hash acceptant les clefs :
 
@@ -279,21 +303,26 @@ L'élément ```progress_bar``` à pour ```options``` un Hash acceptant les clefs
 * sr_only - Boolean to show label (default: false)
 
 ```ruby
-= progress_bar 30
-# or
-= progress_bar state: :info, sr_only: true, type: :animated do
-  = 70
-# or
-= progress_bar(tap: true) do |pb|
-  - pb.bar 10, { state: :success, label: 'Loading...' },{ class: 'test' }
-  - pb.bar 30, state: :warning
-  - pb.bar(type: :striped) do
-    = 10
+progress_bar 30
+
+progress_bar state: :info, sr_only: true, type: :animated do
+  70
+end
+
+progress_bar(tap: true) do |pb|
+  pb.bar 10, { state: :success, label: 'Loading...' },{ class: 'test' }
+  pb.bar 30, state: :warning
+  pb.bar(type: :striped) do
+    10
+  end
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Core/ProgressBar.html)
+
 ### Glyph
 
-![glyph](doc/images/glyph.png)
+![glyph](images/glyph.png)
 
 Les glyphs utilisés proviennent de [Font Awesome](http://fontawesome.io/).
 L'élément ```glyph``` peut contenir un hash pour ```content```
@@ -303,14 +332,16 @@ L'élément ```glyph``` à pour ```options``` un Hash acceptant les clefs :
 * type
 
 ```ruby
-= glyph 'star', { size: 3, type: 'fw' }, class: 'star-exemple'
-ou
-= glyph { name: 'star', size: 3, type: 'fw' }
+glyph 'star', { size: 3, type: 'fw' }, class: 'star-exemple'
+
+glyph { name: 'star', size: 3, type: 'fw' }
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Glyph.html)
+
 ### Panel
 
-![panel](doc/images/panel.png)
+![panel](images/panel.png)
 
 L'élément ```panel``` à pour ```options``` un Hash acceptant les clefs :
 
@@ -322,21 +353,26 @@ Les éléments ```header```, ```body```,```footer``` sont des éléments [compon
 Exemple :
 
 ```ruby
-= panel 'danger'
-# ou
-= panel state: :danger do
-  = 'toto'
-# ou
-= panel({ tap: true, state: :danger }, { class: 'exemple' }) |p|
-  - p.header 'toto', glyph: 'eye'
-  - p.body class: 'my-body' do
-    = 'toto'
-  - p.footer 'toto'
+panel 'danger'
+
+panel(state: :danger) do
+  'Content'
+end
+
+panel({ tap: true, state: :danger }, { class: 'exemple' }) |p|
+  p.header 'Header', glyph: 'eye'
+  p.body(class: 'my-body') do
+   'Content body'
+  end
+  p.footer 'Footer'
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Panel.html)
+
 ### Table
 
-![table](doc/images/table.png)
+![table](images/table.png)
 
 L'élément ```table``` est un tableau composé d'une recherche, une pagination et un trie de colonnes intégrées.
 Le tableau est compatible [I18n](http://guides.rubyonrails.org/i18n.html).
@@ -344,7 +380,7 @@ Le tableau contient pour chaque ligne un bouton dropdown 'action' avec par défa
 ces 3 actions : voir, éditer, supprimer. Toutes les colonnes sont présentes et
 affichées par défaut.
 
-La table doit contenir un store. Ce store doit-être créé dans le controlleur avec la
+La table doit contenir un store. Ce store doit-être créé dans le *controlleur* avec la
 méthode ```table_search_pagination```.
 
 La méthode ```table_search_pagination``` contient 3 arguments :
@@ -355,41 +391,41 @@ La méthode ```table_search_pagination``` contient 3 arguments :
 
 Exemple :
 
-```ruby
+```
 # app/controllers/document_controller.rb
 @documents = Document.table_search_pagination(params, session)
 ```
 
-Dans le model, insérer la méthode ```searchable_attributes``` afin de pouvoir
+Dans le *model*, insérer la méthode ```searchable_attributes``` afin de pouvoir
 faire une recherche sur les attributs souhaités.
 
 Exemple :
 
-```ruby
+```
 # app/models/document.rb
 searchable_attributes :name_fr, :name_en
 ```
 
 Un champ recherche est disponible dans la vue :
 
-![table_search_field](doc/images/table_search_field.png)
+![table_search_field](images/table_search_field.png)
 
-```ruby
-= table_search_field store: @documents
+```
+table_search_field store: @documents
 ```
 
 Une pagination est disponible dans la vue :
 
-```ruby
-= table_pagination store: @documents
+```
+table_pagination store: @documents
 ```
 
 Un champs select par page est disponible dans la vue :
 
-![table_search_field](doc/images/table_pagination_per_page.png)
+![table_search_field](images/table_pagination_per_page.png)
 
-```ruby
-= table_pagination_per_page store: @documents
+```
+table_pagination_per_page store: @documents
 ```
 
 #### Simple Example table
@@ -403,7 +439,7 @@ La méthode ```table_search_pagination``` contient 3 arguments :
 
 Exemple :
 
-```ruby
+```
 # app/controllers/document_controller.rb
 @documents = Document.table_search_pagination(params, session)
 ```
@@ -412,7 +448,8 @@ Dans le **model**, insérer la méthode ```searchable_attributes``` afin de pouv
 faire une recherche sur les attributs souhaités.
 
 Exemple :
-```ruby
+
+```
 # app/models/document.rb
 searchable_attributes :name_fr, :name_en
 ```
@@ -426,9 +463,10 @@ Dans la **vue**, insérer la méthode ```table``` qui peut contenir plusieurs ar
 Une table comporte des **colonnes** et des **actions**.
 
 Exemple :
-```ruby
+
+```
 # app/views/documents/index.html.haml
-= table store: @documents
+table store: @documents
 ```
 
 Les actions par défauts peuvent être modifiées ([voir exemple complexe](#Complex-Example-table)) :
@@ -440,38 +478,45 @@ Les actions par défauts peuvent être modifiées ([voir exemple complexe](#Comp
 Elles sont intégrées à l'intérieur d'un bouton [dropdown](#dropdown).
 
 Exemple :
-```ruby
+
+```
 # app/views/documents/index.html.haml
-= table store: @documents do |g|
-  - g.actions do
-    = link_action 'Show', documents_path(:id), glyph: 'eye'
-    = link_action 'Edit', edit_document_path(:id), glyph: 'pencil'
-    = link_action 'Delete', documents_path(:id), method: :delete, glyph: 'trash', data: { confirm: 'Are you sure?' }
-    = link_action "---"
-    = link_action 'Duplicate', duplicate_document_path(:id), glyph: 'files-o'
-    = link_action 'Alert', alert_document_path(:id), glyph: 'bell'
-```
-
-L'ajout de colonnes à travers la méthode ```add``` contient plusieurs arguments :
-
-* name (nom de la colonne)
-* data_index (le nom de l'attribut)
-* count (utilise la méthode count sur l'élément)
-* date_format (formate l'affichage de la date en utilisant la méthode ```strftime``` ex: '%Y/%M/%D')
-* format (formate les élements de la colone en utilisant **lambda**)
-* link (ajoute un lien où l'expression ```:id``` est parsé et remplacé par l'entier correspondant)
-* sort (permet de trier sur des champs )
-* custom_sort (indique que le tableau sera triéé d'une manière personnalisée)
+table store: @documents do |g|
+  g.actions do
+    link_action 'Show', documents_path(:id), glyph: 'eye'
+    link_action 'Edit', edit_document_path(:id), glyph: 'pencil'
+    link_action 'Delete', documents_path(:id), method: :delete, glyph: 'trash', data: { confirm: 'Are you sure?' }
+    link_action "---"
+    link_action 'Duplicate', duplicate_document_path(:id), glyph: 'files-o'
+    link_action 'Alert', alert_document_path(:id), glyph: 'bell'
+  end
+end
+```
 
-```ruby
+L'ajout de colonnes à travers la méthode ```column``` contient plusieurs arguments et cette méthode est basée sur le component :
+
+* Content (ex: name)
+* options (hash)
+  * data_index (le nom de l'attribut)
+  * count (utilise la méthode count sur l'élément)
+  * date_format (formate l'affichage de la date en utilisant la méthode ```strftime``` ex: '%Y/%M/%D')
+  * format (formate les élements de la colone en utilisant **lambda**)
+  * link (ajoute un lien où l'expression ```:id``` est parsé et remplacé par l'entier correspondant)
+  * sort (permet de trier sur des champs )
+  * custom_sort (indique que le tableau sera triéé d'une manière personnalisée)
+* html_options (hash)
+
+```
 # app/views/documents/index.html.haml
-= table store: @documents do |g|
-  - g.columns do |c|
-    - c.add { name: '#', data_index: 'id' }
-    - c.add { name: 'Name fr', data_index: 'name_fr', link: edit_document_path(:id)}
-    - c.add { data_index: 'name_en' }
-    - c.add { name: 'Hotline', data_index: 'hotline_access', format: lambda{ |records, record| glyph(record.icon) }}
-    - c.add { name: 'Updated at', data_index: 'updated_at', date_format: '%Y' }
+table store: @documents do |g|
+  g.columns do |c|
+    c.column '#', { data_index: 'id' }
+    c.column 'Name fr', { data_index: 'name_fr', link: edit_document_path(:id)}
+    c.column 'Name en', { data_index: 'name_en' }
+    c.column 'Hotline', { data_index: 'hotline_access', format: lambda{ |records, record| glyph(record.icon) }}
+    c.column 'Updated at', { data_index: 'updated_at', date_format: '%Y' }
+  end
+end
 ```
 
 #### Complex Example table
@@ -489,14 +534,16 @@ Exemple :
 ```
 
 Dans la vue, insérer la méthod ```table```.
-NB: On peut créer ces propres méthodes comme ```user_name``` dans notre model "Document" et
+NB: On peut créer ses propres méthodes comme ```user_name``` dans notre *model* "Document" et
 l'appeler comme valeur pour la clef ```data_index```.
 
-```ruby
+```
 # app/views/documents/index.html.haml
-= table store: @documents do |g|
-  - g.columns do |c|
-    - c.add { name: 'Users', data_index: 'user_name', sort: "user.name" }
+table store: @documents do |g|
+  g.columns do |c|
+    c.column 'Users', { data_index: 'user_name', sort: "user.name" }
+  end
+end
 ```
 
 
@@ -504,15 +551,15 @@ l'appeler comme valeur pour la clef ```data_index```.
 
 Si l'on souhaite, par exemple, dénombrer des utilisateurs qui ont un lien non
 direct avec les documents.
-Imaginons par exemple qu'un utilisateur à des produits et que
+Imaginons par exemple, un utilisateur à des produits et que
 ces produits contiennent plusieurs documents. On souhaite compter le nombre
-d'utilisateurs par document.
+d'utilisateurs par documents.
 
 On peut ajouter des arguments dans la méthode ```table_search_pagination```
 qui vont permettre de faire des jointures.
 
 Exemple :
-```ruby
+```
 # app/controllers/document_controller.rb
 arguments  = { sortable: {
   column: 'users',
@@ -538,11 +585,13 @@ Pour celà il faut :
 
 Dans la vue :
 
-```ruby
+```
 # app/views/documents/index.html.haml
-= table store: @documents do |g|
-  - g.columns do |c|
-    - c.add({ name: 'Users', data_index: 'users', count: true, custom_sort: true })
+table store: @documents do |g|
+  g.columns do |c|
+    c.column 'Users', { data_index: 'users', count: true, custom_sort: true }
+  end
+end
 ```
 
 #### table I18n
@@ -559,7 +608,7 @@ Le placeholder du champ recherche est utilisable et traduisible avec les attribu
 
 Exemple :
 
-```ruby
+```
 # config/locales/fr.yml
 ...
 activerecord:
@@ -571,52 +620,67 @@ activerecord:
 ...
 ```
 
+Voir la [doc](UiBibz/Ui/Ux/Table.html)
+
 ### Table Panel
 
-![table_panel](doc/images/table_panel.png)
+![table_panel](images/table_panel.png)
 
 Le composant ```table_panel``` est un [tableau](#table) dans un [panel](#panel).
 
-```ruby
-= table_panel store: @users
-#ou
-= table_panel({ store: @users, tap: true, glyph: 'home', state: :danger }) do |g|
-  - g.columns do |cls|
-    - cls.column name: '#', data_index: 'id'
-    - cls.column name: 'Username', data_index: 'username', link: edit_user_path(:id)
-    - cls.column name: 'Name', data_index: 'name'
-    - cls.column name: 'Email', data_index: 'email'
-    - cls.column name: 'Role', data_index: 'role_name', sort: 'roles.name'
-  - g.actions do |acs|
-    - acs.action 'Toto', url: edit_user_path(:id), glyph: 'pencil'
-    - acs.action "---"
-    - acs.action 'momo', url: user_path(:id), glyph: 'eye'
-
+```
+table_panel store: @users
+
+table_panel({ store: @users, tap: true, glyph: 'home', state: :danger }) do |g|
+  g.columns do |cls|
+    cls.column '#', { data_index: 'id' }
+    cls.column 'Username', { data_index: 'username', link: edit_user_path(:id) }
+    cls.column 'Name', { data_index: 'name' }
+    cls.column({ data_index: 'email' }) do
+      'Email'
+    end
+    cls.column 'Role', { data_index: 'role_name', sort: 'roles.name' }
+  end
+  g.actions do |acs|
+    acs.action 'Action 1', { url: edit_user_path(:id), glyph: 'pencil' }
+    acs.action "---"
+    acs.action { url: user_path(:id), glyph: 'eye' } do
+      'Action 2'
+    end
+  end
+end
 ```
 
+Voir la [doc](UiBibz/Ui/Ux/TablePanel.html)
+
 ### List
 
-![list](doc/images/list.png)
+![list](images/list.png)
 
 Par défaut une liste à pour tag ```<li>```.
 Mais elle peut se transformer en lien ```<a>``` à travers l'option ```type:```.
 Par défaut le tag ```<li>``` est présent.
 
-```ruby
-= list_group type: :link do |lg|
-  - lg.list 'Momo', { state: :success, glyph: 'home' }, { href: '#Momo' }
-  - lg.list({ tap: true, status: :active }, { href: '#Toto' }) do |l|
-    - l.header 'My title'
-    - l.body 'My title'
-# ou
-= list_group do |lg|
-  - lg.list 'Momo', glyph: 'home', badge: 2
-  - lg.list 'Toto'
 ```
+list_group type: :link do |lg|
+  lg.list 'Momo', { state: :success, glyph: 'home' }, { href: '#Momo' }
+  lg.list({ tap: true, status: :active }, { href: '#Toto' }) do |l|
+    l.header 'My title'
+    l.body 'My title'
+  end
+end
+
+list_group do |lg|
+  lg.list 'Momo', glyph: 'home', badge: 2
+  lg.list 'Toto'
+end
+```
+
+Voir la [doc](UiBibz/Ui/Core/List.html)
 
 ### Nav
 
-![nav](doc/images/nav.png)
+![nav](images/nav.png)
 
 Par défaut la navigation comporte des onglets "tab".
 L'élément ```nav``` accepte en option les arguments :
@@ -627,15 +691,52 @@ L'élément ```nav``` accepte en option les arguments :
 
 L'élement link est un [component](#component).
 
-```ruby
-= nav(type: :pills, position: :justified, tap: true) do |d|
-  d.link 'Test', url: '#test', badge: 6
-  d.link 'Test2', url: '#test2', status: :active
 ```
+nav(type: :pills, position: :justified) do |d|
+  d.link 'Link 1', url: '#test', badge: 6
+  d.link(url: '#test2', status: :active) do
+    "Link 2"
+  end
+end
+```
+
+Voir la [doc](UiBibz/Ui/Core/Nav.html)
+
+ ### Navbar
+
+![navbar](images/navbar.png)
+
+Par défaut la navigation comporte des onglets "tab".
+L'élément ```navbar``` accepte en option les arguments :
+
+* type (:default, :inverse)
+* [glyph](#glyph-values)
+* position (:top, :bottom)
+* title (string)
+
+L'élement link est un [component](#component).
+L'élement nav est un [component](#component).
+
+```
+navbar(type: :inverse, position: :top) do |nb|
+  nb.nav do |n|
+    n.link 'Link 1', url: '#link-1'
+  end
+  nb.nav(position: :right) do |n|
+    n.link 'Link 2', url: '#test', badge: 6
+    n.link(url: '#link-2', status: :active) do
+      "Link 3"
+    end
+  end
+end
+```
+
+Voir la [doc](UiBibz/Ui/Core/Navbar.html)
+
 
 ### Etiquette
 
-![list](doc/images/etiquette.png)
+![list](images/etiquette.png)
 
 
 NB : Les méthodes ```Tag, label``` sont déjà utilisées par Rails.
@@ -646,22 +747,27 @@ L'élément ```etiquette``` à pour ```options``` un Hash acceptant les clefs :
 
 Exemple :
 
-```ruby
-= etiquette 'label'
-= etiquette 'label 2', state: :success
-= etiquette 'label 2', state: :danger
+```
+etiquette 'label'
+etiquette 'label 2', state: :success
+etiquette 'label 2', state: :danger
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Etiquette.html)
+
 ### Row
 
 Le composant row génére une div avec la class row.
 
- ```ruby
-= row class: 'toto' do
-  = content
+ ```
+row class: 'toto' do
+  'content'
+end
 # => <div class='row toto'>content</div>
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Content.html)
+
 ### Col
 
 L'élément ```col``` est un [composant](#composant) qui accèpte en arguments :
@@ -678,19 +784,21 @@ Ces paramètres génèrent les classes qui seront insérées dans la div avec la
 col.
 
 
-```ruby
-= col({num: 2, size: :lg}, class: 'test') do
-  = content
-
+```
+col({num: 2, size: :lg}, class: 'test') do
+  'content'
+end
 # => <div class='col-lg-2 test'>content</div>
 
-# ou
-= col([{ offset: 1, size: :xs}, { num: 3}], class: 'test') do
-  = content
 
+col([{ offset: 1, size: :xs}, { num: 3}], class: 'test') do
+  'content'
+end
 # => <div class='col-xs-offset-1 col-md-3 test'>content</div>
 ```
 
+Voir la [doc](UiBibz/Ui/Core/Col.html)
+
 ### Grid
 
 Une grid est un composant qui est composé de 5 vues :
@@ -710,37 +818,52 @@ Une vue à pour arguments :
 L'argument ```position``` détermine la position de la vue et l'argument ```num``` determine
 le nombre de colonnes occupées par la vue.
 
-```ruby
-= grid do |g|
-  - g.view num: 3, position: :left do
-    = list_group(type: :link) do |lg|
-      - lg.list 'Link 1', { url: '#link1' }
-      - lg.list 'Link 2', { url: '#link1', status: :active }
-      - lg.list 'Link 1', { url: '#link1' }
-      - lg.list 'Link 3', { url: '#link1' }
-      - lg.list 'Link 4', { url: '#link1' }
-  - g.view({ position: :top}) do
-    = button_group(type: :toolbar) do
-      = button 'option 1'
-      = button 'option 2'
-      = button 'option 3'
-  - g.view position: :center do
-    = table store: @users, type: :bordered
-  - g.view position: :bottom do
-    = 'bottom'
-
-= grid do |g|
-  - g.view num: 5, position: :left do
-    = 'left'
-  - g.view position: :right do
-    = 'right'
-  - g.view({ position: :top}, { class: 'success'}) do
-    = 'top'
-  - g.view position: :center do
-    = 'center'
-  - g.view position: :bottom do
-    = 'bottom'
 ```
+grid do |g|
+  g.view num: 3, position: :left do
+    list_group(type: :link) do |lg|
+      lg.list 'Link 1', { url: '#link1' }
+      lg.list 'Link 2', { url: '#link1', status: :active }
+      lg.list 'Link 1', { url: '#link1' }
+      lg.list 'Link 3', { url: '#link1' }
+      lg.list 'Link 4', { url: '#link1' }
+    end
+  end
+  g.view({ position: :top}) do
+    button_group(type: :toolbar) do
+      button 'option 1'
+      button 'option 2'
+      button 'option 3'
+    end
+  end
+  g.view position: :center do
+    table store: @users, type: :bordered
+  end
+  g.view position: :bottom do
+    'bottom'
+  end
+end
+
+grid do |g|
+  g.view num: 5, position: :left do
+    'left'
+  end
+  g.view position: :right do
+    'right'
+  end
+  g.view({ position: :top}, { class: 'success'}) do
+    'top'
+  end
+  g.view position: :center do
+    'center'
+  end
+  g.view position: :bottom do
+    'bottom'
+  end
+end
+```
+
+Voir la [doc](UiBibz/Ui/Ux/Grid.html)
 
 ### Arguments and Values
 
@@ -784,21 +907,18 @@ comme ci-dessous.
 Exemple :
 
 ```ruby
-UiBibz::Ui::Panel.new('Exemple', { state: :success }, { class: 'exemple'}).render
+UiBibz::Ui::Core::Panel.new('Exemple', { state: :success }, { class: 'exemple'}).render
 # au lieu de
 panel 'Exemple', { state: :success }, { class: 'exemple' }
 ```
 
-# Roadmap :
+# Roadmap
 
 Pour la V2.
 
 * créer des stores pour les listes, breadcrumb
-* créer une meilleure documentation
 * créer d'autres extensions, plugins et une guideline
 * donner le choix de la dépendence boostrap et awesomefont en CDN ou en local
 * mise à jour vers bootstrap 4
-* créer Ui-Bibz Core à partir de cette librairie ( pour l'insérer dans un nouveau
-  framework Ui-Bibz utilisant simple_form pour les champs formulaires ).
 ...