Skip to main content
CSS is fun and cool and I like it.
Link

Under-Engineered Responsive Tables

Article

Native CSS Masonry Layout In CSS Grid

Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general.

You can already test a partial implementation … Read article “Native CSS Masonry Layout In CSS Grid”

Link

Super Tiny Icons

Article

Lots of Ways to Use Math.random() in JavaScript

Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned).

Math.random(); // returns a random number lower than 1

This is incredibly useful for gaming, animations, randomized data, generative art, random text generation, and more! It can be used for … Read article “Lots of Ways to Use Math.random() in JavaScript”

Article

A Complete State Machine Made With HTML Checkboxes and CSS

State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website that included a “no client JavaScript” constraint and I needed one particular unique interactive feature.… Read article “A Complete State Machine Made With HTML Checkboxes and CSS”

Almanac

text-orientation

The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode. Basically, it rotates either the line by 90° clockwise to help control how vertical languages are displayed — much like the way text-combine-upright rotates groups of characters within a line of text in a vertical script, but for full lines of text.

.element {
  text-orientation: mixed;
  writing-mode: vertical-rl; 
}

For handling bi-directional text — a block that contains both left-to-right and right-to-left text, … Read article “text-orientation”

Article

Exploring What the Details and Summary Elements Can Do

We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:

CodePen Embed Fallback

<details> and <summary> can even be used to play/pause gifs! Click the pause button in the top right of this image to see it in action:

CodePen Embed Fallback

Neat, eh? But what else can these elements do? For a long while, I’ve only thought about details as a … Read article “Exploring What the Details and Summary Elements Can Do”

Link

Tailwind versus BEM