Interesting new BBC layout - perfect for a Source Grid

I did pressure wash it after I sat on it

Takw more than it just being clean for me to go anywhere near your sword.

Firefox is really useful for its ability to preview grids, though.

1 Like

After some assistance from Jannis about how to target specific Poster2 blog items and ranges of blog items, I can confirm that the BBC layout above, can be buit with Source and Poster2.

Part of the challenge was to selectively display or hide parts of the blog list depending on screen with and blog item position in the overall grid, in addition to defining the space for each item. DM if you need help with such a layout.

2 Likes

The Guardian has a really nice system with eleven different variations on their card design, at different sizes/configurations (https://design.theguardian.com). This kind of scheme will open up lots of possibilities when we are able to specify grid layouts based on CSS Container Queries (i.e. on parent width) rather than just on Media Queries (on viewport size).

5 Likes

What a great and well thought out design document.

1 Like

Speaking of new and interesting possibilities, here’s an answer to the quest for Container Queries in new WebKit:

Wow, just a few more months before Safari 16! But her demo of Container Queries was exactly what I had in mind — components that resize and restructure according to the space they are assigned in the grid (ideal for BBC and Guardian type card designs). It moves us powerfully towards a true ‘component library’ approach to web-design, which is going to open up all kinds of new and exciting possibilities. Container Queries are already available in Chrome Canary, so now doubt there is a browserthon in process to implement them for the Fall.

As always it’s backward browser compatability that will delay using it. E.g. We’re still not at the point where there is 100% support for webP, after the format was introduced in 2010.

We don’t need Container Queries as we can now build the BBC/Guardian type layouts with Source, because the viewport together with grid position gives us enough to create the complex querie we need.

CSS Container Queries would be a nice to have feature though.

I’d put it the other way around: Container Queries are the essential thing, Media Queries the nice to have. The fact that the latter were developed before the former is just another of those quirks of the web — like the way we had to use tables to create layout because there was no grid, while tables have now become what they should always have been, a specialised element.

When we have Container Queries, likely the only thing I’ll use Media Queries for is to determine the outside margins of the page. Because pretty much everything else depends not on the size of the viewport but on the space allocated to it in the grid. For instance, if we have 300px width available to us, we’re likely to want whatever is going in that space in a single column whether that space is determined by the width of the phone screen or by the sidebar of a desktop layout.

What we can’t currently do in Source Grid using Media Queries is to determine how a grid item configures itself on a bigger screen if, for instance, it takes up four columns, two columns or one column. There’s no linkage between the viewport and the space we have available. And for that reason we can’t create a single card template which sizes down through a BBC or Guardian-style hierarchy. We can get the text to go alongside the picture on a smaller screen, but not in a smaller column. But when we can…

The other missing element here is decoupling the content from the container. This is currently possible with grid-template-areas, which some versions of CSS Grid implement (for instance, Will’s ‘Intrinsic’), and we can do it in Source Grid using CSS. But it will be a game-changer when it’s possible to have a Poster list-type approach to the content on our pages, so that each new item can start by occupying the star place, with other content items get progressively demoted. I imagine that the way these design schemes are implemented at the Guardian and the BBC works in this kind of way.

1 Like

That was my original point in that we can do this now, using the grid item number and current viewport media queries. This was specifically what I meant by referencing the BBC layout, where Grid items lose content such as a top image or post summary, as the individual grid item number increases and becomes deeper embedded in the overall grid. Content can be hidden or shown using the grid item number and the viewport indirectly gives you the grid width. As you already know the size of every grid item for the viewport ranges, which you do, becasue you defined it, you don’t really have to have a further container media query.

I played around with my own blog and selectively enlarged some posts depending on grid depth and how the grid behaved as defined by the breakpoint ranges, and also decreased the content from the 9th item to remove the images and then going deeper to also remove summaries. For News type layouts it is a very efficient solution but I don’t think adds much for a normal blog.

The BBC site uses this exact technique (grid number and viewport) with some clever maths to derive the positioning and define what to display.

That’s true. But with the web we’ve mostly been able to do something now, even if it’s been something of a kludge. Media queries have allowed us to code for responsive behaviour, even if the width of the viewport is a couple of removes from what we’re actually dealing with — and only approximately related to it. That’s why Container Queries have been the most requested feature for CSS. Well, they’re coming now, so we’ll be able to use Media Queries in situations where we are concerned with the width of the viewport and Container Queries where we’re concerned with the width of the parent element. I don’t take a dogmatic view about this, there are just lots of situations where I have wished I could have specified behaviour based on the latter and — Yay! — it will soon be possible (but not, of course, if we’re designing for steam-powered corporate IT environments, where they’re still running Windows NT and Internet Explorer).

I look forward to a time when we won’t require any media queries.