A presentation at CSS camp in in Barcelona, Spain by Lara Schenck
What is A Programming Language? By Will Chrichton
function sort(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; } var sorted = sort([4, 2, 1, 3]);
.container { display: flex; }
.container { display: flex; }
.clearfix::before, .clearfix::after { content: “”; display: table; } .clearfix::after { clear: both; }
.relative-parent { position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent { position: absolute; right: 0; bottom: 0; }
.spaced-content > * + * { margin-top: 1rem; }
h1 { font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) { h1 { font-size: calc( 2rem + ( 800px * } } ( 3 / 100 ) ) );
.grid { display: grid; grid-template-columns: repeat( var( —grid-cols, 1 ), 1fr ); } .grid-cols3 { —grid-cols: 3; } .grid-cols4 { —grid-cols: 4; } .grid-item-span2 { grid-column: span 2; }
.relative-parent { position: relative; } .pmc-a-glue-parent { position: relative; } .child position: absolute; right: 0; bottom: 0; } .pmc-a-glue { // Fallback is top left for everything. top: 0; left: 0; position: absolute; z-index: $z-index-middle-bottom; top: var( —a-glue-top, initial ); bottom: var( —a-glue-bottom, initial ); right: var( —a-glue-right, initial ); left: var( —a-glue-left, initial ); } .pmc-a-glue—r-0 { —a-glue-right: 0; }
.a-space-children-horizontal { display: flex; flex-wrap: wrap; } .space-content > * + * { margin-top: 1rem; } .a-space-children-horizontal > * + * { margin-left: $spacer-050; // Fallback. margin-left: var( —a-space-children-spacer ); } @supports( column-gap: 1rem ) { .a-space-children-horizontal { column-gap: var( —a-space-children-spacer ); } .a-space-children-horizontal > * { margin-bottom: unset;
.a-story-arc-item-border-decoration { —a-story-arc-item-border-decoration-dot-offset: 1rem; —a-story-arc-item-border-decoration-before-transform: translate(-50%, 50% ); &::before { content: ”; position: absolute; top: 0; left: 0; transform: var( —a-story-arc-item-border-decoration-before-transform ); width: rem(10); height: rem(10); background-color: map-get( $semantic-color-list, brand-red ); border-radius: 50%; box-shadow: 0px 0px 0px 3px map-get( $semantic-color-list, brand-red-light 0px 0px 0px 6px map-get( $semantic-color-list, brand-red-lightest );
describe( ‘a-space-children-vertical’, () => { const parent = document.querySelector( ‘.a-space-children-vertical’ ); const parentBox = parent.getBoundingClientRect(); it( ‘does not apply a space above the first item’, () => { let kidBox = parent.children[0].getBoundingClientRect(); return assertEquals( parentBox.top, kidBox.top ); }); it( ‘spaces children’, () => { let kid1Box = parent.children[0].getBoundingClientRect(); let kid2Box = parent.children[1].getBoundingClientRect(); let parentStyles = window.getComputedStyle( parent ); let spaceBetweenKids = parseInt( parentStyles.getPropertyValue( ‘—a-space-children-space return assertEquals( kid1Box.bottom, ( kid2Box.top - spaceBetweenKids ) ); }); it( ‘does not apply a space below the last item’, () => { let kidBox = children[ children.length - 1 ];
div { counter-reset: fizzbuzz; counter-increment: fizzbuzz; } div::before { content: counter(fizzbuzz); } div:nth-child(3n)::before { content: ‘Fizz’; } div:nth-child(5n)::after { content: ‘Buzz’; } Full FizzBuzz in CSS/HTML CodePen
Wait…CSS algorithms? Can one really write algorithms in CSS? According to Lara, absolutely! This talk is all about CSS algorithms: what they are, how to write them, and the potential impacts of a word like ‘algorithm’ when it comes to CSS expertise in the larger context of web development.
The following resources were mentioned during the presentation or are useful additional information.
Blog post list of resources for learning how a browser works and about Computer Science.
for free. You
can too.