Download as PDF, PPTX
![function bubbleSort(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;
}
console.log( bubbleSort([4, 2, 1, 3]) );](https://image.slidesharecdn.com/algorithmsofcss-180531154018/75/The-Algorithms-of-CSS-CSSConf-EU-2018-21-2048.jpg)
The Algorithms of CSS @ CSSConf EU 2018
- 21. function bubbleSort(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; } console.log( bubbleSort([4, 2, 1, 3]) );
- 24.
- 43. /* header - min-height80vh - header images - - height 100% - width based on aspect ratio (1.4 * 100vw) - overflows left to appear centered - position relative @media tablet - no x overflow, just full width @media desktop - overflow top / fixed to bottom */
- 51. .ocean { --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; } }
- 52. .image-block { --push: 50%; position:relative; display: flex; flex-direction: column; align-items: center; &__caption { position: absolute; top: 45%; // Fallback top: var(—-push); transform: translateY( var(—-push) ); } @media($tablet-start) { --push: 25%; } }
- 53. 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'; } }
- 63. /* Resize Rules: PhotoStrip -Mobile: thumbnails fixed width and overflow to the right. - Desktop: if the strip has 6, 7, or 8 images, they should auto-size to fit the space. - Desktop: if the strip has 9+ images, the thumbnails should be the same width. */
- 65. .PhotoStrip { display: flex;// Fallback display: grid; grid-column-gap: 0.625rem; grid-auto-flow: column; grid-auto-columns: minmax(100px, 190px); white-space: nowrap; &__Photo { width: 100px; // Fallback width: 100%; } }
