Файл: docs.html
Строк: 146
<?php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>HTML Class 1.0</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.css" type="text/css">
<style>
body {
font-family: tahoma, sans-serif;
}
.container {
max-width: 960px;
margin: 20px auto;
}
.header {
text-align: center;
}
</style>
</head>
<body>
<div class="container header">
<h1><a target="_blank" href="http://codecanyon.net/user/afflicto/portfolio">HTML Class Version 1.0</a></h1>
<hr>
</div>
<div class="container">
<h2>What's this?</h2>
<p>
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.
</p>
<h4>Example</h3>
<pre>
//this creates an anchor tag.
echo HTML::a('http://google.com', 'google');
</pre>
<h4>Vimeo, and youtube videos:</h4>
<pre>
echo HTML::youtube('http://www.youtube.com/watch?v=kkGeOWYOFoA');
echo HTML::vimeo('http://vimeo.com/46141955');
</pre>
<h2>...but it's more than that!</h2>
<p>
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.
</p>
<p>
But it also allows nesting! - Let's take a look...
</p>
<pre>
$layout = HTML::div(array(
HTML::h1('header'),
HTML::p('a paragraph here'),
'just some text here',
));
echo $layout;
</pre>
<h2>the classComposer method</h2>
<p>
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:
</p>
<pre>
HTML::classComposer(HTML::div(array(
'class1 class2' => HTML::div()
)));
//creates a 'div' element with class="class1 class2"
</pre>
<p>The classComposer method works really well together with twitter bootstrap, for example:</p>
<pre>
$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');
</pre>
<p>Although this is great, but what if we could get rid of the keys entirely?... this leads me to macros.</p>
<h2>Macros</h2>
<p>
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.
</p>
<pre>
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');
});
</pre>
<p>
Now, let's create the same "container" div we created earlier, this time using our new macros:
</p>
<pre>
$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.')
)),
));
</pre>
<p>
Of course, we can still pipe that through our classComposer method to add additional classes if we want to:
</p>
<pre>
$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.')
)),
));
);
</pre>
</div>
<script>
$("pre").addClass('prettyprint lang-php');
</script>
</body>
</html>
?>