[css-regions] responsive and semantic use of named flows

This is a very simple variation of one of the examples I used when we
decided to add the 'content' keyword to flow-into. I've combined it with a
responsive positioning idea from our elephants demo. It uses 4 lines of
CSS to give a responsive layout to completely semantic markup.

I have a page with 3 articles. The page also has an aside asking for
donations. Because I'm a low-key kind of guy, I only want to present the
donation pitch to people who are actually reading my content. I can do
this using named flows.

<article>Headers, paragraphs, etc.</article>
<aside>Please Donate</aside>
<article>More content</article>
<article>Even more content</article>

What I want is for the <aside> to be placed right below the initial view,
so that it's the first thing you see once you scroll to see more content.
The rest of the content should fragment above and below the <aside>.

The way you do this is with this CSS:

article {
  flow-into: combined-article-flow content;
}
article:nth-of-type(1) {
  flow-from: combined-article-flow;
  max-height: 100vh;
}
article:nth-of-type(2) {
  flow-from: combined-article-flow;
}

The markup stays entirely unchanged, but now the content of all three
articles are collected in a named flow, leaving the main box of the
article element behind. The first and second article box become regions
for the named flow, and the first will be constrained to the height of the
viewport. The second is auto-height, so it will display the rest of the
named flow. The third box (lacking any other styling) disappears, as it
has no content.

Given enough content, the first region will fill the initial screen
(whatever size screen that is), the aside is displayed after you scroll,
and the rest of the content (if there is any) comes after the aside. If
there isn't enough article content to fill the screen, it all gets
displayed in the first region which auto-sizes to the available content
and the aside comes right after. All of the presentation is in the CSS,
and you don't even have to add class attributes to the markup.

Thanks,

Alan

Received on Saturday, 25 January 2014 01:02:26 UTC