vendredi , 13 juillet 2018
Accueil » articles » 50 outils et ressources CSS gratuits

50 outils et ressources CSS gratuits

Nous avons assemblé dans cet article les ressources CSS, les frameworks, les kits UI, ainsi que toutes les astuces que nous préférons, tout ceci tiré de l’année 2015. L’idée générale est de non seulement illustrer et démontrer qu’elle fantastique année a été 2015 pour le CSS, mais aussi pour vous offrir une gamme de ressources prêtes à l’essai qui vous boosteront lorsque vous mettrez en place votre prochain projet web.

Toutes les catégories ont été divisées dans les catégories suivantes :

Frameworks CSS réactifs, Kits CSS UI, Outils CSS web, Outils de formatage et d’ordonnancement des CSS, Outils d’animation de CSS, quelques ressources de références indispensables sur les CSS et enfin un ensemble mixte de ressources qui ne peuvent être catégorisées.

La plupart des ressources ne concernent que le CSS, mais il y en a quelques-unes (quelques frameworks et kits UI) qui nécessitent un peu de Javascript pour plus de fonctionnalités.

LESS Hat 2.0

LESS Hat 2.0

Une année plus tard, il existe une nouvelle version 2.0, complètement réécrite, qui apporte 86 supers mixins, des flux de travail robustes pour éditer, tester et créer de nouveaux mixins.

LESS Hat 2.0 →

Preboot

Preboot

Preboot est une collection complète et flexible des utilités LESS.

Preboot

Pure CSS Modal

Pure CSS Modal

CSS Modal est construit à partir d’instructions CSS pures et fonctionne avec toutes tailles d’écran, que ce soit sur un téléphone mobile ou sur des écrans haute résolution.

CSS Modal

Markdown.css

Markdown.css

Markdown.css est un outil web pour faire en sorte que du HTML ordinaire ressemble à du texte Markdown brut.

Markdown.css

Pure CSS Gallery

Pure CSS Gallery

Pure CSS Gallery

Outils de formatage, d’organisation et d’ordonnancement du code CSS

RECESS

Développé par Twitter, RECESS est un outil simple et attractif, servant à améliorer la qualité du code CSS. Il est construit à partir de LESS.

Recess

Helium CSS

Helium est un outil pour trouver le code CSS inutilisé sur plusieurs pages d’un site web. Helium récupère une liste d’URLs pour différentes sections d’un site puis télécharge et analyse chaque page pour mettre en place une liste de toutes les feuilles de style. Il visite ensuite chaque page de la liste d’URL et vérifie si les sélecteurs trouvés dans les feuilles de style sont utilisés sur la page en question. Il produira alors un rapport avec les détails de chaque feuille de style et les sélecteurs qui n’ont été utilisés sur aucune des pages listées.

Helium CSS

Diagnosticss

Diagnosticss

Une feuille de style de diagnostic de CSS qui aide à détecter visuellement toute balise HTML invalide, inaccessible ou erroné.

Diagnostic

CSSO

Tout en permettant de minimiser les CSS, CSSO peut également performer une optimisation structurelle de fichiers CSS, ce qui résulte en un fichier d’une plus petite taille comparativement aux autres minifiers. Cela fera fusionner les blocs aux propriétés et sélecteurs identiques, supprimera des propriétés surchargées, supprimera les sélecteurs dupliqués, supprimera les blocs partiellement fusionnés, supprimera les règles vides et minimisera également les propriétés de marge et de marge intérieure.

CSSO

CSS Trashman

CSS Trashman

CSS Trashman réusinera automatiquement votre code CSS et génèrera une nouvelle feuille de style pour votre site web. Il fonctionne en examinant en direct le DOM de votre site dans le navigateur et répond en réalisant une rétro-ingénierie des CSS, plus élégante, qui capture les styles au pixel près.

CSS Trashman

Outils et ressources CSS d’animation

Animates.css

Animate.css

