Retrouvez la vidéo de la formation en ligne aux grilles CSS sur http://www.hetic.net/actualite/formations/grilles-css-formation-en-ligne-video Nicolas Torres, étudiant à HETIC, la grande école du web, vous présente ce que vous devez savoir sur les grilles CSS à travers cette formation d'une vingtaine de minutes. Vous pouvez retrouver d'autres formations en ligne sur le MOOC d'HETIC : http://www.hetic.net/actualite/marketing

1. Grilles & CSS
par Nicolas Torres

2. DÉFINITION

3. GRILLES & CSS : définition > théorie > usage > ressources
(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.
GRILLE

6. THÉORIE

7. GRILLES & CSS : définition > théorie > usage > ressources
“Design is how it works.”—Steve Jobs

9. GRILLES & CSS : définition > théorie > usage > ressources
La grille a une valeur fonctionnelle avant d’être esthétique.

10. GRILLES & CSS : définition > théorie > usage > ressources
Mais c’est quand même grave stylé…

11. Oblivion—Bradley Munkowitz

12. 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…

13. 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.

14. USAGE

15. GRILLES & CSS : définition > théorie > usage > ressources
colonnes
ligne
de
base
goutières
marges

16. GRILLES & CSS : définition > théorie > usage > ressources
Librairie de classes CSS prêtes à
l’emploi dans une logique OOCSS :
HTML
CSS
balises sémantiques
classes comportementales
exemple : header > h1 .no-margin .text-center .bold

17. GRILLES & CSS : définition > théorie > usage > ressources
12 est le PPCM de 2, 3, 4 et 6

18. GRILLES & CSS : définition > théorie > usage > ressources
section
article
aside

19. GRILLES & CSS : définition > théorie > usage > ressources
section.row
article.column-9
aside.column-3

20. GRILLES & CSS : définition > théorie > usage > ressources
exemple de grilles imbriquées

21. GRILLES & CSS : définition > théorie > usage > ressources
responsive layout

22. GRILLES & CSS : définition > théorie > usage > ressources
px
a
8
0.5
a
9
0.563
a
10
0.625
a
11
0.688
a
12
0.75
a
14
0.875
a
16
1
a
échelle typographique
em
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

23. GRILLES & CSS : définition > théorie > usage > ressources
px
a
a
5
a
8
a
échelle de Fibonacci
3
13
a
21
a
34
a
55
a
89

26. RESSOURCES

27. GRILLES & CSS : définition > théorie > usage > ressources
FRAMEWORKS
LECTURE
Bootstrap getbootstrap.com
Foundation foundation.zurb.com
Ingrid piira.se/projects/ingrid
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
OUTILS
Basehold basehold.it
Gridulator gridulator.com
Typecast typecast.com
OUVRAGES
Webgrids Anne-Sophie Fradier
Typo et Web Aurélien Foutoyet

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

29. Merci.