grilles&css

Grilles & CSSpar Nicolas Torres

DÉFINITION

GRILLE (de mise en page) n. f. : ensemble d’axes verticaux et horizontaux qui structurent un contenu textuel et/ou iconographique de manière simple et rationnelle.

GRILLES & CSS : définition > théorie > usage > ressources

THÉORIE


“Design is how it works.”—Steve Jobs


La grille a une valeur fonctionnelle avant d’être esthétique.


Mais c’est quand même grave stylé…

Oblivion—Bradley Munkowitz


Les habitudes rendent le contenu plus intelligible et lisible. structure, hiérarchie, typographie, rythme, termes, icônes…


La grille structure et rythme alors le contenu, facilitant ainsi l’analyse subliminale et la recherche d’information.


margesgoutièrescolonnes

ligne de base

Librairie de classes CSS prêtes à l’emploi dans une logique OOCSS :

HTML balises sémantiques

CSS classes comportementales


exemple : header > h1 .no-margin .text-center .bold


12 est le PPCM de 2, 3, 4 et 6

section

article

aside


section.row

article.column-9 aside.column-3



exemple de grilles imbriquées


responsive layout


échelle typographique

px ema 8 0.5a 9 0.563a 10 0.625a 11 0.688a 12 0.75a 14 0.875a 16 1a 18 1.125

a 24 1.5

a 30 1.875

a 36 2.25

a 48 3

a 60 3.75

a 72 4.5


échelle de Fibonacci

px

a 3a 5a 8a 13a 21

a 34

a 55

a 89

RESSOURCES

FRAMEWORKS Bootstrap getbootstrap.com Foundation foundation.zurb.com Ingrid piira.se/projects/ingrid !OUTILS Basehold basehold.it Gridulator gridulator.com Typecast typecast.com


LECTURE Smashing Mag smashingmagazine.com A List Apart alistapart.com Aslacréations alsacreations.com OpenWeb openweb.eu.org Typographisme typographisme.net Web Typography webtypography.net Pompage pompage.net !OUVRAGES Webgrids Anne-Sophie Fradier Typo et Web Aurélien Foutoyet

La grille garantie la qualité de votre mise en page et la libisibilité de votre contenu.

Merci.

grilles&css

Documents