CSS-Methods, Model 20 | CSS-Methods

I’ve been bashing on updating this web site’s design for the final couple of weeks. It’s excessive time issues get a contemporary coat of paint, proper? The final model of CSS-Methods was pushed 5 years in the past. That’s historical in net (and canine) years.

It’s not like the location has merely sat all that point. We pushed a number of modifications and shipped new options, notably since 2024, however we by no means actually obtained the paint brushes out of storage.

Now, earlier than there’s a refrain of “issues don’t look thaaaat completely different” I wish to say I’m hardly ever a fan of full re-builds and have a tendency to lean into iterative releases. And the brand new v20 theme is what I’d name an iterative rollup that’s worthy of a model bump.

Let’s go over essentially the most notable updates to see why.

Excavating Ghosts

At first, among the largest modifications are what you don’t see. As you may think, this web site has carried over loads of items throughout 19 years. I made a decision to excavate the theme and positively discovered some ghosts to bust.

For instance, the worldwide compiled JavaScript file retained some scripts that simply weren’t getting used anymore. Issues like dealing with embedded variations of the e-newsletter from earlier than we started self-hosting the posts. There have been relics that catered particularly to the Flexbox Information for dealing with toggles again earlier than we had correct HTML <particulars>. There was a jQuery lazy-loader factor that’s well-covered by WordPress core now. We had some scripts for serving third-party adverts which are now not wanted now that we’re self-hosting adverts. Issues like that. The general JavaScript was properly trimmed from 151.6 KB (55.3 KB gzipped) to 133.8 KB (48.1 KB).

I additionally determined to formally retire the CSS-Methods Discussion board. We put it in “archive mode” again in, like, 2018. None of these discussions are notably useful for at this time as they have been over 10 years in the past, so I deactivated the bbPress plugin that powered it and cleared out the database… and wow, that carved a whopping 400 MB from the ol’ database, to not point out it allowed me to drop a number of customized templates from the theme.

There have been extra ghosts busted alongside the best way and, to make certain, there are nonetheless some lurking round. Nevertheless it’s method much less scary poking across the theme listing now, and additional cleanup must be lots simpler from right here on out.

Yeah, yeah, increase your hand should you’re nonetheless operating Gulp. We’re 🙋‍♂️. That’s not a foul factor in and of itself, however holding it in a set state for all this time just isn’t the best. I believe we’re sporting a extra fashionable workflow than earlier than, even when there’s nonetheless room to develop. A smattering of the associated commits:

• Prettier enforced through husky + lint-staged pre-commit hook
• Stylelint added for alphabetical CSS property order
• GitHub Actions construct verify added
• Cache-busting switched from rewriting supply information to filemtime()

For years, I endured the identical errors each time I fired up a brand new terminal. These are gone and issues run tremendous cleanly, to not point out rapidly. Very completely happy right here.

Safety Cross

Oof, that is everybody’s favourite job, proper?! Except for with the ability to spot and repair a number of unescaped customized area calls right here and there, I made a decision to ask Claude to assist me with a holistic audit. I prompted it to evaluate latest WordPress safety launch notes and establish areas the place the theme may very well be hardened to adjust to what WordPress is doing.

Whoa, you used AI? Yeah, I positive did. However for issues like this the place it may very well be my little gopher and permit me extra time to do what I do finest: front-end. I’m nonetheless in a position to make a lot of the patches myself based mostly on the output suggestions, but it surely’s good to have a gut-check for issues the place I’m clearly no professional, like safety.

Sass Rewrite

I nonetheless use and like Sass very a lot. I imply, sure, I wish to be straight-up vanilla CSS in every single place, however I can’t tear myself away from partials particularly.

The earlier theme had a reasonably good “flat” construction — only a few partial directories and most issues all in the identical top-level supply. Completely cool. However a company nut like me (you need to see my home) has to have a spot for every part to reside. It ain’t good, however I’m proud of what I used to be in a position to put collectively with out leveling the constructing within the course of.

There are some compromises. Like, /header ought to actually be in /structure. The ordering is absolutely essential, although, and a few of my beliefs have been merely not potential. I’m hoping to ultimately work in some type of Cascade Layers construction.

I’m happy as punch to see the general dimension of CSS drop within the course of. It went from 180 KB (31.7 KB) to 169 KB (24.6 KB). Not massively important, however not not important both. I needed to do a pair difficult issues to cheat my method there, like serving all the shape kinds I’m about to speak about right into a separate varieties.css file and serving it simply on pages the place WooCommerce, Limit Content material Professional, and Gravity Types are enqueued.

A Type-of Design System

Are you beginning to discover a development? We’re nonetheless speaking about pretty invisible work. CSS-Methods has so many nooks and crannies that it’s almost inconceivable to make issues completely constant throughout the board. However due to these nooks and crannies, so many mounted values, magic numbers, one-off kinds, and older utilities have been hiding about. I made a decision to deal with a superb chunk of that whereas reorganizing the Sass.

