La mise en page de la grille CSS vs CSS Frameworks Debate –

Avec des standards CSS de pointe comme CSS Grid Layout et Flexbox le codage d'une mise en page web n'est plus un problème. Si vous ajoutez à cela que le support du navigateur pour Grid et Flexbox est également très bon, la question est inévitable: pourquoi envisager d'apprendre et d'utiliser des frameworks CSS dans mon développement

Dans cet article, je vais me concentrer sur Bootstrap car il s'agit sans doute de l'une des bibliothèques CSS UI les plus populaires sur le marché.

Il y a plusieurs raisons pour lesquelles il est toujours logique d'apprendre et d'utiliser Bootstrap aujourd'hui.

Voici quelques exemples pour vous.

Qu'est-ce que CSS Grid?

Rachel Andrew, conférencière et écrivaine renommée tout ce qui concerne CSS Grid, le définit comme suit :

Grid est un système de grille. Il vous permet de définir des colonnes et des lignes dans votre CSS, sans avoir besoin de les définir dans le balisage. Vous n'avez pas besoin d'un outil qui vous aide à faire croire que vous avez une grille, vous avez en fait une grille!

L'implémentation de cette norme CSS donne aux développeurs la possibilité de construire des mises en page avec du code CSS natif, avec aucune dépendance à partir du balisage HTML, à l'exception de la présence d'un élément wrapper qui fonctionne comme une grille contenant. Imaginez la flexibilité et le potentiel de créativité dans la conception web!

Par exemple, vous n'avez pas besoin de classes personnalisées ou de lignes supplémentaires dans votre balisage pour créer cette mise en page simple:

Voici le code HTML:

  
 Contenu de l'en-tête 
  
 Contenu principal 
  
  

Comme pour le CSS, c'est ici que vous allez construire votre visuel . Tout ce qu'il faut dans ce cas simple est quelques lignes de code:

 .grid {
  affichage: grille;
  grid-template-columns: répète (12, 1fr);
  grille-template-rows: 50px 150px 50px;
}

en-tête, pied de page {
  grille-colonne: envergure 12;
}

principale {
  grille-colonne: travée 8;
}

de côté {
  grille-colonne: span 4;
} 

Voilà, vous avez terminé!

Qu'est-ce que Bootstrap?

Au moment d'écrire ces lignes, 3.6% de l'Internet entier utilise Bootstrap:

On le site Web Bootstrap, vous trouverez cette définition:

Bootstrap est une boîte à outils open-source pour le développement avec HTML, CSS et JS. Protégez rapidement vos idées ou créez votre application entière avec nos variables et mixins Sass, un système de grille réactif, de vastes composants prédéfinis et de puissants plugins construits sur jQuery.

En d'autres termes, Bootstrap vous offre des composants prêts à l'emploi

Il suffit d'écrire le balisage approprié, et votre application est superbe dès sa sortie de l'emballage.

Bootstrap vous permet également de personnaliser très simplement son apparence et son toucher. et choisissez les bits dont vous avez besoin pour votre projet

Pourquoi Bootstrap quand nous avons la grille?

La plus grande plainte au sujet de Bootstrap a toujours été le bourrage de code. Le raisonnement était qu'il comprenait beaucoup de code CSS supplémentaire qui est resté inutilisé dans vos projets. La deuxième plus grande plainte était que les composants Bootstrap étaient stylés dans les moindres détails et cela pouvait poser des problèmes quand il s'agissait de surcharger certaines règles CSS.

A partir de la dernière version de cette bibliothèque frontale populaire, les deux critiques : Bootstrap est totalement modulaire, vous n'avez donc qu'à inclure ce dont vous avez besoin. De plus, les fichiers Sass sont structurés de manière à personnaliser les styles originaux selon vos besoins.

Aujourd'hui, la principale raison de ne pas utiliser Bootstrap est le fait qu'avec CSS Grid , CSS possède son propre système de grille, qui n'a aucune dépendance externe, et qui, une fois appris, permet aux développeurs de construire toutes sortes de mises en page avec une relative facilité.

Bien que je sois un CSS Grid fan, je pense que Bootstrap a encore sa place dans le développement frontal et aura encore un peu de chemin à parcourir

Voici trois raisons pour lesquelles Bootstrap est plus que son système de grille

C'est vrai, la principale raison d'utiliser Bootstrap est le système de grille pratique, qui facilite la création de pages Web réactives. Cependant, Bootstrap possède de superbes composants comme le nouveau composant de carte polyvalent que vous pouvez utiliser pour afficher tout type de contenu, tel que du texte, des images et des vidéos, et la responsive navbar ce qui fonctionne hors de la boîte. Vous pouvez également choisir un schéma de couleurs prêt à l'emploi de votre goût pour la plupart des composants.

Et qu'en est-il de la fonctionnalité d'un bon nombre de ces composants? Avec Bootstrap, ajouter des infobulles dynamiques carrousels ou des boutons déroulants est juste une question d'écriture du balisage approprié. Si JavaScript n'est pas votre fort, vous pouvez toujours profiter de ces composants sans écrire une ligne de JavaScript.

Aussi, si vous n'êtes pas un assistant CSS, vous pouvez toujours tirer parti de la puissance de Bootstrap dans votre conception web pendant que vous Apprenez les ficelles du métier

Bootstrap est un excellent outil de prototypage

Parfois vous avez juste besoin d'un prototype fonctionnel pour un client. Bootstrap vous permet de le faire en un rien de temps et avec très peu ou pas de code personnalisé. Cela vaut non seulement pour le système de la grille, mais aussi pour tous les composants prêts à l'emploi qu'il a à offrir.

Ajoutez simplement un peu de balisage et votre prototype sera doté d'une barre de navigation élégante ou d'un élégant boîtier d'alerte. 19659040] Travailler sur des sites Web plus anciens construits avec Bootstrap

Une tâche commune pour les développeurs est de travailler sur des sites Web existants codés par d'autres développeurs. On ne peut nier le fait qu'un grand nombre de sites Web comptent sur Bootstrap pour leur interface. Savoir comment travailler avec le framework sera très utile si c'est à vous de refactoriser et maintenir le code de base. Ce n'est pas un hasard si beaucoup d'offres d'emploi ont Bootstrap dans leur liste de compétences désirées.

Conclusion

En conclusion, Bootstrap ne partira pas bientôt. La dernière version apporte d'énormes améliorations par rapport aux versions précédentes, grâce à l'utilisation intelligente des mixins et cartes Sass pour une personnalisation facile à l'introduction de nouveaux composants, classes d'utilitaires et une architecture de plus en plus modulaire.

la facilité d'utilisation, et Bootstrap est toujours un puissant concurrent dans l'écosystème frontal.

Qu'en pensez-vous? Est-ce que votre prochain projet va être construit avec Bootstrap ou CSS Grid?

Si vous avez entendu parler de Bootstrap mais que vous avez retardé l'apprentissage parce qu'il semble trop compliqué, alors jouez notre Introduction à Bootstrap 4 cours pour une introduction rapide et amusante à la puissance de Bootstrap

Maria Antonietta Perna est co-éditrice du canal HTML / CSS de SitePoint et d'un développeur Web front-end. Elle aime bricoler avec les standards CSS et est curieuse d'enseigner des approches pour le code frontal. Lorsqu'elle ne code pas pour le Web ou qu'elle n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.