Logo - laConsole

Formation Créer son Framework CSS | le Style de Base

Le CSS de base permet de définir une base neutre, sans les styles implicites que chaque navigateur applique par défaut.

Icône de calendrier MAJ en
Débutant
6 chapitres

Reset

A quoi ca sert ?

Un reset CSS permet de neutraliser les styles par défaut des navigateurs pour s’assurer que votre site web s’affiche de manière cohérente quel que soit le navigateur utilisé.

Il permet de partir d’une base neutre, sans les styles implicites que chaque navigateur applique par défaut (margin, padding…).

Custom reset ou reset prédéfini ?

Il existe de nombreux resets CSS disponibles en ligne et de nombreux frameworks les exploitent déjà. Cependant, dans le cadre de cette formation, nous allons en créer un rudimentaire, pour illustrer la démarche à des fins pédagogiques.

css/base/_reset.css
copié ! 
:root {
	--background-color: var(--light-2);
	--text-color: var(--dark-2);
}

::selection {
	background-color: var(--primary);
	color: var(--primary-contrast);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--typography-main), sans-serif;
	transition: all var(--transition-type) var(--transition-duration);
	appearance: none;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: var(--base-unit);
}

Ce code déclare 2 variables de sorte à appliquer la couleur sombre du design system pour le texte et de la couleur claire pour le background.

Le sélecteur *, *::before et *::after permet :

  • D’appliquer box-sizing: border-box afin d’inclure la bordure et le padding dans la largeur et la hauteur totales des éléments HTML
  • De supprimer les marges et les paddings par défaut
  • De définir la police de base du design system pour l’ensemble des éléments
  • D’ajouter une transition pour les animations et désactiver l’apparence par défaut des éléments.

On en profite pour définir sur la balise <body> une font-size de référence selon l’unité de base définie dans notre design system.

::selection permet d’accorder avec la couleur principale la sélection des éléments au pointeur et scroll-behavior: smooth; permet d’animer le défilement de manière fluide vers une ancre de la page, au lieu de le rendre instantané.

Typographie

L’importance du texte

Sur une page web, les textes sont les vecteurs principaux de transmission d’information.

Bien qu’ils puissent être accompagnés de médias (images, vidéos, etc.), les textes sont omniprésents sur l’interface et jouent un rôle primordial.

Leur apparence, comme le style de la typographie, la taille et la couleur, véhicule également un message.

  • Un mot en couleur indique souvent une importance / un lien hypertexte
  • Un texte plus grand/gras indique une importance accrue
  • Le type de typographie reflète l’identité graphique du site.
  • Etc.

En plus de leur esthétique, les textes bien stylisés contribuent à hiérarchiser l’information et améliorer l’expérience utilisateur.

Quels textes cibler ?

Dans le cas de notre micro framework, nous allons cibler les textes principaux, à savoir les paragraphes (<p>), les titres (<h*>) et les liens (<a>) hypertextes.

Paragraphes

css/base/_typography.css
copié ! 
:root {
	--p-size: var(--base-unit);
	--p-line-height: calc(var(--p-size) * var(--ratio-line-height));
	--p-weight: 500;
}

p {
	font-size: var(--p-size);
	line-height: var(--p-line-height);
	font-weight: var(--p-weight);
}

Titres

La typographie utilisée par les titres est celle définie dans la variable --typography-headlines ou --typography-main en cas de non définition.

Les titres auront une graisse, taille et hauteur de ligne relative à l’unité de basse --base-unit.

Ces valeurs sont stockées dans des variables.

css/base/_typography.css
copié ! 
:root {
	/* ... */
	--h1-size: calc(var(--base-unit) * 3);
	--h1-line-height: calc(var(--h1-size) * var(--ratio-line-height));
	--h1-weight: 900;
	--h2-size: calc(var(--base-unit) * 2.25);
	--h2-line-height: calc(var(--h2-size) * var(--ratio-line-height));
	--h2-weight: 700;
	--h3-size: calc(var(--base-unit) * 1.625);
	--h3-line-height: calc(var(--h3-size) * var(--ratio-line-height));
	--h3-weight: 600;
	--h4-size: calc(var(--base-unit) * 1.5);
	--h4-line-height: calc(var(--h4-size) * var(--ratio-line-height));
	--h4-weight: 600;
	--h5-size: calc(var(--base-unit) * 1.375);
	--h5-line-height: calc(var(--h5-size) * var(--ratio-line-height));
	--h5-weight: 500;
	--h6-size: calc(var(--base-unit) * 1.25);
	--h6-line-height: calc(var(--h6-size) * var(--ratio-line-height));
	--h6-weight: 500;
}