For instance, there are actually semantic design tokens that summary away one-off colours. So many grays, let me inform you. Now there’s a maintainable palette that’s referenced all through. Identical with fonts, font kinds, and font sizes. Identical with paddings and margins. It feels lots higher to make a change on the “system” degree with confidence that the change is taking impact in every single place it must.

However that is additionally the place some clearly seen modifications occurred! Most notably, hyperlink kinds are constant everywhere with a small handful of supposed and maintained variations. Not solely is it extra pleasing visually, but it surely improves accessibility all through as a result of the inherited kinds default to correct visible cues that don’t rely solely on shade or opacity modifications.

Oh, and my favourite piece of this? Types and tables have each been redone. That’s robust to do in a WordPress theme the place these parts don’t at all times come from one supply. For instance, varieties might come from any one of many Gravity Types, WooCommerce, or Limit Content material Professional plugins, they usually all have their very own stylesheets. Resetting these allowed me to convey a sure degree of concord in all these cases.

Theme Toggle

OK, one thing much more visible. That is the primary time CSS-Methods has had multiple shade scheme! It actually might have been achieved a very long time in the past, however I’d additionally argue that the design hasn’t actually known as for a light-weight/darkish toggle during the last 8 years or so. It’s a pleasant mix of each gentle and darkish components that marry one of the best of each worlds regardless of your theme choice.

However I needed to take a stab, proper? The positioning has predominantly been darkish regardless of the content material being towards a white background, so I handled issues as if a “darkish” mode already existed. The result’s a creamy gentle theme that’s largely only a change in background and element kinds. And I used a few of what I realized from the latest “toggle” debate to deal with system, darkish, and light-weight themes with a single toggle.

What hasn’t modified is the primary content material container you see in issues like articles. That was already white, even in a “darkish” mode, and I’m not assured that merely toggling it between white and black is one of the best method. One thing on the radar for positive.

Oh, and it’s all wired as much as a view transition that slides the brand new theme over the earlier one.

Jawbreaker Texture

I hope you suppose the location’s header and footer are cute. Sure, cute. That’s what I used to be going for when including a colourful collection of dots because the backdrop.

Sorta like a refined sweet texture, proper? Or a colourful group of stars? I dunno, however I’m calling it “Jawbreaker” for lack of a greater time period and since it jogs my memory of the jawbreaker sweet I liked as a child. Naming nonetheless sucks.

It’s all a part of the identical SVG. I actually, actually (actually) wished to random()-ly place dots round, however that might have taken lots of empty particular person components (e.g., <i>) within the markup. Not my favourite. So, I generate the <circle> components in PHP:

<?php echo csstricks_jawbreaker_svg( array(
  'depend'    => 90,
  'seed'     => mt_rand(),
  'size_min' => 2,
  'size_max' => 5,
) ); ?>

It’s lots of SVG…

I actually, actually wished to random()-ize all of the issues, however inlining random coordinates on every <circle> was the best way to go. Identical take care of the inlined kinds that set a fill, and sizing for every circle within the texture, and variables that set a --delay and --dur on the refined animation that twinkles them out and in.

I’ll have to have a look at producing the SVG utilizing <defs> or no matter later since that sample repeats within the footer, too.

That’s carried by to the 404 web page as effectively:

Blobs, blobs, blobs

In case your browser helps border-shape and random() (solely Chrome, I believe), then the homepage provides you a blobby-blob form behind the grid of creator avatars. Hover it and it will get, you already know, even blobbier.

It takes an present sample I’m calling .gradient-card:

.gradient-card {
  /* fundamental kinds */
}

…and units a gradient on the element’s :earlier than pseudo:

