Archives des tags : grille

Pas encore de description pour le tag grille. Suggérez à l'administrateur du site de d'y remédier.

Basehold.it — Afficher une ligne de base

Basehold.it permet d’afficher une ligne de base sur vos éléments html (balise html, body ou le container de votre contenu principal) pour faciliter le calage de votre grille verticale, la petite soeur de la grille horizontale, composée de colonnes. Pour l’utiliser, rien de plus simple : il suffit de faire un lien dans un appel de feuille de style, par exemple <link rel="stylesheet" href="http://basehold.it/24"> affichera une ligne de base d’une valeur de 24 pixels. Voulez-vous en savoir plus ?

WordPress Basics et Beyond Basics en version 0.3.2

Le thème WordPress Basics et le thème enfant (Child Theme) Beyond Basics en sont à la version 0.3.2. Certaines modifications sont cosmétiques tandis que d’autres corrigent des bugs plus ou moins ennuyeux. Les trois plus importantes mises à jour concernent : 1) la boucle principale et la seconde boucle situées dans le fichier home.php ; 2) les problèmes d’affichage du formulaire de recherche lorsqu’on utilise le widget de recherche ; et 3) la mise à jour du système de grille avec une version fixe en pixels et une version fluide en pourcentage. 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 ?

Tutoriel grille verticale en CSS par Smashing Magazine

95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès. Voulez-vous en savoir plus ?

Quelques liens sur les Media Queries en CSS3

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage ! Voulez-vous en savoir plus ?

display: table et display: table-cell pour faire une mise en page web ?

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de `float: left` et de `margin-right` pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique. Voulez-vous en savoir plus ?

Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un framework CSS, en mettant en lumière leurs avantages et inconvénients respectifs. Tout naturellement, j’ai voulu les mélanger pour ne garder que le meilleur. Pour faire bonne mesure, j’ai ajouté The Simpler Grid découvert récemment que j’ai ajouté à ma réflexion pour créer un espèce de The Blue «940» Grid Simpler. J’envisage d’utiliser ce système de grille simple et efficace en complément du concentré de bonnes pratiques HTML5 Boilerplate. Voulez-vous en savoir plus ?

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière. Voulez-vous en savoir plus ?

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé). Voulez-vous en savoir plus ?