Some dark/light mode toggles

How to handle spacing between css elements in one line of code?

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

Ready to use design tokens

1. 140 named colors
2. RGB (the traditional notation)
   • Note we can replace rgba(255, 0, 0, 0.5) with rgb(255 0 0 / 0.5)
3. Hex codes (the de-facto used unit)
4. HSL (the human-readable format):
   • hue: the pigment used (deg)
   • saturation: how much pigment (%)
   • lightness: how light? (%)
5. display p3: only supported in Safari and Chrome but allow more colors than sRGB
6. LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though. oklch fixes some bugs of lch.

How to get right proportions for a rounded corner inside of a rounded container?

outerRadius - gap = innerRadius

Better than writing you own utility classes because this tool will generate only the one needed :)

Another great tools initiated by Antfu

UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.

• using transform-style: preserve-3d; on all elements
• make cubes
• add animations
• one source of light and 3 shades:
  • Light: Direct light
  • Medium: Indirect light
  • Dark: No light

#idea #project we could build a library for this with SCSS. One to build objects, another that is a collection of items.

@media (prefers-color-scheme: dark) {
    html body {filter: invert(1);}
    /* the following really should be managed by a cascade layer */
    .some-container-items-or-images {
      box-shadow: 0.25em 0.25em 0.67em #FFF8;
    }
}

From Lary Hudson

you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.

• Confetti canon
• Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.

3 examples to build CSS Grid patterns

An HTML and CSS only tree.
The final CSS-snippet is also available at the end.

It uses only <ul>, <li>,

Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.

It provides examples: https://siimple.xyz/examples

Also available on NPM for a 7.8kB minified and gzipped package.

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Build HTML elements visually

Source code: https://github.com/components-ai/css.gui

Paper Prototype CSS is CSS framework that mimics paper prototyping, sort of like a handdrawn look but a little more ransom-note-ish, with the help of two informal-looking free fonts.

And the blog post related: https://shkspr.mobi/blog/2022/06/paper-prototype-css/

Metallic look to HML elements.

Source code: https://github.com/MikaeI/metallicss (available as npm package)

Generate animations with the mouse :D

Github: https://github.com/panphora/animatize

A bootstrap similar library

Copy/Paste the most used media query