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.

of

CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 1 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 2 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 3 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 4 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 5 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 6 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 7 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 8 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 9 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 10 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 11 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 12 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 13 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 14 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 15 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 16 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 17 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 18 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 19 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 20 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 21 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 22 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 23 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 24 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 25 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 26 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 27 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 28 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 29 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 30 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 31 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 32 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 33 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 34 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 35 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 36 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 37 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 38 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 39 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 40 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 41 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 42 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 43 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 44 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 45 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 46 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 47 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 48 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 49 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 50 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 51 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 52 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 53 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 54 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 55 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 56 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 57 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 58 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 59 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 60 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 61 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 62 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 63 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 64 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 65 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 66 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 67 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 68 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 69 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 70 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 71 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 72 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 73 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 74 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 75 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 76 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 77 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 78 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 79 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 80 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 81 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 82 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 83 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 84 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 85 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 86 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 87 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 88 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 89 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 90 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 91 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 92 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 93 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 94 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 95 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 96 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 97 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 98 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 99 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 100 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 101 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 102 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 103 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 104 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 105 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 106 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 107 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 108 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 109 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 110 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 111 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 112 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 113 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 114 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 115 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 116 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 117 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 118 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 119 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 120 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 121 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 122 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 123 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 124 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 125 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 126 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 127 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 128 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 129 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 130 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 131 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 132 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 133 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 134 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 135 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 136 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 137 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 138 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 139 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 140 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 141 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 142 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 143 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 144 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 145 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 146 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 147 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 148 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 149 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 150 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 151 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 152 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 153 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 154 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 155 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 156 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 157 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 158 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 159 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 160 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 161 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 162 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 163 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 164 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 165 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 166 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 167 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 168 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 169 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 170 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 171 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 172 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 173 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 174 CSS Algorithms  v3.4 @ CSSCamp Barcelona Slide 175
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

CSS Algorithms v3.4 @ CSSCamp Barcelona

Download to read offline

This talk is all about CSS Algorithms! Programming, yay!

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

CSS Algorithms v3.4 @ CSSCamp Barcelona

  1. 1. What is A Programming Language? By Will Chrichton
  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; } var sorted = sort([4, 2, 1, 3]);
  3. 3. .container {     display: flex; }
  4. 4. .container {     display: flex; }
  5. 5. .clearfix::before, .clearfix::after {     content: "";     display: table; } .clearfix::after {     clear: both; }
  6. 6. .relative-parent {     position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent {     position: absolute;     right: 0;     bottom: 0; }     
  7. 7. .spaced-content > * + * {     margin-top: 1rem; }
  8. 8. h1 {     font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) {     h1 {         font-size: calc( 2rem + ( 800px * ( 3 / 100 ) ) );     } }
  9. 9. .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; }
  10. 10. .pmc-a-glue-parent {     position: relative; } .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; } .relative-parent {     position: relative; } .child     position: absolute;     right: 0;     bottom: 0; }     
  11. 11. .space-content > * + * {     margin-top: 1rem; } .a-space-children-horizontal {     display: flex;     flex-wrap: wrap; } .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;     
  12. 12. .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 );     
  13. 13. 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 ];     
  14. 14. 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
  • Boogieyan

    Apr. 14, 2020

This talk is all about CSS Algorithms! Programming, yay!

Views

Total views

306

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×