Structure CSS

Dans TimeCrumbs, nous utilisons SASS pour la gestion du CSS dans l'application. Nous avons séparer la structure en 4 grandes catégories.

Base

Tous les éléments (variables, mixins, classes) qui se retrouvent au travers de l'application. Ces éléments contribuent principalement au thème de l'application.

Components

Permet de styler un component HTML qui se retrouve à divers endroit dans l'application. Il utilise les éléments définit dans base.

Layouts

Définit le positionnement et quelque peut le thème du squelette de l'application soit la toolbar, la barre de menu, le main, et la barre d'options de droite.

Modules

Pour chacun des modules de l'application (Dashboard, Relations, Projects, Pricebook, etc.) un fichier css lui est attribué. Dans ces fichiers, nous utilisons les éléments définit à la base pour stylé les pages et apporter quelque ajustement visuel pointus/précis.

Voici la structure des fichiers CSS :

|-- app.scss
|
|-- base/
|   |-- base.scss
|   |-- _buttons.scss 
|   |-- _colors.scss 
|   |-- _forms.scss 
|   |-- _icons.scss
|   |-- _lists.scss 
|   |-- _scroll.scss 
|   |-- _tables.scss 
|   `-- _typography.scss 
|
|-- components/
|   |-- _components.scss
|   |-- _breadcrumbs.scss
|   `-- _total-price.scss
|
|-- layouts/
|   |-- _layouts.scss
|   |-- _main.scss        		
|   |-- _menubar.scss     		
|   |-- _sidebar.scss     		  		 
|   `-- _toolbar.scss     		
|
`-- modules/        		
    |-- _modules.scss       	     	
    |-- _dashboard.scss       	     	
    |-- _pricebook.scss       	     	
    |-- _projects.scss       	     	
    |-- _public-rfp.scss       	     	
    |-- _relations.scss       	     	 
    |-- _relations_bill.scss         	
    |-- _relations_invoices.scss     	
    |-- _relations_orders.scss       	
    |-- _relations_rfps.scss         	
    |-- _relations_settings.scss     	
    |-- _root.scss        		
    |-- _thread.scss       	     	   
    `-- _user.scss