From 9faf42062fa7c59b972350dee840a84b45f2cf1c Mon Sep 17 00:00:00 2001 From: Aileen R Jeffries Date: Mon, 19 Oct 2026 09:37:23 -0700 Subject: [PATCH 1/3] prototype for article card with no cover image --- src/prototypes/no-cover/example/example.scss | 35 + src/prototypes/no-cover/example/example.twig | 870 +++++++++++++++++++ src/prototypes/no-cover/no-cover.stories.js | 14 + 3 files changed, 919 insertions(+) create mode 100644 src/prototypes/no-cover/example/example.scss create mode 100644 src/prototypes/no-cover/example/example.twig create mode 100644 src/prototypes/no-cover/no-cover.stories.js diff --git a/src/prototypes/no-cover/example/example.scss b/src/prototypes/no-cover/example/example.scss new file mode 100644 index 000000000..b75a59f71 --- /dev/null +++ b/src/prototypes/no-cover/example/example.scss @@ -0,0 +1,35 @@ +@use '../../../compiled/tokens/scss/aspect-ratio'; +@use '../../../compiled/tokens/scss/breakpoint'; +@use '../../../compiled/tokens/scss/brightness'; +@use '../../../compiled/tokens/scss/color'; +@use '../../../compiled/tokens/scss/ease'; +@use '../../../compiled/tokens/scss/size'; +@use '../../../compiled/tokens/scss/transition'; +@use '../../../mixins/border-radius'; +@use '../../../mixins/fluid'; +@use '../../../mixins/focus'; +@use '../../../mixins/headings'; +@use '../../../mixins/media-query'; +@use '../../../mixins/ms'; +@use '../../../mixins/spacing'; +@use '../../../mixins/theme'; + + +.c-card:not(:has(.c-card__cover)) .c-card__header { + gap: 0; + margin-block-end: 1.4rem; +} + +.c-card:not(:has(.c-card__cover)) .c-card__heading { + align-content: center; + aspect-ratio: aspect-ratio.$wide; + background: color.$base-orange; + border-radius: size.$border-radius-small; + grid-area: cover; + overflow: scroll; + padding: 0.8rem; +} + +.c-card:not(:has(.c-card__cover)) .c-card__link { + color: white; +} diff --git a/src/prototypes/no-cover/example/example.twig b/src/prototypes/no-cover/example/example.twig new file mode 100644 index 000000000..a71999b0b --- /dev/null +++ b/src/prototypes/no-cover/example/example.twig @@ -0,0 +1,870 @@ +
+
+ + +
+ + + + + + +
+ +
+

+ + Cookie Consent Management in 2026, Part 1: Overview + + +

+
+ +
+ + + + +
+ +
+

+ The threat of lawsuits has companies scrambling to get their cookie compliance house in order. Here are some of the things we've learned as we've helped our clients. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 18th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + + +
+ +
+

+ + How Do We Write About AI in Web Development? + + +

+
+ +
+ + + A helpful robot hands a wrench to an auto mechanic. + +
+ +
+

+ I love writing about the rapid pace of change in web development, so why am I struggling to write about how AI is affecting my career? +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Scott Vandehey

+ +
+

+ + Published on October 1st, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Improvements to Web for AI Should Benefit All Users + + +

+
+ +
+ + + + +
+ +
+

+ Proposed changes to the web platform to support AI should also support users and assistive technology whenever possible. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on June 15th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Ending Responsive Images + + +

+
+ +
+ + + + +
+ +
+

+ Mat Marquis isn't known for pulling his punches. And yet, Marquis stopped short when he declared The End of Responsive Images. Mat left responsive images on the ropes. I hope to finish them. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on June 11th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + How We Use CI to Check Code Standards on Every PR + + +

+
+ +
+ + + A cheerful-looking robot wearing a hard hat and holding a clipboard stands before a conveyor belt full of icons representing code changes, like a line inspector in a factory. + +
+ +
+

+ Automating your code checks ensures every contribution meets standards, reduces the review burden, and increases confidence in AI-generated code. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Scott Vandehey

+ +
+

+ + Published on May 5th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Most Cookie Consent Banners Don’t Check for Compliance + + +

+
+ + +
+

+ As I’ve had more opportunities to work with cookie consent managers, I’ve come to the surprising realization that most of them (all of them?) fail to track if websites are in compliance with various privacy laws. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on April 16th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Weight Loss and the World Wide Web + + +

+
+ +
+ + + + +
+ +
+

+ On my successful journey with GLP-1 and my fruitless search to find a similar solution for the bloated mess the web has become. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 31st, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + More Projects Please + + +

+
+ +
+ + + + +
+ +
+

+ We’re actively seeking new UX design, UI design or hybrid creative/development challenges to solve. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Tyler Sticka

+ +
+

+ + Published on March 30th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + GPC Opt Out: UX Fails or Malicious Compliance? + + +

+
+ +
+ + + + +
+ +
+

+ As of Jan 1, the CCPA requires websites to confirm they are honoring Global Privacy Control (GPC) opt outs. Why are so many cookie banners complying with the new rule in ways certain to confuse users? +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 23rd, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Cookie Consent Management in 2026, Part 2: Technical Tips + + +

+
+ +
+ + + + +
+ +
+

+ Testing cookies consent compliance proved more difficult than I expected. Here are some tips and tricks I learned while conducting a cookie compliance audit. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Jason Grigsby

+ +
+

+ + Published on March 19th, 2026 + + +

+ +
+
+
+ +
+ +
+ + + + + + + +
+ +
+

