https://www.bencode.io/categories/css/ Recent content in Css on Benny Simmonds Hugo -- 0.149.1 en-us Mon, 01 Dec 2025 17:45:00 +1100 https://www.bencode.io/posts/shadcn/ Mon, 01 Dec 2025 17:45:00 +1100 https://www.bencode.io/posts/shadcn/ <ul> <li><a href="#wat">wat</a></li> <li><a href="#componentsjson">components.json</a></li> <li><a href="#the-cn-helper">The <code>cn()</code> Helper</a></li> <li><a href="#globalscss--theming">globals.css &amp; Theming</a></li> <li><a href="#dark-mode">Dark Mode</a></li> <li><a href="#dependencies-explained">Dependencies Explained</a> <ul> <li><a href="#cva-example">CVA Example</a></li> </ul> </li> <li><a href="#blocks-vs-components">Blocks vs Components</a></li> <li><a href="#quick-start-workflow">Quick Start Workflow</a></li> <li><a href="#forms-with-tanstack--shadcnui">Forms with TanStack + shadcn/ui</a></li> <li><a href="#claude-code--mcp-tips">Claude Code + MCP Tips</a></li> <li><a href="#essential-commands">Essential Commands</a></li> <li><a href="#mental-model">Mental Model</a></li> </ul> <h2 id="wat">wat</h2> <blockquote> <p>shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.</p></blockquote> <h2 id="componentsjson">components.json</h2> <p>Controls how CLI installs components, paths, and styling preferences.</p> https://www.bencode.io/posts/procss/ Sat, 10 May 2025 17:55:56 +1000 https://www.bencode.io/posts/procss/ <ul> <li><a href="#modern-css-fundamentals">Modern CSS Fundamentals</a> <ul> <li><a href="#baseline">Baseline</a></li> <li><a href="#progressive-enhancement">Progressive Enhancement</a></li> <li><a href="#logical-properties-and-values">Logical properties and values</a></li> <li><a href="#css-reset">CSS Reset</a></li> <li><a href="#css-cascade-layers">CSS Cascade Layers</a></li> <li><a href="#css-custom-properties-variables">CSS Custom Properties (variables)</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#typography">Typography</a> <ul> <li><a href="#media-queries-and-custom-properties">Media queries and custom properties</a></li> </ul> </li> <li><a href="#structured-custom-properties">Structured custom properties</a></li> <li><a href="#base-styles">Base styles</a></li> <li><a href="#meaningful-links">Meaningful links</a></li> </ul> </li> <li><a href="#big-picture-design-system">Big picture design system</a> <ul> <li><a href="#wrappers">Wrappers</a> <ul> <li><a href="#modifiers">Modifiers</a> <ul> <li><a href="#option-1-bem-approach">Option 1: BEM approach</a></li> <li><a href="#option-2-data-attributes">Option 2: Data attributes</a></li> </ul> </li> </ul> </li> <li><a href="#landmark-regions">Landmark regions</a></li> </ul> </li> <li><a href="#gems">Gems</a></li> <li><a href="#resources">Resources</a></li> </ul> <h2 id="modern-css-fundamentals">Modern CSS Fundamentals</h2> <h3 id="baseline">Baseline</h3> <p><a href="https://web-platform-dx.github.io/web-features/">Baseline</a> features are ones that are supported by all the major browsers (Chrome, Edge, Safari, and Firefox). Both the <a href="https://developer.mozilla.org/en-US/">MDN web docs</a> and <a href="https://caniuse.com/">caniuse</a> show when a feature has reached either the Newly available or Widely available threshold.</p>