PHPackages                             mauricesnip/twig-elementary-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. mauricesnip/twig-elementary-bundle

ActiveSymfony-bundle

mauricesnip/twig-elementary-bundle
==================================

Build Twig components in the most elemental way, without a large footprint.

0.1.0(2y ago)36MITTwigPHP ^7.4 || ^8.0

Since Aug 7Pushed 2y ago1 watchersCompare

[ Source](https://github.com/mauricesnip/twig-elementary-bundle)[ Packagist](https://packagist.org/packages/mauricesnip/twig-elementary-bundle)[ RSS](/packages/mauricesnip-twig-elementary-bundle/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

 [![Twig Elementary Bundle Logo](https://camo.githubusercontent.com/815bfc058ea5f169f9f991002ee0a70be19bdc1c1bf195f802c6a0c0739fe23c/68747470733a2f2f7777772e6d617572696365736e69702e6e6c2f7061636b616765732f747769672d656c656d656e746172792d62756e646c652f747769672d656c656d656e746172792d62756e646c652e737667)](https://camo.githubusercontent.com/815bfc058ea5f169f9f991002ee0a70be19bdc1c1bf195f802c6a0c0739fe23c/68747470733a2f2f7777772e6d617572696365736e69702e6e6c2f7061636b616765732f747769672d656c656d656e746172792d62756e646c652f747769672d656c656d656e746172792d62756e646c652e737667)

Twig Elementary Bundle
======================

[](#twig-elementary-bundle)

Build Twig components in the most elemental way, without a large footprint.

 [![](https://camo.githubusercontent.com/c20cfcfbaaf6f6f14dcd13d00c5cc5a1f73207be122ebc4aa63865022a9a2bc2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f7461672f6d617572696365736e69702f747769672d656c656d656e746172792d62756e646c65)](https://camo.githubusercontent.com/c20cfcfbaaf6f6f14dcd13d00c5cc5a1f73207be122ebc4aa63865022a9a2bc2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f7461672f6d617572696365736e69702f747769672d656c656d656e746172792d62756e646c65) [![](https://camo.githubusercontent.com/7d8afcc5c226c1ba2a57cb07757314f1045be6fafe4b50eb08d708a2e1f93ff5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617572696365736e69702f747769672d656c656d656e746172792d62756e646c65)](https://camo.githubusercontent.com/7d8afcc5c226c1ba2a57cb07757314f1045be6fafe4b50eb08d708a2e1f93ff5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617572696365736e69702f747769672d656c656d656e746172792d62756e646c65)

Heads up!
---------

[](#heads-up)

### ⚠️ This bundle is in early development stage and should not be used in production.

[](#️-this-bundle-is-in-early-development-stage-and-should-not-be-used-in-production)

The examples below require Twig's [`HtmlExtension`](https://github.com/twigphp/html-extra) to be installed. See the documentation for [`html_classes`](https://twig.symfony.com/doc/3.x/functions/html_classes.html)on how to install this extension.

Installation
------------

[](#installation)

Run the following command to install this package with [Composer](https://getcomposer.org/):

```
composer require mauricesnip/twig-elementary-bundle
```

Basic usage
-----------

[](#basic-usage)

Start by extending from [`element-entry.html.twig`](./src/Resources/views/core/element-entry.html.twig), which provides switching between [normal](./src/Resources/views/core/element.html.twig) and [void elements](./src/Resources/views/core/element-void.html.twig)automatically.

```
{# common/molecules/cards/card.html.twig #}

{% extends '@MausTwigElementary/core/element-entry.html.twig' %}

{# Config #}
{% set tag_name = 'article' %}
{% set base_class = 'card' %}

{# Attributes #}
{% set attributes = {
    class: html_classes(
        base_class|default,
        {
            ("#{base_class}--#{size|default}"): size|default,
            ("#{base_class}--#{theme|default}"): theme|default,
            'is-active': is_active|default,
        },
    ),
} %}
```

Using the template above, the following `include`:

```
{% include 'common/molecules/cards/card.html.twig' with {
    theme: 'primary',
    is_active: true,
} %}
```

Will render:

```

```

Templates
---------

[](#templates)

### `element.html.twig`

[](#elementhtmltwig)

Renders a normal element.

#### Blocks

[](#blocks)

NameDescription`element`Renders the full element.`start_tag`Renders the start tag with all of it's attributes.`end_tag`Renders the end tag.`contents`Renders the element's contents.#### Parameters

[](#parameters)

NameTypeDefaultDescription`attributes``Object``{}`The HTML-attributes to render, eg.: `{ id: 'foo' }`.`contents``String``undefined`The contents of the element.`tag_name``String``span`The HTML element's tag name, eg.: `a`, `div` or `p`.`is_raw_contents``Boolean``undefined`Whether to render raw `contents` or not.### `element-void.html.twig`

[](#element-voidhtmltwig)

Renders a void element. Extends [`element.html.twig`](./src/Resources/views/core/element.html.twig).

#### Blocks

[](#blocks-1)

NameDescription`element`Renders the full element.`start_tag`Renders the start tag with all of it's attributes.#### Parameters

[](#parameters-1)

NameTypeDefaultDescription`attributes``Object``{}`The HTML-attributes to render, eg.: `{ id: 'foo' }`.`tag_name``String``span`The HTML element's tag name, eg.: `a`, `div` or `p`.### `element-entry.html.twig`

[](#element-entryhtmltwig)

Renders a normal or void element automatically.

For blocks and parameters, see the documentation for normal and void element above. Extends [`element.html.twig`](./src/Resources/views/core/element.html.twig) or [`element-void.html.twig`](./src/Resources/views/core/element-void.html.twig), based on the provided `tag_name`.

Advanced usage
--------------

[](#advanced-usage)

If you want to extend from your newly created component, be sure to allow for variables to receive values from their child components. Continuing on the [basic usage](#basic-usage) example:

```
{# common/molecules/cards/card.html.twig #}

{% extends '@MausTwigElementary/core/element-entry.html.twig' %}

{# Config #}
{% set tag_name = tag_name|default('article') %}
{% set base_class = base_class|default('card') %}

{# Attributes #}
{% set attributes = {
    class: html_classes(
        element_class|default,
        base_class|default,
        {
            ("#{base_class}--#{size|default}"): size|default,
            ("#{base_class}--#{theme|default}"): theme|default,
            'is-active': is_active|default,
        },
        classes|default,
    ),
    ...attributes|default({}),
} %}
```

### Variable overriding

[](#variable-overriding)

Note that this also enables variable overriding for `include` or `embed`, for example:

```
{% include 'common/molecules/cards/card.html.twig' with {
    base_class: 'item',
    element_class: 'block__item',
    tag_name: 'div',
    theme: 'primary',
    attributes: {
        id: 'specific-item',
        'data-group': 'featured',
    },
} %}
```

Will render:

```

```

### `attributes` quirks

[](#attributes-quirks)

Be aware that overriding `attributes.class` will replace the entire `class`attribute, since Twig does not support deep merge. Nor does merge concatenate string values in any way. Thus, the following include:

```
{% include 'common/molecules/cards/card.html.twig' with {
    attributes: {
        class: 'is-active',
    },
} %}
```

Will render:

```

```

Hence `classes|default` in the [advanced usage](#advanced-usage) example for appending classes to the final output. In this case, the following:

```
{% include 'common/molecules/cards/card.html.twig' with {
    classes: html_classes(
        'is-featured',
        'w-100',
    ),
    element_class: 'block__card',
    theme: 'primary',
} %}
```

Will render:

```

```

Adding content
--------------

[](#adding-content)

You can provide `contents` as a variable, which is mostly used for text content. Markup is supported by setting `is_raw_contents` to `true`. See [documentation for `element.html.twig`](#elementhtmltwig).

```
{# common/molecules/cards/card.html.twig #}

...

{# Contents #}
{% set contents = 'Lorem ipsum' %}
```

Or, what you probably want most of the time, override the contents `block`.

```
{# common/molecules/cards/card.html.twig #}

...

{# Contents #}
{% block contents %}
    {% block body %}

            {% block body_inner %}
                {% block title %}
                    {% if title|default %}
                        {{ title }}
                    {% endif %}
                {% endblock %}
            {% endblock %}

    {% endblock %}
{% endblock %}
```

Concrete example
----------------

[](#concrete-example)

Skeletons provide a base for components that come in many different flavors (or types) to extend from. Taking the [advanced usage](#advanced-usage) example one step further:

```
{# skeletons/cards/card.html.twig #}

{% extends '@MausTwigElementary/core/element-entry.html.twig' %}

{# Config #}
{% set tag_name = tag_name|default('article') %}
{% set base_class = base_class|default('card') %}

{# Attributes #}
{% set attributes = {
    class: html_classes(
        element_class|default,
        base_class|default,
        {
            ("#{base_class}--#{size|default}"): size|default,
            ("#{base_class}--#{theme|default}"): theme|default,
            ("#{base_class}--#{type|default}"): type|default,
            'is-active': is_active|default,
        },
        classes|default,
    ),
    ...attributes|default({}),
} %}

{# Element classes #}
{% set body_class = html_classes(
    "#{base_class}__body",
    body_classes|default,
) %}

{% set title_class = html_classes(
    "#{base_class}__title",
    title_classes|default,
) %}

{% set text_class = html_classes(
    "#{base_class}__text",
    text_classes|default,
) %}

{# Contents #}
{% block contents %}
    {% block header %}{% endblock %}
    {% block image %}{% endblock %}
    {% block body %}

            {% block body_inner %}
                {% block title %}
                    {% if title|default %}
                        {{ title }}
                    {% endif %}
                {% endblock %}
                {% block text %}
                    {% if text|default %}
                        {{ title }}
                    {% endif %}
                {% endblock %}
            {% endblock %}

    {% endblock %}
    {% block footer %}{% endblock %}
{% endblock %}
```

And a product card extending from the above skeleton:

```
{# common/molecules/cards/card-product.html.twig #}

{% extends 'skeletons/cards/card.html.twig' %}

{# Config #}
{% set type = 'product' %}

{# Super (use parent variables here) #}
{% block contents %}
    {% set sku_class = html_classes(
        "#{base_class}__sku",
        sku_classes|default,
    ) %}
    {{ parent() }}
{% endblock %}

{# Body inner #}
{% block body_inner %}
    {% block sku %}
        {% if sku|default %}
            {{ sku }}
        {% endif %}
    {% endblock %}
    {{ parent() }}
{% endblock %}
```

This inherits all the way up to [`element.html.twig`](./src/Resources/views/core/element.html.twig), adding features along the way. With that in mind, the following `include`:

```
{% set some_size_variable = 'lg' %}

...

{% include 'common/molecules/cards/card-product.html.twig' with {
    title: 'Fancy product',
    text: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
    sku: 12345678,
    sku_classes: html_classes(
        {
            'font-size-small': some_size_variable|default == 'sm',
            'font-size-large': some_size_variable|default == 'lg',
        },
    ),
} %}
```

Will render:

```

        12345678
        Fancy product
        Lorem ipsum dolor sit amet consectetur adipiscing elit.

```

### Visualized

[](#visualized)

```
   ┌───────────────────┐
   │                   │
   │ element.html.twig │        Handles tag name, start and end tag, attributes and contents
   │                   │
   └─────────▲─────────┘
             │
┌────────────┴────────────┐
│                         │
│ element-entry.html.twig │     Handles element type (normal vs. void)
│                         │
└────────────▲────────────┘
             │
     ┌───────┴────────┐
     │                │
     │ card.html.twig │         Handles classes, structure, title and text
     │                │
     └───────▲────────┘
             │
 ┌───────────┴────────────┐
 │                        │
 │ card-product.html.twig │     Handles SKU and sku_classes
 │                        │
 └────────────────────────┘

```

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1007d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/fa9493b0996e6ecba6ab8ef4f518e5d2ad640e1413dd51fedea51c745fe725ba?d=identicon)[mauricesnip](/maintainers/mauricesnip)

---

Top Contributors

[![mauricesnip](https://avatars.githubusercontent.com/u/87523?v=4)](https://github.com/mauricesnip "mauricesnip (30 commits)")

### Embed Badge

![Health badge](/badges/mauricesnip-twig-elementary-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/mauricesnip-twig-elementary-bundle/health.svg)](https://phpackages.com/packages/mauricesnip-twig-elementary-bundle)
```

###  Alternatives

[sonata-project/entity-audit-bundle

Audit for Doctrine Entities

644989.8k1](/packages/sonata-project-entity-audit-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)