design tip 🌲 - size icons with 𝟷𝚌𝚊𝚙, not 𝚙𝚡. 𝟷𝚌𝚊𝚙 is the height of a capital letter in the current font, so the icon tracks the text at any size: .𝚕𝚊𝚋𝚎𝚕 { 𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚏𝚕𝚎𝚡; 𝚊𝚕𝚒𝚐𝚗-𝚒𝚝𝚎𝚖𝚜: 𝚋𝚊𝚜𝚎𝚕𝚒𝚗𝚎; } .𝚕𝚊𝚋𝚎𝚕 𝚜𝚟𝚐 { 𝚋𝚕𝚘𝚌𝚔-𝚜𝚒𝚣𝚎: 𝟷𝚌𝚊𝚙; } 𝚋𝚊𝚜𝚎𝚕𝚒𝚗𝚎 sits the icon on the text's baseline, so it spans the caps in any font. the width follows the 𝚟𝚒𝚎𝚠𝙱𝚘𝚡.

css tip ◎ use 𝚜𝚊𝚏𝚎 𝚌𝚎𝚗𝚝𝚎𝚛 on a row that can overflow. with plain center, a row wider than its box spills off both sides. 𝚜𝚊𝚏𝚎 𝚌𝚎𝚗𝚝𝚎𝚛 centers while it fits and starts at the left edge when it doesn't: .𝚝𝚊𝚋𝚜 { 𝚍𝚒𝚜𝚙𝚕𝚊𝚢: 𝚏𝚕𝚎𝚡; 𝚓𝚞𝚜𝚝𝚒𝚏𝚢-𝚌𝚘𝚗𝚝𝚎𝚗𝚝: 𝚜𝚊𝚏𝚎 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; }

experimental css tip 🚨: 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘 breaks your sticky table header. it makes the wrapper a scroll container on both axes, so the header sticks to the wrapper instead of the page. 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚊𝚞𝚝𝚘 clip scrolls sideways only: .𝚝𝚊𝚋𝚕𝚎-𝚠𝚛𝚊𝚙 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚊𝚞𝚝𝚘 𝚌𝚕𝚒𝚙; } 𝚝𝚑𝚎𝚊𝚍 { 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; }