Animates.css est une collection d’animations CSS cross-browser que vous pouvez utiliser dans vos curseurs, pages d’accueil et autres projets web.

Animates.css

Animo.js

animo.js

animo.js est un outil puissant de gestion des animations CSS.

Animo.js

Anima

Anima

Anima, plutôt léger (seulement 5k lorsque compressé) vous permet d’animer plusieurs objets en même temps, et chaque élément peut avoir sa masse et viscosité pour donner l’effet de véritables objets. Il utilise à la fois des CSS transforms et des 3d-transforms et du Javascript pour créer l’animation.

Anima

Effeckt.css

Effeckt.css

Effeckt.css

Frameworks CSS réactifs

Siiiimple

Siiiimple

Siiiimple est « Une grille CSS super, super, super, super simple ».

Siiiimple

Girder

Girder

Mis en place avec Sass, Girder est une boîte à outils de grilles minimaliste qui construit des mises en page flexibles divisées en sections logiques.

Girder

Emerald

Emerald

Emerald est un système de grilles réactif écrit en LESS

Emerald

Ratchet

Ratchet

Ratchet vous laisse faire le prototype d’applications mobile en utilisant de simples composants HTML, CSS et Javascript.

Ratchet

Clank

Clank

Clank est un framework de prototypage, au code source ouvert, qui vous aide à travailler avec des applications mobiles.

Clank

Ink

Ink

Ink est un nouveau framework de l’équipe ZURB qui vous permet de créer rapidement des emails HTML réactifs pour tout type d’appareil ou de client.

Ink

Le framework Responsable

Responsable Framework

Responsable est un système de grilles réactif et propre avec une ligne de base typographique alimentée par LESS/SCSS et basée sur Semantic.gs.

Responsable

Le système de grille Mueller

MUELLER

MUELLER est un système de grilles par modules pour des mises en page réactives/adaptées et non réactives, basé sur Compass.

MUELLER

PocketGrid

PocketGrid

pocketGrid est un système de grilles léger, purement en CSS réactif, permettant un nombre illimité de colonnes et de points de contrôle.

PocketGrid

Kraken

Kraken

Kraken est un texte réutilisable léger, orienté sur les mobiles, qui inclue le strict nécessaire : une réinitialisation CSS pour assurer une compatibilité cross-browser ; une grille réactive et pro-mobile ; une échelle typographique fluide et bien désignée ; des boutons CSS3 ; un style de formulaires standard ; des ajouts optionnels pour plus de fonctionnalités.

Kraken

GroundworkCSS

GroundworkCSS

GroundworkCSS est une boîte à outils pleinement réactive en HTML5, CSS et Javascript pour prototyper et construire rapidement des applications web accessibles qui fonctionnement virtuellement pour n’importe quel type d’appareil.

GroundworkCSS

Typeplate

Typeplate

Typeplate est un kit de départ typographique au design pas forcément esthétique, mais qui définit un marquage clair avec des styles extensibles pour des modèles typographiques communs.

Typeplate

Cardinal

Cardinal

Cardinal est un petit framework CSS pro-mobile qui se concentre essentiellement sur les applications web réactives. Son objectif est de ‘faciliter les prototypes, la construction, l’échelle et le maintien CSS pour des applications web réactives. Il omet plusieurs décisions de design esthétique qui vont souvent rabaisser des frameworks CSS plus larges et plus compliqués, vous laissant le soin du design.

Cardinal

Gridism

Gridism

Gridism est une grille CSS simple qui inclut des modèles intégrés pour un design réactif.

Gridism

Furatto

Furatto

Furatto, est un framework frontal au style plat pour un développement web rapide basé sur d’autres frameworks, tels que Twitter Bootstrap, Foundation…, comme point de départ.

Gridism

Cascade

Cascade

Cascade Framework opère en divisant votre CSS en fichiers séparés, basés sur les caractéristiques plutôt que sur les sélecteurs et en mettant ne place un modèle de design de modificateur, inspiré par SMACCS et OOCSS.

