Options du thème

Code de base

Impreza vient de base avec certains paramètres par défaut, qui ne sont pas forcément optimaux pour notre utilisation. Voici donc un snippet de code à copier dans les Options du thème au début de chaque projet. Conçu pour éviter d’utiliser des medias queries, ces paramètres régissent les espacements de section, la hauteur des séparateurs, la taille des headings et plus, et ce, de façon responsive. L’outil que nous avons utilisé pour calculer les valeurs «clamp» se nomme Utopia.

Utopia plus en détails

Utopia sert à setter, pour une résolution minimum et maximum, des valeurs en px pour éviter que le font-size grossisse ou rapetisse exponentiellement. Par exemple, un écran 1920px aurait un font-size de base de 18px, tandis qu’un écran de 450px aura un font-size de base de 16px. Au delà ou en dessous de ces valeurs, on reste respectivement à 18px et 16px. Or, entre les deux résolutions, un calcul clamp() vient adapter la taille du texte. Cela est négligeable pour les paragraphe, qui jouent entre 16px et 18px dans cet exemple, mais quand il s’agit de font-size pour des headings (h1, h2…), la différence est notable (ex: la variable –step-5 pourrait être de 76px sur un écran de 1920px, mais seulement de 40px sur un écran de 450px).

Utopia permet d’avoir un font-size fluide, mais il est possible aussi de créer des espacements qui équivalent à un nombre de pixels différent sur desktop vs mobile. Par exemple, 72px sur écran de 1920px pourrait diminuer à 48px sur mobile, fluidement. Sur le site d’Utopia, les différentes échelles de mesures fluides fonctionnent comme des tailles de t-shirt (xs, s, m, l, xl…). Un espace L pourrait par exemple convenir sur desktop, mais être trop gros sur mobile. On pourrait alors passer de L à M sur mobile (dans ce cas, la variable –space-m-l correspond à cet espacement).  À noter qu’on n’est pas obligé de faire de paires de valeurs uniquement de style s-m, m-l, l-xl, etc. On peut facilement omettre des «tailles de t-shirt» pour un resizing plus marqué, ex: –space-s-xl. Il faut seulement s’assurer que ces nouvelles combinaisons figurent dans la section « Space value pairs – custom steps »

Pour voir visuellement comment les espaces agissent fluidement, voir l’exemple de l’échelle ici.

Pour voir visuellement comment les font-sizes agissent fluidement, voir l’exemple de l’échelle ici.

Pourquoi 450px et 1920px comme limites?

Nous avons choisi ces limites car nous voulions que les font-sizes et espacements arrêtent de grandir/rapetisser à ces résolutions. C’est rare que quelqu’un regarde un site sur un écran plus gros que 1920px. Si, par exemple, la limite supérieure était de 2500px, le font-size qu’on verrait à 1920px serait un entre-deux, un résultat de la valeur idéal du preferred value (aka valeur du milieu du clamp).

Pour ce qui est de la limite minimale de 450px, nous voulions que tous les écrans mobiles (normalement plus petits que 450px) puissent avoir atteint le minimum pour que, dans le cas qu’une taille t-shirt plus grande sur desktop qui devient plus petite sur mobile soit équivalente à une taille t-shirt constante). Ex: Si la limite était de 300px (qui se correspond à la résolution d’aucun téléphone), les deux espacements –space-m et –space-m-l ne seraient pas identiques sur mobile, car le minimum de la taille m pour la taille t-shirt m-l ne serait atteinte qu’à 300px. À 400px, on verrait une différence entre les deux espacements. Donc, en mettant la valeur minimale des échelles de mesures à 450px, on s’assure que les espacements soient arrivés à leur minimum sur mobile.

Variables CSS

Dans le code ci-dessous, vous verrez que les premières lignes de code sont des déclarations de variables CSS.

Une variable CSS (aussi appelée custom property) permet de stocker une valeur (comme une couleur, une taille, une marge, etc.) dans une sorte de “nom de variable” réutilisable partout dans ton CSS. L’avantage principale est que les variables sont faciles à modifier (ex. changer une couleur sur tout le site d’un seul endroit).

Comment ça fonctionne?

On définit la variable dans un sélecteur (souvent :root pour qu’elle soit globale).

:root {
–main-color: #3498db;
–border-radius: 25px;
}

Utilisation

On l’utilise avec la fonction var().

button {
background-color: var(–main-color);
border-radius:  var(–padding-s);
}

Bonus : Valeur Fallback

Tu peux aussi définir une valeur par défaut si la variable n’existe pas :
color: var(–text-color, black);

Code de base à copier dans les options du thème

