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.6.1 @ Strange Loop Slide 1 CSS Algorithms - v3.6.1 @ Strange Loop Slide 2 CSS Algorithms - v3.6.1 @ Strange Loop Slide 3 CSS Algorithms - v3.6.1 @ Strange Loop Slide 4 CSS Algorithms - v3.6.1 @ Strange Loop Slide 5 CSS Algorithms - v3.6.1 @ Strange Loop Slide 6 CSS Algorithms - v3.6.1 @ Strange Loop Slide 7 CSS Algorithms - v3.6.1 @ Strange Loop Slide 8 CSS Algorithms - v3.6.1 @ Strange Loop Slide 9 CSS Algorithms - v3.6.1 @ Strange Loop Slide 10 CSS Algorithms - v3.6.1 @ Strange Loop Slide 11 CSS Algorithms - v3.6.1 @ Strange Loop Slide 12 CSS Algorithms - v3.6.1 @ Strange Loop Slide 13 CSS Algorithms - v3.6.1 @ Strange Loop Slide 14 CSS Algorithms - v3.6.1 @ Strange Loop Slide 15 CSS Algorithms - v3.6.1 @ Strange Loop Slide 16 CSS Algorithms - v3.6.1 @ Strange Loop Slide 17 CSS Algorithms - v3.6.1 @ Strange Loop Slide 18 CSS Algorithms - v3.6.1 @ Strange Loop Slide 19 CSS Algorithms - v3.6.1 @ Strange Loop Slide 20 CSS Algorithms - v3.6.1 @ Strange Loop Slide 21 CSS Algorithms - v3.6.1 @ Strange Loop Slide 22 CSS Algorithms - v3.6.1 @ Strange Loop Slide 23 CSS Algorithms - v3.6.1 @ Strange Loop Slide 24 CSS Algorithms - v3.6.1 @ Strange Loop Slide 25 CSS Algorithms - v3.6.1 @ Strange Loop Slide 26 CSS Algorithms - v3.6.1 @ Strange Loop Slide 27 CSS Algorithms - v3.6.1 @ Strange Loop Slide 28 CSS Algorithms - v3.6.1 @ Strange Loop Slide 29 CSS Algorithms - v3.6.1 @ Strange Loop Slide 30 CSS Algorithms - v3.6.1 @ Strange Loop Slide 31 CSS Algorithms - v3.6.1 @ Strange Loop Slide 32 CSS Algorithms - v3.6.1 @ Strange Loop Slide 33 CSS Algorithms - v3.6.1 @ Strange Loop Slide 34 CSS Algorithms - v3.6.1 @ Strange Loop Slide 35 CSS Algorithms - v3.6.1 @ Strange Loop Slide 36 CSS Algorithms - v3.6.1 @ Strange Loop Slide 37 CSS Algorithms - v3.6.1 @ Strange Loop Slide 38 CSS Algorithms - v3.6.1 @ Strange Loop Slide 39 CSS Algorithms - v3.6.1 @ Strange Loop Slide 40 CSS Algorithms - v3.6.1 @ Strange Loop Slide 41 CSS Algorithms - v3.6.1 @ Strange Loop Slide 42 CSS Algorithms - v3.6.1 @ Strange Loop Slide 43 CSS Algorithms - v3.6.1 @ Strange Loop Slide 44 CSS Algorithms - v3.6.1 @ Strange Loop Slide 45 CSS Algorithms - v3.6.1 @ Strange Loop Slide 46 CSS Algorithms - v3.6.1 @ Strange Loop Slide 47 CSS Algorithms - v3.6.1 @ Strange Loop Slide 48 CSS Algorithms - v3.6.1 @ Strange Loop Slide 49 CSS Algorithms - v3.6.1 @ Strange Loop Slide 50 CSS Algorithms - v3.6.1 @ Strange Loop Slide 51 CSS Algorithms - v3.6.1 @ Strange Loop Slide 52 CSS Algorithms - v3.6.1 @ Strange Loop Slide 53 CSS Algorithms - v3.6.1 @ Strange Loop Slide 54 CSS Algorithms - v3.6.1 @ Strange Loop Slide 55 CSS Algorithms - v3.6.1 @ Strange Loop Slide 56 CSS Algorithms - v3.6.1 @ Strange Loop Slide 57 CSS Algorithms - v3.6.1 @ Strange Loop Slide 58 CSS Algorithms - v3.6.1 @ Strange Loop Slide 59 CSS Algorithms - v3.6.1 @ Strange Loop Slide 60 CSS Algorithms - v3.6.1 @ Strange Loop Slide 61 CSS Algorithms - v3.6.1 @ Strange Loop Slide 62 CSS Algorithms - v3.6.1 @ Strange Loop Slide 63 CSS Algorithms - v3.6.1 @ Strange Loop Slide 64 CSS Algorithms - v3.6.1 @ Strange Loop Slide 65 CSS Algorithms - v3.6.1 @ Strange Loop Slide 66 CSS Algorithms - v3.6.1 @ Strange Loop Slide 67 CSS Algorithms - v3.6.1 @ Strange Loop Slide 68 CSS Algorithms - v3.6.1 @ Strange Loop Slide 69 CSS Algorithms - v3.6.1 @ Strange Loop Slide 70 CSS Algorithms - v3.6.1 @ Strange Loop Slide 71 CSS Algorithms - v3.6.1 @ Strange Loop Slide 72 CSS Algorithms - v3.6.1 @ Strange Loop Slide 73 CSS Algorithms - v3.6.1 @ Strange Loop Slide 74 CSS Algorithms - v3.6.1 @ Strange Loop Slide 75 CSS Algorithms - v3.6.1 @ Strange Loop Slide 76 CSS Algorithms - v3.6.1 @ Strange Loop Slide 77 CSS Algorithms - v3.6.1 @ Strange Loop Slide 78 CSS Algorithms - v3.6.1 @ Strange Loop Slide 79 CSS Algorithms - v3.6.1 @ Strange Loop Slide 80 CSS Algorithms - v3.6.1 @ Strange Loop Slide 81 CSS Algorithms - v3.6.1 @ Strange Loop Slide 82 CSS Algorithms - v3.6.1 @ Strange Loop Slide 83 CSS Algorithms - v3.6.1 @ Strange Loop Slide 84 CSS Algorithms - v3.6.1 @ Strange Loop Slide 85 CSS Algorithms - v3.6.1 @ Strange Loop Slide 86 CSS Algorithms - v3.6.1 @ Strange Loop Slide 87 CSS Algorithms - v3.6.1 @ Strange Loop Slide 88 CSS Algorithms - v3.6.1 @ Strange Loop Slide 89 CSS Algorithms - v3.6.1 @ Strange Loop Slide 90 CSS Algorithms - v3.6.1 @ Strange Loop Slide 91 CSS Algorithms - v3.6.1 @ Strange Loop Slide 92 CSS Algorithms - v3.6.1 @ Strange Loop Slide 93 CSS Algorithms - v3.6.1 @ Strange Loop Slide 94 CSS Algorithms - v3.6.1 @ Strange Loop Slide 95 CSS Algorithms - v3.6.1 @ Strange Loop Slide 96 CSS Algorithms - v3.6.1 @ Strange Loop Slide 97 CSS Algorithms - v3.6.1 @ Strange Loop Slide 98 CSS Algorithms - v3.6.1 @ Strange Loop Slide 99 CSS Algorithms - v3.6.1 @ Strange Loop Slide 100 CSS Algorithms - v3.6.1 @ Strange Loop Slide 101 CSS Algorithms - v3.6.1 @ Strange Loop Slide 102 CSS Algorithms - v3.6.1 @ Strange Loop Slide 103 CSS Algorithms - v3.6.1 @ Strange Loop Slide 104 CSS Algorithms - v3.6.1 @ Strange Loop Slide 105 CSS Algorithms - v3.6.1 @ Strange Loop Slide 106 CSS Algorithms - v3.6.1 @ Strange Loop Slide 107 CSS Algorithms - v3.6.1 @ Strange Loop Slide 108 CSS Algorithms - v3.6.1 @ Strange Loop Slide 109 CSS Algorithms - v3.6.1 @ Strange Loop Slide 110 CSS Algorithms - v3.6.1 @ Strange Loop Slide 111 CSS Algorithms - v3.6.1 @ Strange Loop Slide 112 CSS Algorithms - v3.6.1 @ Strange Loop Slide 113 CSS Algorithms - v3.6.1 @ Strange Loop Slide 114 CSS Algorithms - v3.6.1 @ Strange Loop Slide 115 CSS Algorithms - v3.6.1 @ Strange Loop Slide 116 CSS Algorithms - v3.6.1 @ Strange Loop Slide 117 CSS Algorithms - v3.6.1 @ Strange Loop Slide 118 CSS Algorithms - v3.6.1 @ Strange Loop Slide 119 CSS Algorithms - v3.6.1 @ Strange Loop Slide 120 CSS Algorithms - v3.6.1 @ Strange Loop Slide 121 CSS Algorithms - v3.6.1 @ Strange Loop Slide 122 CSS Algorithms - v3.6.1 @ Strange Loop Slide 123 CSS Algorithms - v3.6.1 @ Strange Loop Slide 124 CSS Algorithms - v3.6.1 @ Strange Loop Slide 125 CSS Algorithms - v3.6.1 @ Strange Loop Slide 126 CSS Algorithms - v3.6.1 @ Strange Loop Slide 127 CSS Algorithms - v3.6.1 @ Strange Loop Slide 128 CSS Algorithms - v3.6.1 @ Strange Loop Slide 129 CSS Algorithms - v3.6.1 @ Strange Loop Slide 130 CSS Algorithms - v3.6.1 @ Strange Loop Slide 131 CSS Algorithms - v3.6.1 @ Strange Loop Slide 132 CSS Algorithms - v3.6.1 @ Strange Loop Slide 133 CSS Algorithms - v3.6.1 @ Strange Loop Slide 134 CSS Algorithms - v3.6.1 @ Strange Loop Slide 135 CSS Algorithms - v3.6.1 @ Strange Loop Slide 136 CSS Algorithms - v3.6.1 @ Strange Loop Slide 137 CSS Algorithms - v3.6.1 @ Strange Loop Slide 138 CSS Algorithms - v3.6.1 @ Strange Loop Slide 139 CSS Algorithms - v3.6.1 @ Strange Loop Slide 140 CSS Algorithms - v3.6.1 @ Strange Loop Slide 141 CSS Algorithms - v3.6.1 @ Strange Loop Slide 142 CSS Algorithms - v3.6.1 @ Strange Loop Slide 143 CSS Algorithms - v3.6.1 @ Strange Loop Slide 144 CSS Algorithms - v3.6.1 @ Strange Loop Slide 145 CSS Algorithms - v3.6.1 @ Strange Loop Slide 146 CSS Algorithms - v3.6.1 @ Strange Loop Slide 147 CSS Algorithms - v3.6.1 @ Strange Loop Slide 148 CSS Algorithms - v3.6.1 @ Strange Loop Slide 149 CSS Algorithms - v3.6.1 @ Strange Loop Slide 150 CSS Algorithms - v3.6.1 @ Strange Loop Slide 151 CSS Algorithms - v3.6.1 @ Strange Loop Slide 152 CSS Algorithms - v3.6.1 @ Strange Loop Slide 153 CSS Algorithms - v3.6.1 @ Strange Loop Slide 154 CSS Algorithms - v3.6.1 @ Strange Loop Slide 155 CSS Algorithms - v3.6.1 @ Strange Loop Slide 156 CSS Algorithms - v3.6.1 @ Strange Loop Slide 157 CSS Algorithms - v3.6.1 @ Strange Loop Slide 158 CSS Algorithms - v3.6.1 @ Strange Loop Slide 159 CSS Algorithms - v3.6.1 @ Strange Loop Slide 160 CSS Algorithms - v3.6.1 @ Strange Loop Slide 161 CSS Algorithms - v3.6.1 @ Strange Loop Slide 162 CSS Algorithms - v3.6.1 @ Strange Loop Slide 163 CSS Algorithms - v3.6.1 @ Strange Loop Slide 164 CSS Algorithms - v3.6.1 @ Strange Loop Slide 165 CSS Algorithms - v3.6.1 @ Strange Loop Slide 166 CSS Algorithms - v3.6.1 @ Strange Loop Slide 167 CSS Algorithms - v3.6.1 @ Strange Loop Slide 168 CSS Algorithms - v3.6.1 @ Strange Loop Slide 169 CSS Algorithms - v3.6.1 @ Strange Loop Slide 170 CSS Algorithms - v3.6.1 @ Strange Loop Slide 171 CSS Algorithms - v3.6.1 @ Strange Loop Slide 172 CSS Algorithms - v3.6.1 @ Strange Loop Slide 173 CSS Algorithms - v3.6.1 @ Strange Loop Slide 174 CSS Algorithms - v3.6.1 @ Strange Loop Slide 175 CSS Algorithms - v3.6.1 @ Strange Loop Slide 176 CSS Algorithms - v3.6.1 @ Strange Loop Slide 177 CSS Algorithms - v3.6.1 @ Strange Loop Slide 178 CSS Algorithms - v3.6.1 @ Strange Loop Slide 179 CSS Algorithms - v3.6.1 @ Strange Loop Slide 180 CSS Algorithms - v3.6.1 @ Strange Loop Slide 181 CSS Algorithms - v3.6.1 @ Strange Loop Slide 182 CSS Algorithms - v3.6.1 @ Strange Loop Slide 183 CSS Algorithms - v3.6.1 @ Strange Loop Slide 184 CSS Algorithms - v3.6.1 @ Strange Loop Slide 185 CSS Algorithms - v3.6.1 @ Strange Loop Slide 186 CSS Algorithms - v3.6.1 @ Strange Loop Slide 187 CSS Algorithms - v3.6.1 @ Strange Loop Slide 188 CSS Algorithms - v3.6.1 @ Strange Loop Slide 189 CSS Algorithms - v3.6.1 @ Strange Loop Slide 190 CSS Algorithms - v3.6.1 @ Strange Loop Slide 191 CSS Algorithms - v3.6.1 @ Strange Loop Slide 192 CSS Algorithms - v3.6.1 @ Strange Loop Slide 193 CSS Algorithms - v3.6.1 @ Strange Loop Slide 194 CSS Algorithms - v3.6.1 @ Strange Loop Slide 195 CSS Algorithms - v3.6.1 @ Strange Loop Slide 196 CSS Algorithms - v3.6.1 @ Strange Loop Slide 197 CSS Algorithms - v3.6.1 @ Strange Loop Slide 198 CSS Algorithms - v3.6.1 @ Strange Loop Slide 199 CSS Algorithms - v3.6.1 @ Strange Loop Slide 200 CSS Algorithms - v3.6.1 @ Strange Loop Slide 201 CSS Algorithms - v3.6.1 @ Strange Loop Slide 202 CSS Algorithms - v3.6.1 @ Strange Loop Slide 203 CSS Algorithms - v3.6.1 @ Strange Loop Slide 204 CSS Algorithms - v3.6.1 @ Strange Loop Slide 205 CSS Algorithms - v3.6.1 @ Strange Loop Slide 206 CSS Algorithms - v3.6.1 @ Strange Loop Slide 207 CSS Algorithms - v3.6.1 @ Strange Loop Slide 208 CSS Algorithms - v3.6.1 @ Strange Loop Slide 209 CSS Algorithms - v3.6.1 @ Strange Loop Slide 210 CSS Algorithms - v3.6.1 @ Strange Loop Slide 211 CSS Algorithms - v3.6.1 @ Strange Loop Slide 212 CSS Algorithms - v3.6.1 @ Strange Loop Slide 213
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

