PHPackages                             midnightluke/boot-frames - 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. midnightluke/boot-frames

ActiveLibrary

midnightluke/boot-frames
========================

0.2.0(7y ago)117[7 issues](https://github.com/midnightLuke/boot-frames/issues)MITHTML

Since Dec 11Pushed 7y ago1 watchersCompare

[ Source](https://github.com/midnightLuke/boot-frames)[ Packagist](https://packagist.org/packages/midnightluke/boot-frames)[ RSS](/packages/midnightluke-boot-frames/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (6)Versions (6)Used By (0)

Boot Frames
===========

[](#boot-frames)

Boot Frames is a wireframing framework that uses [Twig](http://twig.sensiolabs.org/)and [Bootstrap](http://getbootstrap.com/) to provide a way for web developers to quickly wireframe and prototype websites.

Why does this exist?
--------------------

[](#why-does-this-exist)

I am a back-end developer who uses PHP every day to build websites. I will occasionally find myself needing to wireframe something to explain a concept to clients/designers/project managers/etc, or, in some cases, wireframe an entire section of a site to get a better grasp on a concept myself. Being a backend developer I found myself balking at tools like "My Balsamiq" and "Moqups" (which are great tools for non-technical folks putting together wireframes) and longing to just be able to write some HTML and not repeat myself so much.

With the advent of some truly amazing templating languages and my own experience being in Drupal and Symfony I decided to create a simple framework that would allow me to put together some common elements for a website and quickly put together wireframes using HTML, CSS and Javascript, the result is Boot Frames.

Boot Frames uses Twig as it's templating engine and Bootstrap as it's base theme to enable developers to quickly build wireframes in a way that is comfortable and familiar (and most of the time a lot closer to what the end result will be). It also provides a set of common tools to make the wireframes easy to navigate and manipulate for project managers and clients.

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

[](#installation)

Either clone this repository or download and unzip a release from the "releases" tab above. From the root directory run:

```
composer install

```

to install the dependencies for Boot Frames.

To run bootframes you need to make the `web/` directory available in a web browser, which can be done in a number of ways on your local, but I'm not going into those in this documentation. Visit Boot Frames in the browser and you should be good to go.

Configuration
-------------

[](#configuration)

Boot Frames has two files in the `config/` directory:

- `config.yml`: this file contains the global application configuration
- `routes.yml`: this files contains the manually configured routes (this is optional)

Creating wireframes
-------------------

[](#creating-wireframes)

By default Boot Frames will scan the `templates/` for wireframes and automatically create routes for any templates it finds (this can be overridden in the config.yml file).

To create a new wireframe just create a new template in the `templates/`directory (or any sub-directory) and it will automatically appear on the wireframes list.

For help using Twig check out the excellent [documentation](http://twig.sensiolabs.org/doc/templates.html) on their website.

### Boot Frame link helpers

[](#boot-frame-link-helpers)

Boot Frames comes with several Twig plugins to ease creating links between wireframes and linking to assets within the `web/` directory.

#### `url`

[](#url)

Use `{{ url('/absolute/url') }}` in your templates to link to an absolute URL in the web directory, this will prefix the link with any subdirectories required for the link to function (and the functions below all pass through this function).

#### `route`

[](#route)

Use `{{ route('/route/machine/name') }}` (or `{{ route('route_machine_name') }}`if using the routes.yml file). To link to any route you have defined. If Boot Frames cannot locate the route it simply outputs a `#` so that you can create the wireframe later (if you are so inclined) and the link will automatically activate.

#### `route_reverse`

[](#route_reverse)

This functions the same as the `route` function, but instead allows you to input a path and get the same result (either an active link or a `#` if that path isn't defined for a route). This is more useful when using the routes.yml file.

### Boot Frame authentication states

[](#boot-frame-authentication-states)

By default Boot Frames sets and maintains two GET parameters "authenticated" and "privileged", these are set as global twig variables so all templates have access to them and can modify behaviour accordingly, for example:

```
{% if authenticated %}
  Only authenticated users can see this.
{% else %}
  You are not authenticated.
{% endif %}
```

Navigating wireframes
---------------------

[](#navigating-wireframes)

Boot Frames comes with several helpers that allow users to clearly view all active links for a wireframe and view the same wireframe as "authenticated" and "privileged" users. Controls for toggling "authenticated" and "privileged" appear in the bottom left corner of the screen, along with a link back to the wireframe index.

Pressing `q` on any page will highlight all available links using bootstrap tooltips. By default the tooltip shows the href attribute of the link, but you can specify a title to override this.

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 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

Every ~288 days

Total

5

Last Release

2648d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/022eea08a0f5a1c84ef7930c8b03b4523f0ca47cfb2a813a74d45ebfaf266f3e?d=identicon)[midnightLuke](/maintainers/midnightLuke)

---

Top Contributors

[![midnightLuke](https://avatars.githubusercontent.com/u/3444018?v=4)](https://github.com/midnightLuke "midnightLuke (10 commits)")

### Embed Badge

![Health badge](/badges/midnightluke-boot-frames/health.svg)

```
[![Health](https://phpackages.com/badges/midnightluke-boot-frames/health.svg)](https://phpackages.com/packages/midnightluke-boot-frames)
```

###  Alternatives

[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M647](/packages/sylius-sylius)[simplesamlphp/simplesamlphp

A PHP implementation of a SAML 2.0 service provider and identity provider.

1.1k12.4M192](/packages/simplesamlphp-simplesamlphp)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[drupal/core

Drupal is an open source content management platform powering millions of websites and applications.

19462.3M1.3k](/packages/drupal-core)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.3M152](/packages/sulu-sulu)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)

PHPackages © 2026

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