Design

CSS clamp() provides a method for setting numerical values with a minimum, maximum, and a calculated value between the two. The syntax is calc([min], [calculated], [max]) and it’s useful for times when you want to scale some value based on the size of the screen by using the vw length unit.

Magazines, books, and other print layouts sometimes use images that overlap with the text, and have that text wrap around the shape of the image. It can make for an interesting effect, bringing a feeling of motion into a static medium. Done right, the text and image become conceptually closer in...

I’ve moved my Jekyll site into a Rails app, and I’ve done just enough work to have every post render without errors and added just enough style to make things readable. Some of the site still looks pretty bad, and none of it looks good yet. But that’s ok, because my plan is to rebuild and...

When putting text over an image, readability can be a concern. By combining the responsive HTML5 <picture> container with some best practices for image overlays, we can achieve a good result.