[PPT] - FLEXBOX 1 CHRIS SAUVE 2 LAYOUT STRATEGIES 3 TABLES 4 JUST PowerPoint Presentation

SLIDE 1

FLEXBOX

1

SLIDE 2

CHRIS SAUVE

2

SLIDE 3

LAYOUT STRATEGIES

3

SLIDE 4

TABLES

4

SLIDE 5

JUST DON’T.

5

SLIDE 6

ABSOLUTE POSITIONING

6

SLIDE 7

INLINE BLOCK

7

SLIDE 8

FLOATS

8

SLIDE 9

THINK DIFFERENT

9

SLIDE 10

CONTENT-OUT

LAYOUT

10

SLIDE 11

parent child

1

child

2

child

3

11

SLIDE 12

parent child

1

child

2

child

3

12

SLIDE 13

parent child

2

child

3

child

1

13

SLIDE 14

BROWSER SUPPORT

14

SLIDE 15

YES YES YES 10+ only

‑ms ¡in ¡IE10

YES

even ¡in ¡Mini!

15

SLIDE 16

YES YES YES 10+ only

‑ms ¡in ¡IE10

YES

even ¡in ¡Mini!

CAN I USE SAYS…

93.99%

16

SLIDE 17

PARENT RULES

17

SLIDE 18

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column

18

SLIDE 19

1 2 3

flex-‑direction: ¡row;

19

SLIDE 20

1 2 3

flex-‑direction: ¡column;

20

SLIDE 21

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column

21

SLIDE 22

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column align-‑items: ¡stretch;

22

SLIDE 23

1 2 3

Cross Axis

align-‑items

23

SLIDE 24

1 2 3

align-‑items: ¡stretch; ¡// ¡default

24

SLIDE 25

1 2 3

align-‑items: ¡center;

25

SLIDE 26

1 2 3

align-‑items: ¡flex-‑start;

26

SLIDE 27

1 2 3

align-‑items: ¡flex-‑end;

27

SLIDE 28

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column align-‑items: ¡stretch;

28

SLIDE 29

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column align-‑items: ¡stretch; justify-‑content: ¡center;

29

SLIDE 30

1 2 3

Main Axis

justify-‑content

30

SLIDE 31

1 2 3

justify-‑content: ¡center;

31

SLIDE 32

1 2 3

justify-‑content: ¡flex-‑start;

32

SLIDE 33

1 2 3

justify-‑content: ¡flex-‑end;

33

SLIDE 34

1 2 3

justify-‑content: ¡space-‑between;

34

SLIDE 35

1 2 3

justify-‑content: ¡space-‑around;

35

SLIDE 36

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column align-‑items: ¡stretch; justify-‑content: ¡center;

36

SLIDE 37

display: ¡flex; ¡// ¡or ¡inline-‑flex flex-‑direction: ¡row; ¡// ¡or ¡column align-‑items: ¡stretch; justify-‑content: ¡center; flex-‑wrap: ¡nowrap;

37

SLIDE 38

1 2 3

flex-‑wrap: ¡nowrap;

38

SLIDE 39

1 2 3

flex-‑wrap: ¡wrap;

39

SLIDE 40

CHILD RULES

40

SLIDE 41

flex-‑grow: ¡0; flex-‑shrink: ¡0; flex-‑basis: ¡auto;

41

SLIDE 42

flex-‑basis: ¡<number>; flex-‑basis: ¡auto; width: ¡<number>;

=

42

SLIDE 43

1 2 3

100px 20px 20px 20px

43

SLIDE 44

1 2 3

100px 20px 20px 20px

40px of “growth” available

44

SLIDE 45

1 2 3

flex-‑grow: ¡0; flex-‑grow: ¡0; flex-‑grow: ¡0; 45

SLIDE 46

1 2 3

flex-‑grow: ¡1;

13px of growth

flex-‑grow: ¡1;

13px of growth

flex-‑grow: ¡1;

13px of growth

46

SLIDE 47

1 2 3

flex-‑grow: ¡1;

10px of growth

flex-‑grow: ¡2;

20px of growth

flex-‑grow: ¡1;

10px of growth

47

SLIDE 48

1 2 3

flex-‑grow: ¡0;

0px of growth

flex-‑grow: ¡1;

20px of growth

flex-‑grow: ¡1;

20px of growth

48

SLIDE 49

1 2 3

40px 20px 20px 20px

49

SLIDE 50

1 2 3

40px 20px 20px 20px

20px of “shrink” available

50

SLIDE 51

flex-‑shrink: ¡0; flex-‑shrink: ¡0; flex-‑shrink: ¡0;

1 2 3

51

SLIDE 52

flex-‑shrink: ¡0; flex-‑shrink: ¡1; flex-‑shrink: ¡1;

1

0px of shrink 10px of shrink 10px of shrink

52

SLIDE 53

NO SILVER BULLET