/* ... */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--typography-headlines), var(--typography-main), sans-serif;
}

h1 {
	font-size: var(--h1-size);
	line-height: var(--h1-line-height);
	font-weight: var(--h1-weight);
}

h2 {
	font-size: var(--h2-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-weight);
}

h3 {
	font-size: var(--h3-size);
	line-height: var(--h3-line-height);
	font-weight: var(--h3-weight);
}

h4 {
	font-size: var(--h4-size);
	line-height: var(--h4-line-height);
	font-weight: var(--h4-weight);
}

h5 {
	font-size: var(--h5-size);
	line-height: var(--h5-line-height);
	font-weight: var(--h5-weight);
}

h6 {
	font-size: var(--h6-size);
	line-height: var(--h6-line-height);
	font-weight: var(--h6-weight);
}

Liens

Les liens prendront la couleur principale du design system et ne seront pas soulignés.

css/base/_typography.css
copié ! 
:root {
	/* ... */
	--link-color: var(--primary);
}

/* ... */

a {
	color: var(--link-color);
	text-decoration: none;
}

Code complet

Voici le code complet des fichiers 📄 _reset.css et 📄 _typography.css ainsi que du fichier global 📄 all.css :

css/base/_reset.css
copié ! 
:root {
	--background-color: var(--light-2);
	--text-color: var(--dark-2);
}

::selection {
	background-color: var(--primary);
	color: var(--primary-contrast);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--typography-main), sans-serif;
	transition: all var(--transition-type) var(--transition-duration);
	appearance: none;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: var(--base-unit);
}
css/base/_typography.css
copié ! 
:root {
	--link-color: var(--primary);
	--p-size: var(--base-unit);
	--p-line-height: calc(var(--p-size) * var(--ratio-line-height));
	--p-weight: 500;
	--h1-size: calc(var(--base-unit) * 3);
	--h1-line-height: calc(var(--h1-size) * var(--ratio-line-height));
	--h1-weight: 900;
	--h2-size: calc(var(--base-unit) * 2.25);
	--h2-line-height: calc(var(--h2-size) * var(--ratio-line-height));
	--h2-weight: 700;
	--h3-size: calc(var(--base-unit) * 1.625);
	--h3-line-height: calc(var(--h3-size) * var(--ratio-line-height));
	--h3-weight: 600;
	--h4-size: calc(var(--base-unit) * 1.5);
	--h4-line-height: calc(var(--h4-size) * var(--ratio-line-height));
	--h4-weight: 600;
	--h5-size: calc(var(--base-unit) * 1.375);
	--h5-line-height: calc(var(--h5-size) * var(--ratio-line-height));
	--h5-weight: 500;
	--h6-size: calc(var(--base-unit) * 1.25);
	--h6-line-height: calc(var(--h6-size) * var(--ratio-line-height));
	--h6-weight: 500;
}

p {
	font-size: var(--p-size);
	line-height: var(--p-line-height);
	font-weight: var(--p-weight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--typography-headlines), sans-serif;
}

h1 {
	font-size: var(--h1-size);
	line-height: var(--h1-line-height);
	font-weight: var(--h1-weight);
}

h2 {
	font-size: var(--h2-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-weight);
}

h3 {
	font-size: var(--h3-size);
	line-height: var(--h3-line-height);
	font-weight: var(--h3-weight);
}

h4 {
	font-size: var(--h4-size);
	line-height: var(--h4-line-height);
	font-weight: var(--h4-weight);
}

h5 {
	font-size: var(--h5-size);
	line-height: var(--h5-line-height);
	font-weight: var(--h5-weight);
}

h6 {
	font-size: var(--h6-size);
	line-height: var(--h6-line-height);
	font-weight: var(--h6-weight);
}

a {
	color: var(--link-color);
	text-decoration: none;
}
css/base/all.css
copié ! 
@import '_reset.css';
@import '_typography.css';

Le style de base du framework est importé dans 📄 app.css :

css/app.css
copié ! 
@import 'config.css';
@import 'base/all.css';
@import 'layout/all.css';
@import 'components/all.css';
@import 'utilities/all.css';