Believe in the Power of CSS - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Twitter: saltnburnem | Site: chrisdemars.com

Slide 2

Slide 2 text

2 Chris DeMars ! @saltnburnem Disclaimer

Slide 3

Slide 3 text

2 Chris DeMars ! @saltnburnem Disclaimer I CSS

Slide 4

Slide 4 text

3 Chris DeMars ! @saltnburnem Not in this talk Styled components Css-in-js

Slide 5

Slide 5 text

4 Chris DeMars ! @saltnburnem

Slide 6

Slide 6 text

4 CSS Chris DeMars ! @saltnburnem

Slide 7

Slide 7 text

4 CSS CSS Chris DeMars ! @saltnburnem

Slide 8

Slide 8 text

4 CSS CSS CSS Chris DeMars ! @saltnburnem

Slide 9

Slide 9 text

4 CSS CSS CSS CSS Chris DeMars ! @saltnburnem

Slide 10

Slide 10 text

4 CSS CSS CSS CSS CSS Chris DeMars ! @saltnburnem

Slide 11

Slide 11 text

5 “CSS is a key development skill.” - Ivana McConnell @ CSSConf AU Chris DeMars ! @saltnburnem

Slide 12

Slide 12 text

6 “…also the problems with how we devalue things like CSS…” - Ivana Michael @ CSSConf AU Chris DeMars ! @saltnburnem

Slide 13

Slide 13 text

7 CSS IS STILL A THING! Chris DeMars ! @saltnburnem

Slide 14

Slide 14 text

8 Chris DeMars ! @saltnburnem

Slide 15

Slide 15 text

8 Chris DeMars ! @saltnburnem

Slide 16

Slide 16 text

9 Twitter: @TaleFTScript | Site: tftscript.com Chris DeMars ! @saltnburnem

Slide 17

Slide 17 text

10 Chris DeMars ! @saltnburnem

Slide 18

Slide 18 text

11 Chris DeMars ! @saltnburnem Una kravets https://youtu.be/IRI1H5tyEAo Front-trends 2017 The power of css

Slide 19

Slide 19 text

12 Chris DeMars ! @saltnburnem

Slide 20

Slide 20 text

13 Chris DeMars ! @saltnburnem

Slide 21

Slide 21 text

14 Chris DeMars ! @saltnburnem

Slide 22

Slide 22 text

15 Hakon Wium Lie Bert Bos Chris DeMars ! @saltnburnem

Slide 23

Slide 23 text

16 Wes Bos Bert Bos Chris DeMars ! @saltnburnem

Slide 24

Slide 24 text

16 Wes Bos Bert Bos Chris DeMars ! @saltnburnem

Slide 25

Slide 25 text

17 Chris DeMars ! @saltnburnem

Slide 26

Slide 26 text

18 Chris DeMars ! @saltnburnem

Slide 27

Slide 27 text

19 Chris DeMars ! @saltnburnem

Slide 28

Slide 28 text

19 Flexbox Chris DeMars ! @saltnburnem

Slide 29

Slide 29 text

19 Grid Flexbox Chris DeMars ! @saltnburnem

Slide 30

Slide 30 text

19 Grid Flexbox CSS variables Chris DeMars ! @saltnburnem

Slide 31

Slide 31 text

19 Grid Flexbox CSS variables Blend modes Chris DeMars ! @saltnburnem

Slide 32

Slide 32 text

19 Grid Flexbox CSS variables Blend modes Viewport units Chris DeMars ! @saltnburnem

Slide 33

Slide 33 text

19 Grid Flexbox CSS variables Blend modes Accessibility Viewport units Chris DeMars ! @saltnburnem

Slide 34

Slide 34 text

19 Grid Flexbox CSS variables Blend modes Accessibility Viewport units And more… Chris DeMars ! @saltnburnem

Slide 35

Slide 35 text

20 Chris DeMars ! @saltnburnem

Slide 36

Slide 36 text

21 Chris DeMars ! @saltnburnem Oocss

Slide 37

Slide 37 text

21 Chris DeMars ! @saltnburnem Oocss

Slide 38

Slide 38 text

22 Chris DeMars ! @saltnburnem Block__Element--Modifier Block_Element-Modifier Double-Double Single-Single

Slide 39

Slide 39 text

23 Chris DeMars ! @saltnburnem Oocss

Slide 40

Slide 40 text

23 Chris DeMars ! @saltnburnem Oocss

