HTML Structure & Application Elegance

Changelog

Model 1.01

• Fixed two small bugs way to damirg

What’s this?

that is an HTML utility magnificence for growing any HTML component. (All HTML5 components are supported) together with a few custom ones like youtube and vimeo methods.

Elementary usage

Extract the principle zip file to the root of your website online and take a look at the index.php. in brief, merely plug the ‘html’ listing into your software and include the “html\HTML.php” file then start using the category, it’s namespaced to Afflicto\HTML.

Instance //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');

...however it’s more than that!

I stated it’s a “application” elegance, which it's, because it means that you can create elements briefly and easily. you'll be able to additionally prolong it, go them as parameters to different parts of your packages and so forth.

however it also permits nesting! – Permit’s take a look…

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

the classComposer way

along with the ability to nest content material inside parts, the usage of the classComposer manner permits you to temporarily create layouts with classes with out writing so much code. Allow’s take a glance:

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

The classComposer approach works really well together with twitter bootstrap, for instance:

$box = 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');

Even Supposing that is great, but what if lets get rid of the keys completely?... this leads me to macros.

Macros

Macros permits you to add new functionality to the HTML class. New “methods” in the event you will. Permit’s proceed with out twitter bootstrap example by growing a few 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 material) return HTML::div($content)->addClass('row-fluid'); ); HTML::macro('span6', function($content) return HTML::div($content)->addClass('span6'); );

Now, let’s create the similar “box” div we created in advance, this time the usage of 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, proper column.') )), ));

of course, we will nonetheless pipe that thru our classComposer way to add additional classes if we wish to:

$structure = 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.') )), )); );
FULL DOWNLOAD