Update text informations

README.md

@@ -6,6 +6,24 @@ This command line interface will allow you to generate new Tikui components.
 
 - [Node.js](https://nodejs.org)
 
+## Install
+
+```shell
+npm i -g @tikui/cli
+```
+
+## Generate a pattern library
+
+```shell
+tikui generate my-pattern-library
+```
+
+This will create a new folder `my-pattern-library` with the basic structure of a pattern library.
+
+Then you can follow the README.md file in the generated folder to create your own components.
+
+More info can be found in the [Tikui documentation](https://tikui.org/doc.html).
+
 ## Install as developer
 
 First of all build the application using:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tikui/cli",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Command lines tool for Tikui",
   "main": "index.js",
   "files": [

src/cli/generate-project/atomic/src/index.pug

@@ -19,9 +19,9 @@ block content
         .tikui-vertical-spacing--line
           pre
             code.language-html.
-              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-              <link rel="stylesheet" href="{DOMAIN}/tikui.css" />
+              | #{'<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />'}
+              | #{''}
+              | #{'<link rel="stylesheet" href="{DOMAIN}/tikui.css" />'}
         .tikui-vertical-spacing--line
           p.tikui-paragraph
             em Pug
@@ -34,7 +34,7 @@ block content
         .tikui-vertical-spacing--line
           h2.tikui-title-section Documentation
         .tikui-vertical-spacing--line
-          p.tikui-paragraph The Style have an #[a.tikui-link(href='http://atomicdesign.bradfrost.com' target='_blank') Atomic Design] organization.
+          p.tikui-paragraph The Style have an #[a.tikui-link(href='http://atomicdesign.bradfrost.com' target='_blank') Atomic Design] structure.
         .tikui-vertical-spacing--line
           ul.tikui-list
             li

src/cli/generate-project/common/README.md

@@ -26,9 +26,11 @@ In development, you can run the application locally on [localhost:3000](http://l
 npm run serve
 ```
 
-### Tutorial
+### Create a component
 
-To generate the global structure of the component below, you can use [Tikui CLI](https://github.com/tikui/tikui-cli) command (install `tikui` using `npm i -g @tikui/cli`), and then from the root of your project, run:
+First of all, the source folder `src` follows the [Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/) methodology.
+
+Here is an example of how to create a `button` component:
 
 ```bash
 tikui create -p tikui button src/atom
@@ -39,87 +41,46 @@ tikui create -p tikui button src/atom
 > - `tikui help` to see the global help
 > - `tikui help create` to see a command help, here `create`
 
-#### Create a component
-
-The source folder `src` follows the [Atomic Design](http://atomicdesign.bradfrost.com/table-of-contents/) methodology.
-
-To make your first component, we will take an atom example: a button.
-
-Inside `src/atom/atom.pug`, you have to describe your button by adding an inclusion at the end of the file:
+You can add inside the `src/atom/atom.pug` file:
 
 ```pug
 include:componentDoc(height=55) button/button.md
 ```
 
-> You can also use `include:templateDoc button/button.md` if you don't want to see the component render, it's useful on bigger components like templates.
-
-Now, you have to create your atom by adding the button folder and the button documentation as a markdown file:
-
-```bash
-mkdir src/atom/button
-touch src/atom/button/button.md
-```
-
-In `button.md` file we can add:
+> Note: [Pug](https://pugjs.org) is the template engine used by **Tikui** and indentations are important.
 
-```markdown
-## Button
-
-A simple button.
-```
+> You can also use `include:templateDoc button/button.md` if you don't want to see the component render, it's useful on bigger components like templates.
 
-Now, you can open the [button](http://localhost:3000/atom/atom.html#button) from the atom menu, inside your browser (serve is needed).
+By default, there is only one style file in the `src` folder: `tikui.scss`.
 
-### Components Parts
+It's because you're free to create your own structure even if we recommend you to follow the Atomic Design methodology.
 
-You can see a title `Button`, a content `A simple button` and two files to create:
+So you may need to create the file:
 
 ```bash
-touch src/atom/button/button.render.pug
-touch src/atom/button/button.code.pug
-```
-
-> The file `button.render.pug` represents the render of your component and `button.code.pug` represents its code.
-
-Inside `button.render.pug`, you can add:
-
-```pug
-extends /layout
-
-block body
-  include button.code.pug
-```
-
-And inside `button.code.pug`:
-
-```pug
-button.tikui-button Button
+touch src/atom/_atom.scss
 ```
 
-### Style
+And then, inside `tikui.scss`:
 
-Then you can see a button on the browser. Now, you have to change the appearance of this button on `_atom.scss` and `_button.scss` files:
-
-```bash
-touch src/atom/_atom.scss
-touch src/atom/button/_button.scss
+```scss
+@use 'atom/atom';
 ```
 
-Before going into these two new files, edit the default scss file:
-
-Inside `tikui.scss`:
+Inside `src/atom/_atom.scss`:
 
 ```scss
-@import 'atom/atom';
+@use 'button/button';
 ```
 
-Inside `_atom.scss`:
+And inside `button.mixin.pug`:
 
-```scss
-@import 'button/button';
+```pug
+mixin tikui-button
+  button.tikui-button Button
 ```
 
-Inside `_button.scss`:
+Inside `src/atom/button/_button.scss`:
 
 ```scss
 .tikui-button {
@@ -134,3 +95,5 @@ Inside `_button.scss`:
 ```
 
 As you can see in the browser, there is a documented blue button with an example of code.
+
+More info can be found in the [component documentation](https://tikui.org/doc/component-doc.html) of **Tikui**.