Tags: css

1198

sparkline

Saturday, January 28th, 2023

Container Queries and Typography

I feel like we need a name for this era, when CSS started getting real good.

I think this is what I’ve been calling declarative design.

Sunday, January 22nd, 2023

clamp() Calculator · Chris Burnell

Like a little mini Utopia:

Handy little tool for calculating viewport-based clamped values.

Culture and style

Ever get the urge to style a good document?

No? Just me, then.

Well, the urge came over me recently so I started styling this single-page site:

A Few Notes On The Culture by Iain M Banks

I’ve followed this document across multiple locations over the years. It started life as a newsgroup post on rec.arts.sf.written in 1994. Ken McLeod published it there on Iain M Banks’s behalf.

The post complements the epic series of space opera books that Iain M Banks set in the anarcho-utopian society of The Culture. It’s a fascinating piece of world building, as well as an insight into the author’s mind.

I first became aware of it many few years later, after a copy had been posted to the web. That URL died, but Adrian Hon kept a copy on his site. Lots of copies keep stuff safe, so after contemplating linkrot, I made a copy on this site too.

But I recently thought that maybe it deserved a bit of art direction, so I rolled up my sleeves and started messing around, designing in the browser and following happy little accidents.

The finished result is still fairly sparse. It’s still entirely text, except for a background image that shows up if your screen is wide enough. That image of a planet originally started as an infra-red snapshot of Jupiter by the James Webb Space Telescope that I worked over until it was unrecognisable.

The text itself is the main focus of the design though. I knew I wanted to play around with a variable font. Mona Sans from Github was one of the first ones I tried and I found it instantly suitable. I had a lot of fun playing with different weights and widths.

After a bit of messing around, I realised that the heading styles were reminding me of some later reissues of The Culture novels, so I leant into that, deliberately styling the byline to resemble the treatment of the author’s name on those book covers.

There isn’t all that much CSS. I’ve embedded it in the head of the HTML rather than linking to a separate style sheet, so feel free to view source and poke around in there. You’ll see that I’m making liberal use of custom properties, the clamp function, and logical properties.

Originally I had a light mode and dark mode but I found that the dark mode was much more effective so I ditched the lighter option.

I did make sure to include some judicious styles for print, so if you fancy reading on paper, it should print out nicely.

Oh, and of course it’s a progressive web app that works offline.

I didn’t want to mess with the original document other than making some typographic tweaks to punctuation, but I wanted to break up the single wall of text. I wasn’t about to start using pull quotes on the web so in the end I decided to introduce some headings that weren’t in the original document:

  1. Government
  2. Economics
  3. Technology
  4. Philosophy
  5. Lifestyle
  6. Travel
  7. Habitat
  8. Legal System
  9. Politics
  10. Identity
  11. Nomenclature
  12. Cosmology

If your browser viewport is tall enough, the heading for the current section you’re reading will remain sticky as you scroll. No JavaScript required.

I’m pretty pleased with how this little project turned out. It was certainly fun to experiment with fluid type and a nice variable font.

I can add this to my little collection of single-page websites I’ve whittled over the years:

Tuesday, January 17th, 2023

Patrick / articles / Is the developer experience on the Web so terrible?

Over the past 10 years or so, we’ve slowly but very surely transitioned to a state where frameworks are the norm, and I think it’s a problem.

I concur.

Use the frameworks and libraries that make sense for you to deliver the best UX possible. But also learn the web platform from the ground up. Take time to understand how web browsers work and render webpages. Learn HTML, CSS, JavaScript. And keep an eye, if you can, on the new things.

Henry From Online | How To Make a Website

Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded. Write CSS carefully, reason your methodology and stick to it, and feel empowered to skip frameworks. When it comes time to write JavaScript, write not too much, make sure you know what it all does, and above all, make sure the website works without it.

The whole article is great, and really charmingly written, with some golden nuggets embedded within, like:

  • You’ll find that spending more time getting HTML right reveals or even anticipates and evades accessibility issues. It’s just easier to write accessible code if it’s got semantic foundations.
  • In my experience, you will almost always spend more time overriding frameworks or compromising your design to fit the opinions of a framework.
  • Always style from the absolute smallest screen your content will be rendered on first, and use @media (min-width) queries to break to layouts that allow for more real estate as it becomes available.
  • If your site doesn’t work without JavaScript, your site doesn’t work.
  • Always progressively enhance your apps, especially when you’re fucking with something as browser-critical as page routing.