À noter que le code qui suit peut être amené à évoluer et à être ajuster de projets en projets. N’hésitez pas à actualiser le code ici de temps en temps.

IMPORTANT: Pour ne pas perdre le fil de l’échelle d’Utopia, bien vouloir remplacer le @link en commentaire dès que vous faites un changement ou un ajout de mesures à l’échelle.

[css]

Options du thème


/* @link https://utopia.fyi/space/calculator?c=450,16,1.2,1920,18,1.25,5,2,&s=0.75|0.5|0.25,2|3|4|8|16,s-xl|s-2xl|s-3xl|m-xl|m-2xl|l-l|l-2xl|m-s&g=s,l,xl,12 */
/* @link https://utopia.fyi/type/calculator?c=450,16,1.2,1920,18,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
interpolate-size: allow-keywords; /* Opt-in the whole page to animating to/from intrinsic sizing keywords – only in Chrome */

/* Font-sizes */
–step–2: clamp(0.6331rem, 0.7132rem + -0.0667vw, 0.6944rem);
–step–1: clamp(0.8333rem, 0.8301rem + 0.0116vw, 0.844rem);
–step-0: clamp(1rem, 0.9617rem + 0.1361vw, 1.125rem);
–step-1: clamp(1.2rem, 1.1083rem + 0.3261vw, 1.4996rem);
–step-2: clamp(1.44rem, 1.2689rem + 0.6084vw, 1.999rem);
–step-3: clamp(1.728rem, 1.4413rem + 1.0195vw, 2.6647rem);
–step-4: clamp(2.0736rem, 1.621rem + 1.6091vw, 3.552rem);
–step-5: clamp(2.4883rem, 1.8006rem + 2.4452vw, 4.7348rem);
–step-6: clamp(2.986rem, 1.968rem + 3.6196vw, 6.3115rem);
–step-7: clamp(3.5832rem, 2.1046rem + 5.2572vw, 8.4132rem);
–step-8: clamp(4.2998rem, 2.183rem + 7.5266vw, 11.2149rem);
–step-9: clamp(5.1598rem, 2.163rem + 10.6554vw, 14.9494rem);

–space-3xs: clamp(0.25rem, 0.2309rem + 0.068vw, 0.3125rem);
–space-2xs: clamp(0.5rem, 0.4809rem + 0.068vw, 0.5625rem);
–space-xs: clamp(0.75rem, 0.7117rem + 0.1361vw, 0.875rem);
–space-s: clamp(1rem, 0.9617rem + 0.1361vw, 1.125rem);
–space-m: clamp(2rem, 1.9235rem + 0.2721vw, 2.25rem);
–space-l: clamp(3rem, 2.8852rem + 0.4082vw, 3.375rem);
–space-xl: clamp(4rem, 3.8469rem + 0.5442vw, 4.5rem);
–space-2xl: clamp(8rem, 7.6939rem + 1.0884vw, 9rem);
–space-3xl: clamp(16rem, 15.3878rem + 2.1769vw, 18rem);

/* One-up pairs */
–space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.3401vw, 0.5625rem);
–space-2xs-xs: clamp(0.5rem, 0.3852rem + 0.4082vw, 0.875rem);
–space-xs-s: clamp(0.75rem, 0.6352rem + 0.4082vw, 1.125rem);
–space-s-m: clamp(1rem, 0.6173rem + 1.3605vw, 2.25rem);
–space-m-l: clamp(2rem, 1.5791rem + 1.4966vw, 3.375rem);
–space-l-xl: clamp(3rem, 2.5408rem + 1.6327vw, 4.5rem);
–space-xl-2xl: clamp(4rem, 2.4694rem + 5.4422vw, 9rem);
–space-2xl-3xl: clamp(8rem, 4.9388rem + 10.8844vw, 18rem);

/* Custom pairs */
–space-s-xl: clamp(1rem, -0.0714rem + 3.8095vw, 4.5rem) /* half padding */;
–space-s-2xl: clamp(1rem, -1.449rem + 8.7075vw, 9rem) /* normal padding */;
–space-s-3xl: clamp(1rem, -4.2041rem + 18.5034vw, 18rem) /* double padding */;
–space-m-xl: clamp(2rem, 1.2347rem + 2.7211vw, 4.5rem) /* half gap */;
–space-m-2xl: clamp(2rem, -0.1429rem + 7.619vw, 9rem) /* normal gap */;
–space-l-2xl: clamp(3rem, 1.1633rem + 6.5306vw, 9rem) /* section + row padding-block */;
–space-m-s: clamp(1.125rem, 2.2679rem + -0.9524vw, 2rem) /* small space becomes bigger on mobile */;
–space-s-l: clamp(1rem, 0.273rem + 2.585vw, 3.375rem);

