N°2847 - Start rework of the CSS/JS/TWIG files structure

application/logintwig.class.inc.php

@@ -224,7 +224,7 @@ class LoginTwigRenderer
 		}
 
 		$oCoreLoader = new Twig_Loader_Filesystem(array(), APPROOT.'templates');
-		$aCoreTemplatesPaths = array('login', 'login/password');
+		$aCoreTemplatesPaths = array('pages/login', 'pages/login/password');
 		// Having this path declared after the plugins let the plugins replace the core templates
 		$oCoreLoader->setPaths($aCoreTemplatesPaths);
 		// Having the core templates accessible within a different namespace offer the possibility to extend them while replacing them

css/README.md

@@ -0,0 +1,5 @@
+In order to better separate our developments from the embedded third-party libs, files should be moved in either the /backoffice, /lib or something new folders.
+
+IMPORTANT: Before moving a file, we should first consider if: 
+- The file is used in an iTop extension that should be compatible with the iTop version currently under developments
+- The file is still used in iTop itself (or if we can consider removing it for clean up)

css/backoffice/README.md

@@ -0,0 +1,71 @@
+## Description
+This is a brief description of the SASS 7-1 system and how to use it.
+- [File structure](#file-structure)
+- [Usage](#usage)
+
+## File structure
+SCSS files are structured following the [7-1 pattern](https://sass-guidelin.es/#the-7-1-pattern). \
+@rveitch made a great summary with the following, which can also be found [here](https://gist.github.com/rveitch/84cea9650092119527bc).
+
+```
+css/backoffice/
+|
+|– 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…
+|
+|– themes/
+|   |– _theme.scss       # Default theme
+|   |– _admin.scss       # Admin theme
+|   ...                  # Etc…
+|
+|– 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…
+|
+|
+`– main.scss             # Main Sass file
+```
+
+## Usage
+To avoid common errors, files should be imported in the final file in the following order. Again those are just following the SASS guidelines:
+- Utils
+    - Variables
+    - Functions
+    - Mixins
+    - Helpers
+- Vendors
+- Base
+- Components
+- Layout
+- Pages
+- Themes

js/README.md

@@ -0,0 +1,5 @@
+In order to better separate our developments from the embedded third-party libs, files should be moved in either the /components or /lib folders.
+
+IMPORTANT: Before moving a file, we should first consider if: 
+- The file is used in an iTop extension that should be compatible with the iTop version currently under developments
+- The file is still used in iTop itself (or if we can consider removing it for clean up)