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

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

“Design is how it works.”—Steve Jobs

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

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

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

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

Oblivion—Bradley Munkowitz

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

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

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

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

USAGE

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

margesgoutièrescolonnes

ligne de base

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

HTML balises sémantiques

CSS classes comportementales

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

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

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

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

section

article

aside

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

section.row

article.column-9 aside.column-3

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

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

exemple de grilles imbriquées

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

responsive layout

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

é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

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

é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

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

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.