HTML Layout & Utility Class (Help and Support Tools)

Download Now

What’s this?

This is an HTML utility class for creating any HTML element. (All HTML5 elements are supported) including some custom ones like youtube and vimeo methods.

Basic usage

Extract the main zip file to the root of your website and look at the index.php. In short, simply plug the ‘html’ directory into your application and include the “htmlHTML.php” file then start using the class, it’s namespaced to AfflictoHTML.

Example

//this creates an anchor tag.
echo HTML::a('http://google.com', 'google');

Vimeo, and youtube videos:

echo HTML::youtube('http://www.youtube.com/watch?v=kkGeOWYOFoA');
echo HTML::vimeo('http://vimeo.com/46141955');

...but it’s more than that!

I said it’s a “utility” class, which it is, as it lets you create elements quickly and easily. You can also extend it, pass them as parameters to other parts of your applications etc.

But it also allows nesting! – Let’s take a look…

$layout = HTML::div(array(
    HTML::h1('header'),
    HTML::p('a paragraph here'),
    'just some text here',
));
echo $layout;

the classComposer method

Along with the ability to nest content within elements, using the classComposer method allows you to quickly create layouts with classes without writing much code. Let’s take a look:

HTML::classComposer(HTML::div(array(
    'class1 class2' => HTML::div()
)));
//creates a 'div' element with class="class1 class2" 

The classComposer method works really well together with twitter bootstrap, for example:

$container = HTML::classComposer(HTML::div(array(
    'row-fluid' => HTML::div(array(
        'span6' => html::div('first row, left column.'),
        'span6' => html::div('first row, right column.'),
    )),
    'row-fluid' => HTML::div(array(
        'span6' => html::div('second row, left column.'),
        'span6' => html::div('second row, right column.'),
    ))
)));
$container->addClass('container-fluid');

Although this is great, but what if we could get rid of the keys entirely?... this leads me to macros.

Macros

Macros allows you to add new functionality to the HTML class. New “methods” if you will. Let’s continue with out twitter bootstrap example by creating some macros for containers, rows and spans.

HTML::macro('containerFluid', function($content) {
    return HTML::div($content)->addClass('container-fluid');
    //the addClass method returns the "$this" instance. (it is chainable)
});
HTML::macro('rowFluid', function($content) {
    return HTML::div($content)->addClass('row-fluid');
});
HTML::macro('span6', function($content) {
    return HTML::div($content)->addClass('span6');
});

Now, let’s create the same “container” div we created earlier, this time using our new macros:

$layout = HTML::containerFluid(array(
    HTML::rowFluid(array(
        HTML::span6('first row, left column.'),
        HTML::span6('first row, right column.')
    )),
    HTML::rowFluid(array(
        HTML::span6('second row, left column.'),
        HTML::span6('second row, right column.')
    )),
));

Of course, we can still pipe that through our classComposer method to add additional classes if we want to:

$layout = HTML::classComposer(
    'body' => HTML::containerFluid(array(
        'header' => HTML::rowFluid(array(
            HTML::span6('first row, left column.'),
            HTML::span6('first row, right column.')
        )),
        'content' => HTML::rowFluid(array(
            HTML::span6('second row, left column.'),
            HTML::span6('second row, right column.')
        )),
    ));
);