Détail des dossiers CSS

1. Les bases

Le dossier /base/ contient 9 fichiers CSS.

_auto.scss : rassemble un ensemble de classes et d’extensions de classes pouvant être utilisées sur l’ensemble du site.
_bloc.scss : styles liés à la classe .bloc –> Cette classe est généralement pour les blocs de contenus flexibles.
_buttons.scss : styles liés aux boutons « Call to Action ».
_gradients.scss : rassemble un ensemble de dégradés CSS. Un commentaire est présent au dessus de chaque dégradé pour comprendre sa couleur, son orientation et son opacité.
_grid.scss : styles liés à la grille des conteneurs et des colonnes.
_images.scss : styles liés aux images, légendes des images…
_mixins.scss : les mixins sont des regroupements de règles CSS, que l’on peut réutiliser dans les fichiers de style. Si les règles constituant les mixins sont modifiées, le résultat compilé sera modifié partout où la mixin aura été utilisée, ce qui vous épargnera beaucoup de temps et évitera des répétitions. Ces mixins sont de nombreuses fois utilisées sur le site.
_reset.scss : fichier de reset CSS pour les comptabilités navigateurs.
_text.scss : styles liés aux textes, liens et différents éléments de textes globaux sur l’ensemble du site.

2. Les fonts

Chaque font est intégrée au sein d’un fichier CSS qui porte son nom. Les fonts sont intégrées en appliquant la propriété CSS @font-face. Sur chaque déclaration de font, vous devez, si ce n’est pas déjà le cas, ajoutez la propriété CSS : font-display: swap;

3. Les blocs

La fabrique à sites dispose d’un total de 19 blocs pouvant être déclinés graphiquement entre 1 et 4 variantes.

/accordeons-onglets/ : Bloc Accordéon Onglets – Voir ici
/auteur-team/ : Bloc Auteur & Team – Voir ici
/cartographie/ : Bloc Cartographie – Voir ici
/chiffres/ : Bloc Points Clés – Voir ici
/colonnes/ : Bloc Multicolonnes – Voir ici
/focus/ : Bloc Focus – Voir ici
/focus-geoloc/ : Bloc Focus Géolocalisation – Voir ici
/galerie/ : Bloc Galerie – Voir ici
/iframe/ : Bloc Iframe – Voir ici
/image/ : Bloc Image Unique – Voir ici
/image-texte/ : Bloc Image(s) – Texte – Voir ici
/instagram/ : Bloc Instagram – Voir ici
/multimedia/ : Bloc Multimedia – Voir ici
/relation/ : Bloc Contenus Associés – Voir ici
/sejours/ : Bloc Idées Séjours – Voir ici
/slider/ : Bloc Slider – Voir ici
/switch-home/ : Bloc Switch Homepage – Voir ici
/texte/ : Bloc Texte – Voir ici
/video/ : Bloc Vidéo – Voir ici

4. Les composants communs

_ancre.scss : styles liés à la class .ancre + les variantes
_breadcrumb.scss : styles liés au fil d’ariane
_calendar.scss : styles liés au calendrier
_cards.scss : styles liés au Cards Design
_layout.scss : styles liés à des petits éléments génériques tels que la croix pour fermer un overlay, le nombre de filtres sélectionnés…
_loader.scss : styles liés à un loader de chargement sur les overlays Agenda
_maps.scss : styles liés aux cartes
_modal.scss : styles liés aux fenêtre modals – bloc galerie
_overlay.scss : styles liés aux overlays (par défaut et spécifiques)
_pagination.scss : styles liés à la pagination
_slider.scss : styles liés au slider (affichage général, navigation…)
_slider-cards.scss : styles liés aux sliders qui affichent essentiellement des cards
_social-share.scss : styles liés aux partages sur les réseaux sociaux
_switch.scss : styles liés à l’élément de switch (bloc switch home)
_toolbar-bottom.scss : styles liés à la barre ferrée en bas sur les supports numériques mobiles
_tooltop.scss : styles liés à l’affichage des tooltips
_view-map-listing.scss : styles liés à l’affichage de la vue carte dans les pages de listings Posts Types et SIT

5. Les modèles

/accueil/ : Modèle de la Page d’accueil – Voir ici
/blog/ : Modèle Détail d’une Actualité – Voir ici
/carte/ : Modèle Carte Interactive – Voir ici
/edito/ : Modèle Page Éditoriale – Voir ici
/itineraire/ : Modèle Détail d’un Post Type Itinéraire – Voir ici
/listing-agenda/ : Modèle Listing des Agendas Décibelles Data – Voir ici
/listing-blog/ : Modèle Listing des Actualités – Voir ici
/listing-cpt/ : Modèle Listing des Posts Types – Voir ici
/recette/ : Modèle Détail d’un Post Type Recette – Voir ici
/sejour/ : Modèle Détail d’un Post Type Séjour – Voir ici
/sit/ : Modèle Détail des fiches SIT – Voir ici
/top10/ : Modèle Détail d’un Post Type Recette – Voir ici

Les fichiers _page-header.scss / _type-1.scss / _type-2.scss / _type-3.scss sont des fichiers qui rassemblent les styles liés aux couvertures des pages éditoriales, itinéraires, séjours et recettes.

6. Les strates

/comment-venir/ : Strate optionnelle Comment Venir – Voir ici
/footer/ : Strate fonctionnelle Footer – Voir ici
/header/ : Strate fonctionnelle Header – Voir ici
/libre/ : Strate optionnelle Libre – Voir ici
/menu-footer/ : Strate optionnelle Navigation secondaire – Voir ici
/nav/ : Strate fonctionnelle Navigation – Voir ici
/newsletter/ : Strate optionnelle Restons Connectés – Voir ici
/partenaires/ : Strate optionnelle Logos Partenaires – Voir ici
/pub/ : Strate optionnelle Pub – Voir ici

7. Les libraires

/formidable/ : styles issus de la librairie du plug-in WordPress Formidable
_daterangepicker.scss : styles liés au calendrier intégré dans les listings des Agendas SIT
_iscroll.scss : styles liés à la personnalisation des scrollbars navigateur
_leaflet.scss : styles liés à la personnalisation des cartes
_leaflet-custom.scss : styles liés à la personnalisation de groupes de pointers sur les cartes
_matomo-custom.scss : styles liés à un outil d’analyse de données
_nouislider.scss : slider pour des intervalles de prix dans l’overlay de filtres
_nouislider-custom.scss : addition de styles personnalisés à la librairie nouislider
_pickaday.scss : calendrier généré en JavaScript sur un input
_selectric.scss : personnalisation des selects
_selectric-custom.scss : personnalisation des selects modifié par l’agence Thuria
_slick.scss : slider
_zoombox.scss : galerie multimédia

8. Les formulaires

_formulaires.scss : styles par défaut liés aux 3 variantes de formulaire
_type-1.scss : type 1 du formulaire
_type-2.scss : type 2 du formulaire
_type-3.scss : type 3 du formulaire