Temps de lecture : 19 minutes environ.
Série : Symfony 7
Fichiers : https://github.com/NouvelleTechno/OpenBlog
Dans ce tutoriel, nous allons continuer à travailler sur le projet OpenBlog, en nous concentrant sur la finalisation de la page d'accueil. Nous allons aborder des aspects avancés du SCSS en utilisant des boucles, des variables, et une gestion plus intelligente des composants réutilisables dans la conception de la page. Vous verrez également comment gérer le responsive design de manière fluide, en utilisant une approche mobile-first.
Ce tutoriel repose sur la base de code OpenBlog.
Objectifs du tutoriel
- Finaliser la mise en page de la page d’accueil, en particulier l’en-tête et la grille des articles.
- Utiliser des variables SCSS et des boucles pour améliorer la gestion des marges et des espacements.
- Créer des composants réutilisables (badges, cartes) pour une meilleure organisation du CSS.
- Appliquer une approche responsive avec des media queries et des breakpoints.
Mise à jour du fichier index.html.twig
Nous allons commencer par adapter le fichier HTML de la page d’accueil en y ajoutant des éléments comme des cartes d’articles, un header, et des badges. Voici à quoi ressemble la structure :
{% extends 'base.html.twig' %}
{% block title %}Accueil{% endblock %}
{% block body %}
<header class="hero">
<img src="{{ asset('uploads/articles/') ~ lastPost.featuredImage }}" alt="{{ lastPost.title }}">
<div class="hero-content">
{% for category in lastPost.categories %}
<span class="badge badge-primary badge-lg">{{ category.name }}</span>
{% endfor %}
<h2>{{ lastPost.title }}</h2>
<div class="post-content">{{ lastPost.content }}</div>
<p>{{ lastPost.users.nickname }}</p>
</div>
</header>
<div class="clear"></div>
<main class="container">
<section>
<h2 class="text-center my-5">Derniers articles</h2>
<div class="grid">
{% for post in posts %}
<article class="card">
<img src="{{ asset('uploads/articles/mini/300x300-') ~ post.featuredImage }}" alt="{{ post.title }}">
<div class="card-body">
{% for category in post.categories %}
<span class="badge badge-primary">{{ category.name }}</span>
{% endfor %}
<h3>{{ post.title }}</h3>
<p>{{ post.users.nickname }}</p>
</div>
</article>
{% endfor %}
</div>
</section>
<section>
<h2>Auteurs actifs</h2>
{% for author in authors %}
<h3>{{ author[0].nickname }} {{author.total}}</h3>
{% endfor %}
</section>
</main>
{% endblock %}Gestion des espacements avec SCSS
Dans cette section, nous allons créer un système d’espacement basé sur des variables SCSS pour gérer les marges et paddings.
Création des variables
Commençons par créer un fichier _variables.scss dans lequel nous allons définir des variables pour les espacements et les couleurs.
$primary: #657ae7;
$sizes: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 1rem,
4: 1.5rem,
5: 3rem
)Création des classes d'espacement
Ensuite, nous allons créer un fichier _spacing.scss pour générer dynamiquement les classes de marge et de padding à l’aide d’une boucle SCSS.
/*
* Margins
*/
@each $key, $value in $sizes{
// .m-0, .m-1...
.m-#{$key} {
margin: #{$value};
}
.mt-#{$key} {
margin-top: #{$value};
}
.mb-#{$key} {
margin-bottom: #{$value};
}
.ml-#{$key} {
margin-left: #{$value};
}
.mr-#{$key} {
margin-right: #{$value};
}
.my-#{$key} {
margin-top: #{$value};
margin-bottom: #{$value};
}
.mx-#{$key} {
margin-left: #{$value};
margin-right: #{$value};
}
}
/*
* Paddings
*/
@each $key, $value in $sizes{
// .m-0, .m-1...
.p-#{$key} {
padding: #{$value};
}
.pt-#{$key} {
padding-top: #{$value};
}
.pb-#{$key} {
padding-bottom: #{$value};
}
.pl-#{$key} {
padding-left: #{$value};
}
.pr-#{$key} {
padding-right: #{$value};
}
.py-#{$key} {
padding-top: #{$value};
padding-bottom: #{$value};
}
.px-#{$key} {
padding-left: #{$value};
padding-right: #{$value};
}
}En important ce fichier dans notre fichier principal app.scss, nous obtenons automatiquement des classes comme .m-3, .p-2, .mt-4, etc., pour appliquer les marges et paddings de manière efficace.
@import 'spacing';Création des composants réutilisables
Les badges
Les badges sont des petits éléments visuels utilisés pour mettre en avant des informations. Nous allons les créer dans un fichier _badge.scss.
.badge{
&.badge-primary{
background-color: $primary;
color: #fff;
border-radius: 5px;
font-size: 0.8rem;
padding: 4px;
font-weight: 700;
}
&.badge-lg{
font-size: 1rem;
padding: 5px;
}
}Les cartes d’articles
Les cartes affichent chaque article dans une boîte avec une image, un titre et un extrait. Nous les définissons dans _card.scss.
.card{
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
img{
width: 100%;
}
.card-body{
padding: 15px;
}
}
@media screen and (min-width: 768px){
.card{
border-radius: 15px;
overflow: hidden;
}
}Ces cartes s’adaptent automatiquement à leur conteneur grâce à l’utilisation de flexbox ou de grid.
Gestion du design responsive
Nous utilisons une approche mobile-first, où les styles de base sont conçus pour les petits écrans, et des media queries sont ajoutées pour les écrans plus grands.
Le système de grille
Nous créons un fichier _grid.scss pour gérer la disposition des articles en grille.
.grid {
display: grid;
gap: 30px;
}
@media screen and (min-width: 768px) {
.grid{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 992px) {
.grid{
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1200px) {
.grid{
grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (min-width: 1500px) {
.grid{
grid-template-columns: repeat(6, 1fr);
}
}Cette grille s'adapte aux différentes résolutions d’écran, passant d'une colonne en mobile à plusieurs colonnes sur desktop.
Les media queries pour l’en-tête
Le fichier _hero.scss contient les styles spécifiques à l’en-tête de la page d’accueil.
header{
position: relative;
margin-top: 0;
margin-bottom: 60px;
img{
width: 100%;
}
.hero-content{
position: absolute;
left: 25px;
right: 25px;
bottom: -50px;
background-color: #fff;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
padding: 15px;
.post-content{
display: none;
}
}
}
@media screen and (min-width: 768px) {
header{
max-width: 700px;
margin: 1rem auto 60px;
margin-top: 1rem;
img{
border-radius: 15px;
}
.hero-content{
left: 80px;
right: 50%;
border-radius: 15px;
}
}
}
@media screen and (min-width: 992px) {
header{
max-width: 900px;
.hero-content{
.post-content{
display: initial;
}
}
}
}
@media screen and (min-width: 1200px) {
header{
max-width: 1100px;
}
}
@media screen and (min-width: 1500px) {
header{
max-width: 1400px;
}
}
@media screen and (min-width: 1900px) {
header{
max-width: 1700px;
}
}Résultat final
Le résultat final est une page d’accueil moderne et responsive, où :
- Les badges s’adaptent aux différentes résolutions.
- Les cartes d’articles sont disposées en grille, avec des colonnes qui changent en fonction de la taille de l’écran.
- L’en-tête (hero) change également de forme pour s'adapter aux écrans de petite ou grande taille.
Conclusion
Grâce à ce tutoriel, vous avez appris à utiliser des outils avancés de SCSS pour gérer les espacements, les composants réutilisables comme les badges et les cartes, ainsi que le responsive design. Ce système vous permet de créer une page d'accueil flexible et maintenable, qui s’adapte à différents types d’appareils, tout en restant propre et optimisée.
N’hésitez pas à explorer et à adapter ces concepts pour d’autres parties de votre projet OpenBlog.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
