Scribd
Upload
13 views113 pages

Deck 024e9f292c9a8ca8

The document discusses modern CSS layout techniques including Flexbox and CSS Grid. It provides an overview of Flexbox, explaining that it is a one-dimensional layout model for distributing space between items and offering alignment capabilities. It also summarizes CSS Grid as being well-suited for dividing a page into major regions and defining size/position relationships between parts of a control. The document encourages starting with Flexbox today since browser support is strong and provides vocabulary and examples to get started. It also references additional Flexbox and Grid resources for learning more.

Uploaded by

michael marco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views113 pages

Deck 024e9f292c9a8ca8

The document discusses modern CSS layout techniques including Flexbox and CSS Grid. It provides an overview of Flexbox, explaining that it is a one-dimensional layout model for distributing space between items and offering alignment capabilities. It also summarizes CSS Grid as being well-suited for dividing a page into major regions and defining size/position relationships between parts of a control. The document encourages starting with Flexbox today since browser support is strong and provides vocabulary and examples to get started. It also references additional Flexbox and Grid resources for learning more.

Uploaded by

michael marco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 113

Modern Layouts:

Flexbox, CSS Grid, and Beyond


michellejl.com
[email protected]
@michellejlevine
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?
Who am I? Why Should You Listen to Me?

michellejl.com
[email protected]
@michellejlevine
@michellejl
A Brief History of the Web
19
91

@michellejlevine http://info.cern.ch/
A Brief History of the Web
19
91

@michellejlevine http://info.cern.ch/
A Brief History of the Web
19

19
91

92

@michellejlevine
A Brief History of the Web
19

19
91

92

@michellejlevine
A Brief History of the Web
19

19
91

92

@michellejlevine
A Brief History of the Web
19

19

19
91

92

94
Håkon Wium Lie published the first draft of the Cascading
1994
HTML Style Sheets proposal

@michellejlevine
A Brief History of the Web
19

19

19

19
91

92

94

95
Håkon Wium Lie published the first draft of the Cascading
1994
HTML Style Sheets proposal

The World Wide Web Consortium (W3C)


1995
became operational

@michellejlevine
A Brief History of the Web
19

19

19

19

19
91

92

94

95

96
Håkon Wium Lie published the first draft of the Cascading
1994
HTML Style Sheets proposal

The World Wide Web Consortium (W3C)


1995
became operational
1996 CSS level 1 emerged as a W3C Recommendation

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19
91

92

94

95

96

98
Håkon Wium Lie published the first draft of the Cascading
1994
HTML Style Sheets proposal

The World Wide Web Consortium (W3C)


1995
became operational
1996 CSS level 1 emerged as a W3C Recommendation

1998 CSS level 2 accepted as W3C Recommendation

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19

20
91

92

94

95

96

98

12

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19

20
91

92

94

95

96

98

12

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19

20
91

92

94

95

96

98

12
Color Level 3

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19

20
91

92

94

95

96

98

12
Color Level 3
Namespaces

@michellejlevine
A Brief History of the Web
19

19

19

19

19

19

20
91

92

94

95

96

98

12
Color Level 3
Namespaces
Selectors Level 3

@michellejlevine
Layouts are basically a mess

@michellejlevine
Layouts are basically a mess

<table>

@michellejlevine
Layouts are basically a mess

<table>
{ display : table }

@michellejlevine
Layouts are basically a mess

<table>
{ display : table }
{ float : right }

@michellejlevine
Layouts are basically a mess

<table>
{ display : table }
{ float : right }
{ position : absolute }

@michellejlevine
Layouts are basically a mess

<table>
{ display : table }
{ float : right }
{ position : absolute }

@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
@michellejlevine
How can we
avoid div soup?
@michellejlevine
{ display: flex }

@michellejlevine
{ display: flex }
The Flexible Box Module, usually referred to
as flexbox, was designed as a one-
dimensional layout model, and as a method
that could offer space distribution between
items in an interface and powerful
alignment capabilities.

