Add Classes

Gives unique add-on classes to elements inside your Collection List
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Create unique layouts in minutes
Left/right flip layout
Everybody wants a left/right flipper.
Crazy irregular cards
Go f'in crazy!
Timeline
Timeline 100% managed via CMS.

How to use it

First, create an array to define the classes you’re targeting and the add-on classes. An array is a list! We're listing our add-on classes and where they will go.

<script>
// define 2 class pairings in an array and store it in a variable called flipSection
‍var flipSection = [
  {
    classTarget: ".project-feature", // the base class on the element
    classToAdd: ".flip-row" // the class you want to add to the element
  },
  {
    classTarget: ".project-feature-image",
    classToAdd: ".flip-image"
  }
]
</script>

Copy code

Then run the function below the array!

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
‍
<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var customBlogPosts = new FsLibrary('.blog-posts-list')
‍
  // define 2 class pairings in an array and store it in a variable called flipSection
  var flipSection = [
    {
      classTarget: ".project-feature", // the base class on the element
      classToAdd: ".flip-row" // the class you want to add to the element
    },
    {
      classTarget: ".project-feature-image",
      classToAdd: ".flip-image"
    }
  ]
‍
  // run the addclass Library component on your instance
  customBlogPosts.addclasses({
    classArray: flipSection, // variable of the array we created above
    frequency: 3, // how often we add the classes in the Collection List
    start: 1 // when we start adding the classes in the Collection List
  })
})();
</script>

Copy code

Code explanation

customBlogPosts

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

var flipSection

A variable we established to store our array. This is variable holds all of our add-on classes and where they should be added. You can name this variable anything you want.

You can create multiple arrays to apply within the same Collection List. This theoretically makes it possible to achieve any style of layout structure within a single Collection List.
classTarget

The class of the element that you want to add a new class to. If you want to add the ~.cool~ class to ~.not-cool~, ~.not-cool~ would be your class target.

classToAdd

The class that you want to add to your ~classTarget~. In our example in ~classTarget~, the ~classToAdd~ would be ~.cool~.

classArray

Where we use our variable that holds array we created. In the example, this would be ~flipSection~.

frequency

The frequency of the classes being added to the list

A frequency of 1 means that add-on classes would be added to every item in the list, a frequency of 2 would add the add-on classes to every other item in the list, and a frequency of 4 would add the add-on classes to every 4th item in the list.
start

Specify when the classes start being added to the Collection List.

A start of 1 would start adding the add-on classes on the first item in the list, a start of 2 would start adding the add-on classes on the second item in the list, and a start of 4 would start adding the add-on classes on the 4th item in the list.

Frequency and Start

You may customize when in the Collection List the addclasses component starts adding classes, as well as customize the iteration which classes are added to the Collection List (add a class to every nth child). This is why we have frequency and start.

Here is a handy visual explanation to the frequency and start options. In the following examples we are adding the class that changes item's background to solid with the designated frequency and starting place.

“2” as frequency, “2” as start. Every 2 items, we add the class. We start at item 2.
“2” as frequency, “3” as start. Every 2 items, we add the class. We start at item 3.
“4” as frequency, “6” as start. Every 4 items, we add the class. We start at item 6.
“3” as frequency, “1” as start. Every 3 items, we add the class. We start at item 1.
“0” as frequency, “3” as start. Every 0 items, we add the class (meaning we only add the class once). We start at item 3.

Establish add-on classes

Give base classes add-on classes to establish their style change
Tell Webflow what .reverse-flex does and save that style somewhere safe in your project.
Anything goes
Single add-on classes, 5x add-on classes on one element, go for it. We can add any amount of classes to any amount of classes.

note

Remember to create a 'setup' page with the Add Classes .combo-class added to an element.

This is so you don't accidentally delete the .combo-class when you "clean up all unused styles" from the Style Manager.

Add classes video docs

DOCS EXPLAINER
Open video modal and follow the explanation above
beginner tutorial
Video walkthrough!
Check out Clonable "How To"
Learn, explore, inspire yourself, clone, and implement