/* Border-radius variables; adjust if needed */
–border-radius-small: 25px;
–border-radius-large: 50px;

/* Letter spacing */
–letter-spacing: -0.04em;
}

/* Enables page transitions */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto; /* pages need to opt in to allow the view transition to run */
}
}

/* Duration for page transitions. Between parentheses: *, root, or [view-transition name]. You can’t change pages until the transition is done running. */
/* ::view-transition-group(*) {
animation-duration: 0.5s;
} */

/* Code overwrite for Impreza basic settings */
.header_hor .w-nav.type_mobile.m_layout_dropdown .w-nav-list.level_1 {
top: 100%;
left: 0;
right: 0;
padding: var(–space-s-xl) !important;
}

.header_hor .w-nav.type_mobile.m_layout_dropdown .w-nav-list.level_1 li a:not(.w-btn) {
padding-left: 0 !important;
}

.l-subheader.at_middle {
line-height: normal !important;
}

/* Use this setting for the mobile menu spacing */
@media (max-width: 1280px) {
.l-subheader-h {
position: unset !important;
/* position relative is causing an extra inline-spacing in the mobile menu */
}
}

.l-header.id_251.pos_fixed.bg_solid.shadow_thin.sticky .w-hwrapper.ush_hwrapper_1.align_none.valign_middle {
display: none;
}

/* Fonts */
/* Include if there is a custom font */

h1,
.style-h1 {
font-size: var(–step-6);
font-weight: 900;
}

h2,
.style-h2 {
font-size: var(–step-5);
font-weight: 900;
}

h3,
.style-h3 {
font-size: var(–step-3);
font-weight: 600;
}

h4,
.style-h4 {
font-size: var(–step-2);
font-weight: 400;

}

p,
main li,
.w-btn {
font-size: calc(var(–step-0) * 1.1);
}

.w-btn,
.w-btn-wrapper {
margin: 0 !important;
}

/* N.B. We can’t use padding-inline because of the Impreza basic settings */
.l-subheader {
background-color: var(–color-header-middle-bg);
padding-left: var(–space-s-xl) !important;
padding-right: var(–space-s-xl) !important;
}

.l-section {
padding-block: var(–space-l-2xl);
padding-left: var(–space-s-2xl);
padding-right: var(–space-s-2xl);
}

/* Normal gap */
.g-cols.via_grid {
grid-gap: var(–space-m-2xl);
}

/* Smaller gap: add the ‘half-gap’ class to your row */
.half-gap .g-cols.via_grid,
.half-gap.g-cols.via_grid {
grid-gap: var(–space-m-xl);
}

/* Smallest gap: add the ‘smallest-gap’ class to your row */
.smallest-gap .g-cols.via_grid,
.smallest-gap.g-cols.via_grid {
grid-gap: var(–space-m-s);
}

/* For the specific section with double inline padding */
.double-padding-section {
padding-left: var(–space-s-3xl);
padding-right: var(–space-s-3xl);
}

/* For the specific section with half inline padding */
.half-padding-section {
padding-left: var(–space-s-xl);
padding-right: var(–space-s-xl);
}

/* For the specific section with half block padding */
.half-padding-block {
padding-block: var(–space-l-xl) !important;
}

/* Séparateurs */
.w-separator.size_small:empty,
.w-separator.size_small.with_line {
height: var(–space-xs-s);
}

.w-separator.size_medium:empty {
height: var(–space-s-m);
}

.w-separator.size_large:empty {
height: var(–space-m-l)
}

.w-separator.size_huge:empty {
height: var(–space-l-xl)
}

/* Styling */

.uppercase,
.uppercase h1,
.uppercase h2,
.uppercase h3,
.uppercase p {
text-transform: uppercase;
}

.bold {
font-weight: 600;
}

.lowercase {
text-transform: none;
}

.italic {
font-style: italic;
}

.hyphens-auto {
hyphens: auto;
}

.has-border-radius {
border-radius: var(–border-radius-small);
}

/* No padding-bottom */
.no-padding-bottom {
padding-bottom: 0 !important;
}

/* Form settings */

textarea, select, input {
field-sizing: content; /* Create a content-sized input field – only in Chrome for now */
}

/* A form control that is required and empty will match :invalid even if a user has not started interacting with the page.
* However, that same form control won’t match :user-invalid until the user has changed the input and left it in an invalid state. */
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}

/* Sets max-width in ch to subphrases */
.subphrase-p p {
max-width: 100ch;
margin-inline: auto;
}

/* Bullet style */

main ul {
margin-left: 0 !important;
}

