8fold Elements

We took our cues from a lot of what's happening with the modern web and translated it to generic concepts and a specific implementation; namely, web components and the HTML5 specification. We also had some philosophical inspiration as well, available in the details.

Elements takes advantage of our 8fold Component class to give developers a lightweight library to generate all elments from the HTML specification as well as web components.

Composer

$ composer require 8fold/php-html

Usage

Html::h1([
    'content' => 'Hello!',
    'attributes' => [
        'class' => 'content-lead'
    ]
]);

Output:

<h1 class="content-lead">
    Hello!
</h1>

The content key can accept an array of elements and strings to put with the base HTML element:

Html::html([
    'head' => [
        'content' => [
            [
                'element' => 'title',
                'content' => 'Hello, World!'
            ]
        ]
    ],
    'body' => [
        'content' => ''
    ]
]);

Output:

<!doctype html>
<html lang="en">
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
    </body>
</html>

The method you call is the main HTML element you wish to use, from there, it's up to you.

Why? (The short-ish version.)

Super-duper short: Writing HTML isn't shiny or sexy, but it ain't easy either.

There were some very specific pain points we wanted to resolve with the creation of this library.

  1. Writing HTML is a pretty tedious task. That's why we developed all the template engines that allow us to reuse HTML snippets. That's also why the w3c and others are working on web components; literal reusable snippets of HTML, CSS, and JavaScripting (or other scripting technologies) for use is any web application.
  2. Template engines effectively solve the reuse problem, but they don't solve the HTML problem, which is that there are a lot of rules and ways to write HTML. Some teams try to solve this by creating coding style manuals that everyone must adhere to, which can be very useful in improving readability, but you still have to know that style and adhere to it.
  3. In a way, the HTML specification from the w3c is a style guide, that a lot of us don't seem to read (or even know exists, to be honest). It tells use what elements exists, what attributes they can have, what events they can respond to, what ARIA roles they can have, and what ARIA attributes can be associated with those roles. Oh, and which elements can be parents and children of other elements.

8fold Elements is positioned to (and already does) solve these pain points.

It groups attributes in terms of common content, event, aria, other, and boolean. Common content attributes include "id", "class", and so on. It will filter out attributes which do not apply to the element being generated, based on the specification for the element. And is poised to be able to much more…quickly.

The quickly piece is important. Given that this library is not considered a template engine in and of itself, chances are you will use it either in conjunction with a template engine and by build an extension. Therefore, it has to be as fast as possible.

Extending

If you decide to make an extension library, as we did, it is recommended that you extend the root Html class, adding your own elements. This gives you access to all the HTML elements in the 8fold Elements and 8fold Component as well as your own elements and components.