Dans le fichier breakpoints.sass on retrouve les media queries (dans des variables) correspondants aux breakpoints qu'on utilise sur le site.
$breakpoint-larger-than-sm-768px: "only screen and (min-width: 768px)"
$breakpoint-smaller-than-sm-768px: "only screen and (max-width: 767px)"
$breakpoint-larger-than-md-992px: "only screen and (min-width: 992px)"
$breakpoint-smaller-than-md-992px: "only screen and (max-width: 991px)"
$breakpoint-larger-than-lg-1200px: "only screen and (min-width: 1200px)"
$breakpoint-smaller-than-lg-1200px: "only screen and (max-width: 1199px)"
$breakpoint-larger-than-xl-1600px: "only screen and (min-width: 1600px)"
$breakpoint-smaller-than-xl-1600px: "only screen and (max-width: 1599px)"Pour la gestion du responsive, on a favorisé une approche mobile first : on déclare les styles pour les petits écrans et on les surcharge si besoin pour les plus grands écrans avec une variable de type $breakpoint-larger-than-…
.sidebar-nav
display: flex
justify-content: space-between
@media #{$breakpoint-larger-than-sm-768px}
.sidebar-nav
flex-direction: columnSur le site on utilise la grille Flexbox Grid il est donc possible de consulter la documentation directement sur le site
On a un peu customisé la grille pour ajouter du padding sur le container afin d'avoir des gouttières qui suivent nos breakpoints.
Pour respecter le design sur l'ECPPP, on utilise un display: grid qui nous permet de maitriser le nombre de lignes et de colonnes qu'occupe une box.
Pour l'instant cette grille est assez rigide, elle ne fonctionne que pour un cas avec 5 box dont une au milieu qui prend 2 rangées de hauteur. Il faudra voir selon les besoins si cette grille a besoin d'évoluer pour devenir plus générique et plus flexible.
.grid
.grid-1.mb-3 style= "background: #eee"
.grid-2.mb-3 style= "background: #eee"
.grid-3.mb-3 style= "background: #eee"
.grid-4.mb-3 style= "background: #eee"
.grid-5.mb-3 style= "background: #eee"
On utilise des classes génériques pour les besoins de positionnement qui se trouve dans le fichier positioning.sass
Pour gérer les margin et les padding on a un systeme de nommage qui se base sur les spacers (définit dans le fichier spacers.scss), allant de 0 à 13.
.mt-0 // margin-top: 0
.mt-13 // margin-top: $spacer(13)
.pb-0 // padding-bottom: 0
.pb-13 // padding-bottom: $spacer(13)
On a également des classes génériques pour gérer les éléments en flex.
.flex-align-center
.flex-space-between
…
Les classes génériques qui s'appliquent à du texte sont placés dans le fichier text.sass
.truncate // ajouter une ellipse sur du texte
.align-center // centrer le texte
.rouge // mettre en rouge le texte
On utilise des classes génériques pour masquer ou rendre visible des éléments dans le html. Ces classes sont déclinées en fonction des breakpoints afin de gérer le responsive.
.visible
.hidden
.hidden-xs
.hidden-unless-xs
…
.hidden-lg
.hidden-unless-lg