Website Delivery Principles

by

I realised last night while watching a presentation by Lea Verou that I could streamline my CSS Grid layouts. I’d previously been creating an overall page grid on the body then defining some grid areas, but was frustrated that this didn’t help with aligning nested elements to that grid.

Use the right tool for the job

For example in the case of the main header, if I wanted its child logo, nav and search box elements to snap to the grid I found myself having to set display:grid and grid-template-areas again on the header.

It didn’t feel very DRY but my understanding was that while we await subgrid, this was a necessary evil.

What I should have been using is display:contents.

ul {
  color: #00b7a8;
}

ul span {
  color #333;
}

This is a paragraph. It’s an affront to test ligatures so often. It’s just something I threw together. This sentence contains a link to W3C, which you have probably visited. This sentence contains a link to someplace else. This is an offsite link . In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

A blog is useful for many reasons. It can become a source of leads, it can be the place where, in the future, you might sell your products if you want to become an indie developer, or it can simply be the place where you have your audience and express your ideas.

  1. this is an ordered list item. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.
  2. this is another ordered list item
  3. this is another ordered list item
  • Use proper accents e.g. résumé and jalapeño.
  • Use proper math symbols, like × instead of x.
  • Smarten quotation marks ("that's it" should be “that’s it”).
  • Use primes as needed (10’6” tall should be 10′6″ tall).
  • Use an en dash (–) rather than a hyphen (-) to represent a range in strings of digits (99–103), days (Mon–Fri), dates (May 5–8), and times (10:00–11:00“). Set these en dashes either unspaced or with very thin surrounding spaces.
  • Mark up abbreviations with abbr tags. Style them independently, applying small caps as needed, using attribute selectors or classes: 5:00 pm.
  • Lowercase text can be styled as small caps. (So can uppercase text). Some abbreviations may look better uppercased: NY; consider this before applying small caps to all abbr tags.
  • Surround long sequences of numbers with spans, so you can use the CSS letter-spacing property to add subtle breathing room: 1,385,600.
  • Plan for case-sensitivity near case changes and numerals. To style characters like hyphens, dashes, and parentheses with case-sensitive forms you need to account for them in markup. For example, keep parentheses like these inside the abbreviation markup: (PDF). Many fonts bundle case-sensitive forms with caps-related OpenType features. Similarly, case-sensitive forms are often bundled with figure features: (845)555–3333.
  • In headings, mark up ampersands so you have the option of giving them special stylistic treatment, such as italicizing them (sometimes a nice touch): Hatfields & McCoys.
  • If certain strings should not break onto two lines, mark those strings up so you can later apply a CSS white-space declaration: Robert Jones.
  • Use Unicode’s fraction characters when possible: when she was 2½ years old. (Search Charcod.es for “fraction” and copy/paste the character you need rather than use the HTML entity.) Mark up any fractions that aren’t in Unicode so you can apply fraction-related OpenType features later: you’ll need a 5/16 wrench.

A blog is useful for many reasons. This is small. It can become a source of leads, it can be the place where, in the future, you might sell your products if you want to become an indie developer, or it can simply be the place where you have your audience and express your ideas.

I’m Heading 2 and I like to wrap whenever I can

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

I’m Heading 3

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

I’m Heading 2

I’m Heading 3 coming immediately after an h2; it happens!

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.