The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Physical, absolute units

When we’re writing CSS, we tend to use relative, responsive units such as rem, em, etc, which scale based on user preferences and such.
Sometimes, I find myself forgetting that CSS even has units of standard, absolute measurements, but we have a lovely collection at our disposal. It is worth keeping in mind they aren’t always accurate on screen, but they usually are when physically printed.

An interactive guide to learn CSS Relative Colors.

When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

This technique explores using: animation with CSS transition and transform, using the :focus-within pseudo-class, CSS grid, and accessibility considerations for dropdown menus.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.

About Roel: https://pixelambacht.nl

Depending on whether the information is technical or not, you might want different font features.

29:20 - "Never grab a Monotype font"

font-variant-numeric: tabular-nums;

@font-face {
size-adjust: 110%;
}

https://wakamaifondue.com/
(what can my font do?)

https://pixelambacht.nl/

A look at text wrap balancing in CSS

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI.

A simple guide to building keyboard-activated layout grid overlays with JavaScript and CSS for web development projects.

How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)

Little relatively unknown fact, if you have an id attribute on an element, you can reference it in this way:

<button id="yo">…</button>

yo.onclick = ...

Furthermore, child elements with a name attribute can be referenced in this way:

<form id="x"> 
  <input name="em"> 
</form>

x.em.onclick = ...

A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.

Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.

So you think you know box shadows huh? I bet you didn't know they could do this.

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

If you're defining absolute width or height for an absolute positioned element, you can use auto margin to lay out these elements.

https://www.joshwcomeau.com/css/center-a-div/

.box {
  position: absolute;
  inset: 0.5rem;
  width: 7rem;
  height: 7rem;
  margin: auto;
}

I get asked this question often, and my answer is always the same: Use SVG if you can! I have nothing against SVG. It’s just another approach for creating shapes using another syntax with another set of considerations. If SVG was my expertise, then I would be writing about that instead!

The text will be off! Even though rectangles are perfectly centered.
But even if font can have its metrics unbalanced, it doesn’t mean it does. What happens in reality?
In reality, most of the popular fonts have metrics slightly off. Many have it significantly off:

🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.