Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

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

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Advertisement

Related Books

Free with a 30 day trial from Scribd

See all

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

×