Grilles & CSS
par Nicolas Torres
DÉFINITION
GRILLES & CSS : définition > théorie > usage > ressources

(de mise en page) n. f. : ensemble d’axes verticaux
et horizonta...
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.
s...
GRILLES & CSS : définition > théorie > usage > ressources

La grille structure et rythme alors le contenu, facilitant ainsi...
USAGE
GRILLES & CSS : définition > théorie > usage > ressources

colonnes

ligne
de
base

goutières

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

Librairie de classes CSS prêtes à
l’emploi dans une logique OOCS...
GRILLES & CSS : définition > théorie > usage > ressources

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

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

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

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

px
a

a

5

a

8

a

échelle de Fibonacci

3

13

a

21

a

34

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

FRAMEWORKS

LECTURE

Bootstrap getbootstrap.com
Foundation found...
La grille garantie la qualité de votre mise en page et la libisibilité de
votre contenu.
Merci.
Formation Grilles & CSS
Formation Grilles & CSS
Formation Grilles & CSS
Formation Grilles & CSS
Formation Grilles & CSS
Prochain SlideShare
Chargement dans…5
×

Formation Grilles & CSS

1 732 vues

Publié le

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

Publié dans : Formation
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 732
Sur SlideShare
0
Issues des intégrations
0
Intégrations
688
Actions
Partages
0
Téléchargements
24
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation Grilles & CSS

  1. 1. Grilles & CSS par Nicolas Torres
  2. 2. DÉFINITION
  3. 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
  4. 4. THÉORIE
  5. 5. GRILLES & CSS : définition > théorie > usage > ressources “Design is how it works.”—Steve Jobs
  6. 6. GRILLES & CSS : définition > théorie > usage > ressources La grille a une valeur fonctionnelle avant d’être esthétique.
  7. 7. GRILLES & CSS : définition > théorie > usage > ressources Mais c’est quand même grave stylé…
  8. 8. Oblivion—Bradley Munkowitz
  9. 9. 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…
  10. 10. 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.
  11. 11. USAGE
  12. 12. GRILLES & CSS : définition > théorie > usage > ressources colonnes ligne de base goutières marges
  13. 13. 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
  14. 14. GRILLES & CSS : définition > théorie > usage > ressources 12 est le PPCM de 2, 3, 4 et 6
  15. 15. GRILLES & CSS : définition > théorie > usage > ressources section article aside
  16. 16. GRILLES & CSS : définition > théorie > usage > ressources section.row article.column-9 aside.column-3
  17. 17. GRILLES & CSS : définition > théorie > usage > ressources exemple de grilles imbriquées
  18. 18. GRILLES & CSS : définition > théorie > usage > ressources responsive layout
  19. 19. 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
  20. 20. 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
  21. 21. RESSOURCES
  22. 22. 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
  23. 23. La grille garantie la qualité de votre mise en page et la libisibilité de votre contenu.
  24. 24. Merci.

×