Revamp Guise Skeleton layouts.

Description

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.

Environment

None

Activity

Show:
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
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 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 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.

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Critical
Configure