RE: [css3-regions] auto-generation, pagination, and code examples

>  > When you read the full reply you'll see that the intent of regions  > is to have
> basic building blocks that can be used to redirect  > content into and having this
> content fragmented into any other  > (optional) subsequent regions.
> 
> I read that part, yes. I still think we should have code examples in the spec which
> explain how to achieve the layouts presented.
> 

I agree and I think that's a fair point. The example below is a quick crack at what we should see in the spec.

>  > Thus, what the layout of the regions themselves is actually depends  > on
> where they're used - eg. Grid, page template, perhaps  > multicolumn etc. I do
> see where you confusions stems from though  > and I think it is a good request
> that we add the proper styling for  > the region elements. Vincent, perhaps we
> need to open an issue  > here?
> 
> That would be good. Pasting the code example in a message to this list would
> also be helpful.

Agree again, here's a version of what the code could look like. I'm using the actual example from the spec and I'm refraining from using anything fancy such as grid, template etc.

<style>
/* Region related style for redirecting content flows */
#article {
    flow-into: article_flow;
}

#region1, #region2, #region3, #region4 {
    flow-from: article_flow;
}

/* positioning and sizing of the region elements */
#page {
  position: relative;
  width: 800px;
  height: 600px;
}
#regionA {
  position: absolute;
  width: 63%; height: 52%;
  left:2%; top: 2%; 
}
#region1 {
  position: absolute;
  width: 63%; height: 20%;
  left:2%; top: 56%; 
}
#region2 {
  position: absolute;
  width: 30%; height: 20%;
  left:2%; top: 78%; 
}
#region3 {
  position: absolute;
  width: 30%; height: 20%;
  left:35%; top: 78%; 
}
#region4 {
  position: absolute;
  width: 30%; height: 96%;
  right:2%; top: 2%; 
}
</style>

<div id="page">
    <div id="regionA"></div>
    <div id="region1"></div>        
    <div id="region2"></div>        
    <div id="region3"></div>        
    <div id="region4"></div>
</div>  

Thanks,
Rossen

Received on Friday, 9 December 2011 01:22:47 UTC