https://github.com/zicht/twig-classes
Library - Twig extension for zicht/classes
https://github.com/zicht/twig-classes
packagist
Last synced: 9 months ago
JSON representation
Library - Twig extension for zicht/classes
- Host: GitHub
- URL: https://github.com/zicht/twig-classes
- Owner: zicht
- License: mit
- Created: 2017-09-21T19:00:25.000Z (over 8 years ago)
- Default Branch: release/1.0.x
- Last Pushed: 2021-12-17T09:56:12.000Z (over 4 years ago)
- Last Synced: 2025-02-25T14:07:58.147Z (over 1 year ago)
- Topics: packagist
- Language: PHP
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# twig-classes
Twig extension for [zicht/classes](https://github.com/zicht/classes).
## Installing
```
composer require zicht/twig-classes
```
## Purpose
Provide easy conditionally joining of CSS classes in Twig templates.
## Usage
```
{{ classes('art-vandelay') }} ⇒ 'art-vandelay'
{{ classes(['art-vandelay', 'kramerica']) }} ⇒ 'art-vandelay kramerica'
{{ classes(['art-vandelay' => true, 'kramerica' => false]) }} ⇒ 'art-vandelay'
{{ classes('art-vandelay', ['kramerica' => false, 'kel-varnsen' => true]) }} ⇒ 'art-vandelay kel-varnsen'
```
## Example
When classes are manually added by checking one ore more properties, code can be quite hard to read:
```
{% set cx = [
image.url ? 'u-margin--b2' : 'u-margin--b0 u-text--center',
equal_height ? 'u-flex'
] %}
...
```
With the `classes` function, it becomes much more apparent which class is toggled by what property:
```
{% set cx = classes({
'u-margin--b2': image.url,
'u-margin--b0 u-text--center': not image.url,
'u-flex': equal_height
}) %}
...
```
You can even created a nested object if you need to conditionally apply classes to multiple elements.
```
{% set cx = {
card: classes({
'u-margin--b2': image.url,
'u-margin--b0 u-text--center': not image.url,
'u-flex': equal_height
}),
img: classes({
'u-black u-bg--red': color == 'black'
})
} %}
![]()
...
```