2024 Cheat Sheet Collection
In the fast-paced world of software development, time is of the essence, and having quick access to...
Code
CSS :has() Interactive Guide
Everything you need to know about CSS :has() selector.
Fine, I’ll Use a Super Basic CSS Processing Setup.
If you need a mini build process just for your CSS, Lightning CSS is a pretty good modern choice. That, plus a file watcher and live reloader offers pretty good DX.
How To Center a Div
Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use… But how do we pick the best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.
SVG Filter Maker
SVGFM, a node graph builder for SVG filters
Animations on the web
A course that teaches you how to craft animations that make people feel something.
11ty Recipes
11ty.recipes helps you build an Eleventy site from scratch, showing you how to add individual features to craft the exact site you need.
Incredible scroll-based animations with CSS-only
Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions...
Free Tailwind CSS UI Components | CodeSnaps
Access a library of React and Tailwind CSS components. Design and build better websites in minutes. No package installation required.
An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.
Tutorial #1: Using Variable Fonts on the Web
DINAMO is a Swiss type design agency offering retail and bespoke typefaces, design software, research, and consultancy. Founded in Basel, we operate via a network of satellite members across the globe.
@keyframes ginto-animation {
from {
font-variation-settings: "wght" 0, "ital" 0, "NORD" 100;
}
to {
font-variation-settings: "wght" 200, "ital" 100, "NORD" 200;
}
}
.my-variable-text {
font-family: "Ginto Variable";
transition: font-variation-settings 0.3s ease;
animation-name: ginto-animation;
animation-duration: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
Fluid Style | Accessible, responsive CSS generator
Generate responsive type or spacing CSS that meets accessibility requirements.
codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images using clip-path.
Some ideas for speedy page transition animations with layered images using clip-path. - GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images using ...
Clippy — CSS clip-path maker
Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
Combine Scroll-Driven Animations with @property, transition-delay, calc(), sign() and abs() … and you can do Scroll Detection using only CSS!
Reality Check #1: Building out a furniture site from Dribbble - Set Studio
We refactor the design of Hrvoje Kraljevic's "Furniture e-commerce website" and build it, step-by-step to show you how we do things in the studio.
The Ultimate Low-Quality Image Placeholder Technique – CSS Wizardry
Can Low-Quality Image Placeholders and LCP play nicely together?
Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
The Path To Awesome CSS Easing With The linear() Function — Smashing Magazine
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.
The Guide To Responsive Design In 2023 and Beyond
A modern look at responsive web design.
A (more) Modern CSS Reset - Andy Bell
I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version. I know I also have a terrible record with open source maintenance, so I thought […]
GitHub - quentinhocde/loconative-scroll: The great locomotive-scroll but 100% Native, updated with Lenis to get a native but smooth scrolling experience.
The great locomotive-scroll but 100% Native, updated with Lenis to get a native but smooth scrolling experience. - GitHub - quentinhocde/loconative-scroll: The great locomotive-scroll but 100% Nati...
GitHub - studio-freight/lenis: How smooth scroll should be
How smooth scroll should be. Contribute to studio-freight/lenis development by creating an account on GitHub.
Educational Sensational Inspirational Foundational
A historical record of foundational web development blog posts.
Minh Pham
I'm an Award-winning Designer with 14+ years of experience in GUI, Interaction, Animation, and 3D. I like discovering new tools and techniques to make my design life easier and lazier.
Alpine AJAX
Radio-controlled HTML elements!
Rosetta Code
Rosetta Code is a programming chrestomathy site. The idea is to present solutions to the same task in as many different languages as possible, to demonstrate how...
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
CSS Selectors: A Visual Guide & Reference
Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.
Lit
Simple. Fast. Web Components.