Links

Numeric Sequencing ❺

Assign a numeric sequence to arbitrary elements in a group.
Allows you to apply a numeric sequence across a series of elements.
Numbering is always in a traditional 1, 2, 3… style of sequencing.
NOTE: This is primarily useful for sorting and filtering demos, because CSS has a numeric sequencing feature built in for live display.

Demonstration

Sequence
Demonstration

Usage Notes

wfu-seq-group attribute

Place on any element. Give an arbitrary named group, for matching the items after, e.g. articles

wfu-seq attribute

Place on any child element within that group. Give it the same group name as its parent.

Notes

The HTML DOM is a large tree of element and sub-elements.
  • You can use wfu-seq-group multiple times throughout your document.
  • You can use the same group name on multiple wfu-seq-group’s, provided that those subtrees are independent. Do not use the same name if one group is nested within the other.
  • You can have nested wfu-seq-group’s, as long as you use a different group name.
The purpose of these capabilities is to allow you to use numbering on a Webflow collection list that contains a nested list. You can give one numbering sequence to the parent list, and a numbering sequence to each of the child lists as well.
NOTE: Primarily I’d recommend this for demos, where you need to number items and then permute them. In most numbering situations, CSS numbering is generally a better alternative for general sequencing.

Future

Depending on client needs and user requests, we may expand this to allow for control of;
  • Starting number
  • Step size
  • Increasing or decreasing count
  • Support for decimal values

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply configuration attributes to the elements you want to filter

See above for details.