boostez vos layout avec css3
Post on 12-Apr-2017
1.148 Views
Preview:
TRANSCRIPT
Boostez vos mises en page avec CSS3
Mathieu PARISOTDéveloppeur Web et Java - Formateur
http://matparisot.fr
@matparisot
https://www.google.com/+ParisotMathieu
http://humantalks.com http://brownbaglunch.fr
« Houston, we have a problem… »
Tom Hanks Jack Swigert
CSS est arrivé en 1996…
CSS est arrivé en 1996…
CSS est arrivé en 1996…
… et on bricole toujours pour faire nos mises pages !
« Portenawak, moi j’y arrive très bien ! »
Un développeur anonyme
<table> <tr> <td colspan="2"></td> <td style="width:33%;"></td> <td style="width:50%;"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr></table>
<div class="grid"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div></div>
.table { display: table;}.row { display: table-row;}.cell { display: table-cell;}
<div class="container"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div><div class="container"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div>
.cell { float: left;}/* clearfix... */.container:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
<div class="container"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div><div class="container"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div>
.cell { display: inline-block;}
Qu’est ce qu’il se passe lorsqu’on n’a plus de place ?
Comment je gère les tailles des colonnes ?
Quid du chevauchement ?
Laquelle de ces solutions je prends ?
Quels sont les effets de bords ?
Etc.
<div class="row"> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div></div><div class="row"> <div class="col-6"></div> <div class="col-3"></div> <div class="col-3"></div></div>
+ de 600 lignes de CSS…
Et si je veux changer le layout sur mobile ?
<div class="row"> <div class="col-xs-6 col-md-4 col-sm-12"></div> <div class="col-xs-3 col-md-4 col-sm-12"></div> <div class="col-xs-3 col-md-4 col-sm-12"></div></div>
CSS Columns
CSS Shapes
CSS Regions
CSS Grid Layout
FlexBox
Changer l’orientation1
2
3
1 2 3
Ligne
Colonne
Changer l’ordre
1 3 2
Aligner et répartir
1 3
2
http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/
CSS ColumnsMettre du texte sur plusieurs colonnes
<div class="columns"> Lorem ipsum dolor...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque pharetra orci, a vulputate arcu consequat ac. Curabitur eu volutpat nulla, in pretium quam. Aliquam maximus at ipsum eget semper. Donec vehicula laoreet elit, id ultricies ipsum aliquam at. Sed turpis mauris, varius vel urna at, fermentum luctus nisi. Cras placerat mauris quis dolor maximus, ac consectetur lectus iaculis. Duis volutpat vestibulum est, non hendrerit lorem laoreet tincidunt. Quisque egestas sed eros at fermentum. Donec vitae felis lobortis eros luctus malesuada. Maecenas sem libero, egestas ac lacus ac, varius cursus nunc. Phasellus lectus est, posuere non mi ut, maximus facilisis erat. Sed in nibh ultricies, gravida tortor sit amet, sodales mauris. Integer sed lacinia nunc, sed vulputate nisi.Curabitur suscipit elementum lectus, a commodo orci ornare vitae. Vivamus vestibulum turpis quam. Quisque sagittis tellus non mollis congue. Nullam sagittis hendrerit erat, tempus suscipit arcu faucibus dapibus. Vestibulum egestas dapibus mi ac consequat. Phasellus a metus in felis lobortis suscipit id sit amet nunc. Proin eu posuere elit. In libero nisl, tempor a quam at, facilisis dignissim nisl. Nullam imperdiet vehicula tellus, id condimentum erat pretium a. Maecenas efficitur lacus in erat aliquet maximus. Phasellus ornare tellus non interdum condimentum. Nam eget ante elit. Donec vehicula non elit non pulvinar. Nam convallis tellus et tincidunt mattis.Duis semper nibh vel sollicitudin semper. In rutrum libero quis justo dictum sagittis. Sed pharetra dolor nec mi pellentesque, id tincidunt ex dignissim. Donec aliquet gravida sagittis. Suspendisse a vestibulum tellus. Fusce venenatis bibendum magna, sed sodales arcu auctor pellentesque. Praesent sed cursus augue, vitae rutrum diam. Cras id ex arcu. Vivamus malesuada nisi tortor, sed fermentum dui luctus eget.In finibus augue sed faucibus dictum. Vestibulum varius, dui ac fringilla tempus, lorem ligula accumsan orci, quis faucibus metus nisl fringilla lorem. Nunc scelerisque, tellus eget congue luctus, leo lorem mattis enim, eget pretium est elit id ante. Vestibulum lobortis tellus id ornare maximus. Phasellus gravida sollicitudin vehicula. Nulla tristique mi magna, id vulputate diam ornare ut. Duis id nisi non mauris convallis congue. Etiam accumsan nec magna eu fermentum. Praesent eget pulvinar est, a tempus odio. Proin id urna euismod, mollis velit quis, laoreet risus.
.columns { column-count: 4; column-width: 100px; /* ou columns: 4 100px; */}
<div class="columns"> <h1>Lorem ipsum !</h1> Lorem ipsum dolor sit amet…
<blockquote> Aenean ut massa... </blockquote> …</div>
.columns { column-count: 4; column-width: 100px; column-gap: 50px; column-rule: 3px dashed lightgrey;}
.columns h1 { column-span: all; text-align: center;}
.columns blockquote { column-break-before: always; font-style: italic;}
CSS ShapesChanger la forme des blocs
<div class="content"> a a a a a a a a a a a a a …</div>
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
.content { shape-inside: circle();
}
.content { shape-inside: circle(); float: left;
}
.content { shape-inside: circle(); float: left; height: 10em; width: 15em;}
<div class="shape"></div><div class="content"> a a a a a a a a a a a a a …</div>
.shape { shape-outside: circle();
}
.shape { shape-outside: circle(); float: left; height: 10em; width: 15em;
}
.shape { shape-outside: circle(); float: left; height: 10em; width: 15em; background-color:lightgrey;}
circle() ellipse() polygon()
CSS RegionsGérer les débordements
<div class="content">Lorem ipsum…</div><div class="ads">Publicités !</div>
<div class="content">Lorem ipsum…</div><div class="intro"></div><div class="ads">Publicités !</div><div class="region"></div>
<div class="content">Lorem ipsum…</div><div class="intro"></div><div class="ads">Publicités !</div><div class="region"></div>
.content { flow-into: myContent;}
.content { flow-into: myContent;}
.intro { height: 100px; flow-from: myContent;}
.content { flow-into: myContent;}
.intro { height: 100px; flow-from: myContent;}
.region { flow-from: myContent;}
Intro
Ads
Region
CSS Grid LayoutLe futur de vos mises en page
<table></table>
FlexBox
Mais ça ne suffit pas !
<div class="row"> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div></div><div class="row"> <div class="col-6"></div> <div class="col-3"></div> <div class="col-3"></div></div>
Chaque ligne est dans un conteneur…
<div class="row"> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div> <div class="col-3"></div></div><div class="row"> <div class="col-6"></div> <div class="col-3"></div> <div class="col-3"></div></div>
Peut-on se passer de ces conteneurs ?
(Sans Javascript…)
CSS Grid Layout
display: grid;
<div class="container"> <div class="block1">Bloc 1</div> <div class="block2">Bloc 2</div> <div class="block3">Bloc 3</div> <div class="block4">Bloc 4</div></div>
.container { display: grid;}
.block1 { grid-row: 1; grid-column: 1;}
.block2 { grid-row: 1; grid-column: 2;}
.block3 { grid-row: 2; grid-column: 1;}
.block4 { grid-row: 2; grid-column: 2;}
.container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 200px 200px;}
fr : fraction de l’espace restantmin-content : taille de l'élément le plus petitmax-content : taille de l'élément le plus grandfit-content : équivalent de “auto”
Nouvelles unités (uniquement pour Grid Layout)
Alignements unifiés(version simplifiée…)
justify-xxx : Sens principalalign-xxx : Sens secondaire
justify-xxx : Sens principal Horizontalalign-xxx : Sens secondaire Vertical
xxx-self : Aligne un bloc dans son parentxxx-items : Alignement par défaut des blocs dans la grillexxx-content : Alignement de la grille dans son parent
center : aligne le bloc au milieu de l'axestart : aligne le bloc au début de l'axe (gauche ou haut)end : aligne le bloc à la fin de l'axe (droite ou bas)
.block1 { grid-row: 1; grid-column: 1; justify-self: center; align-self: center;}
.block2 { grid-row: 1; grid-column: 2; justify-self: end; align-self: end;}
grid-column: 2 / span 4;grid-column: span 2 / 2;
.container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px;}
.block4 { grid-row: 2; grid-column: 2 / span 2;}
.container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px;}
.block4 { grid-row: 2; grid-column: 2 / span 2;}
.container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px;}
.block4 { grid-row: 2; grid-column: 2 / span 2;}
Grille virtuelle
La killer feature ?
.block1 { grid-area: bloc1;}
.block2 { grid-area: bloc2;}
.block3 { grid-area: bloc3;}
.block4 { grid-area: bloc4;}
.container { dis play: grid; grid-columns: 200px 1fr 50px; grid-rows: 50px 50px; grid-template-areas: "bloc1 bloc2 ." "bloc3 bloc4 bloc4";}
Implémentation dans Firefox (et nouvelles syntaxe dans Edge ?)
Sous-grilles imbriquées avec syntaxe simplifiée
Répéter des configuration de Cellules
Cellules nomées
.container { display: grid; grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr (col) ) (gutter); grid-template-rows: repeat(5, 100px);}
.block { grid-column: 3; grid-row: 2 / span 5; display: grid; grid: subgrid;}
.container { display: grid; grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr (col) ) (gutter); grid-template-rows: repeat(5, 100px);}
.block { grid-column: 3; grid-row: 2 / span 5; display: grid; grid: subgrid;}
.container { display: grid; grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter); grid-template-rows: repeat(5, 100px);}
.block { grid-column: 3; grid-row: 2 / span 5; display: grid; grid: subgrid;}
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
Syntaxe de base super simple (une fois les alignements compris…)
Syntaxe avancée très puissante
Un seul conteneur global
Facile de ré-agencer les blocs
Nouvelles unités de tailles super pratiques
La conclusion
column-count: 4;column-width: 100px;column-gap: 50px;column-rule: 3px dashed; column-span: all;
shape-inside: circle();shape-outside: polygon();
flow-into: myContent;flow-from: myContent;
display: grid;grid-template-columns: 100px 1fr;grid-template-rows: 100px;grid-column: 3;grid-row: 2 / span 5;
Keep it Simple !
CSS a (presque) 20 ans…
On arrive a faire des choses géniales avec…
Imaginez les possibilités avec des outils + modernes…
Testez, expérimentez…
http://matparisot.fr/css-grid-un-controle-total-sur-votre-mise-en-page/
http://matparisot.fr/css3-column-region-shape/
Merci !@matparisot - http://matparisot.fr
http://matparisot.fr/css-grid-un-controle-total-sur-votre-mise-en-page/
http://matparisot.fr/css3-column-region-shape/
http://humantalks.com http://brownbaglunch.fr
top related