# Layout ❺ Webflow is great at designing static pages but its CMS layouts come with inherent structural limitations that can be difficult to work around. * 100 collection items limit in a list * 5 nested collection items in a nested list * "closed" lists, i.e. no built in support for inserting static content in with your dynamic content * no CMS support for UX's like tabs SA5 Layout was designed to make complex layouts much easier by allowing elements to be moved automatically *after* the page has loaded, and we do this with a very versatile item / slot tagging approach. ## Use Cases * Build a week-calendar view, where items are grouped by weekday ( using only one collection list ) * Build a month-calendar view, where items are grouped by date ( using only one collection list ) * A-Z bar, with glossary items organized under each group heading ( using only one collection list ). Currently requires each item to be "tagged" for the group it will be placed in, which can be easily stored in a separate CMS field. * Dynamic tab generation, from a collection list * Complex, CMS-based nested tab generation Future; * Dynamic slide generation, from a collection list * "Grouped" items, with max-count * A-Z bar, with glossary items automatically organized into those groupings based on the first letter * May not support localization, if translated terms start with e.g. an A-umlaut. In localized sites the manual grouping may be more effective here. ## Goals * Flexible rearrangement of the page * Support for specific use cases above * Ability to have placeholder content in a group that is only replaced when items are added ( this allows a no items default ) * e.g. A-Z glossary but "no terms yet" on empty groups * Ability to suppress an entire container in which no items are inserted. * e.g. A-Z glossary but we don't want empty letters * Group item counts * Possibly supported even outside of the target group ## How it Works **In the broadest sense tag any container element ( e.g. a DIV ) as a slot, and tag any elements as items to be put into that slot, and SA5's Layout engine will reorganize your entire page according to those rules.** *Here is a exceptionally simple example of how elements can be targeted to containers, and re-organized on page load. The* `wfu-layout-target` *attribute is used to match and identify the wfu*`-layout` *container, and the element is moved.* This technique can expanded in many ways; * Use CMS custom attribute binding and slugs to dynamically define containers, for example country groupings, or product category groupings. * Use CMS custom attribute binding and slugs to dynamically define and target your items to those containers. * Use namespaces to avoid naming conflicts in complex layout builds. * Make a tabs element a layout container, and tabs will be automatically created. {% hint style="success" %} **SA5 Layout** is a *very* flexible library. Because it has such a wide range of use cases, it can be difficult to understand its massive range of applications. Spend some time in the docs and demos and feel free to ask questions in the forum. {% endhint %} ## Use Cases * Combine collection lists, even from different collection sources * Handle complex layout requirements that would typically require a large number of collection lists * e.g. events into a 31-slot month calendar view * Overcome nested-item limits in collection lists * Push static elements into a collection list * Group elements on your page under grouping headings * e.g. a glossary of terms and A-Z groupings * Build hierarchical site navigations CMS-bound tabs; * Create tabs dynamically from a collection list * Create dynamic, nested tab arrangements * e.g. country level tabs containing city level tabs, from CMS data ## Demonstration {% embed url="" %} Demos {% endembed %} {% embed url="" %} Cloneable {% endembed %} ## Usage Notes - Configuring a Layout Container {% hint style="info" %} A layout container is container element {% endhint %} ### I want this container element to be a target container for layout operations `wfu-layout` = ( layout container name ) **layout container name** can be any unique arbitrary string to identify that container. It can also be bound to a collection list slug for more dynamic, powerful layouts. ### I want to restrict layouts to a namespace ( advanced ) **Optional.** This is used to namespace container names and avoid conflicts when there is a possibility of duplication. Recommended when `wfu-layout` is bound to a CMS slug. `wfu-layout-ns` = ( layout container namespace ) {% hint style="info" %} For complex nested layouts, the wfu-layout is often bound to a CMS item slug and in a complex page layout there is a possibility of naming conflicts. To prevent conflicts, you can also define a namespace. When a layout container has a namespace specified, it will only accept layout items which match *both* the container name and the namespace attributes. {% endhint %} ### Use a specific layout handler **Optional.** Allows you to use specialized handlers, which e.g. create tabs `wfu-layout-handler` = ( handler type ) * `auto` ( default ) - select the appropriate handler for the element, based on the element you've applied the layout attribute to. * `default` - do not use a handler, this is the case for standard DIV layouts * `tabs` - must be placed on a tabs outer element * `slider` - must be placed on a slider outer element ### Initialize the container **Optional.** If desired, you can specify how the container is initialized before loading. `wfu-layout-init` = ( setting ) * `none` ( default ) - do nothing * `clear` - clear the contents / tabs / slides before layout {% hint style="info" %} The primary reason for this is that in the designer, you may want to use placeholder content inside of your container just to facilitate layout and design work. That content may not be relevant to the published page, so you can have it cleared automatically if you prefer. {% endhint %} ### Prior to loading the layout, I want the container to appear as... `wfu-preload` * `visible` ( default ) - keep the element visible * `hidden` - completely hidden from view * `invisible` - takes up space but otherwise not visible ### Future `wfu-layout-priority` = ( number ) Allows you to specify distribution priority. Multiple layouts with the same ID get progressively distributed. `wfu-layout-maxitems` = ( number ) Allows you to specify a limit on the number of items to be added to this group. When used in conjunction with priority, this allows for progressive distribution across a series of groups. `wfu-layout-rule` = ( rule name ) * `exact` ( default ) means an exact match on the wfu-layout name. String matching; * `startswith` means that the group is matched if the item's key starts with the specified string * `regex` means that the group is matched if the item's key matches a regex string Numeric matching, can be used when the item key is numeric * greaterthan greater or equal ( * e.g. 1000 * lessthan less or equal ( use eval if you need strict less ) * e.g. 1000 * range between x and y, including the range endpoints ( use eval if you need a different approach ) * e.g. 1000-2000 * eval matches an evaluation string * e.g. 1000 < x <= 2000 wfu-layout-range-min wfu-layout-range-max wfu-layout-container Place on a wrapper Implementation note: during layout an attribute can be added to indicate that content was added, wfu-layout-state = content After layout, a cleanup process occurs. We look for wfu-layout-container elements and if there are only wfu-layouts within it that have a wfu-layout-state = empty ( match cvis ) then Does it make sense to use the key here as the range value ? `wfu-layout-rule-mode` * `caseinsensitive` ( default ) - * `casesensitive` - Range ## Usage Notes - Configuring a Layout Item ### Target the item `wfu-layout-target` = ( layout container name ) Identifies the container this element should be moved to. ### I want to restrict layouts to a namespace ( advanced ) `wfu-layout-ns` ( optional ) = ( layout container namespace ) **Optional.** Recommended when `wfu-layout` is bound to a CMS slug. For complex nested layouts, the wfu-layout is often bound to a CMS item slug. To prevent conflicts, you can also create a namespace in the form of a zone. {% hint style="info" %} When a layout item has a zone specified, it will only be moved to zones which match both the container name and the zone attributes. {% endhint %} {% hint style="success" %} **NAMESPACES** In Webflow, `wfu-layout` is often easily used with CMS data-bound attributes and item slugs. Since this can create multiple targets with the same name on a page, you can use `wfu-layout-ns` with an arbitrary identifier to isolate these areas and prevent namespace conflicts or overlaps. {% endhint %} ## Getting Started ( NOCODE ) ### STEP 1 - Add the Library First, **add the library** as detailed in [Quick Start](https://attr.sygnal.com/sa5-html/quick-start). ### STEP 2 - Apply the custom attributes as desired See above for details.