isabella232 / craft-classnames

Craft plugin for conditionally joining css class names together in Twig templates.

Classnames plugin for Craft CMS 3.x

Classnames is a simple Twig function for conditionally joining css class names together in Twig templates, in a way that makes them much more readable. It's like Jed Watson's Classnames but for Twig in Craft.

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    cd /path/to/project
   

2. Then tell Composer to load the plugin:

    composer require viget/craft-classnames
   

3. Install the plugin either via the CLI with ./craft plugin/install classnames (or if using Craft < 3.5.0 ./craft install/plugin classnames), or in the Control Panel by going to Settings → Plugins and clicking the “Install” button for Classnames.

Using Classnames

A real world example:

<button
  class="{{ classNames({
    'group relative z-0 hover:z-1': true,
    'px-24 py-12': true,
    'font-bold text-14 text-dark-gray': true,
    'inline-flex items-center justify-between': props.arrow,
    'inline-block': not props.arrow,
    'w-full text-center': props.full
  }) }}"
>
  {{ props.text }}
</button>

Other examples:

{{ classNames('foo', 'bar') }} {# 'foo bar' #}
{{ classNames('foo', { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo-bar': true }) }} {# 'foo-bar' #}
{{ classNames({ 'foo-bar': false }) }} {# '' #}
{{ classNames({ 'foo': true }, { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo': true, 'bar': true }) }} {# 'foo bar' #}

There is even a shorthand cx version available:

{{ cx('foo', { 'bar': true }) }} {# 'foo bar' #}

---

Visit code.viget.com to see more projects from Viget.