Code

Code

404 bookmarks
Newest
12 Days of Web
12 Days of Web
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.
12 Days of Web
Fontsource
Fontsource
Self-host fonts in neatly bundled NPM packages.
Fontsource
Modern fluid typography editor
Modern fluid typography editor
Generate fluid typography code snippets using modern CSS clamp function and fine-tune fluid typography behavior using this robust and sleek editor.
Modern fluid typography editor
This website uses a variable font
This website uses a variable font
How hours of debugging can save minutes of reading, and more takeaways from sprucing up the type on this website.
This website uses a variable font
An Interactive Guide to Flexbox
An Interactive Guide to Flexbox
Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed.
An Interactive Guide to Flexbox
Alpine.js
Alpine.js
A rugged, minimal framework for composing behavior directly in your markup.
Alpine.js
Fallback Font Generator
Fallback Font Generator
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using @font-face
Fallback Font Generator
⌘K
⌘K
Fast, composable, unstyled command menu for React.
⌘K
Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
If you like math and CSS, you’ll love this one. We don’t need to use media queries to change the values of some CSS properties — *font-size*, *padding*, *margin* etc. — depending on the viewport width, with the CSS `clamp` function. But: we still need to use media queries for changing colors, borders, shadows and other CSS styles.
Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
Min-Max-Value Interpolation
Min-Max-Value Interpolation
A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.
Min-Max-Value Interpolation
Mechanical Ragger: Print typesetting for the web
Mechanical Ragger: Print typesetting for the web
The web has never been a place for perfectionism. Typesetting in particular has been a long-neglected facet of web design because we’ve lacked the tools to give long texts the editorial care they need.
Mechanical Ragger: Print typesetting for the web
Building a button component
Building a button component
A foundational overview of how to build color-adaptive, responsive, and accessible button components.
Building a button component