Dans ce petit journal du web vous trouverez des liens bien frais pour 1) faire ce que vous voulez avec Bootstrap, 2) avoir un aperçu du rendu de votre site dans différents formats mobiles, 3) copier-coller quelques règles CSS pour obtenir des triangles orientés dans les quatre directions sans image, 4) suivre un tutoriel pour intégrer un prototype de page directement dans le navigateur avec le framework CSS Zurb Fondation. Voulez-vous en savoir plus ?
Le blog de l'intégrateur web
EM Calculator : simplifiez vos calculs en em
Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu. Voulez-vous en savoir plus ?
2 vidéos sur le fonctionnement du navigateur (Gecko)
L’amélioration des performances d’affichage des sites web est la nouvelle frontière du développement web. La majorité des articles disponible traite du bon usage des sélecteurs, classes ou identifiants de nos feuilles de style. Pourtant, une des clés de l’optimisation des performances web passe par une meilleure compréhension du fonctionnement du navigateur qui reste peu connu des intégrateurs HTML / CSS. Pour y remédier, voici deux vidéos qui devraient vous en apprendre plus sur Gecko, le moteur de rendu de Mozilla Firefox. Voulez-vous en savoir plus ?
Check your <body> avec le W3C
Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web. Voulez-vous en savoir plus ?
SMACSS — Architecture évolutive et modulaire pour CSS
Il n’existe pas de méthode universelle pour faire un site web. Tout au plus peut-on dégager de la pratique quelques principes de conception pour organiser le code HTML et CSS d’un projet à l’autre. Dans cette optique, Jonathan Snook (@snookca) nous fait profiter de son expérience avec SMACSS. Vous l’aurez compris, SMACSS fait la part belle aux règles CSS que l’auteur a divisé en quatre parties : base, maquette (structure), module et état. Cet article est un bref aperçu de la première partie du livre pour vous donner l’eau à la bouche. Voulez-vous en savoir plus ?
Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
Au menu de ce petit journal du web de Pâques : un mini framework pour gérer les fonctions CRUD en PHP avec un système de pagination en prime, un article pour mieux gérer le chargement des ressources Javascript ou CSS selon le contexte dans WordPress, une série de site sur HTML5 / Javascript / PHP et Ruby à garder sous la souris, un framework HTML / CSS / Javascript qui risque de faire de l’ombre à Bootstrap, from Twitter, un guide stylistique généraliste qui servira en toute occasion, une réflexion sur la navigation dans un contexte mobile avec le Responsive Webdesign, etc. Voulez-vous en savoir plus ?
Framework HTML : Bootstrap, Fondation et HTML5 Boilerplate
Dans la catégorie des frameworks HTML permettant de faciliter la mise en place d’un projet web, Bootstrap, from Twitter s’est rapidement fait une place de choix à côté de HTML5 Boilerplate et de Zurb Fondation. (Je ne parle pas de Blueprint, 960.gs ou de 940.css version fixe ou fluide qui sont plutôt des frameworks CSS pour aligner des blocs sur une grille de mise en page.) Mais au fait, c’est quoi un framework HTML ? Un tel outil devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des projets différents. Voulez-vous en savoir plus ?
940.css version fluide — Grille de mise en page en pourcentage
La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant d’utiliser la grille de 940.css «version fixe» lorsque le .container est réglé sur 940px. Ceci permet de caler les blocs sur la grille fixe placée en background et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée. Voulez-vous en savoir plus ?
940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539. Voulez-vous en savoir plus ?
CSS3 Generator : éditeur de CSS3
CSS3 Generator est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow. Chaque propriété est modifiable grâce à des sélecteurs de couleur, des champs de saisie ou des curseurs dynamiques selon la nature de la propriété CSS. Voulez-vous en savoir plus ?
