Boostez vos layout avec CSS3

999 vues

Publié le

Découvrez les nouveautés de CSS3 pour améliorer vos mises en page : css columns, css shape, css regions et css grid layout

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
999
Sur SlideShare
0
Issues des intégrations
0
Intégrations
155
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Boostez vos layout avec CSS3

  1. 1. Boostez vos mises en page avec CSS3
  2. 2. Mathieu PARISOT Développeur Web et Java - Formateur http://matparisot.fr @matparisot https://www.google.com/+ParisotMathieu http://humantalks.com http://brownbaglunch.fr
  3. 3. « Houston, we have a problem… » Tom Hanks Jack Swigert
  4. 4. CSS est arrivé en 1996…
  5. 5. CSS est arrivé en 1996…
  6. 6. CSS est arrivé en 1996… … et on bricole toujours pour faire nos mises pages !
  7. 7. « Portenawak, moi j’y arrive très bien ! » Un développeur anonyme
  8. 8. <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>
  9. 9. <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; }
  10. 10. <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; }
  11. 11. <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; }
  12. 12. 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.
  13. 13. <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…
  14. 14. Et si je veux changer le layout sur mobile ?
  15. 15. <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>
  16. 16. CSS Columns CSS Shapes CSS Regions CSS Grid Layout
  17. 17. FlexBox
  18. 18. Changer l’orientation 1 2 3 1 2 3 Ligne Colonne
  19. 19. Changer l’ordre 1 3 2
  20. 20. Aligner et répartir 1 3 2
  21. 21. http://www.smashingmagazine.com/2015/08/flexible- future-for-web-design-with-flexbox/
  22. 22. CSS Columns Mettre du texte sur plusieurs colonnes
  23. 23. <div class="columns"> Lorem ipsum dolor... </div>
  24. 24. 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.
  25. 25. .columns { column-count: 4; column-width: 100px; /* ou columns: 4 100px; */ }
  26. 26. <div class="columns"> <h1>Lorem ipsum !</h1> Lorem ipsum dolor sit amet… <blockquote> Aenean ut massa... </blockquote> … </div>
  27. 27. .columns { column-count: 4; column-width: 100px; column-gap: 50px; column-rule: 3px dashed lightgrey; }
  28. 28. .columns h1 { column-span: all; text-align: center; }
  29. 29. .columns blockquote { column-break-before: always; font-style: italic; }
  30. 30. CSS Shapes Changer la forme des blocs
  31. 31. <div class="content"> a a a a a a a a a a a a a … </div>
  32. 32. 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
  33. 33. .content { shape-inside: circle(); }
  34. 34. .content { shape-inside: circle(); float: left; }
  35. 35. .content { shape-inside: circle(); float: left; height: 10em; width: 15em; }
  36. 36. <div class="shape"></div> <div class="content"> a a a a a a a a a a a a a … </div>
  37. 37. .shape { shape-outside: circle(); }
  38. 38. .shape { shape-outside: circle(); float: left; height: 10em; width: 15em; }
  39. 39. .shape { shape-outside: circle(); float: left; height: 10em; width: 15em; background-color:lightgrey; }
  40. 40. circle() ellipse() polygon()
  41. 41. Démo
  42. 42. CSS Regions Gérer les débordements
  43. 43. <div class="content">Lorem ipsum…</div> <div class="ads">Publicités !</div>
  44. 44. <div class="content">Lorem ipsum…</div> <div class="intro"></div> <div class="ads">Publicités !</div> <div class="region"></div>
  45. 45. <div class="content">Lorem ipsum…</div> <div class="intro"></div> <div class="ads">Publicités !</div> <div class="region"></div>
  46. 46. .content { flow-into: myContent; }
  47. 47. .content { flow-into: myContent; } .intro { height: 100px; flow-from: myContent; }
  48. 48. .content { flow-into: myContent; } .intro { height: 100px; flow-from: myContent; } .region { flow-from: myContent; }
  49. 49. Intro Ads Region
  50. 50. CSS Grid Layout Le futur de vos mises en page
  51. 51. <table></table>
  52. 52. FlexBox
  53. 53. Mais ça ne suffit pas !
  54. 54. <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…
  55. 55. <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>
  56. 56. Peut-on se passer de ces conteneurs ? (Sans Javascript…)
  57. 57. CSS Grid Layout
  58. 58. display: grid;
  59. 59. <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>
  60. 60. .container { display: grid; }
  61. 61. .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; }
  62. 62. .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 200px 200px; }
  63. 63. 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)
  64. 64. Alignements unifiés (version simplifiée…)
  65. 65. justify-xxx : Sens principal align-xxx : Sens secondaire
  66. 66. justify-xxx : Sens principal Horizontal align-xxx : Sens secondaire Vertical
  67. 67. 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
  68. 68. 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)
  69. 69. .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; }
  70. 70. grid-column: 2 / span 4; grid-column: span 2 / 2;
  71. 71. .container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px; } .block4 { grid-row: 2; grid-column: 2 / span 2; }
  72. 72. .container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px; } .block4 { grid-row: 2; grid-column: 2 / span 2; }
  73. 73. .container { display: grid; grid-template-columns: 200px 1fr 50px; grid-template-rows: 50px 50px; } .block4 { grid-row: 2; grid-column: 2 / span 2; }
  74. 74. Grille virtuelle
  75. 75. La killer feature ?
  76. 76. .block1 { grid-area: bloc1; } .block2 { grid-area: bloc2; } .block3 { grid-area: bloc3; } .block4 { grid-area: bloc4; }
  77. 77. .container { dis play: grid; grid-columns: 200px 1fr 50px; grid-rows: 50px 50px; grid-template-areas: "bloc1 bloc2 ." "bloc3 bloc4 bloc4"; }
  78. 78. 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
  79. 79. .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; }
  80. 80. .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; }
  81. 81. .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; }
  82. 82. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  83. 83. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  84. 84. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  85. 85. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  86. 86. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  87. 87. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  88. 88. 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
  89. 89. La conclusion
  90. 90. column-count: 4; column-width: 100px; column-gap: 50px; column-rule: 3px dashed; column-span: all;
  91. 91. shape-inside: circle(); shape-outside: polygon();
  92. 92. flow-into: myContent; flow-from: myContent;
  93. 93. display: grid; grid-template-columns: 100px 1fr; grid-template-rows: 100px; grid-column: 3; grid-row: 2 / span 5;
  94. 94. Keep it Simple !
  95. 95. CSS a (presque) 20 ans…
  96. 96. On arrive a faire des choses géniales avec…
  97. 97. Imaginez les possibilités avec des outils + modernes…
  98. 98. Testez, expérimentez…
  99. 99. http://matparisot.fr/css-grid-un-controle-total-sur-votre-mise-en-page/ http://matparisot.fr/css3-column-region-shape/
  100. 100. 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

×