Horizontal lines around centered content

Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.

Tagged with

Related links

Popover API Sliding Nav

Here’s a nifty demo of popover but it’s not for what we’d traditionally consider a modal dialog.

Tagged with

Revealing ‘back to top’ button

Such a clever minimalist use of CSS!

Tagged with

Link colors and the rule of tincture

When you think of heraldry what comes to mind is probably knights in shining armor, damsels in distress, jousting, that sort of thing. Medieval stuff. But I prefer to think of it as one of the earliest design systems.

This totally checks out.

Tagged with

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.

  • Responsive to the content
  • Responsive to the viewport
  • Responsive to the container
  • Responsive to the user preferences

Tagged with

An Interactive Guide to Flexbox in CSS

This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!

Tagged with

Related posts

Underlines and line height

How to make the distance of link underlines proportional to the line height of the text.

Style your underlines

Make your links beautiful and accessible.

Designing Intrinsic Layouts by Jen Simmons

A presentation at An Event Apart Seattle 2019.

Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrew

A presentation at An Event Apart Seattle 2019.

Timelines of the web

The World Wide Web is a mashup.