Re: [css3-flexbox] Argh, architectural problems

On Mon, Jan 24, 2011 at 10:04 AM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> Tab provided a list of use-cases. I'd love to see actual representations
> of them; those would be directly usable in the spec and document the
> use-cases supporting the feature.

Okay, I haven't created image mockups yet, but I have code
representations of how all of these would work in the syntax I'm
thinking of.  It seems like they're all really simple and easy to
figure out.  Warning: long message follows, please trim appropriately
when responding.


1. toolbar, where items (images + labels) are evenly spaced

<toolbar>
 <tool>
  <icon>
  <label>foo</label>
 </tool>
 <tool>
  <icon>
  <label>foo</label>
 </tool>
 ...
</toolbar>
<style>
toolbar {
 display: flex;
 flex-direction: lr;
 padding: 3px;
}

tool {
 margin: 0 1fl;
}
</style>


2. toolbar, where items are split into groups, and groups are evenly spaced


<toolbar>
 <toolgroup>
  <tool>
   <icon>
   <label>foo</label>
  </tool>
  ...
 </toolgroup>
 <toolgroup>
  <tool>
   <icon>
   <label>foo</label>
  </tool>
  ...
 </toolgroup>
  ...
</toolbar>
<style>
toolbar {
 display: flex;
 flex-direction: lr;
 padding: 3px;
 flex-pack: justify;
}

toolgroup {
 display: flex;
 flex-direction: lr;
}
</style>

Or:

<toolbar>
 <tool class=groupstart>
  <icon>
  <label>foo</label>
 </tool>
 <tool class=groupend>
  <icon>
  <label>foo</label>
 </tool>
 <tool class=groupstart>
  <icon>
  <label>foo</label>
 </tool>
 ...
</toolbar>
<style>
toolbar {
 display: flex;
 flex-direction: lr;
 padding: 3px;
}

tool.groupstart:not(:first-child) {
 margin-left: 1fl;
}

tool.groupend:not(:last-child) {
 margin-right: 1fl;
}
</style>



3. Vertical and horizontal toolbars

Same as before, except change 'flex-direction' appropriately.



4. Multiline toolbar (example: tool menus in GIMP), with items in
different lines aligned

Explicitly not handled; will wait for some later flexgrid or
improvements to table or something.


5. Horizontal navbar with all items equal width, filling the width of the page.

<ul>
 <li><a>Home</a></li>
 <li><a>Products</a></li>
 <li><a>About Us</a></li>
</ul>
<style>
ul {
 display: flex;
 flex-direction: lr;
}

li {
 width: 1fl;
}
</style>



6. Horizontal navbar with all items equally spaced (widths can be different)

<ul>
 <li><a>Home</a></li>
 <li><a>Products</a></li>
 <li><a>About Us</a></li>
</ul>
<style>
ul {
 display: flex;
 flex-direction: lr;
}

li {
 width: flex(auto, 1fl);
 text-align: center;
}
</style>

In here, the flex() function is for creating flexible lengths with a preferred
length other than 0.  The first argument specifies the preferred
length, the second
specifies the growing flexibility and optionally the maximum length,
the third (optional)
argument specifies the shrinking flexibility and optionally the minimum length.



5b/6b. Horizontal navbar, with the active item indicated by
positioning it differently (most items on bottom but active item is
high, for example)

Same as above, but with:
<style>
li {
  padding: 1fl 0 0;
}

li.active {
  padding: 0 0 1fl;
}
</style>



7. "Accordion"-style list - normally, only headers are visible.  When
you expand a section, previous headers are pushed up, later headers
are pushed down.

<list>
 <h1>foo</h1>
 <section>foo foo</section>
 <h1>bar</h1>
 <section>bar bar</section>
 <h1>baz</h1>
 <section>baz baz</section>
</list>
<style>
list {
 display: flex;
 flex-direction: tb;
}

section {
 height: 0;
}

h1.active + section {
 height: 1fl;
}
</style>


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.

<tabs>
 <tab>foo</tab>
 <tab>bar</tab>
 <tab class=active>baz</tab>
 <tab>qux</tab>
</tabs>
<style>
tabs {
 display: flex;
 flex-direction: inline;
 flex-align: baseline;
}

tab {
 width: flex(auto, 1fl);
}

tab.active {
 flex-index: 0;
}
</style>

Again, I am explicitly not addressing multiple lines right now.



9. The HTML <center> element (its effects are extremely useful and
still unduplicable in CSS).

<center>
 <p>foo foo foo foo</p>
 <p>bar bar<br>bar bar</p>
 <p>baz baz baz baz baz baz baz baz baz baz</p>
</center>
<style>
center {
 display: flex;
 flex-direction: tb;
 text-align: center;
}

center > * {
 margin-left: 1fl;
 margin-right: 1fl;
}
</style>


10. Gmail message display, with small indicators pressed against the
left/right and the message title as wide as possible in the middle.

<message>
 <grabber>
 <input type=checkbox>
 <star>
 <attachment>
 <recipients>you, me, them</recipients>
 <important>
 <subject>Is your foo not bar enough for your lady?</subject>
 <time>10:04 am</time>
</message>
<style>
message {
 display: flex;
 flex-direction: lr;
}

message > * {
 height: flex(auto, 1fl);
}

recipients {
 width: 145px;
 overflow: hidden;
 text-overflow: ellipsis;
}

subject {
 width: 1fl;
 min-width: 200px;
 /* or */
 width: flex(200px, 1fl);
}
</style>



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.)

<chatroom>
 <messages>
 <entry>
  <input type=text>
  <button type=submit>Enter</button>
 </entry>
</chatroom>
<style>
chatroom {
 display: flex;
 flex-direction: tb;
 min-width: 40em;
}

messages {
 height: flex(10em, 1fl);
}

entry {
 display: flex;
 flex-direction: lr;
}

entry > input {
 width: 1fl;
 height: flex(auto, 1fl);
}

entry > button {
 display: block;
 height: flex(auto, 1fl);
}
</style>



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.)

<footer>
 <leftinfo>foo</leftinfo>
 <rightinfo>bar</leftinfo>
 <maininfo>baz</maininfo>
</footer>
<style>
footer {
 display: flex;
 flex-direction: lr;
}

leftinfo {
 flex-index: 1;
 width: 200px;
}

rightinfo {
 flex-index: 3;
 width: 200px;
}

maininfo {
 flex-index: 2;
 width: flex(200px, 1fl);
}
</style>



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.)

<figure>
 <figcaption>foo bar baz</figcaption>
 <img>
</figure>
<style>
figure {
 display: flex;
 flex-direction: lr;
}

figure > img {
 flex-index: 1;
}

figure > figcaption {
 flex-index: 2;
 width: 1fl;
 min-width: 20em;
}
</style>


~TJ

Received on Monday, 24 January 2011 21:51:38 UTC