@michellejlevine
Can I Start
Today?
@michellejlevine
https://caniuse.com/#search=flexbox

@michellejlevine
https://caniuse.com/#search=flexbox

@michellejlevine
https://caniuse.com/#search=flexbox

@michellejlevine
Flexbox Vocabulary

@michellejlevine
Flexbox Vocabulary

.container {
display: flex;
flex­direction: row | column;
flex­wrap: wrap;
justify­content: space­between;
align­items: stretch;
}

@michellejlevine
Flexbox Vocabulary

.container { .item {
display: flex; order: 1;
flex­direction: row | column; flex­grow: 4;
flex­wrap: wrap; flex­shrink: 1;
justify­content: space­between; flex­basis: 5em;
align­items: stretch; align­self: flex­end;
} }

@michellejlevine
Flexbox Vocabulary

.container { .item {
display: flex; order: 1;
flex­direction: row | column; flex­grow: 4;
flex­wrap: wrap; flex­shrink: 1;
justify­content: space­between; flex­basis: 5em;
align­items: stretch; align­self: flex­end;
} }

flex: 0 1 auto;
@michellejlevine
Let's Try It!
bit.ly/michellejl-grid
Flexbox NavBar

@michellejlevine
More Flexbox!
css-tricks.com/snippets/css/a-guide-to-flexbox/
flexboxfroggy.com/
bennettfeely.com/flexplorer/
{ display: grid }

@michellejlevine
{ display: grid }
CSS Grid Layout excels at dividing a page
into major regions or defining the
relationship in terms of size, position, and
layer, between parts of a control built from
HTML primitives. Grid is for working in two-
dimensions.

@michellejlevine
Can I Start
Today?
@michellejlevine
@michellejlevine https://caniuse.com/#search=grid
@michellejlevine https://caniuse.com/#search=grid
@michellejlevine https://caniuse.com/#search=grid
Fallbacks for
Older Browsers
LayoutLand: Resilient CSS

@michellejlevine https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
.grid {
display: grid;
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
}

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-gap-columns: 10px;
grid-gap-rows: 5px;
}
@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-gap-columns: 10px;
grid-gap-rows: 5px;
}
@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-gap-columns: 10px;
grid-gap-rows: 5px;
}
@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-gap-columns: 10px;
grid-gap-rows: 5px;
}
@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-gap-columns: 10px;
grid-gap-rows: 5px;
}
@michellejlevine
Let's Try It!
bit.ly/michellejl-grid
Grid Layout 1

@michellejlevine
New Grid Units

@michellejlevine
New Grid Units
min­content

@michellejlevine
New Grid Units
min­content
max­content

@michellejlevine
New Grid Units
min­content
max­content
fr

@michellejlevine
New Grid Units
min­content
max­content
fr
minmax( )

@michellejlevine
Explicit Grid vs. Implicit Grid

@michellejlevine https://css-tricks.com/difference-explicit-implicit-grids/
Explicit Grid vs. Implicit Grid

@michellejlevine https://css-tricks.com/difference-explicit-implicit-grids/
@michellejlevine
@michellejlevine
@michellejlevine
1

@michellejlevine
1 2

@michellejlevine
1 2 3

@michellejlevine
1 2 3 4

@michellejlevine
1 2 3 4

-4 -3 -2 -1
@michellejlevine
Let's Try It!
bit.ly/michellejl-grid
Grid Layout 2: Cells
Grid Layout 3: Named Lines
Grid Layout 5: Overlay

@michellejlevine
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 25px);
grid-template-areas: "a a a"
"b b c"
"b b c"
"d d d";
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 25px);
grid-template-areas: "a a a"
"b b c"
"b b c"
"d d d";
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 25px);
grid-template-areas: "a a a"
"b b c"
"b b c"
"d d d";
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 25px);
grid-template-areas: "a a a"
"b b c"
"b b c"
"d d d";
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 25px);
grid-template-areas: "a a a"
"b b c"
"b b c"
"d d d";
Let's Try It!
bit.ly/michellejl-grid
Grid Layout 4: Grid Area

