Slide 1

Slide 1 text

Layout Workshop Jen Simmons June 2016 Internet: MSFTOPEN … no password

Slide 2

Slide 2 text

Hello

Slide 3

Slide 3 text

Multicolumn

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

article { max-width: 500px; margin: 0 auto; }

Slide 7

Slide 7 text

article { column-count: 2; column-gap: 2em; }

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

article { // column-count: 2; column-width: 200px; column-gap: 2em; }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

img { width: 100%; } article { column-width: 200px; column-gap: 2em; column-rule: 
 1px solid #444; }

Slide 13

Slide 13 text

CSS Shapes

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

labs.jensimmons.com

Slide 16

Slide 16 text

img { float: left; shape-outside: circle(); }

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Jeremy Keith

Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft.

Slide 19

Slide 19 text

img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

Slide 20

Slide 20 text

img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }

Slide 21

Slide 21 text

img { float: left; shape-outside: ellipse(); }

Slide 22

Slide 22 text

img.grapes { float: left; shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%, 0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

shape-outside: circle(); shape-outside: ellipse(); shape-outside: ellipse(25% 50%); shape-outside: border-box; shape-outside: margin-box; shape-outside: inset(0px round 120px) border-box; shape-outside: url(http://example.com/image.jpg); attr >> 0% shape-margin: 30px; shape-image-threshold: 0.5;

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

1 2 3

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

A Headline That’s Rotated

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

“This is a fancy pull-quote that could be very big.”

Slide 44

Slide 44 text

Grid

Slide 45

Slide 45 text

drafts.csswg.org/css-grid/

Slide 46

Slide 46 text

Browser Support

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

IE & Edge implementation, by Microsoft IE old spec in IE10+ -ms-* prefix Edge new spec TBA

Slide 50

Slide 50 text

Prefixes

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

SCSS CSS

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

SCSS CSS

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

main { /* autoprefixer: off */ display: grid; grid-template-columns: repeat(12, 60px); grid-gap: 20px; }

Slide 59

Slide 59 text

IE & Edge implementation, by Microsoft IE old spec in IE10+ -ms-* prefix Edge new spec TBA

Slide 60

Slide 60 text

Blink implementation, by Igalia Chrome Chrome Canary Opera Opera Developer “behind a flag”

Slide 61

Slide 61 text

chrome://flags/#enable-experimental-web-platform-features

Slide 62

Slide 62 text

opera://flags/#enable-experimental-web-platform-features

Slide 63

Slide 63 text

Webkit implementation, by Igalia Safari nope Safari Technical Preview yup * Not prefixed! Just Works! No flag!

Slide 64

Slide 64 text

Firefox implementation, by Mozilla “behind a flag” Firefox Firefox 
 Dev Edition Firefox 
 Nightly Just Works

Slide 65

Slide 65 text

about:config layout.css.grid.enabled

Slide 66

Slide 66 text

nightly.mozilla.org

Slide 67

Slide 67 text

addons.mozilla.org/addon/css-grid-inspector

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

labs.jensimmons.com/workshop

Slide 70

Slide 70 text

Feature Query

Slide 71

Slide 71 text

p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }

Slide 72

Slide 72 text

p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }

Slide 73

Slide 73 text

@supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }

Slide 74

Slide 74 text

@supports (property:value) { // a bunch of CSS }

Slide 75

Slide 75 text

// layout using old-technology @supports (display:grid) { // overrides to undo old layout // layout using new-technology }

Slide 76

Slide 76 text

Flexbox Grid Alignment

Slide 77

Slide 77 text

Alignment (lvl3)

Slide 78

Slide 78 text

justify-content align-content justify-self align-self

Slide 79

Slide 79 text

css-tricks.com/snippets/css/a-guide-to-flexbox

Slide 80

Slide 80 text

From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

Slide 81

Slide 81 text

From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

Slide 82

Slide 82 text

flexboxdefense.com flexboxfroggy.com

Slide 83

Slide 83 text

Flexbox vs. Grid

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Grid

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

Grid Container

Slide 101

Slide 101 text

Grid Items

Slide 102

Slide 102 text

item
item
item
this is an anonymous grid item
item
hello word more stuff conclusion

Slide 103

Slide 103 text

… … body { display: grid; }

Slide 104

Slide 104 text

… … body { display: grid; } main { display: grid; }

Slide 105

Slide 105 text

… … body { display: grid; } main { display: grid; } article { display: grid; }

Slide 106

Slide 106 text

… … body { display: grid; } main { display: subgrid; } article { display: subgrid; }

Slide 107

Slide 107 text

Terminology

Slide 108

Slide 108 text

Grid Area Grid Line Grid Track Grid Track Grid Cell Grid Line Grid Line Grid Line Grid Line

Slide 109

Slide 109 text

Grid Area Grid Track Grid Track Grid Cell Grid Line Grid Line Grid Line Grid Line Grid Line Grid Gap Grid Gap Grid Gap

Slide 110

Slide 110 text

The Grid vs. The content

Slide 111

Slide 111 text

• Exists in HTML • Can be styled, 
 like anything in HTML

Slide 112

Slide 112 text

• Exists in CSS • Can NOT be styled • It doesn’t exist 
 in the DOM

Slide 113

Slide 113 text

1 2 3 4 5 6 Grid Line Numbers Line Numbers, not track numbers — different than what we are used to! 1 2 3 4 5

Slide 114

Slide 114 text

main { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); } aside { grid-column: 1 / 3; grid-row: 1 / -1; background: yellow; }

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

