Future

SA5 Layout is continually evolving. Want to sponsor a feature? Learn more at the link.

Future ideas include;

• Copy v. Move

• Control the sequence of operations?

• Part control

• Position control

  • Sorting control?

• Handlers

  • Slider

  • SwiperJS

  • Lightbox Galleries

  • Accordion

  • Dropdown Navs

• Distributed layouts, where an item can be placed in one of multiple locations

• Item sets, which acts as a card set

Group Layouts

Tar

Distributed Layouts

Some possibilities we're considering;

Allow multiple containers to have the same name, along with some optional rules for distribution.

• On layout distribute items randomly across those groups

• Random distribution

  • Place each item in a random container

• Flow distribution

  • N items in the first matching container

  • M items in the second matching container

  • etc. crop overflow

• Ordered segmentation

  • 1 - 7 in this specific container

  • 8 - 23 in that specific container

  • 24+ in the other ( or crop overflow )

• Ordered segmentation by portion

  • 50% to group 1, 50% to group 2

• Group-match layouts

  • Identify possible matching groups ( regex, eval, custom function )

  • Allocate to first,

And possible mixes, like random ordered segmentation by portion

Possible attributes;

Source elements, ordered, or random ( pre-build an element pointer list and randomie it? )

Container constraints. Item positions min and max. Max items total. % of allocation, and max. Support multiple constraints, like width, max width, min width

In general;

• Item-centric-layout. Go through each item, and identify where it lay it out.

  • Matching process, identifying which group(s) are suitable for placing this item

  • Allocation process

• Group-centric-layout. Go through each group, and identify what lays out in it. Group specifies the matching

  • Matching process, identifies which item(s) are suitable for placing in this group

  • Allocation process

    • % of items

    • Min/max of items

Algo;

• Get all groups

  • Segment by ns

  • Capture ordinal positioning within NS

  • Allow ordering override via attribute?

• Get all items, with positioning within NS

  • Segment by ns

  • Capture ordinal positioning within NS

    • Allow ordering override via attribute?

• Decide on group/item-centric layout

  • Depends on layout type?

    • Should be consistent

Use cases;

https://discourse.webflow.com/t/display-collection-data-outside-of-data-collection/286328/3

Item Sets

Card deck concept, we may want some deck level controls

Crop overflow... extra items that do not "fit", either leave where they are, or delete them.

Custom Callbacks

• Pre-layout callback

  • e.g. create containers for calendar events https://discourse.webflow.com/t/issues-fetching-filtered-cms-items-via-serverless-function-due-to-cors-policy/270353/4

  • Normalize dates from an ISO-8601 embed to a scoped attribute

    • Year, month, day, hour... levels of scoping

• Post-layout callback

  • Could put styling classes here, iterate through containers, with layout report information

Styling classes

Apply after layout to containers

• No elements

• No element added

• Number of elements ( attribute )

• Number of elements added ( attribute )

Assign classes for easy styling?

Tabs Layout

Ability to do more complex tabs

https://www.apple.com/ca/today/calendar/

Future

Consider behavior if no layout elements are found- keep the container hidden?

Options ( Under Consideration )

wfu-layout-priority = NUMBER ( optional )

Control the sequence of layout operations.

wfu-layout-item-method =

• move (default) - move the item

• copy - copy the item

wfu-layout-item-part =

• element (default) - move the element and its children

• children - move only the children of the element

wfu-layout-item-position =

• bottom | end (default) - layout at the bottom of the container

• top | start - layout at the top of the container

wfu-layout-item-name (special) = TEXT-STRING

• Used for e.g. tab name