CHRIS SAUVE 2

Size: px

Start display at page:

Download "CHRIS SAUVE 2"

Ariel Rose Bond
5 years ago
Views:

1 FLEXBOX 1

2 CHRIS SAUVE 2

3 LAYOUT STRATEGIES 3

4 TABLES 4

5 JUST DON T. 5

6 ABSOLUTE POSITIONING 6

7 INLINE BLOCK 7

8 FLOATS 8

9 THINK DIFFERENT 9

10 CONTENT-OUT LAYOUT 10

11 parent child 1 child 2 child 3 11

12 parent child 1 child 2 child 3 12

13 parent child 1 child 2 child 3 13

14 BROWSER SUPPORT 14

15 10+ only - ms in IE10 YES YES YES YES even in Mini! 15

16 CAN I USE SAYS 10+ only YES YES YES - ms in IE % YES even in Mini! 16

17 PARENT RULES 17

18 display: flex; // or inline- flex flex- direction: row; // or column 18

19 flex- direction: row;

20 flex- direction: column;

21 display: flex; // or inline- flex flex- direction: row; // or column 21

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

23 align- items Cross Axis 23

24 align- items: stretch; // default

25 align- items: center;

26 align- items: flex- start;

27 align- items: flex- end;

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

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

30 justify- content Main Axis

31 justify- content: center;

32 justify- content: flex- start;

33 justify- content: flex- end;

34 justify- content: space- between;

35 justify- content: space- around;

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

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

38 flex- wrap: nowrap;

39 flex- wrap: wrap;

40 CHILD RULES 40

41 flex- grow: 0; flex- shrink: 0; flex- basis: auto; 41

42 flex- basis: <number>; = flex- basis: auto; width: <number>; 42

43 20px 20px 20px px 43

44 20px 20px 20px px 40px of growth available 44

45 flex- grow: 0; flex- grow: 0; flex- grow: 0;

46 flex- grow: 1; 13px of growth flex- grow: 1; 13px of growth flex- grow: 1; 13px of growth

47 flex- grow: 1; 10px of growth flex- grow: 2; 20px of growth flex- grow: 1; 10px of growth

48 flex- grow: 0; 0px of growth flex- grow: 1; 20px of growth flex- grow: 1; 20px of growth

49 20px 20px 20px px 49

50 20px 20px 20px px of shrink 40px available 50

51 flex- shrink: 0; flex- shrink: 0; flex- shrink: 0;

52 flex- shrink: 0; flex- shrink: 1; flex- shrink: 1; 0px of shrink 10px of shrink 10px of shrink 1 52

53 NO SILVER BULLET 53

54 AWESOME EXAMPLES 54

55 PAGE LAYOUT Play with the Codepen codepen.io/lemonmade/pen/rnepjr?editors=110 55

56 GOAL 56

57 Header GOAL Sidebar Content Footer 57

58 STEP 0 <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> 58

59 Header Sidebar Content Footer 59

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; } 60

61 Header Sidebar Content Footer 61

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; } 62

63 Header Sidebar Content Footer 63

64 STEP screen and (max- width: 30rem) {.page content { flex- direction: column; } } 64

65 Header Sidebar Content Footer 65

66 SMART POPOVERS Play with the Codepen codepen.io/lemonmade/pen/xjobem?editors=110 66

67 GOAL 67

68 STEP 0 <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> 68

69 69

70 70

71 JavaScript says: Please Stop Here 71

72 STEP 1.popover { display: flex; } 72

73 73

74 STEP 2.popover content { display: flex; flex- direction: column; }.popover pane { flex: 1 1 auto; overflow: auto; }.popover pane- - fixed { flex: 0 0 auto; } 74

75 75

76 STEP 3 76

77 77

78 (really) RESPONSIVE BUTTONS Play with the Codepen codepen.io/lemonmade/pen/ggpjex?editors=110 78

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> 79

80 80

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; } 81

82 82

83 STEP 2.button { flex: 1 1 0px; } 83

84 84

85 85

86 COULD screen and (max- width: $some- magic- number) {.button- container { display: block; } }.button { width: 100%; } 86

87 BETTER.button- container { flex- wrap: wrap; }.button { flex: 1 0 auto; } 87

88 88

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

90 90

91 REFLOWING HEADER Play with the Codepen codepen.io/lemonmade/pen/zygnmy?editors=110 91

92 GOAL (something like ) 92

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> 93

94 94

95 STEP 1.card section- - header { display: flex; align- items: center; }.heading { flex: 1 0 auto; }.button- group { flex: 0 0 auto; } 95

96 96

97 STEP 2.button- group { display: inline- flex; flex- direction: row- reverse; }.button- group primary,.button- group secondary { display: flex; } 97

98 98

99 99

100 STEP 3.card section- - header { flex- wrap: wrap; } 100

101 101

102 STEP 4.button- group { flex: auto; }.heading { flex: auto; }.button- group secondary { flex: 1 0 auto; } 102

103 103

104 STEP 5.button- group { max- width: 100%; flex- wrap: wrap- reverse; }.button- group primary { flex: auto; }.button- group secondary { max- width: 100%; flex: auto; flex- wrap: wrap; } 104

105 105

106 CSS-TRICKS REFERENCE 106

107 AUTOPREFIXER 107

108 FLEXBUGS 108

109 CHRIS 109

110 SHOPIFY shopify.com/careers 110

111 THANKS EVERYONE! 111

CSC Website Design, Spring CSS Flexible Box

CSC Website Design, Spring CSS Flexible Box CSC 122 - Website Design, Spring 2017 CSS Flexible Box CSS Flexible Box Layout Module The CSS flexbox can be used to ensure that elements behave predictably when the page layout must accommodate different