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

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Critical
Configure