RE: [css3-flexbox] Argh, architectural problems

[Tab Atkins:]
> 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?".

Greast list ! I'd suggest starting with a small subset and mock them up
using simple wire-frames and/or markup, similar to what you did on your
blog here http://www.xanthir.com/blog/b4580. Both the picture and the
markup are super-helpful. While there are a set of people on this DL who
who are familiar enough with flexbox, layout and the algorithmics thereof
that they'd understand what you're talking about without these props, it's
not the case for everyone and I think they should be very helpful in catching
both mistakes and the kind of misunderstanding that recently surfaced on
the mailing list.

Received on Friday, 21 January 2011 20:59:54 UTC