18. Link to Talk

32. 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]);

35. .container {
display: flex;
}

37. // 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;
}

46. .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;
}
}

47. .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;
}
}

52. .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;
}
}

62. .clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}

63. .outer-thing {
position: relative;
}
.sticky-thing {
position: absolute;
bottom: 100%;
left: 0;
}

64. .image-container {
// position: relative;
// padding-bottom: calc( (2 / 3) * 100% );
}
.image-container > img {
// position: absolute;
// width: 100%;
// height: 100%;
// object-fit: cover;
}

65. .image-container {
position: relative;
// padding-bottom: calc( (2 / 3) * 100% );
}
.image-container > img {
position: absolute;
width: 100%;
height: 100%;
// object-fit: cover;
}

66. .image-container {
position: relative;
padding-bottom: calc( (2 / 3) * 100% );
}
.image-container > img {
position: absolute;
width: 100%;
height: 100%;
// object-fit: cover;
}

67. .image-container {
position: relative;
padding-bottom: calc( (2 / 3) * 100% );
}
.image-container > img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

68. .arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid red;
}

69. h1 {
font-size: calc( 2rem + 3vw );
}
@media( min-width: 800px ) {
h1 {
font-size: calc( 2rem + ( 800px * ( 3 / 100 ) ) );
}
}

71. // _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

72. 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';
}
}

79. .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;
}

83. $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
);

84. // 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

85. <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

86. // 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;
}
}

87. $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 );
}
}

102. The Way We Talk About CSS by Rachel Andrew

103. The Way We Talk About CSS by Rachel Andrew