main ul li {
list-style-type: none;
padding-left: 2.5rem; /* Space reserved for bullet + gap */
text-indent: 0; /* Pull the first line back to align with bullet */
position: relative;
}

main ul li::before {
content: “—”; /* em dash or whatever bullet you prefer */
/* font-family: fontawesome; */
color: var(–color-content-primary);
position: absolute;
left: 0;
top: 0;
}

main ol {
margin-left: 1.5rem !important;
}

main ol li {
padding-left: 1rem;
text-indent: 0;
position: relative;
}

/* No bullets to UL lists */

ul.no-bullets {
list-style: none;
margin-left: 0;
}

ul.no-bullets li {
padding-left: 0;
}

ul.no-bullets li::before {
content: “”;
}

/* Horizontal wrapper for 2 or more buttons */
.wrapper-2-btns {
gap: var(–space-s);
flex-wrap: wrap;
}

/* Visually hidden */

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Gap Cookies */

.l-cookie {
gap: 0.5rem;
}

/* Browser will automatically calculate the number of words and divide them equally between two lines —
* perfect for page titles, card titles, tooltips, modals, and FAQs */
.balance {
text-wrap: balance;
}

/* When dealing with large blocks of text, such as paragraphs */
.pretty {
text-wrap: pretty;
}

/* Header */

.btn-header .w-btn-label,
header i {
font-size: var(–step-1);
}

.l-subheader-h {
display: grid;
grid-template-columns: auto auto;
gap: var(–space-l-xl);
}

.logo-header {
width: 100%;
}

header .w-nav-list.level_1 > li > a:not(.w-btn) {
padding-inline: 0 !important;
}

.header_hor .ush_menu_1.type_desktop.align-edges>.w-nav-list.level_1 {
margin: 0;
}

.l-subheader-cell.at_center>* {
margin-inline: 0 !important;
}

.header_hor .l-subheader-cell.at_right>* {
margin-left: 0 !important;
}

.w-nav.type_desktop .w-nav-list:not(.level_1) {
box-shadow: none;
}

header .w-nav-list.level_1 {
gap: var(–space-m-l);
justify-content: space-between;
}

header nav li .w-nav-list.level_2 {
padding: var(–space-s) !important;
}

header nav:not(.type_mobile) li .w-nav-list.level_2 {
border-radius: var(–border-radius-small);
display: flex !important;
flex-direction: column;
gap: var(–space-xs);
}

header .w-nav-list.level_2 .w-nav-anchor {
padding: 0 !important;
}

.w-nav.type_mobile .w-nav-list.level_2 {
padding: var(–space-xs) 0 0 0 !important;
}

.w-nav.type_mobile .w-nav-list.level_2 li:not(:last-child) {
margin-bottom: var(–space-s);
}

.w-nav.type_mobile .w-nav-anchor {
font-size: var(–step-1) !important;
}

.w-nav.type_mobile .w-nav-anchor:not(.w-btn) {
padding: 0 !important;
}

.w-nav.type_mobile .w-btn {
margin: 0 !important;
}

.w-nav-close {
top: 1rem;
}

/* Footer */

/* ===== Blocs uniques à des pages ===== */

/* ===== Blocs communs ===== */

/* Aucun résultat (grid) */

.w-grid-none.type_message {
border-radius: 1rem;
}

/* Grid Auto Fill */

.grid-auto-fill .w-grid-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)) !important;
justify-content: center;
margin: 0 !important;
grid-gap: var(–space-m);
}

/* WP FORMS: enable if needed */
/* div.wpforms-container-full:not(:empty) {
margin: unset !important;
}

.wpforms-field-label {
color: var(–color-content-text) !important;
text-transform: uppercase !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 27px !important;
margin-bottom: 3px !important;
}

input, textarea {
font-weight: 400 !important;
letter-spacing: 0em !important;
border-radius: 1.5rem !important;
border-color: var(–color-content-text) !important;
color: var(–color-content-text) !important;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset !important;
}

div.wpforms-container-full input[type=checkbox] {
border: 1px solid var(–color-content-text) !important;
}

div.wpforms-container-full input[type=radio] {
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5) !important;
}

div.wpforms-container-full button[type=submit] {
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
border-radius: 25px !important;
padding: 0.7em 1.7em !important;
background-color: var(–color-content-primary) !important;
border-color: transparent !important;
color: var(–color-content-bg) !important;
}

.no-touch button[type=submit]:not(.w-btn):hover,
div.wpforms-container-full button[type=submit]:hover {
background: var(–color-content-text) !important;
} */

/* Media Queries */

