W3C home > Mailing lists > Public > public-webplatform@w3.org > January 2013

Re: Draft blog post on CSS Regions

From: Julee <julee@adobe.com>
Date: Wed, 30 Jan 2013 13:43:47 -0800
To: Doug Schepers <schepers@w3.org>, Alex Komoroske <komoroske@google.com>
CC: "public-webplatform@w3.org" <public-webplatform@w3.org>
Message-ID: <CD2ED3C3.53044%julee@adobe.com>
Hi, I made a couple minor changes, so I thought I'd send this out again. If
I don't get any more feedback, I'll post it tomorrow.

BLOG POST PROPOSAL: Documenting the Future: CSS Regions
 
PROPOSED POST DATE: Monday, Jan 28 2013
 
RELATED TWEET/SOCIAL MEDIA BLURB: CSS Regions: tutorial http://goo.gl/XBdfh
and API docs http://goo.gl/2g7tm on #webplatform.org: your web, documented.
 
BODY:
 
Web Platform Docs is an ambitious project. It is challenging enough to
document all the features that work across browsers today, without delving
into experimental features. But it's also critical for web developers to
learn what's coming up next. Such features are not as widely documented
elsewhere, and getting early feedback on them helps make sure they are done
right. 
 
So when an important CSS layout feature like CSS Regions gets experimental
support 
<http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.htm
l>  from two major browser engines, WebKit (Chrome and Safari) and Trident
(Internet Explorer), we felt it was important to document it on Web Platform
Docs. (You will have to enable experimental features to see how CSS Regions
works.) CSS Regions helps solve a long-standing fundamental design problem:
allowing content to flow smoothly from one layout element to another without
forcing a position. With CSS Regions, you can create complex magazine-style
designs in which content flows through freely positioned layout elements.
 
Mike Sierra <http://docs.webplatform.org/wiki/User:Sierra>  wrote up a
tutorial <http://docs.webplatform.org/wiki/css/tutorials/css-regions>  that
shows how flows work, how to arrange a layout, enable it, control region
breaks, style fragments, trim content, and create adaptive layouts with
media queries. The new API starts with the css-regions
<http://docs.webplatform.org/wiki/apis/css-regions>  package, and includes
APIs, such as CSSRegionStyleRule
<http://docs.webplatform.org/wiki/apis/css-regions/CSSRegionStyleRule> ,
NamedFlow <http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow> ,
and Region <http://docs.webplatform.org/wiki/apis/css-regions/Region> . New
CSS property pages have also been added, such as flow-from
<http://docs.webplatform.org/wiki/css/properties/flow-from> , flow-into
<http://docs.webplatform.org/wiki/css/properties/flow-into> ,
region-fragment 
<http://docs.webplatform.org/wiki/css/properties/region-fragment> , and the
@region <http://docs.webplatform.org/wiki/css/atrules/@region>  rule.
 
Mike also posted an example he describes here:
 
http://letmespellitoutforyou.com/samples/region_mq_sample.html
<http://letmespellitoutforyou.com/samples/region_mq_sample.html>
 
Resize the window to see the simplified mobile layout the tutorial
describes.


J
----------------------------
julee@adobe.com
@adobejulee

From:  julee <julee@adobe.com>
Date:  Tuesday, January 29, 2013 1:41 PM
To:  Doug Schepers <schepers@w3.org>, Alex Komoroske <komoroske@google.com>
Cc:  "public-webplatform@w3.org" <public-webplatform@w3.org>
Subject:  Re: Draft blog post on CSS Regions

Thanks much, Doug! Here's the updated version:

BLOG POST PROPOSAL: Documenting the Future: CSS Regions
 
PROPOSED POST DATE: Wednesday, Jan 30, 2013
 
RELATED TWEET/SOCIAL MEDIA BLURB: CSS Regions: tutorial http://goo.gl/XBdfh
and API docs http://goo.gl/2g7tm on #webplatform.org: your web, documented.


BODY:
 
Web Platform Docs is an ambitious project. It is challenging enough to
document all the features that work across browsers today, without delving
into experimental features. But it's also critical for web developers to
learn what's coming up next. Such features are not as widely documented
elsewhere, and getting early feedback on them helps make sure they are done
right.
 
