diff --git a/webapp/README.md b/webapp/README.md index def0b739e..9632fbf81 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -92,15 +92,16 @@ You can then visit the Storybook playground on `http://localhost:3002` ## Styleguide Migration -We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `view` folder to separate them from the old, yet untouched components. +We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `_new` folder to separate them from the old, yet untouched components. ### Folder Structure -The folder structure we are aiming for is based on the [directory setup proposed by Nuxt.js](https://nuxtjs.org/guide/directory-structure): +The folder structure we are following is [prescribed by Nuxt.js](https://nuxtjs.org/guide/directory-structure): - **assets** contains icons, images and logos in `svg` format -- **components** are the generic building blocks of the app – small, reusable and usually not coupled to state -- **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`) +- **components** separated into two sub-folders: + - **generics** are the generic building blocks of the app – small, reusable and usually not coupled to state + - **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`) - **layouts** can use components to create layout templates for pages - **pages** are the entry points for all `routes` in the app and are composed of layouts, features and components - **styles** holds all shared SCSS files such as `variables` and `mixins`