.grid-container { display: grid; }

Slide 118

Slide 118 text

.grid-container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px 60px; grid-gap: 20px; }

Slide 119

Slide 119 text

labs.jensimmons.com/workshop

Slide 120

Slide 120 text

div { width: 400px; padding: 25px; } What is the size of the
box? Internet Explorer: 400px Everyone else: 450px

Slide 121

Slide 121 text

div { width: 400px; padding: 25px; } What is the calculated size of the box? Everyone: 400px

Slide 122

Slide 122 text

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } some other syntax options (each with different results) grid-template-columns: 1fr 5fr 2.5fr; grid-template-columns: 8em 1fr 300px; grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr; grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(3, 200px 1fr 25%); grid-template-columns: repeat(auto-fill, 10em); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);

Slide 123

Slide 123 text

Units for setting Grid Track Sizes • Length: pX, em, rem, VW, VH… • percent • factor unit: 1fr • auto • measurement of content: min-content or max-content • MINMAX(); …like MINMAX(200px, 1fr);

Slide 124

Slide 124 text

.grid-item { grid-column: 1 / 5; // goes from vertical line 1 to 5 grid-row: 3 / 5 // goes from horizontal line 3 to 5 } some other syntax options (each with different results) grid-column: 3 / 5; // starts at line 3, goes to line 5 grid-column: 3 / span 2; // starts at line 3, spans 2 cells grid-column: span 2 / 5; // spans 2 cells, ends at line 5 grid-column: span 2; // spans 2 cells, placed by algorithm grid-column: 4; // starts at line 4 grid-column: 1 / -1; // starts at line 1, goes to line -1 grid-column: horse / pig;

Slide 125

Slide 125 text

1 2 3 4 5 6 grid-column: 1 / 2; grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;

Slide 126

Slide 126 text

1 6 6 lines 5 tracks 4 gaps 2 3 4 5

Slide 127

Slide 127 text

Grid Line Numbers 1 2 3 4 5 6 -5 -4 -3 -2 -1 -6 -5 -4 -3 -2 -1 1 2 3 4 5 cow horse

Slide 128

Slide 128 text

Explicit Grid vs Implicit Grid

Slide 129

Slide 129 text

by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

Slide 130

Slide 130 text

Sparse & Dense

Slide 131

Slide 131 text

11 8 9 10 7 6 5 1 2 3 4 auto placement algorithm

Slide 132

Slide 132 text

13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

Named Lines

Slide 135

Slide 135 text

grid-template-rows:1fr 1fr 1fr; grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig]; grid-template-rows: repeat(auto-fit, 200px 1fr); grid-template-rows: repeat(auto-fit, [dog] 200px [cat] 1fr); grid-template-rows: repeat(4, 
 [even-start even-end] 80px [odd-start odd-end] 80px);

Slide 136

Slide 136 text

grid-template-rows: repeat(4, 
 [even-start even-end] 80px [odd-start odd-end] 80px); grid-template-rows: repeat(4, unquote("[even-start even-end] 80px [odd-start odd-end] 80px"));

Slide 137

Slide 137 text

Areas

Slide 138

Slide 138 text

Grid Container

Slide 139

Slide 139 text

Grid Items

Slide 140

Slide 140 text

Grid Area Grid Line Grid Track Grid Track Grid Cell Grid Line Grid Line Grid Line Grid Line header

Slide 141

Slide 141 text

www.layout.land