.gradient-card {
  /* fundamental kinds */

  &:earlier than {
    content material: "";
    background: linear-gradient(
      130deg,
      #ff7a18 0%,
      light-dark(#ff2d6b, #af002d) 41.07%,
      light-dark(#00bfae, #319197) 76.05%
    );
    border-radius: 12px;
    z-index: 1;
  }
}

That sits beneath the :after pseudo that’s translucent, permitting the :earlier than‘s gradient to indicate by a smidge:

.gradient-card {
  /* fundamental kinds */

  &:earlier than {
    /* and so on. */
  }

  &:after {
    content material: "";
    background: light-dark(color-mix(in srgb, white 72%, clear), #000);
    box-shadow: inset 0 2px 16px
      light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.6));
    border-radius: 8px;
    z-index: 2;
  }

The differing border-radius values permit :earlier than to bleed outdoors, giving the impression of a border across the total deal. That’s the fundamental form. The border-shape is the place issues get blobby:

.gradient-card {
  /* and so on. */

  &:earlier than, &:after {
    border: 1px stable clear;
    border-shape: var(--blob-shape-static);
    clip-path: var(--blob-shape-static);
    opacity: 0.5;
  }
}

These variables? They’re mapped to form()s. I grabbed the primary one from Temani Afif’s blob generator:

--blob-shape-static: form(
  from 50% 3%,
  curve to 65.86% 11.71% with 59.41% 2.7%,
  easy to 72.37% 27.63%,
  easy to 77.43% 38.64%,
  easy to 88% 50%,
  easy to 92.79% 67.72%,
  easy to 81.37% 81.37%,
  /* and so on.
);

It’s known as “static” as a result of that’s the default state. Hover or deal with the element and it swaps out these factors out with a “hover” model of the form:

--blob-shape-hover: form(
  from 50% 3%,
  curve to var(--blob-point-1-x) var(--blob-point-1-y) with 59.41% 2.7%,
  easy to 72.37% 27.63%,
  easy to 77.43% 38.64%,
  easy to var(--blob-point-4-x) var(--blob-point-4-y),
  easy to 92.79% 67.72%,
  easy to 81.37% 81.37%,
  easy to var(--blob-point-7-x) var(--blob-point-7-y),
  easy to 50% 79%,
  /* and so on. */
);

These variables? They’re mapped to random() values:

--blob-point-1-x: random(62.86%, 68.86%);
--blob-point-1-y: random(8.71%, 14.71%);
--blob-point-4-x: random(85%, 91%);
--blob-point-4-y: random(47%, 53%);
--blob-point-7-x: random(60.22%, 66.22%);
--blob-point-7-y: random(78.93%, 84.93%);
/* and so on. */

So, the hover state is completely different on every web page load. And we animate between the 2:

&:hover,
&:focus-within {
  &:earlier than,
  &:after {
    border-shape: var(--blob-shape-hover);
    clip-path: var(--blob-shape-hover);

    @media (prefers-reduced-motion: no-preference) {
      animation: scale-down 1.5s var(--ease-out-3) infinite alternate;
    }
  }
}

Enjoyable!

New Almanac Index

I’m fairly stoked on this one. The Almanac has grown, developed, and simply plain gotten nice the previous few years. However the main web page for it… not so nice. It was positively overshadowed by work on the pages inside it and by no means revisited past clickable playing cards to get to every function subset.

Now the web page is an actual index of the CSS options that will get you the place it’s worthwhile to go rapidly. Somebody someplace someday did some type of CSS periodic desk. I overlook the place I’d seen that however the basic thought sat with me and I believed I might pull it off. There’s nothing “difficult” about it however I like what the structure provides to the general web site.

New Guides Index

That is one other space that sorely wanted love. Our guides have at all times been a vertical stack of things. The guide impact was positively cool, however I began believing that leaning on it as the primary visible hook was holding issues again from being extra purposeful. With one thing like 27 guides, we’re speaking about lots of scrolling with no clear thought of what you’re going to see as you go.

Once more, nothing “difficult” however I like the general usefulness of the brand new structure. There’s a featured information, a widget of newly added and up to date guides, and a categorized grid of every part under that.

Creator Pages

The pages that present all of an creator’s printed articles obtained a bit spruce-up, too.

It’s a bit change, actually. The proper sidebar was moved to the left and the creator picture and bio moved in, permitting the articles to creep as much as the highest. I hope to do extra right here for the reason that small structure tweak opens up extra alternatives.

Additionally have to do the bigger Authors index, however one other time.

WordPress Admin Types

This one’s only for these of us working within the WordPress editor. I don’t want a whole visible editor to get issues achieved, however it’s a good affordance to have among the front-end kinds sneak into the enhancing UI for a greater thought of what you’re working with.

Evaluating v19 to v20

Utilizing Lighthouse to measure issues like efficiency, accessibility, and finest practices is woefully fraught with caveats, however there’s no cause to chuck it fully. I discover them extra enjoyable than truth and I don’t thoughts the suggestions for enhancing issues.

So, after a number of runs and tweaks, right here’s how issues shook out theme-to-theme.

Lighthouse Scores

I’m completely happy right here. There are some issues I simply don’t have the management to repair in relation to efficiency, so seeing v20 are available in line with v19 is simply nice by me. I’m happier with the boosts to accessibility and finest practices. website positioning? Meh. Don’t actually care except it’s hurting extra essential issues like accessibility.

Lighthouse Metrics

Once more, very completely happy. There’s little I can do with time to first byte however every part else appears to clock in no less than marginally higher. The whole web page weight is a transparent win and that’s most likely what I care most about right here.

Is that each one?!

Oh gosh, there’s much more however they’re largely minor issues that don’t bubble as much as the entrance finish. Form of the identical method browser changelogs have some generic line of “bug squashing” or no matter. On this case, it’s issues like higher submit queries and breadcrumbs and performance administration and naming and… you get it.

There’s positively a lot extra to do. And loads of issues I’m positive I missed or broke alongside the best way. That’s simply life and people should are available one other iterative launch much less worthy of a model bump. You possibly can let me know what I muffed up within the feedback.

I hope you no less than like the place that is going!