Les meilleurs frameworks CSS open source

Bien que la plupart des sites Web fonctionnent sous un gestionnaire de contenu, il y a beaucoup à dire en faveur de la création d'un portail à partir de zéro. Et, de toute façon, les gestionnaires de contenu ont également besoin de quelqu'un pour prendre soin de leur apparence visuelle. Dans ce post nous allons passer en revue certains des meilleurs outils pour créer des feuilles de style CSS.

Commençons par le début. Qu'est-ce que CSS?

À quoi ressemblerait la maison de vos rêves? Aurait-il un ou deux étages? Aimeriez-vous les chambres du rez-de-chaussée et la cuisine à l'étage? Pourquoi ne pas mettre la baignoire dans la chambre?

Et une fois que cela est résolu, de quelle couleur peindriez-vous les pièces? Feriez-vous le devant de la pierre?

On peut faire une analogie entre un site web et une maison. D'une part, nous avons la structure du site et d'autre part l'aspect visuel.  Dans le cas, la structure est déterminée avec un plan et l'aspect visuel en regardant des échantillons de décoration.

CSS est l'acronyme de Feuilles de style en cascade.. Alors que HTML est utilisé pour structurer un document Web (définissant des éléments tels que des pages, des en-têtes et indiquant quand incorporer des images, des vidéos et d'autres médias) CSS définit le style de mise en page, les couleurs et la typographie.

Avec CSS vous pouvez définir le style de chaque élément HTML. Les éléments sont les composants HTML individuels d'une page Web.

Feuilles de style ils peuvent être externes, internes ou en ligne. Si vous souhaitez les utiliser en externe, vous devez les enregistrer en tant que fichiers .css et indiquer au fichier .html où les trouver.

En mode interne, les instructions sont écrites dans l'en-tête d'une page .html spécifique, ce qui ralentit le chargement de la page et complique les modifications.

En mode en ligne, la feuille de style externe est hébergée sur un serveur différent. Ils sont particulièrement adaptés lorsque nous voulons les utiliser plusieurs fois.

Qu'est-ce qu'un framework CSS?

Cadres CSS ce sont des outils utilisés par les développeurs d'interfaces utilisateur pour accélérer leur travail. Au lieu de créer des solutions à partir de zéro chaque fois qu'un nouveau projet se présente, lLes frameworks donnent aux développeurs les outils nécessaires pour créer rapidement des interfaces utilisateur qui peuvent être ajustées et répétées selon les besoins.

En quelques mots, nous pouvons définir les cadres comme une collection de feuilles de style CSS préparées et prêtes à l'emploi dans différents types de situations.

Le gain de temps n'est pas le seul avantage de l'utilisation des frameworks CSS. En les utilisant, les conceptions sont standardisées et ils permettent à un développeur de lire facilement le code d'un autre développeur.

Les meilleurs frameworks CSS open source

Bootstrap

Selon euxBootstrap est le plus populaire des frameworks pour HTML, CSS et JS. Il est idéal pour concevoir des sites adaptés aux mobiles (Mobile first) et réactifs.

Fondation

Il semble que les personnes qui créent des frameworks n'ont pas de grand-mère.
Fondation Il est décrit comme "Le cadre adaptatif le plus avancé au monde"

C'est un outil utile pour créer des sites Web et des applications Web en mettant l'accent sur les besoins de l'entreprise. Facebook, eBay, Mozilla, Adobe, HP, Cisco et Disney font partie de ses utilisateurs.

Bulma

Bulma est un framework CSS gratuit et open source basé sur Flexbox et utilisé par plus de 200.000 XNUMX développeurs.

Flexbox a été conçu pour aider à répartir l'espace entre les éléments d'une interface et à améliorer les capacités d'alignement. Flexbox gère la mise en page dans une seule dimension à la fois - sous forme de ligne ou de colonne. Cela contraste avec le modèle de disposition de grille CSS bidimensionnel, qui gère les colonnes et les lignes en même temps.

UI sémantique

UI sémantique est un cadre de développement qui permet de créer des mises en page belles et réactives à l'aide d'un HTML convivial.

Ce framework promet de nous permettre de créer de beaux designs avec ses plus de 3000 variables thématiques et plus de 50 composants d'interface utilisateur.

Il s'intègre également à de nombreuses bibliothèques tierces, notamment React, Angular, Meteor ou Ember.