Cascade

Foundation 5.0 (Mise à jour)

Foundation

Foundation

Bootstrap 3.0 (Mise à jour)

Bootstrap

Bootstrap

Kit CSS UI

PixelKit Bootstrap UI Kit

PixelKit Bootstrap UI Kit

Un kit UI gratuit et plat, mis en place sur Bootstrap pour n’importe quel développeur qui veut construire un site web opérationnel  et au look cool.

PixelKit

Pure

Pure

Pure, de Yahoo !, est une collection de modules CSS petits et réactifs que vous pouvez utiliser dans vos projets. Tout l’ensemble des modules ne fait que 4.4KB (minimisés et compressé).

Pure

Almost Flat UI

Almost Flat UI

Almost Flat UI est un kit UI basé sur le Foundation Framework. Il prévoit divers éléments que vous pouvez utiliser pour votre prochain projet de design « plat ».

Almost Flat UI

UIkit

UIkit

UIkit est une framework frontal, léger, qui vous laisse développer des interfaces web rapides et puissantes. Il inclut plus de 30 composants modulables et extensibles.

UIkit

Brick

Brick

Mis à votre disposition par Mozilla, Brick est une collection de composants web UI réutilisables pour créer des applications HTML5 pour mobiles rapidement et de façon flexible.

Brick

Bootflat

Bootflat

Bootflat est un kit UI plat, source ouverte, basée sur Twitter Bootstrap, qui vous laisse créer rapidement et facilement des applications web.

Bootflat

Des outils CSS basés sur le Web

Animatron

Animatron est un outil internet simple et puissant qui vous permet de créer des animations HTML5 renversantes de même que du contenu interactif.

Animatron

Create CSS3 – Générateur CSS3 simple

Générateur CSS3

Générateur CSS3

Tridiv

Tridiv

Tridiv est un éditeur basé sur le web qui vous laisse créer des formes 3D en CSS. Compatible avec le cross-browser, vous pouvez également trouver sur le net plusieurs exemples avant que vous commenciez à vraiment utiliser l’éditeur.

Tridiv

Daturi – Converti des images en Base64

Daturi

Daturi

CuttySSark

CuttySSark

CuttySSark est un polyfill léger un ajoutant le support pour l’activation d’événements JS et feuilles de styles équivalentes en utilisant des sélecteurs CSS2.

CuttySSark

piCSSel-art

piCSSel-art

piCSSel-art est une application de dessin pour dessiner en pixel, qui sera converti en CSS.

piCSSel-art

Prepos

Prepros

Prepos est une application web qui compilera les fichiers Less, Sass, Scss, Compass, Coffeesript, Stylus, Jade, Slim, Markdown et Haml avec un rafraichissement en direct dans le navigateur.

Prepos

Resources pour des références CSS

Browserhacks

Browserhacks

Browserhacks est une liste non exhaustive des bidouilles de navigateurs spécifiques à CSS et Javascript.

Browserhacks

Solved by Flexbox

Solved By Flexbox

CSS a beaucoup manqué de mécanismes de mise en page adéquates depuis trop longtemps. Transitions, animations, filtres, tout…

Solved by Flexbox

CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet

Le CSS3 Animation Cheat Sheet est un ensemble d’animations CSS3 prédéfinies que vous pouvez utiliser dans vos projets web en ajoutant la feuille de style à votre site et en appliquant les classes CSS3 prédéfinies au éléments nécessaires.

CSS3 Animation Cheat Sheet

Screen Sizes

Screen Sizes

Screen Sizes vous aide à trouver rapidement les spécifications d’écran des dispositifs les plus populaires et des moniteurs actuellement sur le marché.

Screen Sizes

Consulter aussi

Les 8 tendances SEO à suivre en 2018

Semblable à d’autres domaines dans l’industrie de la technologie, le référencement naturel (SEO) est en …

Watch Dragon ball super