Re: [css3-flexbox] Argh, architectural problems

On Fri, Jan 21, 2011 at 11:51 AM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> It'd be *very* nice to have a clear set of layout use-cases the module is supposed to solve. I don't know how we can get to something that 'feels' right without that. If we don't spell those out clearly - or worse, don't even agree on what they are - 'blue-sky theorizing' is indeed likely to be a significant part of what we'll achieve.

I agree.  I keep forgetting that I have a good model of the use-cases
I'm trying to hit in my head, but nobody else can see it.  ^_^

I know I have trouble getting these concrete enough sometimes, so let
me know if any aren't up to snuff:

1. toolbar, where items (images + labels) are evenly spaced
2. toolbar, where items are split into groups, and groups are evenly spaced
3. Vertical and horizontal toolbars
4. Multiline toolbar (example: tool menus in GIMP), with items in
different lines aligned
5. Horizontal navbar with all items equal width, filling the width of the page.
6. Horizontal navbar with all items equally spaced (widths can be different)
5b/6b. Horizontal navbar, with the active item indicated by
positioning it differently (most items on bottom but active item is
high, for example)
7. "Accordion"-style list - normally, only headers are visible.  When
you expand a section, previous headers are pushed up, later headers
are pushed down.
8. Tab stack, for cardstack-style displays like many OS options screen
have.  Tabs should be baseline aligned, should fill the width
available.  The current active tab may be shifted to the start of the
list.  Tabs may occupy multiple lines.
9. The HTML <center> element (its effects are extremely useful and
still unduplicable in CSS).
10. Gmail message display, with small indicators pressed against the
left/right and the message title as wide as possible in the middle.
11. Chatroom input line, with a submit button on one side, and an
<input> or <textarea> filling all the remaining space on the line.
(In the case of a textarea, the button is usually as tall as the
textarea as well.)
12. Footer with small bits of info on the left and right, and the main
info centered between them.  (For some reason this was very popular in
UI mockups at my old job.)
13. In an article, like a recipe blog, have sections of
picture+discription where the image is on one side and the text is on
the other, and the text may be shorter or longer than the picture.
Text shouldn't wrap under the picture.  (Right now you can hack this
into working by floating the image and triggering a BFC both on the
overall container and on a container around the text.)

All of these are inspired by asking myself the question "What are the
things I want to do related to laying things out in a linear
fashion?".

~TJ

Received on Friday, 21 January 2011 20:24:17 UTC