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…)
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.
-
Ajuster
text-color
en fonction debackground
avec SassDans 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 moistrois 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 ?
-
#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…)
-
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…)