boostez vos layout avec css3

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…

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

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

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

.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()

Démo

http://webplatform.adobe.com/Demo-for-Alice-s-Adventures-in-Wonderland/

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>

.content { flow-into: myContent;}


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


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

.region { flow-from: myContent;}

Intro

Ads

Region

CSS Grid LayoutLe futur de vos mises en page

FlexBox

Mais ça ne suffit pas !


Chaque ligne est dans un conteneur…

Peut-on se passer de ces conteneurs ?

(Sans Javascript…)

CSS Grid Layout

display: grid;

.container { display: grid;}

.block1 { grid-row: 1; grid-column: 1;}




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

Grille virtuelle

La killer feature ?

.block1 { grid-area: bloc1;}




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

(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

boostez vos layout avec css3

Technology