Algorithms in CSS v3.1.0 | CSS Day 2019

What is A Programming Language? By Will Chrichton

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

Accidentally Turing Complete by Andreas Zwinkau

.square {
    width: 100px;
    height: 100px;
    background-color: blue;
}
<div class="square"></div>

.square--bigger {
    width: 150px;
    height: 150px;
}
.square--smaller {
    width: 50px;
    height: 50px;
}
<div class="square square--bigger"></div>
<div class="square square--smaller"></div>
.square {
    width: 100px;
    height: 100px;
}

<div class="square"></div>.square {
    width: 100px;
    height: 100px;
}

<div class="box"></div>.square {
    --square-size: 100px;
    width: var( --square-size );
    height: var( --square-size );
}

.square--smaller {
}
.square--bigger {
}
.square {
}

.square {
    ...
}
.square--smaller {
}
.square--bigger {
}
<div class="square
square--smaller
square--rounded"></div>
.square--rounded {
    border-radius: 50%;
}

.square--rounded {
    border-radius: 50%;
}
.square {
    ...
}
<div class="square
square--rounded 
square--bigger
square--yellow"></div>
.square--yellow {
    background-color: yellow;
}
.square--bigger {
}

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

<div class="square"></div>.square {
    --square-bg-color: blue;
    background-color: var( --square-bg-color );
}

<div class="shape"></div>.shape {
    --shape-height: 100px;
    --shape-width: 100px;
    --shape-bg-color: blue;
    width: var( --shape-width );
    height: var( --shape-height );
    background-color: var( --shape-bg-color );
}

.shape { ... }
.shape--smaller {
}
.shape--bigger {
}
<div class="shape shape--bigger"></div>
<div class="shape shape--smaller"></div>
<div class="shape
shape--rounded 
shape--bigger
shape--yellow"></div>
.shape--yellow { ... }
.shape--rounded { ... }
<div class="shape"></div>

<div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
<div class="shape
shape--rounded 
shape--big-square
.shape { ... }
.shape--small-square {
}
.shape--big-square {
}

.shape--small-square { ... }
.shape--rectangle {
}
<div class="shape shape--rectangle"></div>
<div class="shape
shape--rounded 
shape--big-square
.shape { ... }
.shape--big-square { ... }

.shape--rounded {
border-radius: 50%;
}
<div class="shape
shape--rounded 
shape--big-square
<div class="shape shape--rectangle"></div>
.shape--rectangle { ... }
.shape { ... }

<div class="shape
shape--rectangle
shape--rounded"></div>
<div class="shape
shape--circle 
shape--big-square
.shape--rounded {
border-radius: 20px;
}
.shape--circle {
border-radius: 50%;
}
.shape { ... }

.shape { ... }
.shape--circle { ... }
<div class="shape
shape--rounded-rectangle"></div>
<div class="shape
shape--circle 
shape--big-square
.shape--has-text {
--shape-height: initial;
    --shape-width: initial;
}
.shape__text {
    color: white;
    font-size: 16px;
}
<button class="shape shape--has-text">
    <a href="" class="shape__text"></a>
</button>

Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter

.shape { ... }
.shape--rounded-rectangle { ... }
<div class="shape
<div class="shape
shape--circle 
shape--big-square
.shape--has-text {
}
.shape__text {
    color: white;
    font-size: 16px;
}
</button>

Robert C. Martin in The Future of Programming

What is Programming Anyway? by Felienne

.shape { ... }
<div class="shape
<div class="shape
shape--circle 
shape--big-square
.shape--has-text {
}
.shape__text {
    color: white;
    font-size: 16px;
}
</button>

.square {
    width: 100px;
    height: 100px;
}
<div class="square
square--smaller
u-background-blue"></div>
.u-background-blue {
}

.container {
display: flex;
}

.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
    }
}

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

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

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

Algorithms in CSS v3.1.0 | CSS Day 2019

Algorithms in CSS v3.1.0 | CSS Day 2019

More Related Content

Similar to Algorithms in CSS v3.1.0 | CSS Day 2019

More from Lara Schenck

Recently uploaded

Algorithms in CSS v3.1.0 | CSS Day 2019