Re: Draft blog post on CSS Regions

Julee,

You should also mention that there's an experimental implementation in IE10.

Thanks,

Alan

From: Julee <julee@adobe.com<mailto:julee@adobe.com>>
Date: Monday, January 28, 2013 6:24 PM
To: "public-webplatform@w3.org<mailto:public-webplatform@w3.org>" <public-webplatform@w3.org<mailto:public-webplatform@w3.org>>
Subject: Draft blog post on CSS Regions
Resent-From: <public-webplatform@w3.org<mailto:public-webplatform@w3.org>>
Resent-Date: Monday, January 28, 2013 6:24 PM

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

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:

CSS Regions helps content flow from one layout element to another without forcing a position. This affords complex magazine-style designs in which content flows through freely positioned layout elements. The latest on CSS Regions is now in Chrome Beta, as well as Canary and nightly WebKit builds. 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/firstEmptyRegionIndex
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/getRegionsByContent
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/regionlayoutupdate
http://docs.webplatform.org/wiki/apis/css-regions/Region
http://docs.webplatform.org/wiki/apis/css-regions/Region/getComputedRegionStyle
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

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!

END
----------------------------


J
----------------------------
julee@adobe.com<mailto:julee@adobe.com>
@adobejulee