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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

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
  • OmarMohammed45

    Dec. 9, 2018
  • AbdullahRamzan3

    Dec. 7, 2018

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.

Views

Total views

8,426

On Slideshare

0

From embeds

0

Number of embeds

7,771

Actions

Downloads

8

Shares

0

Comments

0

Likes

2

×