Ressources du dimanche (15) : ressources CSS

Joyeuses Pâques à tous ! Aujourd’hui, quelques ressources CSS. Les CSS, tout un programme ! Je deviens une militante des CSS quand je vois le potentiel grandissant qu’elles nous offrent, et en sachant que de grandes choses vont éclore très vite. Dans le développement front-end, il ne s’agit plus pour ce langage CSS d’être restreint à une simple couche de vernis. Les CSS deviennent intimement liées au design UI, sont prêtes à s’associer dans le javascript… Une nouvelle ère des CSS se met en place. Voici quelques ressources CSS qui en témoignent.

Revue web : quelques ressources CSS

Cette fois, il s’agit de faire une revue sur les CSS, véritable trésor pour l’intégration web, bien souvent mésestimé dans le développement front. Voyons donc quelques resources CSS pour voir de quoi elles sont capables. 

1 – Nettoyage des CSS

Certainement vous est-il déjà arrivé de récupérer du code qui n’était pas le vôtre sur un projet qui devait avancer rapidement. Comment faire ? Malgré les recommandations de ne pas casser ce qui fonctionne (…), il nous faut alors faire une revue de code efficace et rapide. Les conseils de Hugo Giraudel pour bien le faire.

Lire l’article de Hugo Giraudel

Article de Giraudel sur le nettoyage des CSS

2 – Les propriétés personnalisées en CSS

Un article pas très facile à comprendre (je le relis encore moi-même pour bien saisir le concept) mais passionnant pour ce qu’il annonce des CSS. Pouvoir contrôler le chargement des CSS à partir de la personnalisation de nos CSS. Quel potentiel ! Pour les contextes en responsive, c’est extrêmement pratique ! Encore un peu en mode expérimental, cette façon de coder pourra donner des capacités assez énormes aux CSS et nous permettre de ne pas faire appel au Javascript pour le même résultat.

Lire l’article de Jake Archibald

Article de Jake Archibald sur les propriétés CSS

3 – Leçon de SVG de Sara Soueidan

Un très bon article de Sara Soueidan à propos de l’utilisation du SVG. Une ressource CSS importante à propos du SVG, format déterminant pour le rendu des pictos, et le responsive. Bien utiliser les caractéristiques de ce format et ne pas se laisser frustrer par ses comportements parfois surprenants malgré nous (quand il ne charge pas)… Quelques conseils avisés pour l’export dans Illustrator qui méritent d’être pris en compte. Merci Sara.

Lire l’article de Sara Soueidan

Article de Sara Soueidan sur les SVG

4 – Les CSS  dans le JS

Une présentation de Christopher Chedeau sur React. Partant du principe d’éviter les classes globales (comme en Js éviter les variables globales) il nous propose une méthode éprouvée chez Facebook pour réécrire de meilleure façon notre code et le rendre plus efficace.

Aller voir cette présentation de Christopher Chedeau

Présentation de Christophe Chedeau sur CSS dans Javascript

 

5 – CSSCO

Des filtres pour nos images faits à 100% en CSS ! Inspirés de ceux de l’application Instagram, ils ont été faits par Lauren Waller. Il suffit d’ajouter la classe correspondant à l’effet que l’on souhaite sur l’image dans notre HTML et le tour est joué. Attention, pour le moment cela n’est pas encore compatible pour IE, Opera Mini. Quant à Safari certains modes de fusion ne marcheront pas (le hue, le saturation, le color, et le luminosity), sans impacter trop les effets de filtres. A voir, à tester.

Aller voir la ressource CSSCO

L'outil CSSCO pour les filtres en CSS

6 – Balloon.css

Simple tooltips made of pure CSS

Un outil plutôt sympa, sans rien de javascript, qui peut nous aider dans nos projets, efficace et léger.

Aller voir Balloon.css

Outil balloon en css

7 – Framework Grd

Et pour terminer e listing de ressources CSS, un framework léger et extrêmement simple, qui a la particularité d’utiliser les flexbox. Toujours utile de partir sur une framework des plus légers quand on développe un projet assez conséquent.

Aller voir le framework Grd

 

Framework Grd

 

Voici donc quelques ressources CSS et articles pour constater la force de  ce langage et ses capacités présentes et futures. N’hésitez pas à donner votre avis, répondre et enrichir cette revue d’articles.

Categories:
Tags:
Date:
  • 28/03/2016
Share:
%d blogueurs aiment cette page :