Draft blog post on CSS Regions

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
<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>
http://docs.webplatform.org/wiki/apis/css-regions/CSSRegionStyleRule
<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/Document/getNamedFlows>
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow
<http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow>
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/firstEmptyRegion
Index 
<http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/firstEmptyRegio
nIndex> 
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getContent
<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/getRegions>
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getRegionsByCont
ent 
<http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/getRegionsByCon
tent> 
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/name
<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/overset>
http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/regionlayoutupda
te 
<http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/regionlayoutupd
ate> 
http://docs.webplatform.org/wiki/apis/css-regions/Region
<http://docs.webplatform.org/wiki/apis/css-regions/Region>
http://docs.webplatform.org/wiki/apis/css-regions/Region/getComputedRegionSt
yle 
<http://docs.webplatform.org/wiki/apis/css-regions/Region/getComputedRegionS
tyle> 
http://docs.webplatform.org/wiki/apis/css-regions/Region/getRegionFlowRanges
<http://docs.webplatform.org/wiki/apis/css-regions/Region/getRegionFlowRange
s> 
http://docs.webplatform.org/wiki/apis/css-regions/Region/regionOverset
<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-from>
http://docs.webplatform.org/wiki/css/properties/flow-into
<http://docs.webplatform.org/wiki/css/properties/flow-into>
http://docs.webplatform.org/wiki/css/properties/region-fragment
<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
@adobejulee