So when an important CSS layout feature like CSS Regions gets experimental
support from two major browser engines, WebKit (Chrome and Safari) and
Trident (Internet Explorer), we felt it was important to document it on Web
Platform Docs. (You will have to enable experimental features in these
browsers to see how CSS Regions works.) CSS Regions helps solve a
long-standing fundamental design problem: allowing content to flow smoothly
from one layout element to another without forcing a position. With CSS
Regions, you can create complex magazine-style designs in which content
flows through freely positioned layout elements.
 
Mike Sierra <http://docs.webplatform.org/wiki/User:Sierra>  wrote up a
tutorial <http://docs.webplatform.org/wiki/css/tutorials/css-regions>  that
shows how flows work, how to arrange a layout, enable it, control region
breaks, style fragments, trim content, and create adaptive layouts with
media queries. The new API starts with the css-regions
<http://docs.webplatform.org/wiki/apis/css-regions>  package, and includes
APIs, such as CSSRegionStyleRule
<http://docs.webplatform.org/wiki/apis/css-regions/CSSRegionStyleRule> ,
NamedFlow <http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow> ,
and Region <http://docs.webplatform.org/wiki/apis/css-regions/Region> . New
CSS property pages have also been added, such as flow-from
<http://docs.webplatform.org/wiki/css/properties/flow-from> , flow-into
<http://docs.webplatform.org/wiki/css/properties/flow-into> ,
region-fragment 
<http://docs.webplatform.org/wiki/css/properties/region-fragment> , and the
@region <http://docs.webplatform.org/wiki/css/atrules/@region>  rule.
 
Mike also posted an example he describes here:
 
http://letmespellitoutforyou.com/samples/region_mq_sample.html
<http://letmespellitoutforyou.com/samples/region_mq_sample.html>
 
Resize the window to see the simplified mobile layout the tutorial
describes.


J
----------------------------
julee@adobe.com
@adobejulee





-----Original Message-----
From: Doug Schepers <schepers@w3.org>
Organization: W3C
Date: Monday, January 28, 2013 9:06 PM
To: Alex Komoroske <komoroske@google.com>
Cc: julee <julee@adobe.com>, "public-webplatform@w3.org"
<public-webplatform@w3.org>
Subject: Re: Draft blog post on CSS Regions

