CSS

Organiser ses fichiers

Nous recommandons deux arborescences pour ranger les styles :

• architecture simple
• architecture complète

Architecture simple

Si votre style n’excède pas les 200 lignes, vous pouvez adopter une version simple.

_configuration.sass : contient les paramètres de sass, son contenu doit se limiter à uniquement les variables sass

_fonts.sass : contient les font-face uniquement. Voir “Ajouter des polices”

_style.sass : contient les styles spécifiques. De façon à maintenir le code du site au plus proche du thème, vérifiez bien que les modifications nécessaires au site ne soit pas réalisable via les configurations de style _configuration.sass et du thème config.yaml

main.sass : ce fichier est la source du style compilé par le site, il est obligatoire, ne contient que des imports, et doit respecter un ordre précis d’appel :

@import "_theme/utils"
@import "_fonts"
@import "_configuration"
@import "_theme/hugo-osuny"
@import "_style"

Architecture avancée

Si votre ficher _style.sass dépasse les 200 lignes, séparez les trois fichiers reprenant l’architecture du thème.

_design-system.sass : Premier niveau, concerne les éléments du design system.

_blocks.sass : Second niveau, concerne les blocs.

_sections.sass : Troisième niveau, concerne les spécificités liés aux différentes sections (types de contenu).

@import "_theme/utils"
@import "_fonts"
@import "_configuration"
@import "_theme/hugo-osuny"
@import "_utils"
@import "_design-system"
@import "_blocks"
@import "_sections"

Architecture complète

Si en mode architecture avancée les fichiers sont trop longs (+ 200 lignes), il faut faire les dossiers et les fichiers par éléments du systèmes, sections, et blocs.