Avec tous les changements et les progrès rapides que le CSS a connus au cours des dernières années, nous ne devrions pas être surpris par le vaste volume de ressources et d'outils open source qui sont continuellement publiés.

Ces bibliothèques CSS, ces frameworks et ces outils permettant de gagner du temps ont été conçus pour nous faciliter la vie et offrent également une fenêtre d'apprentissage sur les domaines CSS que nous ne comprenons pas entièrement.

Dans cette collection, vous trouverez 50 de nos bibliothèques CSS, frameworks, ressources et outils préférés qui ont tous été publiés cette année. Vous trouverez certainement quelque chose d’intéressant!

Saut rapide: Cadres CSS, bibliothèques CSS, animation CSS, typographie CSS, outils et générateurs CSS et inspiration CSS.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

Cadres CSS

Terminal CSS – Attention aux amateurs de terminaux, il y a maintenant un framework CSS pour vous.


xstyled – Un CSS cohérent basé sur un thème pour les composants de style.
xstyled


Fomantic-UI – Un cadre de développement gratuit et convivial pour la création de sites Web réactifs.
Fomantic-UI


Raster – Un système de grille CSS simple qui utilise du HTML descriptif.
Raster


Diez – Un framework de langage de conception gratuit et open-source.
Exemple de Diez


Butter Cake – Découvrez ce framework CSS moderne et léger.
Gâteau au beurre

Bibliothèques CSS

Destyle.css – Une bibliothèque de réinitialisation CSS «avisée».
Destyle.css


Styles immuables – Une bibliothèque pour styliser les interfaces Web en mettant l'accent sur la prévisibilité et la robustesse.
Styles immuables


Matter – Une collection de composants Material Design en CSS pur.
Matière


Water.css – Styles simples et code sémantique pour votre site Web statique.
Water.css


Études de cas Flexbox – Tutoriels pour vous aider à réaliser des mises en page Flexbox courantes.
Études de cas Flexbox


IsometricSass – Une bibliothèque Sass pour créer des 2D isométriques sans JavaScript.
IsometricSass


css-fx-layout – Une bibliothèque CSS Flexbox légère qui inclut à la fois des classes et des attributs de données HTML.
css-fx-layout


a11y-css-reset – Un ensemble de règles CSS globales pour améliorer l'accessibilité de vos projets.
a11y-css-reset


augmented-ui – Un outil pour créer "une interface utilisateur futuriste, inspirée du cyberpunk" avec CSS.
augmented-ui

Animation CSS

CSS Wand – Copiez, collez et personnalisez une variété de styles d'animation utiles.
CSS Wand


CSSFX – Une collection de boutons CSS animés, d'effets de survol, d'entrées et de chargeurs à utiliser dans vos projets.
CSSFX


CSSeffectsSnippets. – Une collection d'animations CSS pratiques que vous pouvez copier et coller.
CSSeffectsSnippets.


useAnimations – Une bibliothèque CSS gratuite de micro-interactions basées sur des icônes.
useAnimations


extra.css – Utilisez cette bibliothèque CSS Houdini pour ajouter de superbes effets.
extra.css


Izmir ImageHover CSS Library – Une mini bibliothèque CSS construite par Ciaran Walsh pour créer rapidement des éléments de survol d'image magnifiquement animés.
Izmir ImageHover CSS Library


CSS Animo – Une collection d'effets d'animation CSS copier-coller.
CSS Animo

Typographie CSS

CSSans Pro – Une police colorée et impertinente gratuite.
CSSans Pro


RFS – Un moteur de taille de police réactif qui calcule automatiquement le dimensionnement en fonction de la fenêtre du navigateur.
RFS


Typetura – Un outil pour la composition fluide, basé sur la taille de l'écran.
Typetura


Cheatsheet interactif de typographie – Un outil amusant pour apprendre les différents composants d'une lettre.
Cheatsheet de typographie interactive


TypeSafe CSS – Un petit framework CSS réactif (sous 1 Ko) avec un accent sur la lecture et l'écriture.
TypeSafe CSS


Fontsmith Variable Fonts – Découvrez ce développement très typé en typographie – avec des exemples.
Fontsmith Variable Fonts


Correspondeur de style de police – Un outil qui aide à minimiser l'écart entre une police Web et son remplacement.
Correspondeur de style de police


Fontanello – Une extension de navigateur qui affiche les styles typographiques via un clic droit.
Fontanello


GooFonts – Utilisez cette ressource pour trouver des polices Google basées sur des balises. Idéal pour découvrir des objets moins connus.
Exemple de GooFonts

Flexulator – Une calculatrice interactive de distribution d'espace CSS Flexbox.
Flexulateur


Générateur de disposition de grille CSS – Créez des grilles complexes avec cet outil visuel.
Générateur de disposition de grille CSS


de marque. – Un outil gratuit pour créer et maintenir des guides de style.
de marque.


CSS Grid Generator – Construisez des dispositions de grille complexes par glisser-déposer avec cet outil.
Générateur de grille CSS


Superposition – Une application qui extrait les jetons de conception de votre site Web pour les utiliser dans votre outil de conception préféré.
Superposition


Carte de taille d'écran – Une carte interactive affichant diverses résolutions d'écran et statistiques d'utilisation.
Carte de la taille de l'écran


Générateur d'arrière-plan CSS animé – Utilisez cet outil pour créer de superbes arrière-plans pour votre site Web.
Exemple de générateur d'arrière-plan CSS animé


DropCSS – Un outil gratuit qui nettoie rapidement et en profondeur votre CSS inutilisé.
DropCSS


Générateur de dégradé – Prenez deux couleurs et créez une variété de dégradés CSS personnalisés.
Générateur de dégradé


Mycolorpanda – Créez des dégradés CSS en un clin d'œil avec cet outil simple.
Mycolorpanda


Amino – Un éditeur CSS en direct pour Google Chrome.
Amino

Guides d'apprentissage CSS & Cheatsheets

CSS Selectors Cheatsheet – Une combinaison d'un jeu, d'un guide de référence rapide et d'une feuille de triche imprimable.
Cheatsheet CSS Selectors


Réapprendre la disposition CSS – Apprenez à exploiter les algorithmes qui alimentent les navigateurs et CSS pour créer de meilleures dispositions.
Réapprendre la disposition CSS


Directives CSS – Un document détaillé pour vous aider à écrire des CSS plus évolutifs et plus faciles à gérer.
Directives CSS


Le guide complet de SCSS / SASS – Les tenants et aboutissants du pré-processeur CSS populaire.
Le guide complet de SCSS / SASS


Disposition CSS – Une collection de mises en page et de modèles CSS populaires.
Exemple de disposition CSS


Flexbox30 – Un guide pour apprendre CSS Flexbox en 30 jours via 30 tidbits de code.
Flexbox30

Inspiration CSS

Imprimer en CSS – Découvrez une collection de mises en page inspirées de l'impression recréées avec CSS.
Exemple de l'impression en CSS

Et enfin…

CSSBattle – Utilisez vos compétences CSS pour répliquer des cibles avec le plus petit code possible dans ce jeu de golf.
CSSBattle

Nos collections d'extraits de code CSS

Plus de ressources CSS

Vous aimerez peut-être aussi jeter un œil à nos précédentes collections CSS: 2018, 2017, 2016, 2015, 2014 ou 2013.

Et si vous recherchez encore plus de frameworks CSS, d'outils, d'extraits de code ou de modèles, vous devriez parcourir nos archives CSS complètes et constamment mises à jour.