Futur du-positionnement-css

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

description

 

Transcript of Futur du-positionnement-css

Page 1: Futur du-positionnement-css

Positionnement CSS :l’avenir du futur

13 novembre 2012Raphaël GoetterCheerleader Alsacréations

Page 2: Futur du-positionnement-css

Futur antérieur

▪ CSS3 Multicolumns

Page 3: Futur du-positionnement-css

Multicolumns

Page 4: Futur du-positionnement-css

Multi-columns

Page 5: Futur du-positionnement-css

Multi-columns

Page 6: Futur du-positionnement-css

Distribution

Page 7: Futur du-positionnement-css

Listes ordonnées

Page 8: Futur du-positionnement-css

CSS Multi-columns

Page 9: Futur du-positionnement-css

Futur du subjonctif

▪ flexible box model▪ grid layout model▪ regions▪ exclusions

Page 10: Futur du-positionnement-css

Flexbox

Page 11: Futur du-positionnement-css
Page 12: Futur du-positionnement-css

Flex en action

Page 13: Futur du-positionnement-css

Lignes et Colonnes

Page 14: Futur du-positionnement-css

Reverse

Page 15: Futur du-positionnement-css

Fluidité

Page 16: Futur du-positionnement-css

Alignements

Page 17: Futur du-positionnement-css
Page 18: Futur du-positionnement-css

Ordre d'affichage

Page 19: Futur du-positionnement-css

CSS Flexbox

Page 20: Futur du-positionnement-css

Grid Layout

Page 21: Futur du-positionnement-css

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

Page 22: Futur du-positionnement-css

body {display: grid

}Et hop !

La Grille

Page 23: Futur du-positionnement-css

Colonnes

body {display: grid ;grid-columns: 250px 1fr;

}

Page 24: Futur du-positionnement-css

Colonnes

body {display: grid ;grid-columns: 250px 1fr;

}nav { grid-column: 1; }section { grid-column: 2; }

Page 25: Futur du-positionnement-css

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;

}…

Page 26: Futur du-positionnement-css

body {display: grid ;grid-columns: 10px (1fr 10px)[4];

}…

correspond à10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px

Répétitions

Page 27: Futur du-positionnement-css

body {display: grid;grid-columns: 250px 1fr;grid-rows: 100px 300px;

}header {

grid-column: 1;grid-row: 1;grid-column-span: 2;

}…

Distribution

Page 28: Futur du-positionnement-css

body {display: grid;grid-template: "hh"

"nc""ff";

}header {

grid-cell: "h";}nav {

grid-cell: "n";}…

Template syntax

Template

Page 29: Futur du-positionnement-css

section {grid-row-align: center;

}article {

grid-column-align: center;}aside {

grid-row-align: center;grid-column-align: center;

}

Alignements

Page 30: Futur du-positionnement-css

Adaptatif !

body {display: grid;grid-template: "abcd";

}

body {display: grid;grid-template:

"a" "b"

"c""d";

}

Page 31: Futur du-positionnement-css

CSS Grid Layout

Page 32: Futur du-positionnement-css

CSS regions

Page 33: Futur du-positionnement-css
Page 34: Futur du-positionnement-css

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

Page 35: Futur du-positionnement-css

<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;}

Page 36: Futur du-positionnement-css
Page 37: Futur du-positionnement-css

CSS regions

Page 38: Futur du-positionnement-css

CSS exclusions

Page 39: Futur du-positionnement-css

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

Page 40: Futur du-positionnement-css

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

Page 41: Futur du-positionnement-css

#exclusion {float :positionned ; shape-inside: circle}

‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’

Page 42: Futur du-positionnement-css

▪ http://labs.adobe.com/downloads/cssregions.html

Démo !

Page 43: Futur du-positionnement-css

CSS evolution

frames<table>

float / positio

n

display table

inline-blockmultico

lumns

flexbox / gridregions /

exclusions CSS4 ?

Page 44: Futur du-positionnement-css

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

Page 45: Futur du-positionnement-css

Merci !

www.alsacreations.comwww.goetter.frwww.ie7nomore.com@goetter

Raphaël Goetter