53

SLIDE 54

AWESOME EXAMPLES

54

SLIDE 55

PAGE LAYOUT

55

Play with the Codepen

codepen.io/lemonmade/pen/RNEpJR?editors=110

SLIDE 56

GOAL

56

SLIDE 57

57

Header Content

Sidebar

Footer

GOAL

SLIDE 58

58 <div ¡class="page"> ¡ ¡ ¡<header ¡class="page__header">Header</header> ¡ ¡ ¡<div ¡class="page__content"> ¡ ¡ ¡ ¡ ¡<aside ¡class="page__sidebar">Sidebar</aside> ¡ ¡ ¡ ¡ ¡<main ¡class="page__main">Content</section> ¡ ¡ ¡</div> ¡ ¡ ¡<footer ¡class="page__footer">Footer</footer> ¡ </div> ¡

STEP 0

SLIDE 59

59

Header Content Sidebar Footer

SLIDE 60

60

STEP 1

.page ¡{ ¡ ¡ ¡min-‑height: ¡100vh; ¡ ¡ ¡display: ¡flex; ¡ ¡ ¡flex-‑direction: ¡column; ¡ } ¡ .page__header, ¡ .page__footer ¡{ ¡ ¡ ¡flex: ¡0 ¡0 ¡auto; ¡// ¡default, ¡so ¡you ¡can ¡just ¡exclude ¡ } ¡ .page__content ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡auto; ¡ } ¡

SLIDE 61

61

Header Content Sidebar Footer

SLIDE 62

62

STEP 2

.page__content ¡{ ¡ ¡ ¡display: ¡flex; ¡ } ¡ .page__sidebar ¡{ ¡ ¡ ¡flex: ¡0 ¡0 ¡auto; ¡// ¡again, ¡default, ¡so ¡safe ¡to ¡exclude ¡ } ¡ .page__main ¡{ ¡ ¡ ¡flex: ¡1 ¡1 ¡auto; ¡ } ¡

SLIDE 63

63

Header Content Sidebar Footer

SLIDE 64

64 @media ¡screen ¡and ¡(max-‑width: ¡30rem) ¡{ ¡ ¡ ¡.page__content ¡{ ¡ ¡ ¡ ¡ ¡flex-‑direction: ¡column; ¡ ¡ ¡} ¡ } ¡

STEP 3

SLIDE 65

65

Header Content Sidebar Footer

SLIDE 66

SMART POPOVERS

66

Play with the Codepen

codepen.io/lemonmade/pen/XJobem?editors=110

SLIDE 67

67

GOAL

SLIDE 68

68 <div ¡class="popover"> ¡ ¡ ¡<div ¡class="popover__content"> ¡ ¡ ¡ ¡ ¡<div ¡class="popover__pane ¡popover__pane-‑-‑ fixed">Don't ¡hide ¡this ¡one!</div> ¡ ¡ ¡ ¡ ¡<div ¡class="popover__pane"> ¡ ¡ ¡ ¡ ¡ ¡ ¡<p>Feel ¡free ¡to ¡scroll ¡this.</p> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡</div> ¡ </div> ¡

STEP 0

SLIDE 69

69

SLIDE 70

70

SLIDE 71

71

JavaScript says:

Please Stop Here

SLIDE 72

72 .popover ¡{ ¡ ¡ ¡display: ¡flex; ¡ } ¡

STEP 1

SLIDE 73

73

SLIDE 74

74 .popover__content ¡{ ¡ ¡ ¡display: ¡flex; ¡ ¡ ¡flex-‑direction: ¡column; ¡ } ¡ .popover__pane ¡{ ¡ ¡ ¡flex: ¡1 ¡1 ¡auto; ¡ ¡ ¡overflow: ¡auto; ¡ } ¡ .popover__pane-‑-‑fixed ¡{ ¡ ¡ ¡flex: ¡0 ¡0 ¡auto; ¡ } ¡

STEP 2

SLIDE 75

75

SLIDE 76

76

STEP 3

SLIDE 77

77

SLIDE 78

RESPONSIVE BUTTONS

78

Play with the Codepen (really)

codepen.io/lemonmade/pen/GgPJEx?editors=110

SLIDE 79

79

STEP 0

<div ¡class="button__container"> ¡ ¡ ¡<button ¡class="button">Button ¡the ¡first</button> ¡ ¡ ¡<button ¡class="button">Button ¡the ¡second, ¡ junior</button> ¡ </div> ¡ <p ¡class="type ¡type-‑-‑paragraph">Lorem ¡ipsum ¡dolor ¡ sit ¡amet...</p> ¡

SLIDE 80

80

SLIDE 81

81

STEP 1

$default-‑spacing: ¡1rem; ¡ .button-‑container ¡{ ¡ ¡ ¡display: ¡flex; ¡ ¡ ¡margin-‑right: ¡(-‑1 ¡* ¡$default-‑spacing); ¡ ¡ ¡margin-‑bottom: ¡(-‑1 ¡* ¡$default-‑spacing); ¡ } ¡ .button ¡{ ¡ ¡ ¡margin: ¡0 ¡$default-‑spacing ¡$default-‑spacing ¡0; ¡ } ¡

SLIDE 82

82

SLIDE 83

83

STEP 2

.button ¡{ ¡ ¡ ¡flex: ¡1 ¡1 ¡0px; ¡ } ¡

SLIDE 84

84

SLIDE 85

85

SLIDE 86

86

COULD TRY…

@media ¡screen ¡and ¡(max-‑width: ¡$some-‑magic-‑number) ¡{ ¡ ¡ ¡.button-‑container ¡{ ¡ ¡ ¡ ¡ ¡display: ¡block; ¡ ¡ ¡} ¡ ¡ ¡.button ¡{ ¡ ¡ ¡ ¡ ¡width: ¡100%; ¡ ¡ ¡} ¡ } ¡

SLIDE 87

87

BETTER

.button-‑container ¡{ ¡ ¡ ¡flex-‑wrap: ¡wrap; ¡ } ¡ .button ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡auto; ¡ }

SLIDE 88

88

SLIDE 89

89

BEST

.button-‑container ¡{ ¡ ¡ ¡flex-‑wrap: ¡wrap; ¡ } ¡ .button ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡0px; ¡ ¡ ¡min-‑width: ¡min-‑content; ¡ } ¡

