Layout
Grid
The site uses a mobile-first, 12 columns responsive grid based on Bootstrap (3.4, It also uses Bootstrap’s system of medias queries. A media query ( @screen-xl-min ) and associated classes (.col-xl-) have been added for large resolutions. See the bootstrap documentation for more information on using this grid.
fr :: Le site utilise la grille responsive mobile-first en 12 colonnes de bootstrap. Ainsi que son système de medias queries. Un media query (@screen-xl-min) ainsi que les classes associées (.col-xl-) ont été ajoutés pour les grandes résolutions. Consultez la documentation de bootstrap pour plus d’informations sur l’utilisation de la grille.
Breakpoint
| break point | media query | description |
|---|---|---|
| Default | Mobile first! Phone to small tablets | |
| 768px | @media (min-width: @screen-sm-min) {} | For small tablets or tablets in portrait format. |
| 990px | @media (min-width: @screen-md-min) {} | For small computers or tablets in landscape format. |
| 1200px | @media (min-width: @screen-lg-min) {} | Regular computers. |
| 1440px | @media (min-width: @screen-xl-min) {} | Large screen computers and TVs tv. |
Layout
Example of how the layout adjust to different screen sizes:
X-small
Small
Medium
X-large
Content area
It is possible to make a content area that takes 90% .l-largeur90p or 80% .l-largeur80p of the available area when the menu is open. For example, the content of the movie page is built to take up 80% of the available space while the list pages take 90%.
fr :: Il est possible de faire une zone de contenu qui prend 90% ou 80% de la zone disponible quand le menu est ouvert. Par exemple, le contenu de la page de film est construit pour prendre 80% de l’espace disponible alors que les pages de liste prennent 90%.
90% wide block
{ % block main_container_content % }
<div class="l-largeur90p m-caroussel-thumbnails">
Lorem ipsum
</div>
{ % endblock % }
80% wide block
{ % block main_container_content % }
<div class="l-largeur80p">
Lorem ipsum
</div>
{ % endblock % }
Page wide section
Page section that exceeds the content area
To make elements that come out of the content area (eg the module m-featured whose image is hidden by the menu when it is open) you have to use the template element <%block name="l_big_container"> instead of <%block name="main_container_content"> and add 2 <div> which will move the contents when the side menu opens and closes.
If you want to make blocks of color that take the width of the window, you must add one of these classes on the <div> .l-bigContainer:
fr :: Page avec éléments qui dépasse de la zone de contenu
Pour faire une page ou il y a des éléments qui sorte de la zone de contenu (exemple le module “m-featured” dont l’image est masquée par le menu quand il est ouvert) il faut utiliser l’élément de templating <%block name="l_big_container"> au lieu de <%block name="main_container_content"> et ajouter 2 <div> qui permettront de déplacer le contenu lorsque le menu ouvre et ferme.
Si on veut faire des blocs de couleur qui prennent la largeur de la fenêtre, il faut ajouter une de ces classes sur le <div> .l-bigContainer :
| colour | class |
|---|---|
| blanc | .l-blocBlanc |
| gris pâle | .l-blocGrisPale |
| gris fonçé | .l-blocGrisFonce |
| jaune (utilisé pour les erreurs 404 et 500) | .l-blocJaune |
Example: Yellow block @ 80%
{ % block l_big_container % }
<div class="l-blocJaune l-bigContainer">
<div class="l-contentContainer">
<div class="l-largeur80p m-caroussel-thumbnails">
Lorem ipsum
</div>
</div>
</div>
{ % endblock % }