Bootstrap vs Pure CSS Grid : un guide de comparaison

Hé les gens extraordinaires, bienvenue sur mon blog ! ?

Introduction

Explorons en profondeur quand et pourquoi vous pourriez choisir Bootstrap ou une grille CSS pure. Cet article vous guidera à travers les nuances, fournira des aides visuelles et proposera des exemples pratiques pour vous aider à prendre des décisions éclairées pour vos projets Web.

Qu'allez-vous apprendre dans cet article ?

• Bases de Bootstrap : son système de grille, sa personnalisation et son utilisation dans le monde réel.

• Pure CSS Grid : Comment ça marche, ses dernières fonctionnalités et ses avantages.

• Comparaison visuelle : Exemples de mise en page pour expliquer visuellement les concepts.

• Applications du monde réel : études de cas et scénarios.

• Éléments interactifs : exemples de code pour une expérience pratique.

• Outils et ressources : où en savoir plus et obtenir de l'aide.

Pourquoi choisir Bootstrap ? ?

• Vitesse : Avec des classes prêtes à l'emploi, vous pouvez créer rapidement des mises en page réactives.

• Cohérence : Maintient une conception uniforme à travers différents projets.

• Communauté et écosystème : documentation complète, didacticiels et extensions tierces.

Système de grille Bootstrap

La grille de Bootstrap est basée sur une disposition de 12 colonnes avec des points d'arrêt réactifs :

html

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Personnalisation

TL-DR : Bootstrap peut être personnalisé via des variables SCSS ou en utilisant l'outil bootstrap-customize. Voici comment modifier la grille par défaut :

$grid-columns: 16;
$grid-gutter-width: 30px;

Si vous connaissez déjà la personnalisation, ignorez la partie suivante et passez au cas d'utilisation réel : modèle de commerce électronique.

Détails de personnalisation :

Bootstrap propose diverses façons de personnaliser l'apparence et le comportement de votre site Web :

Variables SCSS

Bootstrap est construit avec SCSS, ce qui permet une personnalisation étendue via des variables :

• Couleurs : modifiez la palette de couleurs primaires, les boutons et les couleurs d'arrière-plan.

• Typographie : ajustez la taille, les familles et les épaisseurs de police.

• Espacements : modifiez l'échelle d'espacement par défaut ou la largeur de la gouttière de la grille.

Exemple :

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Outil de personnalisation Bootstrap

Pour ceux qui ne sont pas à l'aise avec SCSS ou pour une personnalisation rapide :

• Visitez le Bootstrap Customizer où vous pouvez modifier les variables, sélectionner les composants à inclure ou à exclure, et télécharger une version personnalisée de Bootstrap.

Conseils pour une personnalisation efficace

• Commencer avec des variables : Si vous débutez, la modification des variables est le moyen le plus simple de personnaliser sans approfondir le framework.

• Utilisez le personnalisateur pour les prototypes rapides : C'est idéal pour tester différents looks sans modifier les fichiers SCSS.

• Créer une version personnalisée : si vous travaillez sur un projet avec des exigences spécifiques, la création d'une version personnalisée de Bootstrap peut réduire la taille du fichier en supprimant les composants inutilisés.

• Fichiers partiels Sass : Bootstrap utilise des fichiers partiels pour chaque composant. Vous pouvez les remplacer en créant vos propres partiels portant le même nom dans votre projet.

En fournissant ces détails supplémentaires, les lecteurs obtiennent une image plus claire du processus de personnalisation, depuis de simples modifications de variables jusqu'à la création d'une version plus personnalisée de Bootstrap.

Cas d'utilisation réel : modèle de commerce électronique ?

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Veuillez vérifier ici sur Codepen où j'ai l'exemple complet.

