Status: inactive
Initiation: 2014

Protofast is an easy to use solution to quickly create ambitious HTML mock-up websites with PHP.

I use this to design a plain HTML layout before I start to write any code. The project's stakeholder can play around with this prototype and give instant feedback concerning the UI. Experiments with new UI-Concepts are cheaper this way. When the final draft is accepted by all parties, the actual implementation begins.

To be honest, there are easier ways to build interactive html mock-ups - probably with frameworks or tools that you are more familiar with. This project was not created to serve a wide audience - it was primarily a task to sharpen my PHP skills.

An example

Let's take a look at a practical example on how Protofast works:

Therefore, let's create a basic index.php

// Require the Protofast framework
require_once "vendor/protofast.php";

// Create a new "Site"
$site = new protofast\HTMLPage();

// Set a title for the site and declare some additional scripts and
// stylesheets

// Render the site

As you can see, you can declare custom style sheets, scripts and other properties in a readable and maintainable fashion.

Let's take a look on the template part. Templates are located in the templates/ folder relative to the index.php file. There must be a file called base.html which is - you guess it - the base of every template.

<!DOCTYPE html>
    <title>My awesome website - </title>
    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="stylesheets/base.css">

    <script type="text/javascript" src="js/base.js"></script>

    <div class="fixed_header">
      <h1>My awesome website</h1>
    <div class="content">


Each site extends this base.html file. We can specify an index.html template for our example index.php file within the template/ folder.

<p>Welcome! This is the index!</p>
<p>Do also check out the <a href="example.php">Example</a> page!</p>

Checkout the full example project and more documentation on Github.