10 meilleurs frameworks CSS en 2020
Vous recherchez le meilleur framework CSS? Ce guide est là pour vous aider. Dans cette fonctionnalité, nous allons vous aider à vous familiariser avec certains des frameworks CSS les plus intéressants et les plus puissants disponibles. Certains d'entre eux sont bien connus, tandis que d'autres sont des outils plus récents qui commencent tout juste à prendre de l'ampleur. Dans tous les cas, vous bénéficierez grandement de la connaissance de ces outils utiles.
Meilleurs frameworks CSS: Liens rapidesAmorcer | Fondation | UIkit | UI sémantique | Trouver | Vent arrière | CSS pique-nique | PapierCSS | NES.css | Animate.css
Nous allons commencer les choses avec des noms bien connus. Avec l'un de ces frameworks CSS, vous serez entièrement équipé pour créer des projets propres et maintenables avec un investissement en temps minimal (si vous souhaitez quelque chose d'encore moins de temps, créez votre prochain site avec un Générateur de site Web ). Cependant, vous avez parfois besoin de quelque chose d'un peu plus spécifique. Pour cette raison, vers la fin de la liste, vous trouverez des bibliothèques et des frameworks qui ont des cas d'utilisation très spécifiques.
Pour plus d'inspiration CSS, jetez un œil à notre tour d'horizon des top Animations CSS et comment les coder . De plus, il vaut toujours la peine de s'assurer que vous avez le meilleur hébergement Web option pour les besoins de votre site, et le parfait stockage en ligne , trop.
01. Bootstrap
Commençons par le framework le plus populaire au monde. Bien que Bootstrap ne soit certainement pas exclusivement un framework CSS, ses fonctionnalités les plus populaires sont celles basées sur CSS. Ceux-ci incluent un système de grille puissant, des badges, des boutons, des composants de carte, des barres de navigation et bien plus encore. Il y a aussi tout un tas de thèmes Bootstrap gratuits explorer.
Si vous n'êtes pas familier avec le fonctionnement d'un framework tel que Bootstrap, quelques exemples de code vous aideront, afin que vous puissiez voir à quel point il est facile de créer des interfaces maintenables en ne modifiant que du HTML.
Le système de grille de Bootstrap est un excellent point de départ. La grille Bootstrap a été un produit précieux depuis la première version publique du framework en 2011. Et pas étonnant - elle est ridiculement facile à utiliser. Une fois que vous avez inclus le CSS de Bootstrap, créer une grille responsive basée sur une flexbox qui fonctionne dans tous les navigateurs est aussi simple que ceci:
Column 1 Column 2 Column 3 Comme mentionné, Bootstrap propose également une collection complète de composants d'interface utilisateur. Certains de ceux qui ont été difficiles à styliser dans le passé ne sont que plug-and-play avec un cadre comme Bootstrap. Ceux-ci incluent un composant de navigation fil d'Ariane, un composant de carte et un composant de pagination. Voici le code HTML pour mettre en œuvre la pagination:
Tous ces composants peuvent être construits sans écrire une seule ligne de CSS. Dans de nombreux cas, vous aurez probablement un thème pour les composants en fonction de la marque du projet. Quoi qu'il en soit, la structure adaptée aux mobiles sera déjà en place, ce qui rend incroyablement facile d'atteindre un produit fini en un temps record. Amorcer inclut également des fonctionnalités avancées pour des mises en page réactives, des composants utilitaires et il est construit sur Sass, donc il est super flexible et personnalisable.
02. Fondation
Le framework Foundation, comme Bootstrap, est devenu extrêmement populaire et est connu comme un framework plus sophistiqué avec des composants CSS avancés mais faciles à implémenter. Foundation est construit sur Sass donc, comme Bootstrap, il est personnalisable. En plus de cela, il dispose également de fonctionnalités réactives puissantes qui signifient qu'il est très facile de créer des conceptions adaptées aux mobiles.
Le composant de table responsive est l'un de nos favoris:
De plus, la chronologie verticale est une fonctionnalité de mise en page que vous ne voyez pas dans de nombreux frameworks. Ce composant utilise le .chronologie classe pour le conteneur, qui contient alors plusieurs .timeline-item éléments avec une icône et un contenu pour chaque élément:
2019
Example text for timeline item.
Ce n’est qu’un petit échantillon des nombreux composants qui font Fondation l'un des meilleurs frameworks CSS disponibles aujourd'hui.
03. UIkit
UIkit est un autre framework frontend populaire et peut-être un peu sous-estimé en termes de fonctionnalités CSS. En plus de nombreuses fonctionnalités similaires à celles trouvées dans d'autres frameworks populaires, il existe quelques composants spécialisés utiles.
Tout d'abord, si vous n'êtes toujours pas très à l'aise avec flexbox, vous pouvez créer des mises en page complexes basées sur une flexbox avec UIkit en utilisant du HTML brut. Il peut sembler étrange au début d'utiliser la syntaxe flexbox dans vos classes HTML, mais cela vous évite d'avoir à connaître toutes les bizarreries concernant le wrapping flex, les colonnes / lignes, la croissance flex et ainsi de suite. Voici un exemple:
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 UIkit comprend des dizaines de composants qui offrent des styles attrayants prêts à l'emploi. De nombreuses fonctionnalités sont des classes d'utilitaires spécialisées, notamment les suivantes:
- .uk-align-left , .uk-align-right et .uk-align-center pour aligner ou faire flotter des éléments
- .uk-colonne-1-2 jusqu'à .uk-colonne-1-6 pour les mises en page de texte à plusieurs colonnes de style magazine
- .uk-radio , Case à cocher .uk et similaire pour des entrées de formulaire attrayantes
- Diverses classes d'utilité de marge et de remplissage ( .uk-margin-top , .uk-padding-petit etc.)
- Diverses classes d'utilité pour positionner relativement un élément à l'intérieur d'un conteneur ( .uk-position-top , .uk-position-gauche etc.)
UIkit vaut la peine d'essayer si vous voulez un framework CSS frais et bien entretenu avec une multitude d'options de composants. Il est disponible en Less et Sass et comprend même une feuille de style pour les langues de droite à gauche.
04. UI sémantique
L'interface utilisateur sémantique a beaucoup de fonctionnalités qui se chevauchent avec d'autres frameworks populaires, mais la façon dont elle fonctionne (impliquée par le nom) est basée sur la nature sémantique des noms de classe utilisés pour créer des composants. En d'autres termes, les noms de classe sont adaptés aux humains.
Jetez un œil, par exemple, à la façon dont vous construiriez une grille à quatre colonnes:
Remarquez la façon dont les noms de classe communiquent exactement ce qui est construit. Le CSS n’a pas nécessairement un ensemble unique de styles pour chacune des classes répertoriées, mais les classes fonctionnent ensemble. Ainsi, tout comme un langage où les mots ont un sens dans leur contexte, les noms de classe fonctionnent ensemble pour créer des composants cohérents et adaptés aux mobiles.
Voici un autre exemple, qui crée un tableau de données simple:
Ceci est une excellente démonstration de la façon dont UI sémantique utilise des noms de classe pour décrire le composant en cours de construction. Si vous êtes plus habitué aux frameworks traditionnels tels que Bootstrap ou Foundation, la courbe d'apprentissage sur celui-ci peut être plus raide. Mais une fois que vous avez compris, il est assez puissant et agréable à utiliser.
05. Recherche
Bulma est un autre framework CSS populaire et sa principale caractéristique est le fait que ses composants dépendent largement de flexbox, ce qui en fait un framework vraiment moderne. Vous pouvez penser que Bulma est un peu comme un hybride de Bootstrap et de l'interface utilisateur sémantique, mais sans aucune complexité. Il utilise certains des mêmes principes que l'interface utilisateur sémantique avec ses noms de classe, inclut de nombreux composants populaires, mais parvient à garder les choses simples - par exemple, les éléments de formulaire ont peu ou pas de styles pour conserver une apparence multi-navigateurs.
L'exemple suivant montre comment un composant Bulma peut être créé et est facile à maintenir:
Example Heading
Example text goes here
Some example paragraph text here.
Remarquez le contenant l'élément reçoit le héros et est sombre Des classes. Cela indique que vous voulez une bannière de héros qui utilise le thème sombre par défaut (l'une des sept couleurs de thème incluses avec Bulma, qui peuvent toutes être modifiées via des variables Sass).
Notez également le est-* classes sur le conteneur et le titre principal. Le est-fluide class permet au conteneur d'être fluide sur n'importe quel écran de taille, centré avec des marges et sans largeur maximale . Sans cette valeur, le largeur maximale du conteneur change en fonction de la taille de la fenêtre. Le est-taille-2 class définit la taille de l'en-tête, avec des tailles allant de 1 à 7.
Comme tu peux le voir, Trouver rend incroyablement facile la création d'interfaces adaptées aux mobiles via des noms de classe lisibles.
06. Vent arrière
De nombreux frameworks CSS modernes profitent d'une tendance récente dans la création d'interfaces utilisateur: l'utilisation de classes d'utilitaires à usage unique également appelées Atomic CSS (voir l'encadré ci-joint). Tailwind est l'un de ces cadres. L'idée derrière Tailwind est qu'au lieu de commencer avec des composants pré-stylisés à l'emporte-pièce, vous construisez tout à partir de zéro en utilisant des classes utilitaires.
La courbe d'apprentissage est nettement plus élevée sur celui-ci, surtout si Atomic CSS est nouveau pour vous. Mais avec Tailwind, les problèmes de spécificité et autres problèmes de remplacement courants dans les grandes feuilles de style sont évités.
Par exemple, Tailwind n'inclut aucun type de composant «bouton». Mais vous pouvez créer votre propre bouton en utilisant quelque chose comme ce qui suit:
Button À partir de là, si vous décidez que ce que vous avez créé est un composant valide pour la réutilisation, vous pouvez le faire au moyen de la fonction d'extraction de composant de Tailwind. Ainsi, un composant comme le bouton indiqué dans le bloc de code précédent peut être inclus comme ceci:
Button .btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } Comme vous pouvez le voir, la courbe d'apprentissage pour Vent arrière est assez élevé. Non seulement vous devez vous habituer aux styles utilitaires, mais il est également recommandé d'utiliser l'extraction de composants, effectuée à l'aide de Tailwind @appliquer directive - qui n'est qu'une façon de faire l'extraction; voir son Documentation pour plus.
07. Picnic CSS
Si vous n'aimez pas l'idée d'inclure des classes de présentation dans votre balisage, ce qui est courant dans la plupart, sinon dans tous, des frameworks populaires, alors Picnic CSS pourrait être le framework pour vous. Le pique-nique est à bien des égards le contraire de Tailwind en ce sens qu'il est non seulement moins complexe, mais très opiniâtre.
Par exemple, certains éléments HTML sont pré-stylisés sans qu'il soit nécessaire d'ajouter des noms de classe. Ceux-ci inclus , , En plus d'un certain nombre de styles par défaut existants sur de nombreux éléments HTML, Pique-nique a quelques autres composants interactifs pur-CSS bien conçus qui ne nécessitent aucun JavaScript. Ceux-ci incluent une boîte de dialogue modale, un sélecteur d'onglets, un téléchargeur de fichiers et une info-bulle. Certains d'entre eux peuvent être améliorés avec des scripts, mais ils fonctionnent tous uniquement avec du CSS. Nous abordons ici les options les plus spécialisées de notre liste des meilleurs frameworks CSS. Ce ne sera pas votre outil CSS préféré, mais c'est l'un des frameworks les plus originaux. PaperCSS est présenté comme le «cadre CSS le moins formel». Les composants ont une apparence de dessin animé dessinée à la main. Les cas d'utilisation peuvent inclure un site Web pour les enfants, un blog, un jeu ou une bande dessinée. PapierCSS comprend une grille flexbox, des badges, des boutons, des cartes et quelques composants CSS purs interactifs. L'image qui l'accompagne vous donne un avant-goût de ce que produit ce cadre unique. Comme PaperCSS, NES.css dispose d'un ensemble unique de styles adaptés à un ensemble restreint de projets. Il imite les graphismes de la Nintendo Entertainment System 8 bits, créant un look de jeu rétro. En plus des composants communs trouvés dans d'autres frameworks, NES.css comprend également des styles pour les bulles de commentaires, les icônes de réaction, ainsi que des conteneurs uniques avec des bordures. Vous trouverez ci-dessous le code de quelques bulles de commentaires. L'image qui l'accompagne montre à quoi ils ressemblent avec quelques-unes des nombreuses icônes (construites via des ombres CSS) qui sont fournies avec le framework. Comment Balloon Example Another comment balloon example with a little more text. Si vous aimez ça, consultez PSone.css . Il existe plusieurs bibliothèques qui font plus ou moins la même chose: ajouter une ou plusieurs animations à un élément spécifié. La première bibliothèque de ce type qui a gagné en popularité ces dernières années est celle de Dan Eden Animate.css . Cette bibliothèque amusante contient des dizaines d'animations prédéfinies qui secouent, se fanent, glissent, zooment et plus encore. Il existe d'autres bibliothèques similaires qui offrent aux utilisateurs des animations alternatives, notamment Woah.css , qui a des animations indéniablement décalées qui ne sont probablement pas du goût de tout le monde. Il y a aussi Vivifier , qui a beaucoup plus d'options d'animation uniques et est assez différent d'Animate.css. Une autre excellente option à explorer est CSSFX , un nouveau projet qui offre encore plus d'options pour les animations de style plug-and-play. Enfin, si vous êtes à la recherche d'indicateurs de chargement animés, vous voudrez peut-être consulter Spinners épiques , qui présente des graphiques animés uniques en CSS uniquement. Il n’est pas rare d’entendre les gens dénigrer les CSS. En mettant l'accent sur la cascade, le style global et les particularités de ses mises en page, il a attiré sa juste part de colère de la part de développeurs frustrés. Pour ces personnes, les frameworks CSS et les bibliothèques qui modifient le code vanilla pour le rendre plus intuitif sont une aubaine absolue. Pendant ce temps, pour certains puristes CSS, les frameworks ajoutent simplement une couche d'abstraction à quelque chose qui n'a pas besoin d'ornement. Aucun des deux camps n'a raison ou tort. Il est très utile de comprendre le langage de base (en particulier certaines des nouvelles fonctionnalités telles que Flexbox et Grid Layout), mais il est également très utile de pouvoir créer rapidement quelque chose qui soit évolutif et maintenable. C’est là que les frameworks et bibliothèques CSS peuvent vous aider. Il se peut que vous aimiez écrire votre CSS à partir de zéro. Mais avec des frameworks et des bibliothèques faciles à utiliser, flexibles et adaptables comme ceux décrits dans cette fonctionnalité, vous pouvez créer des interfaces utilisateur interactives et maintenables pour votre application en peu de temps. Nous encourageons toujours les développeurs à continuer à apprendre et à écrire du CSS vanille. Il n’ya pas de substitut à cela. Mais si vous avez besoin de créer ou de prototyper une nouvelle mise en page ou un nouveau design dans un délai serré, l'utilisation de l'un des meilleurs frameworks CSS peut être un énorme booster de productivité. Si vous souhaitez acquérir les dernières compétences créatives et pratiques pour faire passer votre carrière au niveau supérieur, rejoignez-nous à Generate CSS, notre conférence pour les concepteurs et les développeurs Web. En savoir plus sur www.generateconf.com . Utilisez le code de l'offre spéciale CONCEPTEUR WEB2 pour un rabais de 10% sur les billets! Cet article a été initialement publié dans rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter numéro 321 ou s'abonner . Lire la suite: , et (dont les deux derniers ont également de jolies petites actions animées cocher / décocher).
08. PaperCSS
09. NES.css
10. Animate.css
Ai-je besoin d'un framework CSS?
Intéressant Dans Le Monde Du Design
