Re: [CSS Regions] Update available


As we've started to get feedback today, we have been think about some of the limitations of the ::slot() pseudo-element. We started to brainstorm around how would that integrate with regions and the existing specifications for layout. An alternative to the ::slot() would be a @slot syntax. Some examples of using the @slot syntax:

1. Integration with the flex box: 

@slot “region” {
  flex-box: 1;
  content: from(article);
}
@slot “container” {
  display: box;
  content: slot(region) slot(region) slot(region);
}
#div1:after {
  content: slot(container);
}
<div id=“div1”>
  <p id=“p1”>Before slots</p>
</div>

This is similar to the following HTML markup just that everything in the "container" div is not visible in DOM.

<div id=“div1”>
	<p id=“p1”>Before slots</p>
	<div id="container" style="display:box">
  <div id="region_1" style="content:from(article); flex-box:1"></div>
  <div id="region_2" style="content:from(article); flex-box:1"></div>
  <div id="region_3" style="content:from(article); flex-box:1"></div>
 </div>
</div>

2. Integration with the Grid Alignment module using 'grid-template' property. The examples are adapted from the ones in the Grid Alignment module.

#grid {
 display: grid;
 grid-template:  ”ad”
   "bd”
   "cd";
 grid-columns: 150px 1fr;
 grid-rows: 50px 1fr 50px;

 @slot "b" {
  content: from(article);
 }
}
#item2, #item3 { flow: into(article); }

3. Integration with the Grid Alignment module using 'grid-columns' and 'grid-rows' properties:

#grid {
 display: grid;
 grid-columns: 150px "cell-start" 1fr "cell-end";
 grid-rows: "cell-start" 50px 1fr 50px "cell-end”;

	@slot “cell” {
		grid-column: "cell-start" "cell-end";
		grid-row: "cell-start" "cell-end";
  content: from(article);
 }
}
#item2, #item3 { flow: into(article); }


As usual, looking forward to your fedback.

– Arno  ❉  @arnog  ❉  Director of Engineering, Runtime Foundation

Received on Tuesday, 29 March 2011 15:34:09 UTC