magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
Style the parent based on how many children there is in it. Awesome!
It can be useful :)
- Writing mode
- Gap in flex or grid layouts
- Flip with transform
- scroll-behavior: smooth;
- Scroll-snapping with
scroll-snap-type
for the container andscroll-snap-align
for the children - Resize elements both with
overflow: auto; resize: both;
- Line clamp based on how many lines is expected.
- Linear gradient and apply the gradient on text only
object-fit: cover
to avoid the fill effect of images. The image is not fully displayed thoughts.pointer-events: none;
make elements not selectable anymore.
Well I knew them 😁
The Mozilla Documentation Network published a curriculum to become a frontend developer.
It seems to contain relevant resources, also for confirmed developers.
How to apply css for RSS feeds
Maybe useful for later
How to fill the gap left by the GOAT css tricks?
Look, the dream goal is Piccalilli fills a hole that’s been left by Digital Ocean and their mis-handling of CSS-Tricks.
A great media query for example disabling custom fonts!
Project Wallace is a set of CSS analyzers that check your complexity, specificity, performance, Design Tokens and much more. And all of that in a single web app.
A list of triangle shapes that can be reused
background-repeat: space
makes the background kind of responsive.
More techniques than Resource: The Complete Guide to Centering in CSS | Modern CSS Solutions.
It covers a lot of cases:
- when the element size is known or unknown
- depending of the layout algorithm currently used
As I write this in early 2024, browser vendors are in the process of implementing align-content in Flow layout, so that it controls the “block” direction alignment of content.
🤯 so we will be able to stick to the default layout.
So, for many years, I treated CSS like a collection of patterns. I had a bunch of memorized snippets that would paste from my brain, to solve whatever problem I was currently facing.
- aspect-ratio
- object-fit
- margin-inline
- text-underline-offset
- outline-offset
- scroll-margin-top / bottom
- color-scheme
- accent-color
- width: fit-content
- overscroll-behavior: it will isolate the scrolling to the contained region
- text-wrap: balance
- text-wrap: pretty but https://caniuse.com/?search=pretty
A simple layout for nav with negative margins