> Hi, Julee-
> 
> Along the lines of what Alex commented, maybe add a brief intro of where
> this fits into Web Platform Docs, especially since it's not yet
> universally supported.
> 
> Maybe something along the lines of:
> [[
> Documenting the Future: CSS Regions
> 
> Web Platform Docs is an ambitious project. It is challenging enough to
> document all the features that work across browsers today, without
> delving into experimental features.
> 
> But it's also critical for web developers to learn what's coming up
> next. Such features are not as widely documented elsewhere, and getting
> early feedback on them helps make sure they are done right.
> 
> So when an important CSS layout feature like CSS Regions gets
> experimental support from two major browser engines, WebKit (Chrome and
> Safari) and Trident (Internet Explorer), we felt it was important to
> document it on Web Platform Docs.
> 
> CSS Regions helps solve a long-standing fundamental design problem:
> allowing content to flow smoothly from one layout element to another
> without forcing a position.
> 
> ... (your current post)
> 
> (ending:)
> 
> Future articles in this blog will talk about progress in documenting
> both well-established and cutting-edge features that web developers and
> designers need to keep on top of their game.
> ]]
> 
> Or something like that... I realize that's a little overly long, and
> could be cut down, but I kinda think something like this is important
> for setting the stage for this post and future posts like it.
> 
> Maybe this first part could even be broken out into a post of its own,
> then followed by your CSS Regions post?
> 
> Regards-
> -Doug
> 
> On 1/28/13 10:12 PM, Alex Komoroske wrote:
>>  Good news is always welcome! Some comments inline.
>> 
>> 
>>  On Mon, Jan 28, 2013 at 6:24 PM, Julee <julee@adobe.com
>>  <mailto:julee@adobe.com>> wrote:
>> 
>>      Hi, everyone:
>> 
>> 
>>      In an effort to keep the good news coming, I drafted a blog post for
>>      CSS Regions. Please let me know your thoughts.
>> 
>> 
>> 
>>      ----------------------------
>> 
>>      BLOG POST PROPOSAL: CSS REGIONS
>> 
>> 
>>  Perhaps a more descriptive title?
>> 
>> 
>>      PROPOSED POST DATE: Monday, Jan 28 2013
>> 
>> 
>>      RELATED TWEET/SOCIAL MEDIA BLURB: CSS Regions: tutorial
>>      http://goo.gl/XBdfh and API docs http://goo.gl/2g7tm on
>>      #webplatform.org <http://webplatform.org>: your web, documented.
>> 
>> 
>>      BODY:
>> 
>> 
>>      CSS Regions helps content flow from one layout element to another
>>      without forcing a position.
>> 
>> 
>>  Perhaps leading with the fact that it's an emergent standard to better
>>  set developers' expectations?
>> 
>>      This affords complex magazine-style designs in which content flows
>>      through freely positioned layout elements.
>> 
>> 
>>  "Affords" sounds overly proper here to my ear.
>> 
>>      The latest on CSS Regions is now in Chrome Beta, as well as Canary
>>      and nightly WebKit builds.
>> 
>> 
>>  Superfluous "on"?
>> 
>>  The wording doesn't make it clear that it's Chrome Beta/Canary; it
>>  sounds like it's "Canary and nightly WebKit builds". It also doesn't
>>  make it clear that you'll have to flip a flag to play with it (and thus
>>  it's certainly not ready for deployment on a site with real users).
>> 
>>      Mike Sierra <http://docs.webplatform.org/wiki/User:Sierra> wrote up
>>      a tutorial
>>      <http://docs.webplatform.org/wiki/css/tutorials/css-regions> that
>>      shows how flows work, how to arrange a layout, enable it, control
>>      region breaks, style fragments, trim content, and create adaptive
>>      layouts with media queries.
>> 
>> 
>>      Here are new API doc pages, the first one for the API package as a
>>      whole:
>> 
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions____
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions/CSSRegionStyleRule____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/Document/getNamedFlows____
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/firstEmptyRegionI
>> ndex____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getContent____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getRegions____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getRegionsByConte
>> nt____
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/name____
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/overset____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/regionlayoutupdat
>> e____
>> 
>>      http://docs.webplatform.org/wiki/apis/css-regions/Region____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/Region/getComputedRegionSty
>> le____
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/Region/getRegionFlowRanges_
>> ___
>> 
>>      
>> http://docs.webplatform.org/wiki/apis/css-regions/Region/regionOverset____
>> 
>> 
>>      New CSS property/rule pages
>> 
>> 
>>      http://docs.webplatform.org/wiki/css/properties/flow-from____
>> 
>>      http://docs.webplatform.org/wiki/css/properties/flow-into____
>> 
>>      http://docs.webplatform.org/wiki/css/properties/region-fragment____
>> 
>>      http://docs.webplatform.org/wiki/css/atrules/@region
>> 
>> 
>>      Mike also posted the example he described here:
>> 
>> 
>>      http://letmespellitoutforyou.com/samples/region_mq_sample.html
>> 
>> 
>>  All of these sections come across as a dump of data in the form of
>>  bullets. Perhaps choose a few key links (or perhaps a link to a page
>>  that lists all of these pages) and work them into a prose paragraph?
>> 
>> 
>>      View it with Chrome Beta, Canary or Webkit Nightly, with
>>      experimental features enabled. Resize the window to see the
>>      simplified mobile layout the tutorial describes. Download the sample
>>      and play with the layout a bit: a more flexible CSS layout (rather
>>      than the hard-coded 8.5x11 page) would adapt it to various tablet
>>      browsers; a multi-page variant could be easily modified with swipe
>>      gestures to navigate among pages, with no need for additional paged
>>      media markup. And let us know what you've done!
>> 
>> 
>>  This last section reads like an advertorial for CSS Regions, when
>>  ostensibly this post is about the fact that there is now good CSS
>>  Regions documentation on WPD (and giving a bit of background for folks
>>  who have never heard of CSS Regions). And the "and" at the beginning of
>>  the last sentence comes off as a bit informal (see what I did there?).
>> 
>>      END
>> 
>>      ----------------------------
>> 
>>      ____
>> 
>> 
>>      J
>>      ----------------------------
>>      julee@adobe.com <mailto:julee@adobe.com>
>>      @adobejulee
>> 
>> 
> 
> 
Received on Wednesday, 30 January 2013 21:44:12 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 May 2013 19:57:38 UTC