@theoleff profile picture
Theo Soti @theoleff
Joined January 2012
  • Tweets 374
  • Following 338
  • Followers 143
33 Photos and videos
I try to create CSS tutorials... with music. Let me know what you think of it!
1:11
2
49
I try to create CSS tutorials... with music. Let me know what you think of it!
1:11
13
You don't need media queries for a responsive card grid. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); auto-fit counts the columns. minmax sets the floor and lets each column grow with 1fr. Resize the window, cards reflow. One line. Sound on 🔊
1:42
1
20
I made a rock song about CSS justify vs align. The rule that fixed it for me forever: - justify → side to side - align → up and down - items → one box - content → the whole group Flex or grid. Same four words. Sound on 🔊
1:38
1
39
I made a rock & roll song about CSS subgrid. Cards never line up. Titles wrap, buttons drift, the row looks broken. One line: grid-template-rows: subgrid; Now the children share the parent's tracks. Everything snaps. Sound on 🔊
1:18
1
41
Native HTML accordion. Zero JavaScript 👇 <details> <summary>FAQ</summary> Answer, hidden until clicked. </details> Keyboard screen-reader friendly by default. Add name="faq" and only one stays open at a time. More no-JS tricks 👉 theosoti.com/you-dont-need-j…
1:28
1
25
HTML has a built-in modal. The <dialog> element gives you showModal(), a backdrop, ESC-to-close, and focus trapping. All from the browser. No Bootstrap modal. No Radix. No react-modal. A song about the most underrated HTML tag 🎵
0:57
1
57
You don't need JavaScript for fancy UI details. CSS ::before and ::after give you quote marks, badges, arrows, dropcaps, gradient overlays. Zero markup, zero JS. A song about the most underrated CSS feature 🎵
1:19
5
143
I created a funny song about CSS position: absolute, sticky, and relative. It is short, funny, slightly absurd, but practical if you ever needed clarification about why your design ended up somewhere else.
1:05
2
62
Nobody asked for another padding vs margin explanation. But here we are, listening to a song about it.
0:40
1
49
ch matches the width of the “0” character. lh equals the element’s line-height. cap matches the height of capital letters. ex follows the height of the lowercase “x”. cqi scales with a container’s inline size. vmin and vmax follow the smallest or largest viewport side.
90
Animated text gradients with pure CSS. background-clip:text color:transparent, then animate background-position. Use background-size, and repeat the first color in the gradient (c1 c2 c1) to avoid a visible “jump” on loop. Chromium WebKit are solid; Firefox is catching up.
60
Stop rounding corners. Start shaping them. border-radius sets the size. corner-shape sets the geometry (bevel, scoop, squircle...). Same radius, totally different vibe. Works today in Chromium. No Safari/Firefox yet, so ship it as progressive enhancement.
0:15
2
127
Stop hardcoding input heights or widths. field-sizing: content; lets inputs, selects, and textareas size to their content (even placeholders). Cleaner forms, zero JS. Support is growing (about 74%): Chrome/Edge Safari 26.2 . No Firefox yet. Would you use it?
45
Mirror reflection in pure CSS with ONE property: -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0,0,0,.5)); No pseudo-elements. No duplicate images. Works in Safari Chrome Edge but not Firefox. Would you ship it as progressive enhancement?
0:05
1
69
Ever noticed how numbers often look misaligned? It’s not your layout. It’s the font. Most fonts default to proportional digits. So “1111” is much narrower than “8888”. Columns won’t line up perfectly.
0:05
1
1
1
50
CSS fix: tabular numbers (all digits same width) font-variant-numeric: tabular-nums; Result: cleaner tables, prices, dashboards. Subtle polish users feel immediately. Have you used tabular-nums before?
31
Still using JavaScript for a reading progress bar? You can build it with pure CSS.
1
32
more replies
The magic line: animation-timeline: scroll(); Top of the page = 0% Bottom = 100% So the bar is a real scroll indicator—without JS.
1
36
It won’t work everywhere yet, but it fails gracefully: unsupported browsers just show a static bar. Would you use this on articles?
28
Load more