A Pattern Apart

A List Apart's pattern library

This is the patchwork view which doesn't include the markup preview and usage examples. This view is particularly useful for device testing because it shows elements at full-width, presented on the page as they would appear on the site.

Juliana Bicycles
Juliana Bicycles treats content chunks more visually.

Tiling modular content

But writing sucks.

Topics

CSS Regions Considered Harmful

Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Håkon speaks, whether we always agree or not, we listen. In today’s post, Håkon shares his opinion on CSS Regions.

No Comments (yet)

html { font-size: 10px; }
p { font-size: 1.4em; }

You’re not limited to using it only on width; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use calc() inside calc().

  1. Great idea.

    Copy & paste the code below to embed this comment.

For people who make websites.

Emphasised text

About the Authors

About the Author

Issue № 386

Surveying the Big Screen

by Mike Pick Published in Layout & Grids, Mobile/Multidevice, Responsive Design21 Comments

<label for="firstname">First name:</label>
            <input type="text" id="firstname" />
            <label for="lastname">Last name:</label>
            <input type="text" id="lastname" />
Figure 5.1: Labels are visually associated by proximity with text input fields. In code, labels are programmatically connected using the <label> element, the “for” attribute, and the input field’s “id” attribute making the connection.

See the Pen Show/hide example by Val Head (@valhead) on CodePen.

A full-width figure with an embedded pen from CodePen.
Figure 5.5: Drag-and-drop bookmarking tool requires a mouse
Figure 5.5: This feature, collecting bookmarks for related items, requires a mouse to drag and drop items into the list. A simple Add button would make this more accessible.

User: I’d like to place an order. Here’s all my information.

Your site: Thanks. Got it. We’ll send this to you within three days.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Rachel Andrew on the Business of Web Dev

Your Side Project as Insurance Policy

You’re never too young and healthy to make sure you can keep income coming in if sudden misfortune strikes. Often our livelihood depends on our physical abilities—such as typing code. Having a product as a side project can offer security if your daily work is disrupted by illness or injury.

  • Offers a clear argument, not just a list of tips and tricks.
  • Has a voice. Be bold, interesting, and human.
  • Is written for an audience of designers, developers, content strategists, information architects, or similar.
  • Is supported with convincing arguments, not just opinions. Fact-check, and cite sources where appropriate.
  • Follows our style guide.

A Crew Apart

Issue № 388