Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Algorithms of CSS @ CSSConf EU 2018

11,949 views

Published on



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

Published in: Technology
  • Be the first to comment

The Algorithms of CSS @ CSSConf EU 2018

  1. 1. 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]) );
  2. 2. .container { display: flex; }
  3. 3. /* 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 */
  4. 4. .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; } }
  5. 5. .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%; } }
  6. 6. 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';   } }
  7. 7. /* 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. */
  8. 8. .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%; } }

×