Welcome to dynamic-tags!

This is a vanilla JS library designed to make it super simple to create a tagging system for any collection of elements. Use it for blog posts, cards, recipes, and anything else your heart desires!

Usage

StylingNew!

dynamic-tags now comes with default styling for a truly drop-in experience! There are a whole host of parameters to change, but simply set the useDefaultStyling tag as true in your hash, and a cssPath key in a hash under styling. Check out the example below for what that might look like.

For more fine-grained control, add other parameters to the styling hash. From here, you can change things like the base color with baseTheme, and how the filter behaves - whether to be sticky, absolutely positioned, and how it behaves across different breakpoints.

Watch out for a detailed breakdown soon!

Basic setup

dynamic-tags is designed to fit directly into your predefined HTML without much fuss. It expects that your DOM has a container for all your cards, and that all your cards have been loaded. It also expects that the tags for each card belongs to that card in the DOM. For example, you might have a list of languages that each have a number of properties.

You can simply drop the library into your website by writing <script src="js/dynamic-tags.js"></script> somewhere after your body element. Then, in your JavaScript, create a DynamicTagController() object, and finally, call the loadTags() method of that object. Here's a brief example of what the result might look like in the language filtering example mentioned above:

This example took only a few lines of JavaScript:

      var languages = new DynamicTagController({
        useDefaultStyling: "true",
        styling: {
          cssPath: "dynamic-tags/css/dynamic-tags.css",
          baseTheme: "blue",
          filter: {
            stickyFilter: "desktop",
            top: "130px"
          }
        }
      });
      languages.loadTags();
        

In this case, the structuring of the DOM was more important to the library than any of the JavaScript. If you look at the DOM, you'll notice that each element had a class corresponding to its role: the filter had a filter class, the container had a container class, each card had a card class, and each tag had a tag class. This is the default expectation, but you might need to use different classes for each element (say, for example, to have multiple on the same page).

In this case, you can simply pass in a hash with the parameters you want to change. The available params right now are:

As an example of what can be done using this system, here is an entirely different use-case, using these parameters:

          
      {
        container: "blog-container",
        card: "blog-post",
        tag: "blog-tag",
        filter: "blog-filter",
        filterSelectionMethod: "input",
        filterInputClass: "blog-filter-input",
        filterInputPlaceholder: "Search for tags here...",
        searchBoxClass: "blog-search-box",
        activeTagClass: "viewing"
      }
    

The food and book blog

Making a super fluffy pancake ... without eggs!

Ever wanted to make fluffy pancakes but dairy-free? This is the recipe for you! Read on to find out how to WOW your family for Sunday brunch.

Top 10 best books to read if you loved Ender's Game

Ender's Game is a sci-fi classic. Unfortunately, it's old as hell. Here are the authors that are taking Orson Scott Card's legacy to the next level!

Book Review: Skyward

Brandon Sanderson is a fantasy genius. In his exploratory foray into sci-fi writing, he shows his true mastery of tension, character development, and worldbuidling. Our book review is spoiler-free!

Pizza, without the cheese?

Ask almost anyone, and the piping hot cheese on a pizza is the best part. We're here to show you that pizza can still be amazing while being dairy-free. Check out this ten-minute recipe that will shake up your weeknight.

Book Review: Aurora Rising

Amie Kaufman is a New York Times bestselling sci-fi author - and with good reason. Aurora Rising is her second collaboration with Jay Kristoff, and as usual, it is a delight to watch these two masters at work. Our book review goes into more depth about the world behind Aurora Rising.

Top 5 fantasy authors to look out for in 2021

Get ready to immerse yourself in the worlds created by these outstanding fantasy authors. These books will be pageturners - without a doubt.

Book Review: Shatter Me

Treading the line between sci-fi, fantasy, and dystopia, Tahereh Mafi proves to be no tightrope walker. This book is an attempt at making something new of an overstuffed genre. Read our book review to see how it went. Spoiler: not well.

Contributing

We're always looking for new contributors to help with our project. You don't even need to know how to code! Take a look at our issues tracker to see if there are any open issues you can help with.

Alternatively, if you think of a feature you'd like to add, open an issue and make a pull request!