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.

Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS v2.0 @ WordCamp US)

5,068 views

Published on

Over the past 10 years, CSS has transformed from a descriptive language for presentation into a Turing-complete, domain-specific, declarative programming language for layout on the web.

Okay…but how does one go from describing presentation to programming in CSS? And what on earth is a “CSS Algorithm”?

This entertaining and personable talk will answer these questions and more, before delving into practical steps for creating CSS algorithms of your own to bridge the gap between design and development.

Published in: Technology

Bridging the Design to Development Gap with CSS Algorithms (Algorithms of CSS v2.0 @ WordCamp US)

  1. 1. Link to Talk
  2. 2. 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; } const sorted = sort([4, 2, 1, 3]);
  3. 3. .container { display: flex; }
  4. 4. // Flex wrap, maybe // https://github.com/servo/servo/blob/master/components/layout/flex.rs for item in items { let kid = children.get(item.index); item.init_sizes(kid, container_size, self.main_mode); let outer_main_size = item.outer_main_size(kid, self.main_mode); if self.is_wrappable && total_line_size + outer_main_size > container_s break; } margin_count += item.auto_margin_count(kid, self.main_mode); total_line_size += outer_main_size; end += 1; }
  5. 5. .hero {   --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; } }
  6. 6. .hero {   --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; } }
  7. 7. .hero {   --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; } }
  8. 8. .clearfix::before, .clearfix::after {     content: "";     display: table; } .clearfix::after {     clear: both; }
  9. 9. .outer-thing {     position: relative; } .sticky-thing {     position: absolute;     bottom: 100%;     left: 0; }
  10. 10. .image-container {     // position: relative;     // padding-bottom: calc( (2 / 3) * 100% ); } .image-container > img {     // position: absolute;     // width: 100%;     // height: 100%;     // object-fit: cover; }     
  11. 11. .image-container {     position: relative;     // padding-bottom: calc( (2 / 3) * 100% ); } .image-container > img {     position: absolute;     width: 100%;     height: 100%;     // object-fit: cover; }
  12. 12. .image-container {     position: relative;     padding-bottom: calc( (2 / 3) * 100% ); } .image-container > img {     position: absolute;     width: 100%;     height: 100%;     // object-fit: cover; }     
  13. 13. .image-container {     position: relative;     padding-bottom: calc( (2 / 3) * 100% ); } .image-container > img {     position: absolute;     width: 100%;     height: 100%;     object-fit: cover; }     
  14. 14. .arrow-up {     width: 0;     height: 0;     border-left: 15px solid transparent;     border-right: 15px solid transparent;     border-bottom: 15px solid red; }
  15. 15. h1 {     font-size: calc( 2rem + 3vw ); } @media( min-width: 800px ) {     h1 {         font-size: calc( 2rem + ( 800px * ( 3 / 100 ) ) );     } }
  16. 16. // _mixins.scss @mixin fluid-type( $base-font-size, $growth-factor, $stop-growing-at ) {     --growth-factor: calc( #{$growth-factor} * 1vw );          @media( min-width: $stop-growing-at ) {         --growth-factor: calc( #{$stop-growing-at} * ( (#{$growth-factor} / 100) ) );     }          font-size: $base-font-size; // Fallback.     font-size: calc( #{$base-font-size} + var(--growth-factor) ); } // _typography.scss .fluid-type-large {     @include fluid-type( 1rem, 3, 800px ); } https://codepen.io/laras126/pen/JeVRbo
  17. 17. 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';   } }
  18. 18. .l-features {     margin-bottom: rem-calc(20);     @include supports-grid {         display: grid;         grid-template-columns: 1fr;         grid-row-gap: rem-calc(20);         grid-column-gap: rem-calc(30);         @include breakpoint( desktop ) {             grid-template-columns: 2fr minmax( #{rem-calc(150)}, 1fr );         }     } } .l-features__header {     grid-column: 1 / -1; }
  19. 19. $o_story_river_config = [     'class' => 'o-story--two-col o-story--river u-padding-tb-20',     'image_class' => 'u-bg-dots u-bg-dots--river',     'title_class' => 'c-title--medium@tablet-min',     'dek_class' => 'c-dek--medium@tablet-min', ]; PMC::render_template(     sprintf( ‘%s/tmpl/inc/objects/o-story.php', IW_TEMPLATE_DIR ),     [         'article' => $post,         'data' => $o_story_river_config,     ],     true );
  20. 20. // In an npm package. .u-glue-parent {     position: relative; } .u-glue {     --u-glue__transform: initial;         position: absolute; } [data-glue*="top"] {     top: 0; } [data-glue*="right"] {     right: 0; } [data-glue*="bottom"] {     bottom: 0;   https://codepen.io/laras126/pen/vVXrMz
  21. 21. <figure class="u-glue-parent o-block">     <figcaption class="u-glue c-tag" data-glue="top right">Caption</figcaption>     <img src="https://picsum.photos/350/200" alt="" /> </figure> // In a project. .c-tag {     background-color: coral;     padding: 0.5rem;     color: white;     border: 2px solid navy;          --u-glue__transform: translate( 50%, 50% ); } https://codepen.io/laras126/pen/vVXrMz
  22. 22. // In PMC Core Patterns npm package. @mixin pmc-u-crop( $width, $height ) {     position: relative;     padding-bottom: calc( ( #{$height} / #{$width} ) * 100% );     img {         position: absolute;         width: 100%;         height: 100%;         object-fit: cover;     } }
  23. 23. $ratios: (     (16, 9),     (3, 2),     (1, 1) ); @each $ratio in $ratios {        $w: nth( $ratio, 1 );     $h: nth( $ratio, 2 );          .pmc-u-crop-#{$w}x#{$h} {         @include pmc-u-crop( $width: $w, $height:$h );     } }
  24. 24. The Way We Talk About CSS by Rachel Andrew
  25. 25. The Way We Talk About CSS by Rachel Andrew

×