@media (max-width: 1200px) {
/* Columns stack when the screen reaches 1200px */
.row-responsive-1200.g-cols.via_grid,
.row-responsive-1200 .g-cols.via_grid {
grid-template-columns: 1fr !important;
}

.row-responsive-1200 .image-ratio-mobile .w-image-h div {
padding-bottom: 66.667% !important;
}
}

@media (min-width: 1025px) {
/* No padding bottom on desktop */
.no-padding-bottom-desktop {
padding-bottom: 0 !important;
}
}

@media (max-width: 1024px) {

:root {
–border-radius-large: 30px;
}

/* Image Ratio mobile */
.image-ratio-mobile .w-image-h div {
padding-bottom: 66.667% !important;
}

/* Columns stack when the screen reaches 1024px */
.row-responsive-1024.g-cols.via_grid,
.row-responsive-1024 .g-cols.via_grid {
grid-template-columns: 1fr !important;
}

/* Aligns text to the left on mobile */
.text-aligned-left h2,
.text-aligned-left h3,
.text-aligned-left p,
.text-aligned-left .w-btn-wrapper {
text-align: left !important;
}

/* Reverse order of columns when stacked; adjust the value if needed */
.reverse-col-order-mobile {
order: -1;
}

/* Centers Submit button on mobile */

div.wpforms-container-full button[type=submit] {
float: unset !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
}

}

@media (max-width: 600px) {
/* Cookies wrapper wraps on 2 lines on mobile */
.l-cookie {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}

[/css]

Cheat sheet: classes CSS dans Impreza

* Cette Cheat Sheet se trouve aussi dans la documentation Momentum

Classes générales

• Moitié de grid-gap: .half-gap à appliquer sur la rangée qui est display: grid
• Petit grid-gap (plus petit que la moitié): .smallest-gap à appliquer sur la rangée qui est display: grid
• Padding qui équivaut à deux colonnes sur les côtés: .double-padding-section à appliquer sur la rangée
• Padding qui équivaut à une demi-colonne sur les côtés: .half-padding-section à appliquer sur la rangée
• Padding qui équivaut à un demi-padding top et bottom: .half-padding-block à appliquer sur la rangée
• Styling: Majuscule, minuscule, italique, hyphens (tiret pour titres trop longs): .uppercase, .lowercase, .italic, .hyphens-auto à appliquer sur le bloc de texte (s’assurer de sélectionner le bon élément, ex: le p dans le bloc de texte => .uppercase p)
• Donner un border-radius à un élément: .has-border-radius sur l’élément en question
• Pas de padding bottom à une rangée: .no-padding-bottom à appliquer sur la rangée
• Donner une largeur limite à un paragraphe selon le nombre de caractères (à la place de faire des line breaks pour rapetisser la largeur): .subphrase-p
• Ne pas mettre de bullets à une liste à puces: .no-bullets à appliquer directement sur le <ul>
• Wrapper qui donne un espace entre deux boutons ou plus et les fait passer sur plusieurs lignes sur petits écrans: .wrapper-2-btns à appliquer au wrapper (ne pas oublier d’enlever l’espacement en rem directement dans le bloc du wrapper)
• Cacher visuellement un élément, mais le laisser dans la structure HTML: .visually-hidden
• Faire wrapper les longs titres de façon plus belle: .balance à appliquer au bon élément (ex: .balance h1)
• Faire wrapper les paragraphes de façon plus belle: .pretty à appliquer au bon élément (ex: .pretty p)
• Grid qui place les éléments tout seuls et de façon responsive: .grid-auto-fill à appliquer sur le bloc “Grid”

Media queries

max-width: 1200px

• Rendre la grille sur une colonne en bas de 1200px: .row-responsive-1200 à la rangée
• Ajuster le ratio d’une image sur mobile: .image-ratio-mobile à appliquer le bloc d’image

min-width: 1025px

• Pas de padding bottom à la rangée sur desktop, mais oui sur mobile: .no-padding-bottom-desktop à appliquer à la rangée

max-width: 1024px

• Rendre la grille sur une colonne en bas de 1024px: .row-responsive-1024 à la rangée
• Ajuster le ratio d’une image sur mobile: .image-ratio-mobile à appliquer le bloc d’image
• Aligner les titres, le texte et les boutons à gauche en bas de 1024px: text-aligned-left à appliquer sur le bloc de l’élément en question
•  Remonter une colonne sur mobile pour qu’elle soit avant une autre: .reverse-col-order-mobile à appliquer à la colonne que l’on veut remonter

Entête

Modèles de page

Bloc Réutilisable

Grille

Image du thème, Icône du menu du thème (WordPress), Image du site (Yoast), Favicon