Slide 41

Slide 41 text

23 Chris DeMars ! @saltnburnem Oocss

Slide 42

Slide 42 text

23 Chris DeMars ! @saltnburnem Oocss

Slide 43

Slide 43 text

23 Chris DeMars ! @saltnburnem Oocss

Slide 44

Slide 44 text

24 Makes writing css fun! Chris DeMars ! @saltnburnem

Slide 45

Slide 45 text

24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable

Slide 46

Slide 46 text

24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular

Slide 47

Slide 47 text

24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular Flexible

Slide 48

Slide 48 text

25 Chris DeMars ! @saltnburnem https://bit.ly/2GRhU2T

Slide 49

Slide 49 text

26 Chris DeMars ! @saltnburnem

Slide 50

Slide 50 text

27 Chris DeMars ! @saltnburnem

Slide 51

Slide 51 text

28 One dimension Chris DeMars ! @saltnburnem

Slide 52

Slide 52 text

29 https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ Chris DeMars ! @saltnburnem

Slide 53

Slide 53 text

30 #1 problem Chris DeMars ! @saltnburnem

Slide 54

Slide 54 text

31 Centering Chris DeMars ! @saltnburnem

Slide 55

Slide 55 text

32 Chris DeMars ! @saltnburnem

Slide 56

Slide 56 text

32 Chris DeMars ! @saltnburnem

Slide 57

Slide 57 text

33 Chris DeMars ! @saltnburnem

Slide 58

Slide 58 text

34 Chris DeMars ! @saltnburnem

Slide 59

Slide 59 text

35 Two dimensions Chris DeMars ! @saltnburnem

Slide 60

Slide 60 text

36 Rows & columns Chris DeMars ! @saltnburnem

Slide 61

Slide 61 text

37 Chris DeMars ! @saltnburnem

Slide 62

Slide 62 text

37 Chris DeMars ! @saltnburnem

Slide 63

Slide 63 text

38 Chris DeMars ! @saltnburnem

Slide 64

Slide 64 text

38 Chris DeMars ! @saltnburnem

Slide 65

Slide 65 text

39 Chris DeMars ! @saltnburnem

Slide 66

Slide 66 text

39 Chris DeMars ! @saltnburnem

Slide 67

Slide 67 text

40 Chris DeMars ! @saltnburnem

Slide 68

Slide 68 text

40 Chris DeMars ! @saltnburnem

Slide 69

Slide 69 text

41 Chris DeMars ! @saltnburnem

Slide 70

Slide 70 text

41 Chris DeMars ! @saltnburnem

Slide 71

Slide 71 text

42 Jen Simmons Rachel Andrew Chris DeMars ! @saltnburnem

Slide 72

Slide 72 text

43 Chris DeMars ! @saltnburnem

Slide 73

Slide 73 text

44 Chris DeMars ! @saltnburnem

Slide 74

Slide 74 text

45 Chris DeMars ! @saltnburnem

Slide 75

Slide 75 text

45 Chris DeMars ! @saltnburnem

Slide 76

Slide 76 text

46 Chris DeMars ! @saltnburnem

Slide 77

Slide 77 text

47 Chris DeMars ! @saltnburnem

Slide 78

Slide 78 text

48 Chris DeMars ! @saltnburnem

Slide 79

Slide 79 text

48 Chris DeMars ! @saltnburnem

Slide 80

Slide 80 text

49 Chris DeMars ! @saltnburnem

Slide 81

Slide 81 text

49 Chris DeMars ! @saltnburnem

Slide 82

Slide 82 text

50 Chris DeMars ! @saltnburnem

Slide 83

Slide 83 text

51 Chris DeMars ! @saltnburnem

Slide 84

Slide 84 text

51 Chris DeMars ! @saltnburnem

Slide 85

Slide 85 text

52 Sass & less Variables Chris DeMars ! @saltnburnem

Slide 86

Slide 86 text

53 Can’t change dynamically Dom unaware No js targets Drawbacks Chris DeMars ! @saltnburnem

Slide 87

Slide 87 text

54 Cascade Inheritance js targets Pros of css vars Chris DeMars ! @saltnburnem

Slide 88

Slide 88 text

55 Use cases For Custom props Chris DeMars ! @saltnburnem

Slide 89

Slide 89 text

56 Emulate Non-existent Rules https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

Slide 90

Slide 90 text

57 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

Slide 91

Slide 91 text