+ + Little Dummies: Simple FPO Content Helpers + + +

+
+ +
+ + + + +
+ +
+

+ Video, links and code samples from my rapid prototyping talk for the final Eleventy Meetup. +

+ +
+ +
+ + +
+
+
+
+ +
+ +
+

+ By + Tyler Sticka

+ +
+

+ + Published on March 12th, 2026 + + +

+ +
+
+
+ +
+ +
+
+ + + + +
+
diff --git a/src/prototypes/no-cover/no-cover.stories.js b/src/prototypes/no-cover/no-cover.stories.js new file mode 100644 index 000000000..2c67f4d79 --- /dev/null +++ b/src/prototypes/no-cover/no-cover.stories.js @@ -0,0 +1,14 @@ +import './example/example.scss'; +import examplePrototype from './example/example.twig'; + +const meta = { + title: 'Prototypes/Article with No Cover', + parameters: { + docs: { page: null }, + layout: 'fullscreen', + }, +}; + +export default meta; + +export const Example = () => examplePrototype({}); From b601a67a6c5eb380db6e991b268af87a5424b4ef Mon Sep 17 00:00:00 2001 From: Aileen R Jeffries Date: Tue, 20 Oct 2026 11:31:31 -0700 Subject: [PATCH 2/3] linter --- src/prototypes/no-cover/example/example.scss | 56 +++++++++++++++++--- src/prototypes/no-cover/example/example.twig | 13 +++-- 2 files changed, 56 insertions(+), 13 deletions(-) diff --git a/src/prototypes/no-cover/example/example.scss b/src/prototypes/no-cover/example/example.scss index b75a59f71..d52af4d0d 100644 --- a/src/prototypes/no-cover/example/example.scss +++ b/src/prototypes/no-cover/example/example.scss @@ -14,22 +14,66 @@ @use '../../../mixins/spacing'; @use '../../../mixins/theme'; +/// we won't need either of these defined when the prototype css is added to card.scss + +/// We add more space between the cover and text elements simply because it +/// feels better visually. +/// +/// @type Number +/// @access private + +$_cover-gap: ms.step(1, 1rem); + +/// We can't use `grid-gap` exclusively due to some containers only being +/// present some of the time, so we re-use this value to define the space +/// between chunks of content. +/// +/// @type Number +/// @access private + +$_content-gap: ms.step(-1, 1rem); + + +/** + * If there is no cover image, treat the header more like a cover image's + * container, with a matching aspect ratio and larger block end margin. +**/ .c-card:not(:has(.c-card__cover)) .c-card__header { + border-radius: size.$border-radius-medium; gap: 0; - margin-block-end: 1.4rem; + margin-block-end: $_cover-gap; + overflow: hidden; } +/** + * The heading is treated like a cover image. + * 1. Default that can be overridden with a background color utility. +**/ + .c-card:not(:has(.c-card__cover)) .c-card__heading { align-content: center; aspect-ratio: aspect-ratio.$wide; - background: color.$base-orange; - border-radius: size.$border-radius-small; + background-color: color.$brand-primary-dark; /* 1 */ grid-area: cover; - overflow: scroll; - padding: 0.8rem; + padding: $_content-gap; } +/** + * 1. Default that can be overridden with a text color utility. +**/ + .c-card:not(:has(.c-card__cover)) .c-card__link { - color: white; + color: color.$base-white; /* 1 */ + transition: font-size transition.$prompt ease.$out; +} + +/** + * Matches the scale up on the cover image. Scale would be preferable for performance, + * however scaling either the heading or the link removes the effect of the entire + * card being a selectable target! +**/ + +.c-card:not(:has(.c-card__cover)):hover:not(:active) .c-card__link { + font-size: 1.025em; } diff --git a/src/prototypes/no-cover/example/example.twig b/src/prototypes/no-cover/example/example.twig index a71999b0b..e1477b3b0 100644 --- a/src/prototypes/no-cover/example/example.twig +++ b/src/prototypes/no-cover/example/example.twig @@ -395,13 +395,12 @@ c-card--with-link " aria-labelledby="article-8553">
-

- - Most Cookie Consent Banners Don’t Check for Compliance - - -

-
+

+ + Most Cookie Consent Banners Don’t Check for Compliance + +

+
From f3e90416772195a86b0e086f7aacfae21809ebd2 Mon Sep 17 00:00:00 2001 From: Aileen R Jeffries Date: Tue, 20 Oct 2026 11:35:22 -0700 Subject: [PATCH 3/3] fixing hoever effect and incorporating new utilities --- src/prototypes/no-cover/example/example.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/prototypes/no-cover/example/example.scss b/src/prototypes/no-cover/example/example.scss index d52af4d0d..938b69da4 100644 --- a/src/prototypes/no-cover/example/example.scss +++ b/src/prototypes/no-cover/example/example.scss @@ -48,23 +48,17 @@ $_content-gap: ms.step(-1, 1rem); /** * The heading is treated like a cover image. - * 1. Default that can be overridden with a background color utility. **/ .c-card:not(:has(.c-card__cover)) .c-card__heading { align-content: center; aspect-ratio: aspect-ratio.$wide; - background-color: color.$brand-primary-dark; /* 1 */ grid-area: cover; padding: $_content-gap; } -/** - * 1. Default that can be overridden with a text color utility. -**/ .c-card:not(:has(.c-card__cover)) .c-card__link { - color: color.$base-white; /* 1 */ transition: font-size transition.$prompt ease.$out; }