@michellejlevine
Let's Try It!
bit.ly/michellejl-grid
Grid Layout 4: Grid Area

@michellejlevine
No More
Media Queries?
http://labs.jensimmons.com/2016/examples/spices-1.html

@michellejlevine
http://labs.jensimmons.com/2016/examples/spices-1.html

@michellejlevine
http://labs.jensimmons.com/2016/examples/spices-1.html

@michellejlevine
Grid or Flexbox?

@michellejlevine https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
Grid or Flexbox?
or floats??

@michellejlevine https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
Real Examples Please!

@michellejlevine
@michellejlevine http://labs.jensimmons.com/
@michellejlevine http://labs.jensimmons.com/2017/03-008.html
@michellejlevine http://labs.jensimmons.com/2017/01-011.html
More CSS Grid in the Wild:
https://cssgrid.design/

@michellejlevine
Rachel Andrew Jen Simmons
rachelandrew.co.uk/ jensimmons.com/

@rachelandrew @jensimmons

gridbyexample.com/ youtube.com/layoutland

thecssworkshop.com/

csslayout.news/

Know these humans. They are AMAZING.


Read their blogs, newsletters, and books,
checkout their code, learn from their videos.
skl.sh/rachel
Icons from www.flaticon.com

Freepik Freepik Freepik Freepik Freepik Freepik Freepik Freepik

Alfredo
monkik Smashicons Prosymbols Smashicons prettycons srip photo3idea_
Hernandez
studio

@michellejlevine
Links
A Brief History of the Web
CERN: Birth of the Web --> https://home.cern/topics/birth-web
First Website --> http://info.cern.ch/
Line Mode Browser --> http://line-mode.cern.ch/
A brief history of CSS until 2016 --> https://www.w3.org/Style/CSS20/history.html
World Wide Web Consortium --> https://www.w3.org/
W3C Recommendation Track --> https://www.w3.org/2004/02/Process-20040205/tr.html

CSS Frameworks
Bootstrap --> https://getbootstrap.com/
Zerb Foundation --> https://foundation.zurb.com/
Materialize --> https://materializecss.com/
Bulma --> https://bulma.io/
PureCSS --> https://purecss.io/
Milligram --> https://milligram.io/
Blaze UI --> https://www.blazeui.com/
Bourbon --> https://bourbon.io/
Bourbon Neat --> https://neat.bourbon.io/

@michellejlevine
Links
Flexbox

Complete Guide to Flexbox --> https://css-tricks.com/snippets/css/a-guide-to-flexbox/


MDN Flexbox Concepts --> https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
MDN Flexbox Intro --> https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
CSS Reference --> https://cssreference.io/flexbox/
W3C Flexible Box Specs --> https://www.w3.org/TR/css-flexbox-1/
Course: What The Flexbox? --> https://flexbox.io/
Flexbox Froggy --> https://flexboxfroggy.com/

@michellejlevine
Links
CSS Grid

Complete Guide to CSS Grid --> https://css-tricks.com/snippets/css/complete-guide-grid/


MDN Grid Layout --> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
CSS Reference --> https://cssreference.io/css-grid/
W3C Grid Layout Specs --> https://www.w3.org/TR/css-grid-1/
Course: CSS Grid --> https://cssgrid.io/
Grid Garden --> https://cssgridgarden.com/
Learn CSS Grid --> https://learncssgrid.com/
Grid By Example --> https://gridbyexample.com/
Layout Land --> https://www.youtube.com/layoutland
Flexbox or Grid --> https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-
or-flexbox/
Implicit & Explicit Grid --> https://css-tricks.com/difference-explicit-implicit-grids/

@michellejlevine

You might also like