formation grilles & css
DESCRIPTION
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/marketingTRANSCRIPT
![Page 1: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/1.jpg)
Grilles & CSSpar Nicolas Torres
![Page 2: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/2.jpg)
DÉFINITION
![Page 3: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/3.jpg)
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
![Page 4: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/4.jpg)
![Page 5: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/5.jpg)
![Page 6: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/6.jpg)
THÉORIE
![Page 7: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/7.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
“Design is how it works.”—Steve Jobs
![Page 8: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/8.jpg)
![Page 9: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/9.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
La grille a une valeur fonctionnelle avant d’être esthétique.
![Page 10: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/10.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
Mais c’est quand même grave stylé…
![Page 11: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/11.jpg)
Oblivion—Bradley Munkowitz
![Page 12: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/12.jpg)
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…
![Page 13: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/13.jpg)
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.
![Page 14: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/14.jpg)
USAGE
![Page 15: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/15.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
margesgoutièrescolonnes
lignedebase
![Page 16: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/16.jpg)
Librairie de classes CSS prêtes à l’emploi dans une logique OOCSS :
HTMLbalises sémantiques
CSSclasses comportementales
GRILLES & CSS : définition > théorie > usage > ressources
exemple : header > h1 .no-margin .text-center .bold
![Page 17: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/17.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
12 est le PPCM de 2, 3, 4 et 6
![Page 18: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/18.jpg)
section
article
aside
GRILLES & CSS : définition > théorie > usage > ressources
![Page 19: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/19.jpg)
section.row
article.column-9 aside.column-3
GRILLES & CSS : définition > théorie > usage > ressources
![Page 20: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/20.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
exemple de grilles imbriquées
![Page 21: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/21.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
responsive layout
![Page 22: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/22.jpg)
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
![Page 23: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/23.jpg)
GRILLES & CSS : définition > théorie > usage > ressources
échelle de Fibonacci
px
a 3a 5a 8a 13
a 21
a 34
a 55
a 89
![Page 24: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/24.jpg)
![Page 25: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/25.jpg)
![Page 26: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/26.jpg)
RESSOURCES
![Page 27: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/27.jpg)
FRAMEWORKSBootstrap getbootstrap.comFoundation foundation.zurb.comIngrid piira.se/projects/ingrid
OUTILSBasehold basehold.itGridulator gridulator.comTypecast typecast.com
GRILLES & CSS : définition > théorie > usage > ressources
LECTURESmashing Mag smashingmagazine.comA List Apart alistapart.comAslacréations alsacreations.comOpenWeb openweb.eu.orgTypographisme typographisme.netWeb Typography webtypography.netPompage pompage.net
OUVRAGESWebgrids Anne-Sophie FradierTypo et Web Aurélien Foutoyet
![Page 28: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/28.jpg)
La grille garantie la qualité de votre mise en page et la libisibilité de votre contenu.
![Page 29: Formation Grilles & CSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/55599719d8b42ac7648b52a3/html5/thumbnails/29.jpg)
Merci.