Mastodon @Mastodon

As someone hearted a 2015 demo of mine, I decided that since #CSS got better (and hopefully I did too), I should go for a quick 2024 remake.

Here it is on @codepen
https://codepen.io/thebabydino/pen/wKoVGN

It's mindblowing how much I could reduce the (esp. compiled) code - check it out!

HTML by 73%!
CSS by 70%!

I repeat: I shaved off at least 70% from each!

GIF

<!-- 🚨 2015 code: HAML
.grid
- 16.times do
.cube
.squisher
- 3.times do
.cube__face
-->
<!-- Generated HTML -->
<div class='grid'>
<div class='cube'>
<div class='squisher'>
<div class='cube__face'></div>
<div class='cube__face'></div>
<div class='cube__face'></div>
</div>
</div>
<!-- and so on, 16 times the cube block -->
</div>

<!-- 😍 2024 code: Pug
- let n = 4, m = Math.pow(n, 2);

style
- for(let i = 0; i < n; i++)
| .cube:nth-child(#{n}n + #{i + 1}) { --i: #{i} }
| .cube:nth-child(n + #{n*i + 1}) { --j: #{i} }
.grid(style=`--n: ${n}`)
while m--
.cube
-->
<!-- Generated HTML -->
<style>
.cube:nth-child(4n + 1) { --i: 0 }
.cube:nth-child(n + 1) { --j: 0 }
/* and so on, for each of the 4 rows and columns */
</style>
<div class="grid" style="--n: 4">
<div class="cube"></div>
<!-- and so on, 16 cube elements in total -->
</div>

#Sass #SCSS #Haml

Sep 26, 2024, 01:10 PM·

4boosts·6favorites

**Ana Tudor** @anatudor · Sep 26, 2024

Sep 26, 2024

Ana Tudor @anatudor

Back in '15, I had 16 cube elements, each with 3 descendants.
Now I have 16 empty cube elements.
I went from 64 descendants inside the grid element to just 16.

Back in '15, I was stacking all absolutely positioned cube elems in the middle, looping through them all to manually compute their grid positions incl. gaps, put them in the right place using translate(). This bloated compiled CSS.

Now I just use #CSS grid, no looping necessary!

#cssGrid #cssLayout #code

Drag & drop to upload

Recent searches

Search options

Administered by:

Server stats: