Revamp Guise Skeleton layouts.


The original Guise Skeleton layouts are a bit haphazard and confusing. When a mix of styles is together such as "box panel board", it isn't clear which word means what. Although brevity is a virtue in CSS stylesheets, and we should concentrate on object semantics rather than explicit styling in the content, a jumble of words isn't as clear as a specific "layout" indicator.

Give the Guise Skeleton layouts a makeover:

  • The box layout becomes layout-flex, providing a useful flexbox default and indicating that the children will expand as needed to fill in the space in a reasonable way.

  • A layout-tile layout is similar to layout-flex, but the children don't flex and the layout uses a justify-content of space-around.

  • A layout-brick layout is similar to layout-flex, but the children don't flex and the layout uses a justify-content of flex-start.

  • Rather than stacked (the current class), add a layout class along-block to indicate flex-direction: column. The default (which we may want to actually define later) would be called along-line to mean flex-direction: row.

  • The concise class changes to lay-fitted (like a fitted sheet), indicating it is an attribute of a layout child, and indicates that it will take as much space as it needs and not grow in a layout-flex layout. In addition, remove layout-specific flex definitions for fitted components (e.g. .guise-layout-flex>.guise-card), and move the style to the individual components. (Having a flex-basis and a flex-grow for the component even if it isn't used in a layout-flex layout shouldn't hurt anything .)

  • The {

} type is not a layout; it should be moved to a separate {

  • } component with a default margin.

The board class will probably be converted to layout-is-gapped property, which would apply to various layouts but primarily layout-flex.

The focalized (center children) may be changed to a lay-focalized, but may be removed altogether after we have a layout-marquee which will "focalize" the children automatically. More thought needs to be given over fine-grained centering overall, as it feels like an anti-pattern.




Garret Wilson
August 3, 2020, 2:41 PM

Closing for now, as most of this is done. We may have to reopen the ticket when we decide what to do with focalized.

Garret Wilson
August 3, 2020, 4:38 AM

We can push layout gaps to a future ticket. Not only is the technique still up in the air. but the naming pattern (e.g. layout-is-gapped or tile-is-gapped) isn't finalized yet, either.

Garret Wilson
August 2, 2020, 9:13 PM

In the future consider adding some panel-like layout or control for action buttons, such as a "tool layout" or an "action layout":

Garret Wilson
August 1, 2020, 5:16 PM

We'll probably make a slab component as well that has a minimum absolute size in ems, to force the layout-flex to wrap rather than pushing certain sections down to a very tiny size just to fit everything on one line. We may give panels this minimum size, too.



Garret Wilson


Garret Wilson




Fix versions