20 frameworks CSS réactifs et légers à considérer

L’utilisation d’un framework CSS de qualité réactif peut vous permettre de prendre un bon départ dans n’importe quel projet de conception Web. Certains, comme Bootstrap, sont un peu gonflés d’excès de code, tandis que d’autres nécessitent une courbe d’apprentissage assez abrupte.

Idéalement, vous voulez travailler avec un package qui vous offre suffisamment de fonctionnalités pour vous aider à démarrer, sans vous submerger de tonnes d’options dont vous n’avez pas besoin.

Vous pouvez également aimer ces frameworks web de conception de matériel ou ces frameworks de développement WordPress open source.

Avec cet objectif à l’esprit, voici 20 frameworks CSS qui fournissent les bases, sans la masse.

FICTOAN

FICTOAN vise à être une excellente option pour ceux qui ne sont pas fans de cadres plus grands et plus complexes. Il présente un jeu de couleurs vives, des icônes personnalisées et de nombreux éléments de conception de style léger.

avalanche

avalanche est une monture que vous pouvez personnaliser selon vos besoins. Des packages sont disponibles pour activer des fonctionnalités spécifiques telles qu’un système de grille fluide, des classes de décalage, des conteneurs, un espacement vertical, etc.

Beauter

Avec moins de 5 000 comprimés, Beauter relève certainement le défi d’être très léger. Cependant, cela ne signifie pas qu’il n’y a pas de fonctionnalités. Vous obtenez les bases comme une grille réactive, mais aussi quelques extras comme le décalage de parallaxe, les manières, les info-bulles et de jolis conteneurs.

Cadre vanille

Vanilla Framework est simple par sa conception pour vous fournir un excellent point de départ pour votre projet. Il existe de nombreux conteneurs et éléments de conception inclus qui ont fière allure, mais peuvent également être facilement personnalisés pour correspondre à l’apparence souhaitée.

Bulma

Basé sur CSS Flexbox, Bulma est un cadre modulaire entièrement réactif qui vous permet d’utiliser uniquement ce dont vous avez besoin. Vous bénéficiez de tous les avantages de Flexbox, y compris des colonnes et des tuiles qui sont automatiquement redimensionnées en fonction de leur nombre et de la fenêtre d’affichage.

Milligramme

Le milligramme pèse presque aussi peu que son homonyme, seulement 2k lorsqu’il est compressé. Il comprend toutes les bases que vous attendez et est conçu pour minimiser le nombre de styles que vous devrez réinitialiser.

InvisCss

InvisCss a été conçu comme une alternative aux cadres plus complexes. Le package propose des noms de sélecteurs CSS simples et une interface utilisateur minimale mais attrayante.

Regardez

Fruit d’un projet personnel, Look a été dévoilé au public en tant que framework CSS minimaliste pour servir de point de départ de base pour le développement du site. Les éléments de conception sont simples et peuvent être personnalisés à votre guise.

unlimitedGrid

Basé sur Sass, unlimitedGrid est d’abord un framework de réseau flexible et mobile. Il est modulaire, vous n’avez donc qu’à utiliser les fonctions dont vous avez besoin. Le support Flexbox est inclus et vous pouvez choisir parmi plusieurs variantes de grille.

Vital

Considéré comme «l’approche inverse» pour les cadres plus grands, Vital est léger et évolutif. Construit avec Sass, vous trouverez une disposition de grille efficace, des boutons personnalisés et des chargeurs. Sont également inclus plusieurs styles de conception utiles pour des éléments tels que les collages de photos, les conteneurs de cartes et les formulaires.

PowerToCSS

Basé sur les principes SMACSS et DRY, PowerToCSS est un framework CSS léger qui fournit une base solide pour démarrer rapidement sur votre prochain projet web.

Kouto Swiss

Kouto Swiss est un framework CSS complet pour Stylus qui vous offre de nombreuses combinaisons, fonctions et utilitaires pour encoder plus rapidement, et inclut également la puissance du site Web Caniuse pour adapter vos feuilles de style à vos besoins de compatibilité.

CSS sournois

Furtive est le premier framework mobile avec un encombrement très réduit. Ce cadre ne concerne pas les versions précédentes du navigateur, ce qui signifie que vous pouvez utiliser une «technologie de pointe» telle que flexbox, SVG et les préfixes de fournisseurs limités. Il est également disponible en SCSS, CSS et est livré avec un fichier Gulp pour personnaliser la construction.

Carte Web

Le cadre Webplate comprend tout, d’un moteur de mise en page réactif robuste aux éléments de bouton globaux, aux formulaires personnalisables et à la prise en charge des polices d’icônes IcoMoon. Il est également livré avec jQuery, Modernizr et Typeplate par défaut.

Aisance

La maîtrise est peut-être le framework CSS à réponse rapide le plus léger de tous les temps! Le HTML répond presque à 100% dès le départ, et le fichier CSS de 115 octets corrige la partie «presque». Il ne peut pas être plus léger que ça.

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }

Schème

Construit en MOINS, Schema est une infrastructure d’interface utilisateur frontale réactive qui vient avec une collection complète de composants CSS (boutons, menus déroulants, formulaires …) pour vous aider à démarrer rapidement.

émeraude

Emerald est un système de réseau réactif pragmatique en MOINS. Il est basé sur des éléments de bloc (par opposition aux flottants) et est écrit avec la méthodologie OOCSS en utilisant la syntaxe BEM.

Bijou

Bijou est un cadre de grille à 10 colonnes avec une réactivité à la lumière (

Spark – étincelle

Spark est un cadre léger basé sur la première approche mobile de la conception réactive. Le cadre est pré-construit avec différents thèmes de couleurs qui sont interchangeables, dans des styles à la fois brillants et plats. Actuellement, les couleurs de base sont l’argent (par défaut), le bleu, le vert, l’orange, le rouge, le violet, le citron vert et le fruit du dragon.

Typebase

typebase.css est un modèle de police CSS minimal personnalisable. La chose la plus importante que vous donne typebase.css est un battement vertical forcé sur la plupart des écrans de l’appareil, garantissant que le texte dans les colonnes et les longues copies ne deviennent pas irréguliers. Les versions Less et Sass sont disponibles.

Hoisin

Construit avec Sass, Hoisin est un mini cadre avant simple et réactif qui a été créé comme une alternative aux cadres avant plus complexes et gonflés. Soit dit en passant, il n’inclut aucun composant, mais se concentre plutôt sur vous donner une base organisée à partir de laquelle vous pouvez créer votre propre bibliothèque.

Grilles mignonnes

Cute Grids est un premier système de grille mobile réactif à 12 colonnes, né de la frustration des grands cadres d’aujourd’hui qui peut être exagéré pour la plupart des projets et restreindre la créativité des concepteurs.

Léger mais puissant

Le but d’utiliser un cadre de toute nature est de vous faciliter la tâche. Donc, entrer et devoir changer le style de beaucoup de CSS, ou charger un tas de scripts que vous n’allez même pas utiliser semble aller à l’encontre de toute logique.

L’utilisation de l’un des cadres les plus basiques ci-dessus peut vous aider à démarrer rapidement sans tous les maux de tête. Et comme certains d’entre eux utilisent une approche modulaire, vous pouvez choisir les éléments dont vous avez besoin pour un projet particulier. C’est plus comme ça!