CSS { In Real Life } | Disentangling Frameworks

I just quoted Chris saying:

I think some tools are a good idea. But as few as possible, and the easier they are to stop using, the better.

Now Michelle asks:

Suppose we want to stop using Tailwind one day?

Turns out it’s a bit of a roach motel, much like most JavaScript frameworks: you can get in but you can’t easily get out.

So whenever possible, the safest, and most future-proof bet is to use the native features of the web platform.

Scalable CSS - Chris Coyier

Wise words:

Myself, I think some tools are a good idea. But as few as possible, and the easier they are to stop using, the better.

To paraphrase Michael Pollan:

Write CSS, not too much, mostly vanilla.

Monday, January 16th, 2023

Line heights in CSS work better with ratios | Andy Bell

There’s a broader point here about declarative design:

Setting very specific values may feel like you’re in more control, but you’re actually rescinding control by introducing fragility in the form of overly-specific CSS.

Wednesday, January 11th, 2023

Conditional CSS - Ahmad Shadeed

I like to think of CSS as a conditional design language.

Yes! This is exactly what I’m talking about with declarative design!

Read on for some fantastic examples. And also, Ahmad makes a comparison between CSS and Figma, pointing out that the conditional, declarative possibilities currently aren’t available in graphic design tools.

Five websites

Some lovely people have recently made some lovely websites.

Dan has launched his type foundry, Simple Type Co. and it’s gorgeous!

For as long as I’ve been making websites, Dan’s designs have been an inspiration: Corkd, Dribbble, his own website; whenever he unveils something it always sits just right with me.

Oh, and I love the tagline for Simple Type Co.:

Never perfect. Always a-okay.

Someone who is a perfectionist is Marcin. He’s been working on his book about keyboards for years now (the Kickstarter project will launch in February) and he’s made a stunning website for the book called Shift Happens. Click around and find out.

Mandy has a lovely new professional website, courtesy of Ethan. It’s called everything changes. I love the subtletly of the different colour schemes for dark and light modes. It’s almost as if Ethan knows a thing or two about responsive design.

Look! Jason has new professional website too. The text is just scrumptious. It’s almost as if Jason knows a thing or two about typography.

And look! Lynn has done it again—a new site design for a new year. Beautiful stuff, as always—have a look through the archive if you want to the creativity she puts into this every single year.

All of these people are my web design heroes.

Thursday, January 5th, 2023

A CSS challenge: skewed highlight — Vadim Makeev

I did not know about box-decoration-break—sounds like a game-changer for text effects that wrap onto multiple lines.

Wednesday, January 4th, 2023

Tree views in CSS

Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.

Tuesday, December 27th, 2022

User Stylesheets Are Still Pretty Great and Should Be More Widely Supported — Pixel Envy

Hear, hear!

If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.

Saturday, December 24th, 2022

12 Days of Web

All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.

Sunday, December 4th, 2022

dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots

A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.

Wednesday, November 23rd, 2022

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!

Monday, November 21st, 2022

Harnessing groupthink: fine-tuning CSS specifications | Clearleft

In order to thoroughly attend to every pertinent aspect of the spec, fantasai asked us each to read one sentence aloud to the group. At which point we were all asked whether we thought the sentence made sense, and to speak up if we didn’t understand any of it or if it wasn’t clear.

Rich documents the excellent and fascinating process used in a recent W3C workshop (though what he describes is the very opposite of groupthink, so don’t let the title mislead you):

I’d never come across the person-by-person, sentence-by-sentence approach before. I found it particularly effective as a way of engaging a group of people, ensuring collective understanding, and gathering structured feedback on a shared document.

Why you should never use px to set font-size in CSS - Josh Collinsworth blog

Reminder:

em and rem work with the user’s font size; px completely overrides it.

Tuesday, November 15th, 2022

When Our Tools Hold Us Back | OddBird

What happens if the ‘pace layers’ get out of sync?

A very thoughtful post by Miriam on how tools can adversely affect the pace of progress in the world of web standards.

When tools intervene between you and your access to the web platform, proceed with caution. Ask not only: How well does it work? But also: How well does it fail? Not only: What features do they provide? But also: What features do they prevent?

CSS Timeline

Here’s a remarkably in-depth timeline of the web’s finest programming language, from before it existed to today’s thriving ecosystem. And the timeline is repsonsive too—lovely!