Algorithms in CSS v3.1.0

A presentation at CSS Day in June 2019 in Amsterdam, Netherlands by Lara Schenck

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

What is A Programming Language? By Will Chrichton

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Link to the Tweet.

Slide 14

Link to the Tweet.

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Wikipedia

Slide 50

Slide 51

Slide 52

WolframMathWorld

Slide 53

WolframMathWorld

Slide 54

WolframMathWorld

Slide 55

WolframMathWorld

Slide 56

if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) { cellFour = 1; } input:checked + input:not(:checked) + input:not(:checked) + * { /* Style fourth cell to prompt human to change state */ }

Slide 57

Rule 110 in CSS/HTML/Human

Slide 58

Slide 59

Accidentally Turing Complete by Andreas Zwinkau

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

.square { width: 100px; height: 100px; background-color: blue; }

Slide 70

.square { width: 100px; height: 100px; background-color: blue; } .square—bigger { width: 150px; height: 150px; } .square—smaller { width: 50px; height: 50px; }

Slide 71

.square { width: 100px; height: 100px; background-color: blue; }

Slide 72

.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; }

<div class=”box”></div> class=”square”></div>

Slide 73

.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; }

Slide 74

Slide 75

.square { … } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; } .square—rounded { border-radius: 50%; }

Slide 76

Slide 77

.square { … } .square—bigger { —square-size: 150px; } .square—rounded { border-radius: 50%; } .square—yellow { background-color: yellow; }

Slide 78

.square { —square-size: 100px; —square-bg-color: blue; …

<div class=”square”></div> <div class=”square square—rounded square—yellow”></div> background-color: var( —square-bg-color ); } .square—bigger { … } .square—rounded { … } .square—yellow { —square-bg-color: yellow; }

Slide 79

Slide 80

.square { —square-size: 100px; —square-bg-color: blue;

<div class=”square”></div> width: var( —square-size ); height: var( —square-size ); background-color: var( —square-bg-color ); }

Slide 81

.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;

<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }

Slide 82

.shape { … } .shape—bigger { —shape-height: 150px; —shape-width: 150px; } .shape—smaller { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }

Slide 83

.shape { … } .shape—big-square { —shape-height: 150px; —shape-width: 150px; } .shape—small-square { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }

Slide 84

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—rectangle { —shape-height: 50px; —shape-width: 100px; }

Slide 85

Slide 86

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { border-radius: 50%; } .shape—rectangle { … }

Slide 87

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—circle { border-radius: 50%; } .shape—rounded { border-radius: 20px; } .shape—rectangle { … }

Slide 88

Slide 89

.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }

Slide 90

Slide 91

.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—rounded-rectangle { … } .shape—yellow { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }

Slide 92

Slide 93

Slide 94

Slide 95

Slide 96

Slide 97

Slide 98

Robert C. Martin in The Future of Programming

Slide 99

Slide 100

Slide 101

Slide 102

Immutable CSS on CSS Wizardry

Slide 103

Slide 104

.square { width: 100px; height: 100px; background-color: blue; }

Slide 105

.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;

<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }

Slide 106

Slide 107

Slide 108

Slide 109

What is Programming Anyway? by Felienne

Slide 110

Slide 111

Slide 112

Slide 113

Slide 114

.square { width: 100px; height: 100px; background-color: blue; }

Slide 115

.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—rectangle { … } .shape—yellow { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }

Slide 116

.square { width: 100px; height: 100px; background-color: blue; }

Slide 117

.square { width: 100px; height: 100px; } .u-background-blue { background-color: blue; }

Slide 118

Slide 119

Slide 120

Slide 121

Slide 122

Slide 123

Slide 124

Slide 125

Slide 126

Slide 127

Slide 128

Slide 129

Slide 130

Slide 131

.container { display: flex; }

Slide 132

Slide 133

.container { display: flex; }

Slide 134

Slide 135

Slide 136

Slide 137

Slide 138

Slide 139

Slide 140

Slide 141

Slide 142

Slide 143

Slide 144

Slide 145

Slide 146

Slide 147

Slide 148

Slide 149

Slide 150

Slide 151

Slide 152

.a-scale-for-header-leaderboard-ad { @media ( min-width: 767px ) and ( max-width: 970px ) and display: flex; justify-content: center; transform: scale( 0.76 ); // Accommodate 970px ads on } }

Slide 153

Slide 154

Slide 155

Slide 156

.clearfix::before, .clearfix::after { content: “”; display: table; } .clearfix::after { clear: both; }

Slide 157

.arrow-up { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid red; }

Slide 158

Slide 159

Slide 160

Slide 161

Slide 162

Slide 163

Slide 164

Designgineering Chronicles

Slide 165

Slide 166

Slide 167

Slide 168

Slide 169

Slide 170

Slide 171

Slide 172

Slide 173

Slide 174

Slide 175

Slide 176

Slide 177

Slide 178

Slide 179

Slide 180

Slide 181

Slide 182

Slide 183

Slide 184

Slide 185

Slide 186

Slide 187

Slide 188

Slide 189

Slide 190

Slide 191

Slide 192

Slide 193

Slide 194

Slide 195

Slide 196

Slide 197

Slide 198

Slide 199

Slide 200

Slide 201

Slide 202

Slide 203

Slide 204

Slide 205

Slide 206

Slide 207

Slide 208

div { counter-reset: fizzbuzz; counter-increment: fizzbuzz; } div::before { content: counter(fizzbuzz); } div:nth-child(3n)::before { content: ‘Fizz’; } div:nth-child(3n)::after { content: ”; } div:nth-child(15n)::after { content: ‘Buzz’; } FizzBuzz in CSS/HTML CodePen