Generate classes from tags

This will turn all the tags on a summary block into classes on it’s containing item, letting you customize individual blocks with css classes. Written by the legendary Jason Barone.

<script>
function slugify (text) {
    return text.toString().toLowerCase()
        .replace(/\s+/g, '-')           
        .replace(/[^\w\-]+/g, '')       
        .replace(/\-\-+/g, '-')         
        .replace(/^-+/, '')             
        .replace(/-+$/, '');            
}

// Grab Summary Block Tags
Y.all(".summary-metadata-item--tags").each( function(e) {
    // traverse up DOM to get Summary Item
    var item = e.ancestor(".summary-item");

    // search each tag node for tags
    e.all("a").each( function(tag) {
        // get each tag link's text
        var tagNameRaw = tag.getContent()

        // sanitize and slugify tag text through slugify functioni
        var tagName = slugify(tagNameRaw)

        // add tag as class to the ancestor item
        item.addClass(tagName);
    });
});

</script>

So if you'd like to give certain summary items a special look, just add a tag to those blog posts – why not highlight?
Then add that .highlight class to the Custom CSS editor and style it.

.highlight {
  font-weight: 700;
  color: red;
}