Halvor William Sanden
All articles

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 a separate 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 deemed it wise to add a fallback using my current font implementation of 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. You can probably add some calculations in there as well for added detail control, but I think that just complicates what clamp() already tries to solve for you

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, which means there is probably a non-linear scale that can be figured out that also includes the third dynamic size as well.

Instead of trying to be smart and do exact calculations, I went with what looked good. I have worked so much with type, size and spacings I know what size areas and relations work. 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 to do 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 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

Gained knowledge

UX/UI

Programming

Tools and productivity