Je n’utilise plus de framework CSS

Par

Il y a maintenant presque 3 ans, j’entrais dans la vie active, j’avais un peu « d’expérience » en intégration HTML/CSS et pour gagner du temps j’utilisais le fameux framework CSS 960.gs. Pourquoi était-ce une mauvaise idée ?

Utiliser un framework ne fait absolument pas gagner de temps. En tout cas, de mon point de vue. J’ai passé beaucoup trop de temps à me battre avec les classes prédéfinies lorsque mes designs ne « rentraient » pas dans le moule des 960 pixels.

Franchement, j’ai été con de ne pas avoir le déclic plus tôt. D’autant qu’on commençait à parler de Responsive Web Design à l’époque, j’aurai du voir venir le truc.

C’est vrai, je ne suis pas encore trop rodé en RWD, mais quitter ce framework a fait le plus grand bien à mes CSS, surtout après être tombé sur la grille de mise en page d’Elliot Jay Stocks. Depuis, j’ai adapté sa dizaine de lignes à ma façon de travailler. Je m’autorise même parfois à ne pas du tout utiliser de grille de mise en page.

En tout cas, ces 12 derniers mois m’ont permis de m’améliorer en CSS.

Quel intérêt à utiliser un préprocesseur CSS ?

Par

Ces derniers mois on parle constamment de préprocesseurs CSS tel que LESS ou SASS, en nous disant que ces préprocesseurs révolutionnent l’écriture de nos feuilles de styles. D’accord, mais comment ? Et pourquoi devrait-on les utiliser au détriment de nos bonnes vieilles CSS « de base » ?

Ça n’engage que moi, mais je ne vois pas, à l’heure actuelle, ce que pourrait m’apporter de tels outils. D’accord, on a la possibilité de créer des semblants de fonctions afin d’éviter de  répéter 1000 fois une propriété CSS3 qui n’est pas nativement interprétée par tous les navigateurs.

Mais franchement, en 2012 a-t-on vraiment envie de s’embêter avec les IE 6-8 et autres navigateurs d’anciennes générations ? Et puis même, il y a de très bons outils qui font ça pour nous, si vraiment on veut s’embêter—notamment Prefix free de Lea Verou ou encore Prefixr.

Là où je vois l’intérêt d’un tel outil, c’est pour une famille de sites—du style du réseau Tut+—lorsque le design reste le même et que seul le code couleur change. Ça leur permet effectivement de gagner un temps fou. Je ne sais pas pour vous, mais chaque site Web que je conçois a une « mise en page » qui lui est propre. Mais même ici, si vous avez l’éditeur de texte qui va bien, un simple « chercher/remplacer » fera très bien le boulot.

Bref. En écrivant ce petit billet, j’attends surtout vos avis sur de tels outils. Dans quelle mesure utilisez vous un préprocesseur CSS ? N’avez vous pas peur d’oublier comment écrire de vraies CSS avec ces nouvelles syntaxes, à l’instar de jQuery pour le JavaScript ?

Avancements du projet "Thèmes à monter soi-même"

Par

Mi-octobre je lançais l’idée de proposer des templates HTML5/CSS3 à télécharger gratuitement ici sur le blog, je ne reviendrai pas sur les raisons qui m’ont poussées à entamer cette démarche, ici j’ai envie de vous parler de comment ce présente l’enfant. Lire la suite

Des templates HTML5/CSS3 gratuits, ça vous intéresse ?

Par

Ça viens de me tomber sur le bout du nez à l’instant. Malgré un cursus de développeur Web, j’ai toujours été attiré par le design Web, et encore plus ces deux dernières années, à tel point que je manque quelques fois de motivations quand vient le moment du développement pur est dur, préférant m’attarder sur le design dans Photoshop et son intégration HTML CSS. Mon poste actuel ne me permet pas de passer tout mon temps à concevoir des maquettes fonctionnelles, ergonomiques et jolies, et c’est dommage. Lire la suite

css3button.net – Vos boutons en CSS3, tout simplement

Encore une petite trouvaille en cette fin de semaine (je vais finir par en faire une habitude si ça continue) : au programme aujourd’hui une ressource bien sympa pour créer nos joli bouton d’interface, comme les fameux boutons « Submit » de nos bon amis les formulaires Web.

On le sait tous, préparer nos images pour nos boutons de formulaire, que l’on va potentiellement utiliser un peu partout sur un site, c’est chiant. CSS3 nous sauve un peu la vie, les jolis boutons qu’on claque dans nos maquettes, c’est parfois pas la joie à intégrer.

Alors pourquoi ne pas créer ces boutons, fourrés aux dégradés et autres joyeusetés top-tendance,  directement avec CSS3, sans passer pas Photoshop ? Vous avez demandé un générateur qui vous mâche  les déclarations CSS? tant mieux!

spin.js – votre loader full CSS

Si vous servez du contenu via AJAX sur votre site, vous avez surement mis en place un loader au format GIF afin de montrer qu’un contenu est entrain d’être chargé et qu’il faut patienter quelques instant avant qu’il ne s’affiche. Et si je vous disais que ce petit « sablier » pouvait être remplacé par du simple CSS3, vous me croiriez? Non, alors cliquez voir sur ce lien et vous serez surpris ;)

Patternify – Générateur de pattern CSS

Patternify est une petite application web permettant des dessiner pixel par pixel ses propres motifs rayés afin de les utiliser dans nos feuille de style CSS, sans avoir à ouvrir Photoshop. On pourra enregistrer l’image dans un fichier, ou bien directement utilisé l’image converti en Base64, sans avoir besoin d’une image.

Un menu Lava avec jQuery

Par

Aujourd’hui je vais partager avec vous un petit effet sympa pour rendre un menu de navigation plus attractif. L’effet que l’on va réaliser ici s’appelle « LavaLamp », ou « lampe à lave » en français… Moins sexy du coup… :S Lire la suite

Des boutons qui ont du style (CSS)!

Par

Aujourd’hui pour fêter l’anniversaire du blog, voilà un tutoriel qui vous montrera comment créer des boutons super clean et sympa en full CSS (cf. ici sur le blog), grâce notamment aux nouvelles propriétés introduites dans CSS3. Lire la suite

Ma carte de visite électronique

Par

Et voilà, c’est fait, j’ai enfin une carte de visite électronique sur Internet! Vous pouvez donc voir ça à l’adresse suivante : http://about.angechierchia.com/