Sous le capot, le code
Du code HTML, CSS, un peu de Js, bref : le rêve.
Et puis, une recherche d’organisation schématisée sous la forme de l’arborescence suivante :
- 1 / L’organisation générale
- 2 / Les éléments de styles de la charte graphique
- – Couleurs
- – Typo
- – Ombrages
- – Dégradés, etc
- 3 / Composants réutilisables, animations et effets
- 4 / Layout : la mise en page
Le fichier style.scss reprend cette volonté d’ordre et de rangement :
SCSS
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
0 / VARIABLES, mixins sass et Maquettage
0.1 = Mixins
0.2 = Variables
0.3 = Maquettage
1 / Normalize et RESET
1.1 = Normalize
1.2 = Reset
2 / BASE (général)
2.1 = Typo
2.2 = Couleurs (charte graphique)
# Colours #
# Gradients and Shades #
- gradients
2.3 = Eléments html
# Generals #
-- headings
-- Listes
-- Liens
-- Images
# Forms #
3 / NAVIGATION
3.1 = Menus
3.2 = Menu mobile
4 / ALIGNEMENT and GRIDS
4.1 = Grids
4.2 = Flex
4.3 = Columns
5 / USEFULS and tools
5.1 = Usefuls
5.2 = Widths and heights
5.3 = Spacing
5.4 = Text tools
5.5 = Borders
5.6 = Shapes (circle, triangles...)
6 / COMPONENTS (éléments modulaires)
6.1 = # Boutons #
6.2 = # Cards #
6.3 = # Images (special) #
6.4 = # Galleries #
6.5 = # Player audio / video #
6.6 = # Icons #
6.7 = # Timeline #
6.8 = # Carousels #
6.9 = # DECORATION #
7 - LIBRARIES
7.1 = Animate
7.2 = Sal
7.3 = Animations persos et autres
7.4 = Prisms
7.5 = Effects
8 - MODULES (plugins js / WP)
8.1 = Slick slider
8.2 = WORDPRESS
8.2 = AUTRES
9 - LAYOUT -> styles spécifiques au SITE
9.0 = CUSTOM et DS LAYOUT
9.1 = Home page
9.2 = Pages
9.3 = Posts
10 - MEDIA QUERIES
*/