1. Positionnement CSS :
l’avenir du futur
13 novembre 2012
Raphaël Goetter
Cheerleader Alsacréations

2. Futur antérieur
▪ CSS3 Multicolumns

3. Multicolumns

4. Multi-columns

5. Multi-columns

6. Distribution

7. Listes ordonnées

8. CSS Multi-columns

9. Futur du subjonctif
▪ flexible box model
▪ grid layout model
▪ regions
▪ exclusions

10. Flexbox

12. Flex en action

13. Lignes et Colonnes

14. Reverse

15. Fluidité

16. Alignements

18. Ordre d'affichage

19. CSS Flexbox

20. Grid Layout

21. CSS3 Grid Layout
« Représentation virtuelle composée
de lignes, de colonnes et de cellules. »

22. body {
display: grid Et hop !
}
La Grille

23. body {
display: grid ;
grid-columns: 250px 1fr;
}
Colonnes

24. body {
display: grid ;
grid-columns: 250px 1fr;
}
nav {
grid-column: 1;
}
section {
grid-column: 2;
}
Colonnes

25. body {
display: grid ;
grid-columns: 250px 1fr;
grid-rows: 100px 300px;
}
nav {
grid-column: 1;
grid-row: 1;
}
article {
grid-column: 1;
grid-row: 2;
}
…

26. body { correspond à
10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
display: grid ;
grid-columns: 10px (1fr 10px)[4];
}
…
Répétitions

27. body {
display: grid;
grid-columns: 250px 1fr;
grid-rows: 100px 300px;
}
header {
grid-column: 1;
grid-row: 1;
grid-column-span: 2;
}
…
Distribution

28. body {
display: grid;
Template
grid-template: "hh" syntax
"nc"
"ff";
}
header {
grid-cell: "h";
}
nav {
grid-cell: "n";
}
…
Template

29. section {
grid-row-align: center;
}
article {
grid-column-align: center;
}
aside {
grid-row-align: center;
grid-column-align: center;
}
Alignements

30. body { body {
display: grid; display: grid;
grid-template: "abcd"; grid-template:
} "a"
"b"
"c"
"d";
}
Adaptatif !

31. CSS Grid Layout

32. CSS regions

34. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il te plaît. […]</p></div>
<div id="layout">
<p>1)</p>
<p>2)</p>
<img src="img.jpg" alt="">
<p>3)</p>
<p>4)</p>
<p>5)</p>
<p>6)</p>
</div>

35. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il te plaît. […]</p></div>
<div id="layout">
<p>1)</p>
<p>2)</p>
<img src="img.jpg" alt="">
<p>3)</p>
<p>4)</p>
<p>5)</p>
<p>6)</p>
</div>
#origin {
flow-into: kiwi;
}
#layout p {
flow-from: kiwi;
}

37. CSS regions

38. CSS exclusions

39. #exclusion {float :positionned ; wrap-flow: auto}

40. #exclusion {float :positionned ; wrap-flow: both}

41. #exclusion {float :positionned ; shape-inside: circle}
‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’

42. ▪ http://labs.adobe.com/downloads/cssregions.html
Démo !

43. CSS evolution
s n s d ?
me table> ositio e
abl k mn gri ions / S4
fra t lu / C S
< / p p lay bloc ultico b ox reg sions
loa
t dis ine- m flex lu
f
inl exc

44. Crédits photos
▪ http://www.flickr.com/photos/41597157@N00/6919795175/
▪ http://www.flickr.com/photos/8070463@N03/2484684062/
▪ http://www.flickr.com/photos/7762644@N04/2220008689/
▪ http://www.flickr.com/photos/please/131241808/
▪ www.GdeFon.ru (CSS evolution)
▪ http://www.flickr.com/photos/7900943@N06/3084329562/
▪ http://www.toutsaufsarkozy.com

45. Merci !
Raphaël Goetter
www.alsacreations.com
www.goetter.fr
www.ie7nomore.com
@goetter