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)[abydahana/aksara

Aksara is a CodeIgniter based CRUD Toolkit you can use to build complex applications become shorter, secure and more reliable just in a few lines of code. Serving both CMS or Framework, produce both HEADLESS (RESTful API) or TRADITIONAL (Browser Based), just by writing single controller. Yet it's reusable, scalable and ready to use!

1121.2k](/packages/abydahana-aksara)

PHPackages © 2026

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