PHPackages                             hevinci/mockup-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. [Utility & Helpers](/categories/utility)
4. /
5. hevinci/mockup-bundle

ActiveLibrary[Utility & Helpers](/categories/utility)

hevinci/mockup-bundle
=====================

Utility bundle for mockup creation and export

1203[1 PRs](https://github.com/hevinci/MockupBundle/pulls)HTML

Since Jan 15Pushed 9y ago2 watchersCompare

[ Source](https://github.com/hevinci/MockupBundle)[ Packagist](https://packagist.org/packages/hevinci/mockup-bundle)[ RSS](/packages/hevinci-mockup-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

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

[](#installation)

`composer require hevinci/mockup-bundle dev-master`

Usage
-----

[](#usage)

1. Create a *mockup* directory in the *Resource/views* directory of your bundle. Alternatively, you can do the same in the *app*directory of your application:

```
    app
        Resources
            MyVendorMyBundle
                views
                    mockup
```

2. Create some mockups within this directory. Mockups are basically twig templates, which might take advantage of the provided library (see below) if needed.
3. Use the *mockup* route with the *path* query parameter to render a particular mockup. For example, the url for rendering the template `FooBarBundle::mockup/test.html.twig` will be **. Note that:

    - the path must be prefixed by the name of the bundle in short, lower case notation
    - the *mockup* path segment must be omitted
    - the *.twig* extension must be omitted
4. Use the `hevinci:mockup:export` command to produce a standalone version of your mockup(s). That command will generate a package containing static html files and all the required assets. Currently this command accept as argument either a bundle name (e.g. `FooBarBundle`) or a template reference (e.g. `FooBarBundle::mockup/test.html.twig`)

Map
---

[](#map)

By default, the `hevinci:mockup:export` command export all the templates it finds and references them in an *index.html* file at the root of the generated package. If you want to export only a selection of mockups and/or if you want to sort the mockups in a particular order, you can place a *map.yml* in your *mockup* directory:

```
#FooBarBundle/Resources/views/mockup/map.yml

- mockup-y.html.twig
- mockup-x.html.twig
- baz/mockup-z.html.twig
```

Library
-------

[](#library)

### *claroline/layout.html.twig*

[](#clarolinelayouthtmltwig)

Provides the basic structure of a claroline page, including the following blocks:

- title
- sidebar
- breadcrumb
- panelContent
    - panelTitle
    - panelRest
- modal

### *claroline/tool.html.twig*

[](#clarolinetoolhtmltwig)

Provides a tool layout. Dedicated variables are used to render automatically some parts of the page. For example, the template:

```
{% extends 'HeVinciMockupBundle::library/claroline/tool.html.twig' %}

{% set toolName = 'My tool' %}
{% set toolSection = 'Administration' %}
{% set toolPage = ['Users', 'Management'] %}
```

will be rendered as the *Users / Management* page of an administration tool called "My tool".

Complete list of available variables:

- *toolName*: name of the tool
- *toolSection*: platform section ("Administration", "Bureau" or "Espace d'activités")
- *toolIcon*: short name of the font-awesome icon of the tool
- *toolPage*: path of the current page of the tool (breadcrumb)
- *toolWorkspace*: name of the workspace of the tool (workspace section only)

### *claroline/modal.html.twig*

[](#clarolinemodalhtmltwig)

Provides a modal dialog skeleton with the following blocks:

- title
- body
- footer

A slot for the modal is already present in the main layout template and all its children. You can include a modal with an `embed` tag:

```
{% extends "HevinciMockupBundle::library/claroline/tool.html.twig" %}

{% block modal %}
    {% embed "HeVinciMockupBundle::library/claroline/modal.html.twig" %}
        {% block title %}Titre de la modale...{% endblock %}
        {% block body %}

                ...

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

### *claroline/resourceManager.html.twig*

[](#clarolineresourcemanagerhtmltwig)

Provides the layout of the resource manager with one block:

- resources

This template is a child of *tool.html.twig*, so the variables associated with it (see above) can also be used:

```
{% extends 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' %}

{% set toolSection = 'Espaces d\activités' %}
{% set toolWorkspace = 'Mon espace' %}

{% block resources %}
    ...
{% endblock %}
```

The template includes a macro for thumbnail creation called `resource`. This macro accepts a hash of options:

- name (name of the resource)
- icon (path to the thumbnail asset)
- customActions (list of additional actions in the resource menu)

Example:

```
{% extends 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' %}
{% import 'HeVinciMockupBundle::library/claroline/resourceManager.html.twig' as macros %}

{% block resources %}
    {{
        macros.resource({
            "name": "Nouvelle ressource",
            "icon": "bundles/foobar/images/res_new.png",
            "customActions": ["Partager", "Exporter"]
        })
    }}
{% endblock %}
```

TODO
----

[](#todo)

- Allow to export a particular mockup directory
- Extend the library

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 87.5% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8e3b554887f1d89617b1736b1c87c67168074bc6e89f1ec0612e306cf648543e?d=identicon)[stefk](/maintainers/stefk)

---

Top Contributors

[![stefk](https://avatars.githubusercontent.com/u/880921?v=4)](https://github.com/stefk "stefk (21 commits)")[![om64](https://avatars.githubusercontent.com/u/14308826?v=4)](https://github.com/om64 "om64 (2 commits)")[![ngodfraind](https://avatars.githubusercontent.com/u/1397430?v=4)](https://github.com/ngodfraind "ngodfraind (1 commits)")

### Embed Badge

![Health badge](/badges/hevinci-mockup-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/hevinci-mockup-bundle/health.svg)](https://phpackages.com/packages/hevinci-mockup-bundle)
```

PHPackages © 2026

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