add folder layout to readme

woylie · Jun 30, 2024 · 18c738e · 18c738e
1 parent 6238d46
commit 18c738e
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,59 @@ cd barker
 rm -rf .github .git
 ```
 
+## Folder Structure
+
+    .
+    ├── build                   # Build artefacts (token definitions, CSS, etc.)
+    │   ├── css                 # CSS output
+    │   └── tokens              # Token output
+    │       ├── css             # CSS custom properties
+    │       ├── js              # JavaScript
+    │       ├── css             # JSON definitions
+    │       └── scss            # SCSS mixins and variables
+    ├── src                     # Source files
+    │   ├── css                 # Styles
+    │   ├── js                  # JavaScript
+    │   └── tokens              # Design Tokens
+    └── ...
+
+### Build Folder
+
+The build folder contains the build artefacts.
+
+    .
+    ├── ...
+    ├── build                   # Build artefacts
+    │   ├── css                 # CSS output
+    │   └── tokens              # Token output
+    │       ├── css             # CSS custom properties
+    │       ├── js              # JavaScript
+    │       ├── css             # JSON definitions
+    │       └── scss            # SCSS mixins and variables
+    └── ...
+
+### CSS Folders
+
+    .
+    ├── ...
+    ├── src
+    │   ├── css
+    │   │   ├── _extends.scss           # SCSS placeholders for @extend
+    │   │   ├── _functions.scss         # SCSS functions for using design tokens
+    │   │   ├── _mixins.scss            # SCSS mixins
+    │   │   ├── base                    # Global base layer
+    │   │   │   ├── _animations.scss    # Keyframe animations
+    │   │   │   ├── _general.scss       # Global styles
+    │   │   │   ├── _index.scss         # Entry point for base layer
+    │   │   │   └── _typography.scss    # Global typography styles
+    │   │   ├── components              # Components are styled elements
+    │   │   ├── layouts                 # Layouts arrange components on the page
+    │   │   ├── main.scss               # Entry point
+    │   │   ├── themes                  # Place for light/dark themes etc.
+    │   │   └── utilities               # Utility classes generated from design tokens
+    │   └── ...
+    └── ...
+
 ## Commands
 
 | Description                                         | Command                   |