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.

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