Halvor William Sanden

Contributing to Style Stage

Style Stage is a project showcasing different ways to style one page just by switching the CSS.

My contribution, Sysfonts, is meant to demonstrate the use of system fonts because that is, in my opinion, the best option for applications, both browser-living and native. I think they work pretty good on more text-based sites as well. I have written an article about system vs. custom fonts.

What I learnt #

clamp() #

Two major points of Style Stage is to learn and demonstrate modern CSS. I wanted to use the new clamp() function for font sizing. In short, it’s fluid sizing without the risk of infinitely large fonts on extra big screens.

Modern browsers started supporting it around May 2020, which means a lot of users probably haven’t updated their browsers at the moment (not everyone's allowed to auto-update). I added a fallback using calc(rem + vmin). And I thought clamp() would work in a similar fashion, only with a max size, but I was wrong. There is no direct conversion.

It sets a min, max and middle preferred size. The min and max should be a user-relative, static size (usually rem or em if you value users’ choice), while the middle size should be set to a dynamic, viewport-dependent size. That way it will scale between the two sizes. After some consideration, I added calculations in there as well because vw isn’t relative to the user’s settings. This mean’t I could reuse my fallback as the middle value with two changes:

  1. I used vw instead of vmin because the latter is a way to limit the size when there is no max size. Since we have max size, we can just use the width sizing.
  2. I set the rem value a bit lower than the fallback and the min size in order to not start off larger than the min size.

I started by setting the scale for the min size. Then the max one. The bigger the fonts, the more contrast is needed between the sizes.

I have worked so much with type, size and spacings that I know what size areas and relations work without having to do calculations and use type scales. It’s more a task of making adjustments based on what I think looks OK or what I want to achieve. There are probably already lots of articles about calculating scales for clamp(), but part of the fun is figuring things out on your own before reading up on everything.

Skip links #

After making the pull request, I got feedback from project creator Stephanie telling me my skip link wasn’t adhering to the guidelines. And I knew I had some reading to do.

I knew what skip links were, but I thought as long as they weren't set to display: hidden I was good. But my solution still hid it completely. I had used a technique that I've been using for slide-in menus, which basically reduces the size to zero. But it requires JavaScript to make it visible again, which should have been a sign that it’s no good for skip links. I try to avoid hiding elements by setting extreme negative values because some browsers create a canvas that big anyway, which seems unnecessary and can impact performance.

One of the articles I read was Paul Ryan’s “How to Create a ‘Skip to Content’ Link” which has translate() as a key ingredient, and I based my solution on that. It still moves the element outside the viewport, but not more than necessary.

I’ll probably use skip links more actively both as a user and developer from now on.

Code quality #

Style Stage shows the strength and flexibility of CSS. It also demonstrates that HTML and CSS are not structure and style separated but intertwined. It’s impossible to build a universal HTML structure that you can do anything with CSS-wise.

While recognising that this is a fun and effective way to learn and share, I would have liked some more classes in order to avoid a few ugly CSS selectors. There are also a couple of minor structural changes that I think could have led to even better semantics and typography.

One can argue that the CSS is not at the level it could have been, but giving control over the HTML would have contradicted the whole point of the project. Which, for me, was not the selectors but the properties.

Any developer can contribute to Style Stage, and I recommend taking a look at the various cool, beautiful – and useful – contributions.
Repo for Style Stage
Repo for Sysfonts