Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS GRID
CHANGES
EVERYTHING
(ABOUT WEB LAYOUTS)
Morten Rand-Hendriksen | @mor10 | WordCamp Europe 2017
mor10.com/wceu2017
SLIDES, LINKS, ETC:
@mor10 #CSSGrid #WCEU
Question:
HOW WOULD YOU
CREATE THIS LAYOUT
USING ONLY CSS?
<h1 class="page-title"></h1>
<div class="container">
<main></main>
<div class="sidebar">
<header></header>
<section>
<asid...
Web layouts are broken.
We’ve just refined
how we break them.
.main-content .sidebar
.container
.main-content
.sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
background: blue;
}
.sidebar {
background: gr...
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
...
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
...
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content: 

space-between;
border: 5px solid red;
}
.main-conten...
.main-content .sidebar
.wrap
.other-content
.main-content .sidebar
.wrap
.other-content
.container
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content: 

space-between;
border: 5px solid red;
}
.container {...
This is a hack.
float and flex force us
to create HTML clutter in
the form of wrappers
like the .container
element in this...
This is web
layouts today.
float and flex have
been the two only
options for creating
horizontal layouts
resulting in the ...
http://getbootstrap.com/css/
Paal Joachim Romdahl on Advanced WordPress Group
underscores.me
<div class="page">
<header class="site-header"></header>
<div class="site-content">
<div class="content-area">
<main class...
<div class="site">
<header class="site-header">
<div class="site-content">
<footer class="site-footer">
<div class="conten...
<div class="site">
<header class="site-header">
<div class="site-content">
<footer class="site-footer">
<div class="conten...
<div class="site">
<header class="site-header">
<div class="site-content">
<footer class="site-footer">
<div class="conten...
<div class="site">
<header class="site-header">
<footer class="site-footer">
<aside class="widget-area"><main class="site-...
<div class="page">
<header class="site-header"></header>
<div class="site-content">
<div class="content-area">
<main class...
<div class="page">
<header class="site-header"></header>
<main class="main-content">
<article class="post"></article>
<nav...
<h1 class="page-title"></h1>
<div class="container">
<main></main>
<div class="sidebar">
<header></header>
<section>
<asid...
<h1 class="page-title"></h1>
<div class="container">
<main></main>
<div class="sidebar">
<header></header>
<section>
<asid...
<header></header>
<h1 class="page-title"></h1>
<main></main>
<aside></aside>
<footer></footer>
Problem:
Current tools for web
layout are
content-out and
one-dimensional.
Solution:
Two-dimensional
layout-in tool to
sep...
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sideba...
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sideba...
http://codepen.io/mor10/full/NjeqyX/
• Grid container
• Grid item
• Grid line
• Grid cell
• Grid track
• Grid area
• Grid gap
CSS Grid
Terminology:
Element containing a grid,
defined by setting
display: grid;
Grid container <div class="site">
<header class="masthead">
</...
Element that is a direct
descendant of the grid
container.
Grid item <div class="site">
<header class="masthead">
</header...
Horizontal (row) or
vertical (column) line
separating the grid into
sections.
Grid line
Grid lines are referenced
by number, starting and
ending with the outer
borders of the grid.
Grid line 1
2
3
4
5
6
1 2 3 4...
The intersection between
a grid row and a grid
column. Effectively the
same as a table cell.
Grid cell
Rectangular area between
four specified grid lines.
Grid areas can cover one
or more cells.
Grid area
The space between two or
more adjacent grid lines.
Row tracks are horizontal,
Column tracks vertical.
Grid track
Empty space between grid
tracks (shown in blue).
Commonly called gutters.
Grid gap 1
2
3
4
5
6
1 2 3 4 5 6
1. Define a grid.
2. Place items within the grid.
3. Make world peace.
CSS Grid
in a
Nutshell:
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<...
<div class="site">
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site
Creates a grid container.
display: grid;
.site.site {
display: grid;
}
Draws grid lines. Takes list of length
values (em, px, %, fr, etc.) denoting the
distance between each line.
grid-template...
.site
2 fractions 1 fraction each
2fr 1fr 1fr
.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
.site
Fit content
auto
1 fraction
1fr
3 fractions
3fr
.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-temp...
.masthead .page-
title
.main-
content
.sidebar .footer
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gri...
Applied to grid items. Defines the start
and end grid lines for columns and rows.
grid-column: 1/3;
grid-row: 2/4;
.site
1 2 3 4
Start at column line 2.
End at column line 4.
.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gri...
.masthead
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
}
.masthead {
...
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
}
.masthead {
grid-colum...
Naysayer to your left
Looks promising, but
remembering what lines to
target seems tricky… especially
when the site is resp...
Applied to grid container. Uses a text-
based grid map to apply grid area names
to individual cells.
grid-template-areas
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"ti...
Specifies what grid area the element is
placed within.
grid-area: [area name];
title title title
main
main
header header
sidebar footer
.page-title
.main-content
.sidebar .footer
.masthead
.site.site {...
RWD anno 2017
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title...
.site
.page-title
.main-content
.sidebar .footer
.masthead
.site
.page-title
.main-content
.sidebar
.footer
.masthead
.sit...
http://codepen.io/mor10/full/NjeqyX/
Girds are not inherited by
child elements. Instead we
create nested grids.
Nested grids
Your boss / client
… but older browsers!
http://caniuse.com/#search=grid
Grid is supported in all modern browsers.
Everyone right now
I still think it’s too soon.
https://goo.gl/2AYzFW
The elephants in the room
Internet Explorer 101 and Edge2 lag behind*
1 IE10 uses the original Grid specification.
2 Edge is adopting the modern spec...
Use feature queries to test for grid support
in the current browser.
@supports (display: grid) { … }
Current recommendatio...
Test for grid-area instead,
because Edge lies about grid support.
@supports (grid-area: auto) { … }
My recommendation:
Everyone right now
But wait! That means
the site won’t look the
same in all browsers!!!!!
If it works here…
… it works here as well!
Forcing sites to
look the same across
all browsers is just
a bad habit.
Thanks to RWD we’ve
been serving up
different layouts
for different
browsers since 2010.
Accessible mobile-
first layouts work
well on all screen
widths.
PROGRESSIVE
ENHANCEMENT
1. Build accessible mobile-first
layout without grid.
2. Use mobile-first layout as
fallback for all browsers.
3. Use @suppo...
Your path to CSS Grid:
Firefox has a
grid inspector!
https://goo.gl/SJmlms
Rachel Andrew’s
Grid by Example
is doctrine.
https://gridbyexample.com/
MDN has
exhaustive
documentation.
https://goo.gl/wa0Fk9
CSS Tricks has a
Complete Guide
to CSS Grid.
https://goo.gl/Z01gjF
Kuhn, my theme
using CSS grid,
is on GitHub to
give you ideas.
https://goo.gl/URouSh
Building
Production-Ready
CSS Grid Layouts
Today
by yours truly at
Smashing Magazine
https://goo.gl/dae838
Go where you want
the web to go and
the rest will follow.
CSS Grid means you
can finally use
proper grid systems
for your designs!
DESIGNERS
Start using CSS Grid
today even if that
means adding fallbacks
for older browsers.
THEME DEVELOPERS
Cure your Divitis
with a solid dose of
CSS Grid.
FRAMEWORK PEOPLE
This is make or break
time. Gutenberg + CSS
Grid is changing the
game. Get moving.
PAGE BUILDERS
SET BEST
PRACTICES
BE
RESPONSIBLE
BUILD THE
WEB YOU
WISH TO SEE
REPEAT
AFTER
ME:
1. Make it accessible.
2. Make it fancy.
3. Make sure the fancy
doesn’t break
accessibility.
CSS GRID
CHANGES
EVERYTHING
GO GET YOUR GRID ON TODAY!
https://mor10.com/wceu2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
Upcoming SlideShare
Loading in …5
×

CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017

43,140 views

Published on

Slides from the WordCamp Europe presentation by the same name. From the conference website:

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.

In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.

CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

Published in: Internet

CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017

  1. 1. CSS GRID CHANGES EVERYTHING (ABOUT WEB LAYOUTS) Morten Rand-Hendriksen | @mor10 | WordCamp Europe 2017
  2. 2. mor10.com/wceu2017 SLIDES, LINKS, ETC: @mor10 #CSSGrid #WCEU
  3. 3. Question: HOW WOULD YOU CREATE THIS LAYOUT USING ONLY CSS?
  4. 4. <h1 class="page-title"></h1> <div class="container"> <main></main> <div class="sidebar"> <header></header> <section> <aside></aside> <footer></footer> </section> </div><!-- .sidebar --> </div><!-- .container -->
  5. 5. Web layouts are broken. We’ve just refined how we break them.
  6. 6. .main-content .sidebar .container
  7. 7. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { background: blue; } .sidebar { background: green; }
  8. 8. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { width: 45%; float: left; background: blue; } .sidebar { width: 45%; float: right; background: green; }
  9. 9. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { width: 45%; float: left; background: blue; } .sidebar { width: 45%; float: right; background: green; } /* Clearfix */ .wrap:after { content: ""; display: table; clear: both; }
  10. 10. .main-content .sidebar .wrap.wrap { display: flex; justify-content: 
 space-between; border: 5px solid red; } .main-content { width: 45%; background: blue; } .sidebar { width: 45%; background: green; }
  11. 11. .main-content .sidebar .wrap .other-content
  12. 12. .main-content .sidebar .wrap .other-content .container
  13. 13. .main-content .sidebar .wrap.wrap { display: flex; justify-content: 
 space-between; border: 5px solid red; } .container { width: 45%; } .main-content { background: blue; } .other-content { background: purple; } .sidebar { width: 45%; background: green; } .container .other-content
  14. 14. This is a hack. float and flex force us to create HTML clutter in the form of wrappers like the .container element in this example. .main-content .sidebar .wrap .container .other-content
  15. 15. This is web layouts today. float and flex have been the two only options for creating horizontal layouts resulting in the web suffering from a severe case of Divitis. .main-content .sidebar .wrap .container .other-content
  16. 16. http://getbootstrap.com/css/
  17. 17. Paal Joachim Romdahl on Advanced WordPress Group
  18. 18. underscores.me
  19. 19. <div class="page"> <header class="site-header"></header> <div class="site-content"> <div class="content-area"> <main class="main-content"> <article class="post"></article> <nav class="post-navigation"></nav> <div class="comments-area"></div> </main> </div> <aside class="widget-area"></aside> </div> <footer class="site-footer"></footer> </div>
  20. 20. <div class="site"> <header class="site-header"> <div class="site-content"> <footer class="site-footer"> <div class="content-area"> <aside class="widget-area"> <main class="site-main"> <article class="post"> <nav class="post-nav…"> <div class="comments…">
  21. 21. <div class="site"> <header class="site-header"> <div class="site-content"> <footer class="site-footer"> <div class="content-area"> <aside class="widget-area"> <main class="site-main"> <article class="post"> <nav class="post-nav…"> <div class="comments…">
  22. 22. <div class="site"> <header class="site-header"> <div class="site-content"> <footer class="site-footer"> <div class="content-area"> <aside class="widget-area"> <main class="site-main"> <article class="post"> <nav class="post-nav…"> <div class="comments…">
  23. 23. <div class="site"> <header class="site-header"> <footer class="site-footer"> <aside class="widget-area"><main class="site-main"> <article class="post"> <nav class="post-nav…"> <div class="comments…">
  24. 24. <div class="page"> <header class="site-header"></header> <div class="site-content"> <div class="content-area"> <main class="main-content"> <article class="post"></article> <nav class="post-navigation"></nav> <div class="comments-area"></div> </main> </div> <aside class="widget-area"></aside> </div> <footer class="site-footer"></footer> </div>
  25. 25. <div class="page"> <header class="site-header"></header> <main class="main-content"> <article class="post"></article> <nav class="post-navigation"></nav> <div class="comments-area"></div> </main> <aside class="widget-area"></aside> <footer class="site-footer"></footer> </div>
  26. 26. <h1 class="page-title"></h1> <div class="container"> <main></main> <div class="sidebar"> <header></header> <section> <aside></aside> <footer></footer> </section> </div><!-- .sidebar --> </div><!-- .container -->
  27. 27. <h1 class="page-title"></h1> <div class="container"> <main></main> <div class="sidebar"> <header></header> <section> <aside></aside> <footer></footer> </section> </div><!-- .sidebar --> </div><!-- .container -->
  28. 28. <header></header> <h1 class="page-title"></h1> <main></main> <aside></aside> <footer></footer>
  29. 29. Problem: Current tools for web layout are content-out and one-dimensional. Solution: Two-dimensional layout-in tool to separate content from presentation.
  30. 30. <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> .masthead .page-title .main-content .sidebar .footer
  31. 31. <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer>
  32. 32. http://codepen.io/mor10/full/NjeqyX/
  33. 33. • Grid container • Grid item • Grid line • Grid cell • Grid track • Grid area • Grid gap CSS Grid Terminology:
  34. 34. Element containing a grid, defined by setting display: grid; Grid container <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div><!-- .site -->
  35. 35. Element that is a direct descendant of the grid container. Grid item <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div><!-- .site -->
  36. 36. Horizontal (row) or vertical (column) line separating the grid into sections. Grid line
  37. 37. Grid lines are referenced by number, starting and ending with the outer borders of the grid. Grid line 1 2 3 4 5 6 1 2 3 4 5 6
  38. 38. The intersection between a grid row and a grid column. Effectively the same as a table cell. Grid cell
  39. 39. Rectangular area between four specified grid lines. Grid areas can cover one or more cells. Grid area
  40. 40. The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical. Grid track
  41. 41. Empty space between grid tracks (shown in blue). Commonly called gutters. Grid gap 1 2 3 4 5 6 1 2 3 4 5 6
  42. 42. 1. Define a grid. 2. Place items within the grid. 3. Make world peace. CSS Grid in a Nutshell:
  43. 43. <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div><!-- .site --> .masthead .page-title .main-content .sidebar .footer .site
  44. 44. <div class="site"> </div><!-- .site --> .masthead .page-title .main-content .sidebar .footer .site
  45. 45. Creates a grid container. display: grid;
  46. 46. .site.site { display: grid; }
  47. 47. Draws grid lines. Takes list of length values (em, px, %, fr, etc.) denoting the distance between each line. grid-template-columns grid-template-rows
  48. 48. .site 2 fractions 1 fraction each 2fr 1fr 1fr .site { display: grid; grid-template-columns: 2fr 1fr 1fr; }
  49. 49. .site Fit content auto 1 fraction 1fr 3 fractions 3fr .site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; }
  50. 50. .masthead .page- title .main- content .sidebar .footer .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; } Grid items automatically populate grid from top left to bottom right based on HTML source order.
  51. 51. Applied to grid items. Defines the start and end grid lines for columns and rows. grid-column: 1/3; grid-row: 2/4;
  52. 52. .site 1 2 3 4 Start at column line 2. End at column line 4. .site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; } .masthead { grid-column: 2/4; } .masthead
  53. 53. .masthead .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; } .masthead { grid-column: 2/4; grid-row: 2/3; } 1 2 3 4 Start at row line 2. End at row line 3.
  54. 54. .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; } .masthead { grid-column: 2/4; grid-row: 2/3; } .page-title { grid-column: 1/4; grid-row: 1/2; } .main-content { grid-column: 1/2; grid-row: 2/4; } /* etc etc */ 1 2 3 4 1 2 3 4 .page-title .main-content .sidebar .footer .masthead
  55. 55. Naysayer to your left Looks promising, but remembering what lines to target seems tricky… especially when the site is responsive.
  56. 56. Applied to grid container. Uses a text- based grid map to apply grid area names to individual cells. grid-template-areas
  57. 57. .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; } title title title main main header header sidebar footer
  58. 58. Specifies what grid area the element is placed within. grid-area: [area name];
  59. 59. title title title main main header header sidebar footer .page-title .main-content .sidebar .footer .masthead .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; } .masthead { grid-area: header; } .page-title { grid-area: title; } .main-content { grid-area: main; } /* etc etc */
  60. 60. RWD anno 2017
  61. 61. .site { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title" "main header" "main sidebar"; } .masthead { grid-area: header; } .page-title { grid-area: title; } .main-content { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } @media screen and (min-width: 34em) { .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; } }
  62. 62. .site .page-title .main-content .sidebar .footer .masthead .site .page-title .main-content .sidebar .footer .masthead .site .masthead .page-title .main-content .sidebar .footer No grid Two-column grid Three-column grid
  63. 63. http://codepen.io/mor10/full/NjeqyX/
  64. 64. Girds are not inherited by child elements. Instead we create nested grids. Nested grids
  65. 65. Your boss / client … but older browsers!
  66. 66. http://caniuse.com/#search=grid Grid is supported in all modern browsers.
  67. 67. Everyone right now I still think it’s too soon.
  68. 68. https://goo.gl/2AYzFW
  69. 69. The elephants in the room
  70. 70. Internet Explorer 101 and Edge2 lag behind* 1 IE10 uses the original Grid specification. 2 Edge is adopting the modern specification as we speak. * Fun fact: CSS Grid was invented by Microsoft for IE10.
  71. 71. Use feature queries to test for grid support in the current browser. @supports (display: grid) { … } Current recommendation:
  72. 72. Test for grid-area instead, because Edge lies about grid support. @supports (grid-area: auto) { … } My recommendation:
  73. 73. Everyone right now But wait! That means the site won’t look the same in all browsers!!!!!
  74. 74. If it works here… … it works here as well!
  75. 75. Forcing sites to look the same across all browsers is just a bad habit.
  76. 76. Thanks to RWD we’ve been serving up different layouts for different browsers since 2010.
  77. 77. Accessible mobile- first layouts work well on all screen widths.
  78. 78. PROGRESSIVE ENHANCEMENT
  79. 79. 1. Build accessible mobile-first layout without grid. 2. Use mobile-first layout as fallback for all browsers. 3. Use @supports to detect grid support. 4. At the appropriate breakpoint, create layout with grid and grid-areas. 5. Explore new layouts as viewport widens. CSS Grid: A Practical Approach for Today
  80. 80. Your path to CSS Grid:
  81. 81. Firefox has a grid inspector! https://goo.gl/SJmlms
  82. 82. Rachel Andrew’s Grid by Example is doctrine. https://gridbyexample.com/
  83. 83. MDN has exhaustive documentation. https://goo.gl/wa0Fk9
  84. 84. CSS Tricks has a Complete Guide to CSS Grid. https://goo.gl/Z01gjF
  85. 85. Kuhn, my theme using CSS grid, is on GitHub to give you ideas. https://goo.gl/URouSh
  86. 86. Building Production-Ready CSS Grid Layouts Today by yours truly at Smashing Magazine https://goo.gl/dae838
  87. 87. Go where you want the web to go and the rest will follow.
  88. 88. CSS Grid means you can finally use proper grid systems for your designs! DESIGNERS
  89. 89. Start using CSS Grid today even if that means adding fallbacks for older browsers. THEME DEVELOPERS
  90. 90. Cure your Divitis with a solid dose of CSS Grid. FRAMEWORK PEOPLE
  91. 91. This is make or break time. Gutenberg + CSS Grid is changing the game. Get moving. PAGE BUILDERS
  92. 92. SET BEST PRACTICES
  93. 93. BE RESPONSIBLE
  94. 94. BUILD THE WEB YOU WISH TO SEE
  95. 95. REPEAT AFTER ME:
  96. 96. 1. Make it accessible. 2. Make it fancy. 3. Make sure the fancy doesn’t break accessibility.
  97. 97. CSS GRID CHANGES EVERYTHING GO GET YOUR GRID ON TODAY! https://mor10.com/wceu2017

×