57 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

Slide 92

Slide 92 text

58 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

Slide 93

Slide 93 text

59 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

Slide 94

Slide 94 text

60 Css variables Syntax Chris DeMars ! @saltnburnem

Slide 95

Slide 95 text

61 Chris DeMars ! @saltnburnem

Slide 96

Slide 96 text

62 Chris DeMars ! @saltnburnem

Slide 97

Slide 97 text

62 Chris DeMars ! @saltnburnem

Slide 98

Slide 98 text

63 Chris DeMars ! @saltnburnem

Slide 99

Slide 99 text

64 Chris DeMars ! @saltnburnem

Slide 100

Slide 100 text

64 Chris DeMars ! @saltnburnem

Slide 101

Slide 101 text

65 Image effects in the browser Chris DeMars ! @saltnburnem

Slide 102

Slide 102 text

66 Chris DeMars ! @saltnburnem

Slide 103

Slide 103 text

66 Chris DeMars ! @saltnburnem

Slide 104

Slide 104 text

67 Types Chris DeMars ! @saltnburnem

Slide 105

Slide 105 text

67 Types Background blend mode Chris DeMars ! @saltnburnem

Slide 106

Slide 106 text

67 Types Background blend mode Mixed blend mode Chris DeMars ! @saltnburnem

Slide 107

Slide 107 text

68 Mixed blend mode Chris DeMars ! @saltnburnem

Slide 108

Slide 108 text

68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. Chris DeMars ! @saltnburnem

Slide 109

Slide 109 text

68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Chris DeMars ! @saltnburnem

Slide 110

Slide 110 text

68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Unset: Removes the blend mode from an element. Chris DeMars ! @saltnburnem

Slide 111

Slide 111 text

69 Chris DeMars ! @saltnburnem

Slide 112

Slide 112 text

69 Chris DeMars ! @saltnburnem

Slide 113

Slide 113 text

70 Chris DeMars ! @saltnburnem

Slide 114

Slide 114 text

71 Numeronym Chris DeMars ! @saltnburnem

Slide 115

Slide 115 text

71 Numeronym Chris DeMars ! @saltnburnem

Slide 116

Slide 116 text

71 Numeronym A c c e s s i b i l i t y A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem

Slide 117

Slide 117 text

72 :focus Chris DeMars ! @saltnburnem

Slide 118

Slide 118 text

73 Don’t do this! Chris DeMars ! @saltnburnem

Slide 119

Slide 119 text

74 Chris DeMars ! @saltnburnem

Slide 120

Slide 120 text

74 Chris DeMars ! @saltnburnem

Slide 121

Slide 121 text

75 :focus-visible Chris DeMars ! @saltnburnem

Slide 122

Slide 122 text

76 Yayyyyy!!

Slide 123

Slide 123 text

77 Focus-visible polyfill https://github.com/WICG/focus-visible Chris DeMars ! @saltnburnem

Slide 124

Slide 124 text

78 Chris DeMars ! @saltnburnem

Slide 125

Slide 125 text

79 Demo time! Chris DeMars ! @saltnburnem

Slide 126

Slide 126 text

80 :focus-within Chris DeMars ! @saltnburnem

Slide 127

Slide 127 text

81 Chris DeMars ! @saltnburnem

Slide 128

Slide 128 text

82 Chris DeMars ! @saltnburnem

Slide 129

Slide 129 text

82 Chris DeMars ! @saltnburnem

Slide 130

Slide 130 text

83 Css feels! Chris DeMars ! @saltnburnem

Slide 131

Slide 131 text

83 Css feels! Chris DeMars ! @saltnburnem

Slide 132

Slide 132 text

84 Resources https://css-tricks.com/almanac/properties/b/background-blend-mode/ https://css-tricks.com/basics-css-blend-modes/ https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ https://getﬂywheel.com/layout/css-blend-modes/ https://www.w3.org/Style/CSS20/history.html https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://css-tricks.com/snippets/css/complete-guide-grid/ https://rachelandrew.co.uk/ http://jensimmons.com/ https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://css-tricks.com/focusing-on-focus-styles/ https://css-tricks.com/fun-viewport-units/ https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within Chris DeMars ! @saltnburnem

Slide 133

Slide 133 text

85 Thanks! Chris demars | saltnburnem Chris DeMars ! @saltnburnem https://codepen.io/chrisdemars/ https://bit.ly/2qNA9Q4

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

No content