“CSS isn’t a ‘real’ programming language,” we CSS developers are often reminded — we don’t write programs, we describe presentation. Algorithms and CSS, then, don’t exactly go hand-in-hand…or do they? From the cascade to Grid Layout to our own design systems, we may not write algorithms in the same fashion as other programming languages, but we sure do use them! This talk will document a self-taught developer’s mission to bridge the gap between CSS and Computer Science by way of algorithms. True, CSS is not a programming language like the others, but an understanding of the fundamentals can benefit our code just the same.

21. function bubbleSort(array) {
for (let i = 0; i < array.length; i++) {
for (let ii = 0; ii < array.length; ii++) {
if (array[ii] > array[ii+1]) {
let temp = array[ii];
array[ii] = array[ii+1];
array[ii+1] = temp;
}
}
}
return array;
}
console.log( bubbleSort([4, 2, 1, 3]) );

24. .container {
display: flex;
}

43. /*
header - min-height 80vh
- header images -
- height 100%
- width based on aspect ratio (1.4 * 100vw)
- overflows left to appear centered
- position relative
@media tablet
- no x overflow, just full width
@media desktop
- overflow top / fixed to bottom
*/

51. .ocean {
--height: 80vh;
--ratio: 1.42;
display: grid;
grid-template-rows: minmax(20px, 0.5fr) max-content minmax(100px, 1fr);
grid-template-columns: 100vw;
justify-items: center;
height: var(--height);
&__images {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: var(--height);
min-width: 100%;
width: calc( var(--height) * var(--ratio) );
}
&__content {
z-index: 1;
grid-area: 2 / 1 / 2 / 1;
}
}

52. .image-block {
--push: 50%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
&__caption {
position: absolute;
top: 45%; // Fallback
top: var(—-push);
transform: translateY( var(—-push) );
}
@media($tablet-start) {
--push: 25%;
}
}

53. div {
counter-increment: fizzbuzz;
&:after {
content: counter(fizzbuzz);
}
&:nth-child(3n):before {
content: 'Fizz';
}
&:nth-child(3n):after {
content: '';
}
&:nth-child(5n):after {
content: 'Buzz';
}
}

63. /*
Resize Rules: PhotoStrip
- Mobile: thumbnails fixed width and
overflow to the right.
- Desktop: if the strip has 6, 7, or 8
images, they should auto-size to fit the
space.
- Desktop: if the strip has 9+ images, the
thumbnails should be the same width.
*/

65. .PhotoStrip {
display: flex; // Fallback
display: grid;
grid-column-gap: 0.625rem;
grid-auto-flow: column;
grid-auto-columns: minmax(100px, 190px);
white-space: nowrap;
&__Photo {
width: 100px; // Fallback
width: 100%;
}
}