SlideShare a Scribd company logo
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>
<aside></aside>
<footer></footer>
</section>
</div><!-- .sidebar -->
</div><!-- .container -->
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: green;
}
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
.sidebar {
width: 45%;
float: right;
background: green;
}
.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;
}
.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;
}
.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 {
width: 45%;
}
.main-content {
background: blue;
}
.other-content {
background: purple;
}
.sidebar {
width: 45%;
background: green;
}
.container
.other-content
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
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
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="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>
<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…">
<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…">
<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…">
<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…">
<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>
<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>
<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 -->
<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 -->
<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
separate content
from presentation.
<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
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
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">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
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 -->
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 5 6
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>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site
<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-columns
grid-template-rows
.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-template-rows: auto 1fr 3fr;
}
.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.
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;
grid-template-rows: auto 1fr 3fr;
}
.masthead {
grid-column: 2/4;
}
.masthead
.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.
.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
Naysayer to your left
Looks promising, but
remembering what lines to
target seems tricky… especially
when the site is responsive.
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:
"title title title"
"main header header"
"main sidebar footer";
}
title title title
main
main
header header
sidebar footer
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 {
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 */
RWD anno 2017
.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";
}
}
.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
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 specification as we speak.
* Fun fact: CSS Grid was invented by Microsoft for IE10.
Use feature queries to test for grid support
in the current browser.
@supports (display: grid) { … }
Current recommendation:
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 @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
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

More Related Content

What's hot

html-css
html-csshtml-css
CSS
CSSCSS
Types of Selectors (HTML)
Types of Selectors (HTML)Types of Selectors (HTML)
Types of Selectors (HTML)
Deanne Alcalde
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
 
css.ppt
css.pptcss.ppt
css.ppt
bhasula
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Css Ppt
Css PptCss Ppt
Css Ppt
Hema Prasanth
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
Santhiya Grace
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
Ian Jasper Mangampo
 
CSS
CSS CSS
CSS
Sunil OS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 

What's hot (20)

html-css
html-csshtml-css
html-css
 
CSS
CSSCSS
CSS
 
Types of Selectors (HTML)
Types of Selectors (HTML)Types of Selectors (HTML)
Types of Selectors (HTML)
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
css.ppt
css.pptcss.ppt
css.ppt
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Css ppt
Css pptCss ppt
Css ppt
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
CSS
CSS CSS
CSS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 

Similar to CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017

World of CSS Grid
World of CSS GridWorld of CSS Grid
World of CSS Grid
Elad Shechter
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter
 
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
Jeremy Fuksa
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
Rachel Andrew
 
Class15
Class15Class15
Class15
Jiyeon Lee
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sector
max Firmin
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
imdurgesh
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
Mike Crabb
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Li-Wei Lu
 
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design ExperienceChandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan
 
New css features
New css featuresNew css features
New css features
abdul kalam
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
tsengsite
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
Kate Travers
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
Joao Lucas Santana
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
Lan Nguyen
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
Lan Nguyen
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 

Similar to CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017 (20)

World of CSS Grid
World of CSS GridWorld of CSS Grid
World of CSS Grid
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Dev...
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
Class15
Class15Class15
Class15
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sector
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design ExperienceChandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
 
New css features
New css featuresNew css features
New css features
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignCSMess to OOCSS: Refactoring CSS with Object Oriented Design
CSMess to OOCSS: Refactoring CSS with Object Oriented Design
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
 
Templates81 special document
Templates81 special documentTemplates81 special document
Templates81 special document
 
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 

More from Morten Rand-Hendriksen

How to Build Custom WordPress Blocks
How to Build Custom WordPress BlocksHow to Build Custom WordPress Blocks
How to Build Custom WordPress Blocks
Morten Rand-Hendriksen
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
Morten Rand-Hendriksen
 
How Not to Destroy the World: Ethics in Design and Technology
How Not to Destroy the World: Ethics in Design and TechnologyHow Not to Destroy the World: Ethics in Design and Technology
How Not to Destroy the World: Ethics in Design and Technology
Morten Rand-Hendriksen
 
How to Not Destroy the World - the Ethics of Web Design
How to Not Destroy the World - the Ethics of Web DesignHow to Not Destroy the World - the Ethics of Web Design
How to Not Destroy the World - the Ethics of Web Design
Morten Rand-Hendriksen
 
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Morten Rand-Hendriksen
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
Morten Rand-Hendriksen
 
Empathy and Acceptance in Design and Community
Empathy and Acceptance in Design and CommunityEmpathy and Acceptance in Design and Community
Empathy and Acceptance in Design and Community
Morten Rand-Hendriksen
 
Ethics and the Promise of Open Source
Ethics and the Promise of Open SourceEthics and the Promise of Open Source
Ethics and the Promise of Open Source
Morten Rand-Hendriksen
 
GitHub for the Rest of Us
GitHub for the Rest of UsGitHub for the Rest of Us
GitHub for the Rest of Us
Morten Rand-Hendriksen
 
Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015
Morten Rand-Hendriksen
 
Can WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.noCan WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.no
Morten Rand-Hendriksen
 
Your Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos SuckYour Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos Suck
Morten Rand-Hendriksen
 
Wp meetup custom post types
Wp meetup custom post typesWp meetup custom post types
Wp meetup custom post types
Morten Rand-Hendriksen
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
Morten Rand-Hendriksen
 

More from Morten Rand-Hendriksen (14)

How to Build Custom WordPress Blocks
How to Build Custom WordPress BlocksHow to Build Custom WordPress Blocks
How to Build Custom WordPress Blocks
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
 
How Not to Destroy the World: Ethics in Design and Technology
How Not to Destroy the World: Ethics in Design and TechnologyHow Not to Destroy the World: Ethics in Design and Technology
How Not to Destroy the World: Ethics in Design and Technology
 
How to Not Destroy the World - the Ethics of Web Design
How to Not Destroy the World - the Ethics of Web DesignHow to Not Destroy the World - the Ethics of Web Design
How to Not Destroy the World - the Ethics of Web Design
 
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
Gutenberg and the WordPress of Tomorrow - WordCamp US 2017
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
 
Empathy and Acceptance in Design and Community
Empathy and Acceptance in Design and CommunityEmpathy and Acceptance in Design and Community
Empathy and Acceptance in Design and Community
 
Ethics and the Promise of Open Source
Ethics and the Promise of Open SourceEthics and the Promise of Open Source
Ethics and the Promise of Open Source
 
GitHub for the Rest of Us
GitHub for the Rest of UsGitHub for the Rest of Us
GitHub for the Rest of Us
 
Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015Responsive Images in the Real World - presented at JavaScript Open 2015
Responsive Images in the Real World - presented at JavaScript Open 2015
 
Can WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.noCan WordPress really do that? A case study of vierderduer.no
Can WordPress really do that? A case study of vierderduer.no
 
Your Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos SuckYour Blog is Boring and Your Photos Suck
Your Blog is Boring and Your Photos Suck
 
Wp meetup custom post types
Wp meetup custom post typesWp meetup custom post types
Wp meetup custom post types
 
10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site10 WordPress Theme Hacks to Improve Your Site
10 WordPress Theme Hacks to Improve Your Site
 

Recently uploaded

How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 

Recently uploaded (12)

How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 

CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017