amauryval · August 22, 2022 20:21 · Dec 23, 2018 · Dec 23, 2018 · May 22, 2017 · May 6, 2015
diff --git a/sassas.md b/sassas.md
@@ -83,8 +83,8 @@ The style file should be the only Sass file from the whole code base not to begi
 Files should be imported according to the folder they live in, one after the other in the following order:
 
 1. `sass-utils/`
-2. `base/`
-3. `vendors/`
+2. `vendors/`
+3. `base/`
 4. `layout/`
 5. `components/`
 6. `pages/`
diff --git a/sassas.md b/sassas.md
@@ -83,8 +83,8 @@ The style file should be the only Sass file from the whole code base not to begi
 Files should be imported according to the folder they live in, one after the other in the following order:
 
 1. `sass-utils/`
-2. `vendors/`
-3. `base/`
+2. `base/`
+3. `vendors/`
 4. `layout/`
 5. `components/`
 6. `pages/`
diff --git a/sassas.md b/sassas.md
@@ -1,4 +1,4 @@
-#Sass Architecture Structure
+# Sass Architecture Structure
 
 ```
 sass/
@@ -46,37 +46,37 @@ sass/
 
 
 
-###BASE FOLDER
+### BASE FOLDER
 
 The `base/` folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet, defining some standard styles for commonly used HTML elements.
 
-###COMPONENTS FOLDER
+### COMPONENTS FOLDER
 
 For smaller components, there is the `components/` folder. While `layout/` is macro (defining the global wireframe), `components/` is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in `components/` since the whole site/application should be mostly composed of tiny modules.
 
-###LAYOUT FOLDER
+### LAYOUT FOLDER
 
 The `layout/` folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar…), the grid system or even CSS styles for all the forms.
 
-###PAGES FOLDER
+### PAGES FOLDER
 
 If you have page-specific styles, it is better to put them in a `pages/` folder, in a file named after the page. For instance, it’s not uncommon to have very specific styles for the home page hence the need for a `_home.scss` file in `pages/`.
 
-###SASS-UTILS/ FOLDER
+### SASS-UTILS FOLDER
 
 The `sass-utils/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
 
 The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
 
-###VENDORS FOLDER
+### VENDORS FOLDER
 
 And last but not least, most projects will have a `vendors/` folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered, and so on. Putting those aside in the same folder is a good way to say “Hey, this is not from me, not my code, not my responsibility”.
 
 If you have to override a section of any vendor, I recommend you have an 8th folder called `vendors-extensions/` in which you may have files named exactly after the vendors they overwrite.
 
 For instance, `vendors-extensions/_boostrap.scss` is a file containing all CSS rules intended to re-declare some of Bootstrap’s default CSS. This is to avoid editing the vendor files themselves, which is generally not a good idea.
 
-###STYLE FILE
+### STYLE FILE
 
 The style file should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but `@import` and comments.
 

diff --git a/sassas.md b/sassas.md
@@ -82,8 +82,8 @@ The style file should be the only Sass file from the whole code base not to begi
 
 Files should be imported according to the folder they live in, one after the other in the following order:
 
-1. `vendors/`
-2. `sass-utils/`
+1. `sass-utils/`
+2. `vendors/`
 3. `base/`
 4. `layout/`
 5. `components/`

diff --git a/sassas.md b/sassas.md
@@ -0,0 +1,90 @@
+#Sass Architecture Structure
+
+```
+sass/
+|
+|– base/
+|   |– _reset.scss       # Reset/normalize
+|   |– _typography.scss  # Typography rules
+|   ...                  # Etc…
+|
+|– components/
+|   |– _buttons.scss     # Buttons
+|   |– _carousel.scss    # Carousel
+|   |– _cover.scss       # Cover
+|   |– _dropdown.scss    # Dropdown
+|   ...                  # Etc…
+|
+|– layout/
+|   |– _navigation.scss  # Navigation
+|   |– _grid.scss        # Grid system
+|   |– _header.scss      # Header
+|   |– _footer.scss      # Footer
+|   |– _sidebar.scss     # Sidebar
+|   |– _forms.scss       # Forms
+|   ...                  # Etc…
+|
+|– pages/
+|   |– _home.scss        # Home specific styles
+|   |– _contact.scss     # Contact specific styles
+|   ...                  # Etc…
+|
+|– sass-utils/
+|   |– _variables.scss   # Sass Variables
+|   |– _functions.scss   # Sass Functions
+|   |– _mixins.scss      # Sass Mixins
+|   |– _helpers.scss     # Class & placeholders helpers
+|
+|– vendors/
+|   |– _bootstrap.scss   # Bootstrap
+|   |– _jquery-ui.scss   # jQuery UI
+|   ...                  # Etc…
+|
+|
+`– style.scss            # Primary Sass file
+```
+
+
+
+###BASE FOLDER
+
+The `base/` folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet, defining some standard styles for commonly used HTML elements.
+
+###COMPONENTS FOLDER
+
+For smaller components, there is the `components/` folder. While `layout/` is macro (defining the global wireframe), `components/` is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in `components/` since the whole site/application should be mostly composed of tiny modules.
+
+###LAYOUT FOLDER
+
+The `layout/` folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar…), the grid system or even CSS styles for all the forms.
+
+###PAGES FOLDER
+
+If you have page-specific styles, it is better to put them in a `pages/` folder, in a file named after the page. For instance, it’s not uncommon to have very specific styles for the home page hence the need for a `_home.scss` file in `pages/`.
+
+###SASS-UTILS/ FOLDER
+
+The `sass-utils/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
+
+The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
+
+###VENDORS FOLDER
+
+And last but not least, most projects will have a `vendors/` folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered, and so on. Putting those aside in the same folder is a good way to say “Hey, this is not from me, not my code, not my responsibility”.
+
+If you have to override a section of any vendor, I recommend you have an 8th folder called `vendors-extensions/` in which you may have files named exactly after the vendors they overwrite.
+
+For instance, `vendors-extensions/_boostrap.scss` is a file containing all CSS rules intended to re-declare some of Bootstrap’s default CSS. This is to avoid editing the vendor files themselves, which is generally not a good idea.
+
+###STYLE FILE
+
+The style file should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but `@import` and comments.
+
+Files should be imported according to the folder they live in, one after the other in the following order:
+
+1. `vendors/`
+2. `sass-utils/`
+3. `base/`
+4. `layout/`
+5. `components/`
+6. `pages/`