CSS Algorithms - v3.6.1 @ Strange Loop

Download to read offline

Is CSS a PL? Can you write algorithms in CSS?

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

CSS Algorithms - v3.6.1 @ Strange Loop

  1. 1. What is A Programming Language? By Will Chrichton
  2. 2. Link to the Tweet.
  3. 3. Wikipedia
  4. 4. WolframMathWorld
  5. 5. WolframMathWorld
  6. 6. WolframMathWorld
  7. 7. WolframMathWorld
  8. 8. input:checked + input:not(:checked) + input:not(:checked) + * {     /* Style fourth cell to prompt human to change state */ } if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) {     cellFour = 1; }
  9. 9. Rule 110 in CSS/HTML/Human
  10. 10. Accidentally Turing Complete by Andreas Zwinkau
  11. 11. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  12. 12. <div class="square"></div> .square--bigger {     width: 150px;     height: 150px; } .square--smaller {     width: 50px;     height: 50px; } <div class="square square--bigger"></div> <div class="square square--smaller"></div> .square {     width: 100px;     height: 100px;     background-color: blue; }
  13. 13. <div class="square"></div>.square {     width: 100px;     height: 100px;     background-color: blue; }
  14. 14. <div class="box"></div>.square {     --square-size: 100px;     width: var( --square-size );     height: var( --square-size );     background-color: blue; } <div class="square"></div>
  15. 15. .square--smaller {     --square-size: 50px; } .square--bigger {     --square-size: 150px; } <div class="square"></div> <div class="square square--bigger"></div> <div class="square square--smaller"></div> .square {     --square-size: 100px;     width: var( --square-size );     height: var( --square-size );     background-color: blue; }
  16. 16. .square {     ... } <div class="square"></div> .square--smaller {     --square-size: 50px; } .square--bigger {     --square-size: 150px; } <div class="square square--bigger"></div> <div class="square square--smaller square--rounded"></div> <div class="square square--smaller"></div> .square--rounded {     border-radius: 50%; }
  17. 17. .square--rounded {     border-radius: 50%; } .square {     ... } <div class="square"></div> <div class="square square--rounded
 square--bigger square--yellow"></div> .square--yellow {     background-color: yellow; } .square--bigger {     --square-size: 150px; }
  18. 18. .square {     --square-size: 100px;     --square-bg-color: blue;     ...     background-color: var( --square-bg-color ); } .square--yellow {     --square-bg-color: yellow; } <div class="square"></div> <div class="square square--rounded square--yellow"></div> .square--rounded { ... } .square--bigger { ... }
  19. 19. <div class="square"></div>.square {     --square-size: 100px;     --square-bg-color: blue;     width: var( --square-size );     height: var( --square-size );     background-color: var( --square-bg-color ); }
  20. 20. <div class="shape"></div>.shape {     --shape-height: 100px;     --shape-width: 100px;     --shape-bg-color: blue;     width: var( --shape-width );     height: var( --shape-height );     background-color: var( --shape-bg-color ); }
  21. 21. .shape { ... } .shape--smaller {     --shape-height: 50px;     --shape-width: 50px; } .shape--bigger {     --shape-height: 150px;     --shape-width: 150px; } <div class="shape shape--bigger"></div> <div class="shape shape--smaller"></div> <div class="shape shape--rounded
 shape--bigger shape--yellow"></div> .shape--yellow { ... } .shape--rounded { ... } <div class="shape"></div>
  22. 22. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> .shape { ... } .shape--small-square {     --shape-height: 50px;     --shape-width: 50px; } .shape--big-square {     --shape-height: 150px;     --shape-width: 150px; } .shape--yellow { ... } .shape--rounded { ... } <div class="shape"></div>
  23. 23. .shape--small-square { ... } <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape--rectangle {     --shape-height: 50px;     --shape-width: 100px; } <div class="shape shape--rectangle"></div> <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> .shape--yellow { ... } .shape--rounded { ... } .shape { ... } .shape--big-square { ... } <div class="shape"></div>
  24. 24. .shape--rounded {     border-radius: 50%; } <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rounded
 shape--big-square shape--yellow"></div> <div class="shape shape--rectangle"></div> <div class="shape"></div> .shape--small-square { ... } .shape--rectangle { ... } .shape--yellow { ... } .shape { ... } .shape--big-square { ... }
  25. 25. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div <div class="shape shape--rectangle shape--rounded"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> .shape--rounded {     border-radius: 20px; } .shape--circle {     border-radius: 50%; } .shape--rectangle { ... } <div class="shape"></div> .shape--small-square { ... } .shape--yellow { ... } .shape { ... } .shape--big-square { ... }
  26. 26. Sign Up For Our Newsletter
  27. 27. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape { ... } .shape--small-square { ... } .shape--big-square { ... } .shape--yellow { ... } .shape--circle { ... } .shape--rounded { ... } <div class="shape shape--rounded-rectangle"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> <div class="shape"></div> .shape--has-text { --shape-height: initial;     --shape-width: initial; } .shape__text {     color: white;     font-size: 16px; } <button class="shape shape--has-text">     <a href="" class="shape__text"></a> </button>
  28. 28. Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter
  29. 29. <div class="shape shape--big-square"></div> <div class="shape shape--small-square"></div .shape { ... } .shape--small-square { ... } .shape--big-square { ... } .shape--yellow { ... } .shape--circle { ... } .shape--rounded-rectangle { ... } <div class="shape shape--rounded-rectangle"></div> <div class="shape shape--circle
 shape--big-square shape--yellow"></div> <div class="shape"></div> .shape--has-text { --shape-height: initial;     --shape-width: initial; } .shape__text {     color: white;     font-size: 16px; } <button class="shape shape--has-text">     <a href="" class="shape__text"></a> </button>
  30. 30. Robert C. Martin in The Future of Programming
  31. 31. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  32. 32. <div class="shape"></div>.shape {     --shape-height: 100px;     --shape-width: 100px;     --shape-bg-color: blue;     width: var( --shape-width );     height: var( --shape-height );     background-color: var( --shape-bg-color ); }
  33. 33. 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]);
  34. 34. 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]);
  35. 35. .container {     display: flex; }
  36. 36. .container {     display: flex;     flex-wrap: wrap; }
  37. 37. fn get_flex_line(&mut self, container_size: Au) -> Option<FlexLine> {     ...     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 total_line_size + outer_main_size > container_size &&             end != start &&             self.is_wrappable         {             break;         }     }     ... } // Flex in Servo // https://github.com/servo/servo/blob/master/components/layout/flex.rs
  38. 38. .container {     display: flex;     flex-wrap: wrap; }
  39. 39. .clearfix::before, .clearfix::after {     content: "";     display: table; } .clearfix::after {     clear: both; }
  40. 40. .relative-parent {     position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent {     position: absolute;     right: 0;     bottom: 0; }     
  41. 41. .spaced-content > * + * {     margin-top: 1rem; }
  42. 42. h1 {     font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) {     h1 {         font-size: calc( 2rem + ( 800px * ( 3 / 100 ) ) );     } }
  43. 43. .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; }
  44. 44. .lrv-a-glue-parent {     position: relative; } .lrv-a-glue {     // Fallback is top left for IE11.     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 ); } .lrv-a-glue--r-0 {     --a-glue-right: 0; } .relative-parent {     position: relative; } .child-stuck-to-bottom… {     position: absolute;     right: 0;     bottom: 0; }     
  45. 45. .space-content > * + * {     margin-top: 1rem; } .lrv-a-space-children-horizontal > * + * {     margin-left: $spacer-050; // Fallback.     margin-left: var( --a-space-children-spacer ); } @supports( column-gap: 1rem ) {     .lrv-a-space-children-horizontal {         column-gap: var( --a-space-children-spacer );     }          .lrv-a-space-children-horizontal > * {         margin-left: unset; } }
  46. 46. 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

Is CSS a PL? Can you write algorithms in CSS?

Views

Total views

468

On Slideshare

0

From embeds

0

Number of embeds

13

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×