Le HTML (dans l'exemple Codepen ci-dessus) utilise les classes Bootstrap pour créer une mise en page avec :

• Une barre de navigation supérieure fixe.
• Un système de grille dans la zone de contenu principale pour la diviser en une liste de produits à 8 colonnes et une barre latérale à 4 colonnes pour le panier.
• CSS personnalisé pour un style supplémentaire comme les bordures, le remplissage et les couleurs d'arrière-plan pour améliorer l'apparence des produits et du panier.

Les styles personnalisés fournissent un style de base, mais les styles par défaut de Bootstrap font le gros du travail en termes de conception réactive et de style des composants. N'oubliez pas que Bootstrap est conçu pour être hautement personnalisable, vous pouvez donc facilement modifier ces styles ou utiliser SCSS pour modifier les variables pour un look plus personnalisé.

Pourquoi choisir du CSS pur ? ?

• Contrôle : Liberté de conception totale sans contraintes de cadre.

• Performances : fichiers de plus petite taille et pas de dépendances externes.

• Fonctionnalités modernes : utilisez les dernières fonctionnalités CSS telles que les requêtes de sous-grille et de conteneur.

Configuration de la grille CSS : La grille CSS permet des mises en page complexes avec un balisage minimal :

$grid-columns: 16;
$grid-gutter-width: 30px;

Visuel :

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Dernières fonctionnalités CSS

• Sous-grille : TLDR Pour aligner des grilles imbriquées dans une grille parent.

• Requêtes de conteneur : TLDR Pour les composants qui répondent à leur propre taille plutôt qu'à la fenêtre d'affichage.

Sous-grille

Imaginez que vous ayez une grande grille dans laquelle vous avez placé des cases (comme un cadre photo sur un mur). Maintenant, vous voulez placer des boîtes plus petites à l'intérieur d'une de ces grandes boîtes, mais vous voulez que ces petites boîtes s'alignent parfaitement avec les lignes de la grande grille.

La sous-grille, c'est comme avoir un papier quadrillé transparent à l'intérieur de votre grande boîte qui correspond au motif de la grande grille murale. De cette façon, lorsque vous placez vos petites boîtes, elles peuvent s'aligner non seulement à l'intérieur de la grande boîte mais également par rapport à l'ensemble du mur.

Exemple :

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Concept visuel :

$grid-columns: 16;
$grid-gutter-width: 30px;

Requêtes de conteneurs

Pensez aux requêtes de conteneur, comme donner à chaque boîte de votre mur la possibilité de décider à quoi elle doit ressembler en fonction de sa propre taille, et pas seulement de la taille du mur (fenêtre).

Habituellement, lorsque vous rendez un site Web réactif, vous lui dites de changer en fonction de la largeur totale de l'écran. Mais que se passe-t-il si une partie de votre page, comme une barre latérale, devient plus large ou plus étroite ? Avec les requêtes de conteneur , cette barre latérale peut ajuster son propre contenu sans affecter le reste de la page.

Exemple :

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Concept visuel :

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+--------+--------+
|Product |Cart    |
|List    |Sidebar |
+--------+--------+

Cela signifie que chaque composant peut s'adapter indépendamment, rendant votre conception plus modulaire et flexible.

Étude de cas : Blog personnel ?

Bootstrap pourrait être choisi pour :

• Configuration rapide : Si vous souhaitez utiliser un modèle ou un kit de démarrage pour lancer rapidement.

Une

Grille CSS pure serait préférable pour :

• Conception personnalisée : Si vous souhaitez une mise en page unique qui ne correspond pas aux valeurs par défaut de Bootstrap.

Exemple sur Codepen :

(Veuillez consulter le lien ci-dessous et obtenir le code.)

Le code de l'exemple Codepen configure une présentation de blog de base avec un en-tête, une barre de navigation, une zone de contenu principale, une barre latérale pour les articles récents et un pied de page. Il utilise CSS Grid pour la mise en page et inclut une requête multimédia pour la réactivité.

Quand choisir chaque approche

• Bootstrap : Parfait pour les projets nécessitant un déploiement rapide, où la cohérence de la conception entre les différentes parties du site est essentielle, ou lorsque vous travaillez dans une équipe familière avec Bootstrap.

• Pure CSS : choisissez cette option lorsque vous recherchez un contrôle total sur votre conception, souhaitez réduire les dépendances ou lorsque vous êtes prêt à tirer parti des fonctionnalités avancées du CSS moderne.

Outils et ressources ?

Bootstrap

• Documentation Bootstrap

• Personnalisateur Bootstrap

• Thèmes Bootstrap

Grille CSS pure

• Documents Web MDN pour grille CSS

• Guide de grille CSS par CSS-Tricks

• Grille par exemple

Conclusion

Choisir entre Bootstrap et CSS Grid pur ne dépend pas de celui qui est le meilleur mais de ce qui correspond aux besoins de votre projet et à votre niveau de compétence. Bootstrap propose une approche structurée idéale pour les débutants ou pour les projets nécessitant un développement rapide. Pure CSS Grid fournit la toile de fond à ceux qui souhaitent peindre leurs mises en page avec précision et créativité.

Au fur et à mesure que vous progressez dans votre parcours de développement Web, vous constaterez que parfois le meilleur choix consiste à mélanger les deux ou à passer de l'un à l'autre en fonction des exigences du projet.

Continuez à explorer, continuez à apprendre, continuez à coder ! ?

---

? Bonjour, je m'appelle Eleftheria, Community Manager, développeur, conférencière et créatrice de contenu.

? Si vous avez aimé cet article, pensez à le partager.

? Tous les liens | X | LinkedIn