SLIDE 90

90

SLIDE 91

REFLOWING HEADER

91

Play with the Codepen

codepen.io/lemonmade/pen/ZYgNmy?editors=110

SLIDE 92

92

GOAL

(something like…)

SLIDE 93

93 <div ¡class="card"> ¡ ¡ ¡<header ¡class="card__section ¡card__section-‑-‑ header"> ¡ ¡ ¡ ¡ ¡ ¡<h1 ¡class=“heading">Medium ¡Heading</h1> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-‑group"> ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-‑group__primary"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button ¡button-‑-‑ primary">Primary ¡Action</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<div ¡class="button-‑group__secondary"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button">Action ¡1</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<button ¡class="button">Action ¡2</button> ¡ ¡ ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡</header> ¡ </div> ¡

SLIDE 94

94

SLIDE 95

95

STEP 1

.card__section-‑-‑header ¡{ ¡ ¡ ¡display: ¡flex; ¡ ¡ ¡align-‑items: ¡center; ¡ } ¡ .heading ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡auto; ¡ } ¡ .button-‑group ¡{ ¡ ¡ ¡flex: ¡0 ¡0 ¡auto; ¡ }

SLIDE 96

96

SLIDE 97

97

STEP 2

.button-‑group ¡{ ¡ ¡ ¡display: ¡inline-‑flex; ¡ ¡ ¡flex-‑direction: ¡row-‑reverse; ¡ } ¡ .button-‑group__primary, ¡ .button-‑group__secondary ¡{ ¡ ¡ ¡display: ¡flex; ¡ }

SLIDE 98

98

SLIDE 99

99

SLIDE 100

100

STEP 3

.card__section-‑-‑header ¡{ ¡ ¡ ¡flex-‑wrap: ¡wrap; ¡ }

SLIDE 101

101

SLIDE 102

102

STEP 4

.button-‑group ¡{ ¡ ¡ ¡flex: ¡0.0001 ¡0 ¡auto; ¡ } ¡ .heading ¡{ ¡ ¡ ¡flex: ¡1000 ¡0 ¡auto; ¡ } ¡ .button-‑group__secondary ¡{ ¡ ¡ ¡flex: ¡1 ¡0 ¡auto; ¡ }

SLIDE 103

103

SLIDE 104

104

STEP 5

.button-‑group ¡{ ¡ ¡ ¡max-‑width: ¡100%; ¡ ¡ ¡flex-‑wrap: ¡wrap-‑reverse; ¡ } ¡ .button-‑group__primary ¡{ ¡ ¡ ¡flex: ¡0.0001 ¡0 ¡auto; ¡ } ¡ .button-‑group__secondary ¡{ ¡ ¡ ¡max-‑width: ¡100%; ¡ ¡ ¡flex: ¡1000 ¡0 ¡auto; ¡ ¡ ¡flex-‑wrap: ¡wrap; ¡ }

SLIDE 105

105

SLIDE 106

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

CSS-TRICKS REFERENCE

106

SLIDE 107

AUTOPREFIXER

https://github.com/postcss/autoprefixer

107

SLIDE 108

FLEXBUGS

https://github.com/philipwalton/flexbugs

108

SLIDE 109

CHRIS SAUVE

@_lemonmade

109

SLIDE 110

SHOPIFY

shopify.com/careers

110

SLIDE 111

THANKS EVERYONE!

111