W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Proposition. Positioning content with guidelines

From: Alexander Shpack <shadowkin@gmail.com>
Date: Thu, 23 Feb 2012 11:17:38 +0200
Message-ID: <CAK4xKXnqnGWux8dj0irChn_hm_QS71a6S0OdeUrDoi45p8Trdg@mail.gmail.com>
To: www-style <www-style@w3.org>
Hello, folks!

In continuation to the topic
This is my second attempt, I changed the guideline declaration, make
more examples.

Main goals is next

1. This is an attempt to unite several different positioning
technologies into one
2. Leave the possibility of control  the positioning over DOM Core
methods, not CSS part.
3. Authors don't control the position of blocks directly, they use
flow and fuzzy logic to bind content to the some flex grid.

What is guidelines?

This is usual boxes, but with zero width and infinite height for
vertical guidelines, and zero height and infinite width for horizontal

Guidelines have all of box properties: padding, margin, border, and
may be visible. (web authors don't needed to learn the new features)

It placed between box background and content. (z-index stack still
without any change)

All of new selectors, like :nth-child(), :not() applies to guidelines.
(this code is works fine already)

Possible two types of guidelines: repeatable and not repeatable.
Default type is "not repeatable";

If type of guidelines for box is "repeat", UA must fill this box with
guideline boxes, like texture. If box width will changed, UA should
refill guidelines first. (texturing, I think, is not complicated task
for browser developers)

Content inside guidelined box may be snapped to the nearest or
specific guideline by any edge. Line-box snapping possible too. This
is like flex, but with more control.
Guidelines may be snapped backward to the content.

The guideline box model and position described here

Guidelines tiling

Snapping examples

Is it more interesting?

Received on Thursday, 23 February 2012 09:18:15 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:12 UTC