front-end

  • Définir une grille de mise en page avec Sass

    Dans mon précédent article, je parlais de mon expérience des pré-procésseurs CSS, et l’une des choses bêtes que Sass/Compass m’a permis de faire facilement et en quelques lignes a été de définir ma grille de mise en page.

    Ma grille de mise en page consistait en six colonnes et des gouttières de 20 pixels entre chaque et un conteneur de 1000 pixels de large. Afin de toujours me laisser le choix de partir sur un nombre de colonne différent, la largeur de colonne est calculée en fonction des autres variables. Voici ce que ça donne : (suite…)


  • Ajuster text-color en fonction de background avec Sass

    Dans un article de The Sass Way, Sebastian Ekström nous montre comment, avec Sass, garantir la meilleure lisibilité possible à vos textes pour une couleur de fond donnée.

    Pour cela, il écrit une fonction Sass qui retournera une couleur différente en fonction de la couleur qui lui sera passée en paramètre. Cette fonction vérifie tout simplement le taux de luminosité de la couleur qu’elle reçoit et retourne une couleur contrastée en conséquence. Si sa luminosité est supérieure à 50%, la fonction retournera une couleur sombre, sinon une couleur claire.

    Lisez son article sur The Sass Way, pour voir comment il fait ça.  Sa solution est toute simple mais efficace.


  • Pré-processeur CSS : nos feuilles de styles faciles

    Il y a déjà plusieurs mois trois ans (trois ans !!), j’avais écris un billet d’humeur à propos tout le foin que l’on faisait sur les pré-processeurs CSS et leur utilisation que je trouvais abusive.

    À l’époque je n’avais testé que LESS, que je trouvais beaucoup plus accessible, moins compliqué à mettre en place en fait. J’avais aussi acheté le bouquin de Kaelig, CSS maintenables, que je n’ai d’ailleurs toujours pas commencé, trop occupé à lire Cinquantes nuances de Grey et autres Walking Dead(suite…)


  • Les boutons de login sociaux, on en parle ?

    Avant-hier je suis tombé sur un article d’Aarron Walter sur le blog de MailChimp expliquant comment ils avaient réussi à réduire significativement le taux d’échec  lors de la connexion de leurs utilisateurs. Aaron explique que même en ayant ajouté des boutons de connexion via Twitter et Facebook, le taux d’échec à la connexion n’avait pas vraiment bougé. C’est lorsqu’ils ont retravaillé leur messages d’erreurs (mauvais login/mauvais mot de passe) qu’il on vu une nette amélioration.

    Il conclu en nous disant, en gros, qu’intégrer des boutons de connexion social c’est un peu le mal, parce que le service que l’on propose à nos utilisateurs et finalement dépendant de Facebook ou Twitter et que le mieux est de fournir un formulaire de connexion maison en béton. (suite…)


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

    Ces derniers mois on parle constamment de pré-processeur 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 ?


  • Moteurs de templates : fausse bonne idée ?

    Aujourd’hui, j’inaugure le « Guest blogging » avec un article vraiment très intéressant de Nicolas Torres (@noclat) sur l’intérêt mais aussi et surtout les « pièges » à éviter lorsqu’on utilise un moteur de templates (comme Smarty par exemple).

    (suite…)


  • #wdfr S02E01 – Responsive Web Design

    Le vendredi 2 septembre, on avait évoqué le responsive web design. Aujourd’hui, le compte rendu de la session a été publié sur le blog du Webdesign Friday.

  • Notifications à la Growl avec jQuery

    Aujourd’hui, on va voir comment mettre en place facilement des notifications utilisateur un peu à la façon de Growl, très connu des Mac users. (suite…)

  • Afficher son flux de photos Instagram via jQuery et JSON

    Vous connaissez cette surement Instagram, cette application iPhone au succès grandissant qui vous permet de partager vos clichés comme un Twitter-like, et en plus de ça leur donner un petit effet digne de Photoshop en a peine quelques minutes? Alors je vais vous donner un petit bout de code qui vous permettra d’afficher vos dernières photos n’importe où! (suite…)

  • Un menu Lava avec jQuery

    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 (suite…)

  • Des boutons qui ont du style (CSS)!

    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.

    (suite…)

  • Astuce: une feuille de style différente selon la taille de la fenêtre

    Aujourd’hui en bossant sur le nouveau design j’ai voulu adapter mon design selon la taille de la fenêtre du navigateur, je vais donc partager cette petite astuce avec vous. Ici je vais utiliser un petit bout de Javascript, et plus précisement du jQuery. (suite…)