�ݺ�ߣ

Boostez vos mises en page
avec CSS3

Mathieu PARISOT
Dé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…
… et on bricole toujours
pour faire nos mises pages !

« Portenawak,
moi j’y arrive très bien ! »
Un développeur anonyme

<div class="grid">
<div class="row">
<div class="cell"></div>
</div>
<div class="row">
</div>
</div>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}

<div class="container">
</div>
</div>
.cell {
float: left;
}
/* clearfix... */
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

</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>
<div class="row">
</div>
+ de 600 lignes de CSS…

Et si je veux changer le layout sur mobile ?

CSS Columns
CSS Shapes
CSS Regions
CSS Grid Layout

Changer l’orientation
1
2
3
1 2 3
Ligne
Colonne

http://www.smashingmagazine.com/2015/08/flexible-
future-for-web-design-with-flexbox/

CSS Columns
Mettre 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-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 Shapes
Changer la forme des blocs

a a a a a a a a a a a

.content {
shape-inside: circle();
}

.content {
float: left;
}

.content {
float: left;
height: 10em;
width: 15em;
}

.shape {
shape-outside: circle();
}

.shape {
float: left;
height: 10em;
width: 15em;
}

.shape {
float: left;
height: 10em;
width: 15em;
background-color:lightgrey;
}

CSS Regions
Gérer les ��é��ǰ��𳾱�Գٲ�

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

.content {
flow-into: myContent;
}

.content {
}
.intro {
height: 100px;
flow-from: myContent;
}

.content {
}
.intro {
height: 100px;
}
.region {
}

CSS Grid Layout
Le futur de vos mises en page

<div class="row">
</div>
<div class="row">
</div>
Chaque ligne est
dans un conteneur…

Peut-on se passer de
ces conteneurs ?
(Sans Javascript…)

.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 restant
min-content : taille de l'élément le plus petit
max-content : taille de l'élément le plus grand
fit-content : équivalent de “auto”
Nouvelles unités
(uniquement pour Grid Layout)

Alignements unifiés
(version simplifiée…)

justify-xxx : Sens principal
align-xxx : Sens secondaire

justify-xxx : Sens principal Horizontal
align-xxx : Sens secondaire Vertical

xxx-self : Aligne un bloc dans son parent
xxx-items : Alignement par défaut des blocs dans la grille
xxx-content : Alignement de la grille dans son parent

center : aligne le bloc au milieu de l'axe
start : 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;
}

.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;
display: grid;
grid: subgrid;
}

(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

column-count: 4;
column-gap: 50px;
column-rule: 3px dashed;
column-span: all;

shape-outside: polygon();

display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: 100px;
grid-column: 3;

On arrive a faire des
choses géniales avec…

Imaginez les possibilités
avec des outils + modernes…

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

�ݺ�ߣ

Boostez vos layout avec CSS3

More Related Content

Boostez vos layout avec CSS3