{"id":25434,"date":"2020-07-05T19:36:09","date_gmt":"2020-07-05T19:36:09","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/20-frameworks-css-reactifs-et-legers-a-considerer\/"},"modified":"2020-07-05T19:36:09","modified_gmt":"2020-07-05T19:36:09","slug":"20-frameworks-css-reactifs-et-legers-a-considerer","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/20-frameworks-css-reactifs-et-legers-a-considerer\/","title":{"rendered":"20 frameworks CSS r\u00e9actifs et l\u00e9gers \u00e0 consid\u00e9rer"},"content":{"rendered":"

L’utilisation d’un framework CSS de qualit\u00e9 r\u00e9actif peut vous permettre de prendre un bon d\u00e9part dans n’importe quel projet de conception Web. Certains, comme Bootstrap, sont un peu gonfl\u00e9s d’exc\u00e8s de code, tandis que d’autres n\u00e9cessitent une courbe d’apprentissage assez abrupte.<\/p>\n

Id\u00e9alement, vous voulez travailler avec un package qui vous offre suffisamment de fonctionnalit\u00e9s pour vous aider \u00e0 d\u00e9marrer, sans vous submerger de tonnes d’options dont vous n’avez pas besoin.<\/p>\n

Vous pouvez \u00e9galement aimer ces frameworks web de conception de mat\u00e9riel ou ces frameworks de d\u00e9veloppement WordPress open source.<\/strong><\/p>\n

Avec cet objectif \u00e0 l’esprit, voici 20 frameworks CSS qui fournissent les bases, sans la masse.<\/p>\n

<\/span>FICTOAN <\/span><\/h2>\n

FICTOAN vise \u00e0 \u00eatre une excellente option pour ceux qui ne sont pas fans de cadres plus grands et plus complexes. Il pr\u00e9sente un jeu de couleurs vives, des ic\u00f4nes personnalis\u00e9es et de nombreux \u00e9l\u00e9ments de conception de style l\u00e9ger.<\/p>\n

\"FICTOAN\"<\/p>\n

<\/span>avalanche <\/span><\/h2>\n

avalanche est une monture que vous pouvez personnaliser selon vos besoins. Des packages sont disponibles pour activer des fonctionnalit\u00e9s sp\u00e9cifiques telles qu’un syst\u00e8me de grille fluide, des classes de d\u00e9calage, des conteneurs, un espacement vertical, etc.<\/p>\n

\"avalanche\"<\/p>\n

<\/span>Beauter <\/span><\/h2>\n

Avec moins de 5 000 comprim\u00e9s, Beauter rel\u00e8ve certainement le d\u00e9fi d’\u00eatre tr\u00e8s l\u00e9ger. Cependant, cela ne signifie pas qu’il n’y a pas de fonctionnalit\u00e9s. Vous obtenez les bases comme une grille r\u00e9active, mais aussi quelques extras comme le d\u00e9calage de parallaxe, les mani\u00e8res, les info-bulles et de jolis conteneurs.<\/p>\n

\"Beauter\"<\/p>\n

<\/span>Cadre vanille <\/span><\/h2>\n

Vanilla Framework est simple par sa conception pour vous fournir un excellent point de d\u00e9part pour votre projet. Il existe de nombreux conteneurs et \u00e9l\u00e9ments de conception inclus qui ont fi\u00e8re allure, mais peuvent \u00e9galement \u00eatre facilement personnalis\u00e9s pour correspondre \u00e0 l’apparence souhait\u00e9e.<\/p>\n

\"Cadre<\/p>\n

<\/span>Bulma <\/span><\/h2>\n

Bas\u00e9 sur CSS Flexbox, Bulma est un cadre modulaire enti\u00e8rement r\u00e9actif qui vous permet d’utiliser uniquement ce dont vous avez besoin. Vous b\u00e9n\u00e9ficiez de tous les avantages de Flexbox, y compris des colonnes et des tuiles qui sont automatiquement redimensionn\u00e9es en fonction de leur nombre et de la fen\u00eatre d’affichage.<\/p>\n

\"Bulma\"<\/p>\n

<\/span>Milligramme <\/span><\/h2>\n

Le milligramme p\u00e8se presque aussi peu que son homonyme, seulement 2k lorsqu’il est compress\u00e9. Il comprend toutes les bases que vous attendez et est con\u00e7u pour minimiser le nombre de styles que vous devrez r\u00e9initialiser.<\/p>\n

\"Milligramme\"<\/p>\n

<\/span>InvisCss <\/span><\/h2>\n

InvisCss a \u00e9t\u00e9 con\u00e7u comme une alternative aux cadres plus complexes. Le package propose des noms de s\u00e9lecteurs CSS simples et une interface utilisateur minimale mais attrayante.<\/p>\n

\"InvisCss\"<\/p>\n

<\/span>Regardez <\/span><\/h2>\n

Fruit d’un projet personnel, Look a \u00e9t\u00e9 d\u00e9voil\u00e9 au public en tant que framework CSS minimaliste pour servir de point de d\u00e9part de base pour le d\u00e9veloppement du site. Les \u00e9l\u00e9ments de conception sont simples et peuvent \u00eatre personnalis\u00e9s \u00e0 votre guise.<\/p>\n

\"Regardez\"<\/p>\n

<\/span>unlimitedGrid<\/span><\/h2>\n

Bas\u00e9 sur Sass, unlimitedGrid est d’abord un framework de r\u00e9seau flexible et mobile. Il est modulaire, vous n’avez donc qu’\u00e0 utiliser les fonctions dont vous avez besoin. Le support Flexbox est inclus et vous pouvez choisir parmi plusieurs variantes de grille.<\/p>\n

\"unlimitedGrid\"<\/p>\n

<\/span>Vital <\/span><\/h2>\n

Consid\u00e9r\u00e9 comme \u00abl’approche inverse\u00bb pour les cadres plus grands, Vital est l\u00e9ger et \u00e9volutif. Construit avec Sass, vous trouverez une disposition de grille efficace, des boutons personnalis\u00e9s et des chargeurs. Sont \u00e9galement inclus plusieurs styles de conception utiles pour des \u00e9l\u00e9ments tels que les collages de photos, les conteneurs de cartes et les formulaires.<\/p>\n

\"Vital\"<\/p>\n

<\/span>PowerToCSS <\/span><\/h2>\n

Bas\u00e9 sur les principes SMACSS et DRY, PowerToCSS est un framework CSS l\u00e9ger qui fournit une base solide pour d\u00e9marrer rapidement sur votre prochain projet web.<\/p>\n

\"PowerToCSS\"<\/p>\n

<\/span>Kouto Swiss <\/span><\/h2>\n

Kouto Swiss est un framework CSS complet pour Stylus qui vous offre de nombreuses combinaisons, fonctions et utilitaires pour encoder plus rapidement, et inclut \u00e9galement la puissance du site Web Caniuse pour adapter vos feuilles de style \u00e0 vos besoins de compatibilit\u00e9.<\/p>\n

\"Kouto<\/p>\n

<\/span>CSS sournois<\/span><\/h2>\n

Furtive est le premier framework mobile avec un encombrement tr\u00e8s r\u00e9duit. Ce cadre ne concerne pas les versions pr\u00e9c\u00e9dentes du navigateur, ce qui signifie que vous pouvez utiliser une \u00abtechnologie de pointe\u00bb telle que flexbox, SVG et les pr\u00e9fixes de fournisseurs limit\u00e9s. Il est \u00e9galement disponible en SCSS, CSS et est livr\u00e9 avec un fichier Gulp pour personnaliser la construction.<\/p>\n

\"CSS<\/p>\n

<\/span>Carte Web <\/span><\/h2>\n

Le cadre Webplate comprend tout, d’un moteur de mise en page r\u00e9actif robuste aux \u00e9l\u00e9ments de bouton globaux, aux formulaires personnalisables et \u00e0 la prise en charge des polices d’ic\u00f4nes IcoMoon. Il est \u00e9galement livr\u00e9 avec jQuery, Modernizr et Typeplate par d\u00e9faut.<\/p>\n

\"Webplate<\/p>\n

<\/span>Aisance<\/span><\/h2>\n

La ma\u00eetrise est peut-\u00eatre le framework CSS \u00e0 r\u00e9ponse rapide le plus l\u00e9ger de tous les temps! Le HTML r\u00e9pond presque \u00e0 100% d\u00e8s le d\u00e9part, et le fichier CSS de 115 octets corrige la partie \u00abpresque\u00bb. Il ne peut pas \u00eatre plus l\u00e9ger que \u00e7a.<\/p>\n

\/* FLUIDITY v0.1.0 @mrmrs - http:\/\/mrmrs.cc MIT\r\n*\/\r\n\/*\r\n Responsive Utilities\r\n\r\n*\/\r\nimg, canvas, iframe, video, svg { max-width: 100%; }\r\n\r\n\/* Wrap tables or pre elements in a div with this class *\/\r\n.overflow-container { overflow-y: scroll; }<\/pre>\n
<\/span>Sch\u00e8me <\/span><\/h2>\n
Construit en MOINS, Schema est une infrastructure d’interface utilisateur frontale r\u00e9active qui vient avec une collection compl\u00e8te de composants CSS (boutons, menus d\u00e9roulants, formulaires …) pour vous aider \u00e0 d\u00e9marrer rapidement.<\/p>\n
\"Sch\u00e9ma<\/p>\n
<\/span>\u00e9meraude <\/span><\/h2>\n
Emerald est un syst\u00e8me de r\u00e9seau r\u00e9actif pragmatique en MOINS.  Il est bas\u00e9 sur des \u00e9l\u00e9ments de bloc (par opposition aux flottants) et est \u00e9crit avec la m\u00e9thodologie OOCSS en utilisant la syntaxe BEM.<\/p>\n
\"Emerald<\/p>\n
<\/span>Bijou <\/span><\/h2>\n
Bijou est un cadre de grille \u00e0 10 colonnes avec une r\u00e9activit\u00e9 \u00e0 la lumi\u00e8re (\n<\/p>\n
\"Cadre<\/p>\n
<\/span>Spark – \u00e9tincelle <\/span><\/h2>\n
Spark est un cadre l\u00e9ger bas\u00e9 sur la premi\u00e8re approche mobile de la conception r\u00e9active.  Le cadre est pr\u00e9-construit avec diff\u00e9rents th\u00e8mes de couleurs qui sont interchangeables, dans des styles \u00e0 la fois brillants et plats.  Actuellement, les couleurs de base sont l’argent (par d\u00e9faut), le bleu, le vert, l’orange, le rouge, le violet, le citron vert et le fruit du dragon.<\/p>\n
\"Conception<\/p>\n
<\/span>Typebase <\/span><\/h2>\n
typebase.css est un mod\u00e8le de police CSS minimal personnalisable.  La chose la plus importante que vous donne typebase.css est un battement vertical forc\u00e9 sur la plupart des \u00e9crans de l’appareil, garantissant que le texte dans les colonnes et les longues copies ne deviennent pas irr\u00e9guliers.  Les versions Less et Sass sont disponibles.<\/p>\n
\"typographie<\/p>\n
<\/span>Hoisin <\/span><\/h2>\n
Construit avec Sass, Hoisin est un mini cadre avant simple et r\u00e9actif qui a \u00e9t\u00e9 cr\u00e9\u00e9 comme une alternative aux cadres avant plus complexes et gonfl\u00e9s.  Soit dit en passant, il n’inclut aucun composant, mais se concentre plut\u00f4t sur vous donner une base organis\u00e9e \u00e0 partir de laquelle vous pouvez cr\u00e9er votre propre biblioth\u00e8que.<\/p>\n
\"Cadre<\/p>\n
<\/span>Grilles mignonnes <\/span><\/h2>\n
Cute Grids est un premier syst\u00e8me de grille mobile r\u00e9actif \u00e0 12 colonnes, n\u00e9 de la frustration des grands cadres d’aujourd’hui qui peut \u00eatre exag\u00e9r\u00e9 pour la plupart des projets et restreindre la cr\u00e9ativit\u00e9 des concepteurs.<\/p>\n
\"Syst\u00e8me<\/p>\n
<\/span>L\u00e9ger mais puissant<\/span><\/h2>\n
Le but d’utiliser un cadre de toute nature est de vous faciliter la t\u00e2che.  Donc, entrer et devoir changer le style de beaucoup de CSS, ou charger un tas de scripts que vous n’allez m\u00eame pas utiliser semble aller \u00e0 l’encontre de toute logique.<\/p>\n
L’utilisation de l’un des cadres les plus basiques ci-dessus peut vous aider \u00e0 d\u00e9marrer rapidement sans tous les maux de t\u00eate.  Et comme certains d’entre eux utilisent une approche modulaire, vous pouvez choisir les \u00e9l\u00e9ments dont vous avez besoin pour un projet particulier.  C’est plus comme \u00e7a!<\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n