Buy Us a Beer!Community ForumMicro-Consulting

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

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

Specify a special sub-layout item which is pulled out of line for this purpose

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

Support other card-based layouts, such as accordion;

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

Old Notes

Last updated