doc: update README

Author: olivier3lanc

README.md

@@ -4,6 +4,32 @@
 
 A simple and customizable low-level CSS library generator.
 
-## JSON Examples
+[Documentation](#)
 
+## General principles
+
+* **Simple responsive naming convention**: BRiCSS is a simple low-level CSS abstraction and a naming convention based on abbreviations of CSS class names and attributes.
+* **CSS you really use**: Just set CSS properties you really use into your designs and code.
+* **Responsive on-demand**: Optimized CSS output file size thanks to selective responsive CSS properties you really use.
+* **Automatic documentation**: An interactive documentation of CSS output is automatically generated.
+* **Low-engineered**: Only a browser is required.
+* **JSON based**: BRiCSS is a JSON file base solution to generate a tailored CSS file library.
+* **Offline**: Works even with no Internet connection.
+* **Design Systems friendly**: Integrates seamlessly into a Design System.
+* **Instant file size**: Instantly observe the file size impact of your settings.
+* **Copy or download**: Just refresh your browser to get the latest version of your custom CSS library.
+
+## Requirements
+
+A text editor, a web server and a browser.
+
+## Getting started
+
+1. [Download](https://github.com/ita-design-system/bricss/archive/refs/heads/main.zip) or clone this repository the starter project and unpack to any web server.
+2. **Edit** `build.json` file to fit your needs.
+3. **Run through your browser!** Interactive documentation is generated automatically. 
+
+At first start, an onboarding menu with JSON examples is available to help populating your own `build.json`. At least one single CSS property is required to display documentation. When `build.json` is not empty, just click to download or copy your new CSS library.
+
+All JSON examples are placed nto the folder `json_examples` or the repository.
 

docs/index.html

@@ -218,7 +218,14 @@ <h2 class="m-0 | ff-lead-700 fs-6">General principles</h2>
                             <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondary-500">Simple responsive naming convention</h3>
                             <p class="d-flex | m-0 pt-2 maxw-30ch | pos-relative | pl-6 | fs-4 lh-6 | c-primary-300">
                                 <span class="d-flex | pos-absolute top-0 left-0 | p-4 | __icon-arrow-down-curved-right"></span>
-                                BRiCSS is a simple low-level CSS abstraction and a naming convention based on abbreviations of class names and attributes.
+                                BRiCSS is a simple low-level CSS abstraction and a naming convention based on abbreviations of CSS class names and attributes.
+                            </p>
+                        </li>
+                        <li class="d-flex fd-column fg-1 | p-5 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
+                            <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondary-500">CSS you really use</h3>
+                            <p class="d-flex | m-0 pt-2 maxw-30ch | pos-relative | pl-6 | fs-4 lh-6 | c-primary-300">
+                                <span class="d-flex | pos-absolute top-0 left-0 | p-4 | __icon-arrow-down-curved-right"></span>
+                                Just set CSS properties you really use into your designs and code.
                             </p>
                         </li>
                         <li class="d-flex fd-column fg-1 | p-5 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
@@ -229,10 +236,10 @@ <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondar
                             </p>
                         </li>
                         <li class="d-flex fd-column fg-1 | p-5 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
-                            <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondary-500">Auto doc</h3>
+                            <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondary-500">Automatic documentation</h3>
                             <p class="d-flex | m-0 pt-2 maxw-30ch | pos-relative | pl-6 | fs-4 lh-6 | c-primary-300">
                                 <span class="d-flex | pos-absolute top-0 left-0 | p-4 | __icon-arrow-down-curved-right"></span>
-                                Documentation of CSS output is automatically generated.
+                                An interactive documentation of CSS output is automatically generated.
                             </p>
                         </li>
                         <li class="d-flex fd-column fg-1 | p-5 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
@@ -246,7 +253,7 @@ <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondar
                             <h3 class="m-0 pl-4 | fs-5 ff-lead-700 | blwidth-1 blstyle-solid bcolor-secondary-500">JSON based</h3>
                             <p class="d-flex | m-0 pt-2 maxw-30ch | pos-relative | pl-6 | fs-4 lh-6 | c-primary-300">
                                 <span class="d-flex | pos-absolute top-0 left-0 | p-4 | __icon-arrow-down-curved-right"></span>
-                                BRiCSS is a JSON file base solution to generate a tailored CSS file library.
+                                BRiCSS is a JSON file based solution to generate a tailored CSS file library.
                             </p>
                         </li>
                         <li class="d-flex fd-column fg-1 | p-5 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
@@ -316,10 +323,10 @@ <h3 class="pos-relative | m-0 | ff-lead-700 ff-lead-700">
                         <li class="d-flex fd-column gap-2 fg-1 | p-5 pl-7 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2">
                             <h3 class="pos-relative | m-0 | ff-lead-700 ff-lead-700">
                                 <span class="pos-absolute left-0 t-tX-100 | pr-2 | c-secondary-500">3.</span> 
-                                Use it!
+                                Run through your browser!
                             </h3>
                             <p class="m-0 maxw-30ch | fs-4 lh-6 | c-primary-300">
-                                Refresh the documentation generated automatically and get a copy of your new CSS library.
+                                Interactive documentation is generated automatically. Just click to download or copy your new CSS library.
                             </p>
                         </li>
                     </ol>