environ 3 minutes de lecture

Stylesheets

Scroll

Arborescence

Pour améliorer la gestion des appels CSS, voici l’arborescence des dossiers à suivre :

  • commons
  • components
  • pages
  • tools
    • functions
    • mixins
  • vendors

dans tools, nous aurons également les fichiers :

  • box-sizing
  • font-rendering
  • reset
  • variables

pour les imports, nous procéderons ainsi :

@import 'tools/reset'
@import 'tools/box-sizing'
@import 'tools/variables'
@import 'tools/functions/**/*'
@import 'tools/mixins/**/*'
@import 'vendors/**/*'
@import 'commons/**/*'
@import 'components/**/*'
@import 'pages/**/*'

Tools files

Box sizing

*, *:before, *:after
    box-sizing: border-box

Reset

Nous utilisons le reset d’Eric Meyer : https://meyerweb.com/eric/tools/css/reset/

Font rendering

Pour la gestion typographique cross browsers

html
    -ms-text-size-adjust: 100%
    -webkit-font-smoothing: antialiased
    -webkit-tap-highlight-color: transparent
    -webkit-text-size-adjust: 100%

body
    -moz-osx-font-smoothing: grayscale
    text-rendering: geometricPrecision

Breakpoints

On va du mobile au plus grand écran (sauf exception). Pour une logique de travail entre différents projets on utilise les breakpoints de Bootstrap 4 :

  • xs : 0
  • sm : 576px
  • md : 768px
  • lg : 992px

A cela on ajoute un cinquième cas pour différencier tablet landscape du laptop / desktop :

  • xl : 1200px

On peut ajouter d’autres breakpoints pour des cas spécifiques :

  • 2xl : 1400px
  • 3xl : 1600px

TODO exemple de code

Typographie

Nous utilisons l’unité rem.

Cette unité est un pourcentage de taille en fonction du zoom texte que l’utilisateur applique sur son navigateur. Elle se base toujours sur la taille du texte défini à la racine du document.

La font-size de base à définir sur html est de 16px.

Nous commençons donc par le mobile, en définissant les styles typographiques. Puis, nous ajoutons des breakpoints pour adapter la font-size aux écrans plus grands, en essayant d’être le plus simples possibles.

Exemple :

  html {
    font-size: 16px;
  }

  h1 {
    font-size: 1.5rem; // 24px
  }

  // lg
  @media (min-width: 992px) {
    h1 {
      font-size: 2rem // 32px
    }
  }

On utilise des fonctions pour faciliter cette mise en place :

@function px2rem($pixels)
    $rems: $pixels / 16
    @return #{$rems}rem

@function pxr2rem($pixels)
    $rems: $pixels / 16 / 2
    @return #{$rems}rem

// letter spacing
@function ls2rem($size)
   $remSize: $size / 1000
   @return #{$remSize}rem

Grille

Nous utilisons toujours le système de grille de Boostrap. Soit dans le cadre d’un Bootstrap complet, soit dans le cadre d’un import custom. On paramètre les variables sass correspondant au nombre de colonnes et à la gouttière. Gouttières et marges sont en pixels, pas en vw ou vh. Le nombre de colonnes et la gouttière peuvent varier en fonction du design.

Avec Middleman, et la gem ‘bootstrap’, cela passe par un fichier comme :

$grid-columns: 48
$grid-gutter-width: 0

@import "bootstrap/functions"
@import "bootstrap/variables"
@import "bootstrap/mixins"
// @import "bootstrap/root"
// @import "bootstrap/reboot"
// @import "bootstrap/type"
@import "bootstrap/images"
// @import "bootstrap/code"
@import "bootstrap/grid"
// @import "bootstrap/tables"
// @import "bootstrap/forms"
// @import "bootstrap/buttons"
// @import "bootstrap/transitions"
// @import "bootstrap/dropdown"
// @import "bootstrap/button-group"
// @import "bootstrap/input-group"
// @import "bootstrap/custom-forms"
// @import "bootstrap/nav"
// @import "bootstrap/navbar"
// @import "bootstrap/card"
// @import "bootstrap/breadcrumb"
// @import "bootstrap/pagination"
// @import "bootstrap/badge"
// @import "bootstrap/jumbotron"
// @import "bootstrap/alert"
// @import "bootstrap/progress"
// @import "bootstrap/media"
// @import "bootstrap/list-group"
// @import "bootstrap/close"
// @import "bootstrap/toasts"
// @import "bootstrap/modal"
// @import "bootstrap/tooltip"
// @import "bootstrap/popover"
// @import "bootstrap/carousel"
// @import "bootstrap/spinners"
@import "bootstrap/utilities"
// @import "bootstrap/print"

Notes

Quand on veut importer un fichier CSS venant d’un package npm, renseignez le chemin complet depuis le dossier du package. Exemple :

@import "bootstrap-select/dist/css/bootstrap-select"

Ressources

A classer: