PHP download

PHP code example of webfiori / php-structs

1. Go to this page and download the library: Download webfiori/php-structs library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

webfiori / php-structs example snippets



WebFiori\UI\HTMLDoc;

// Create a complete HTML5 document
$doc = new HTMLDoc();
$doc->getHeadNode()->setPageTitle('My First Page');
$doc->setLanguage('en');

// Add content to the body
$body = $doc->getBody();
$body->addChild('h1')->text('Welcome to WebFiori UI!');
$body->addChild('p')->text('Building HTML has never been easier.');

// Output the complete document
echo $doc;


use WebFiori\UI\HTMLNode;

// Create a navigation menu
$nav = new HTMLNode('nav', ['class' => 'main-nav']);
$ul = $nav->addChild('ul', ['class' => 'nav-list']);

$menuItems = ['Home', 'About', 'Services', 'Contact'];
foreach ($menuItems as $item) {
    $li = $ul->li(['class' => 'nav-item']);
    $li->anchor($item, [
        'href' => '#' . strtolower($item),
        'class' => 'nav-link'
    ]);
}

echo $nav->toHTML(true);


// Basic element creation
$div = new HTMLNode('div');                    // <div></div>
$div = new HTMLNode('div', ['id' => 'main']);  // <div id="main"></div>

// Add content
$div->text('Hello World');                     // <div id="main">Hello World</div>

// Chain operations
$div->setAttribute('class', 'container')
    ->setStyle(['padding' => '20px'])
    ->addChild('p')->text('Nested paragraph');


$card = new HTMLNode('div');
$card->setClassName('card')
    ->setStyle(['border' => '1px solid #ccc', 'padding' => '1rem'])
    ->addChild('h3')->text('Card Title')->getParent()
    ->addChild('p')->text('Card content goes here.');


$parent = new HTMLNode('div');
$child = $parent->addChild('span');

// Navigate relationships
$parent === $child->getParent();  // true
$parent->hasChild($child);        // true
$parent->childrenCount();         // 1


use WebFiori\UI\HTMLDoc;

$doc = new HTMLDoc();

// Configure document
$doc->getHeadNode()->setPageTitle('My Application');
$doc->setLanguage('en');
$head = $doc->getHeadNode();
$head->addMeta('description', 'A powerful web application')
     ->addMeta('keywords', 'php, html, webfiori')
     ->addCSS('styles/main.css')
     ->addJs('scripts/app.js');

// Add structured content
$body = $doc->getBody();

// Header section
$header = $body->addChild('header', ['class' => 'site-header']);
$header->addChild('h1')->text('My Application');

// Main content
$main = $body->addChild('main', ['class' => 'main-content']);
$main->addChild('h2')->text('Welcome');
$main->addChild('p')->text('This is the main content area.');

// Footer
$footer = $body->addChild('footer', ['class' => 'site-footer']);
$footer->addChild('p')->text('© 2024 My Application');

echo $doc;


$head = $doc->getHeadNode();

// Add stylesheets
$head->addCSS('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
$head->addCSS('assets/custom.css', ['media' => 'screen']);

// Add JavaScript
$head->addJs('https://code.jquery.com/jquery-3.6.0.min.js');
$head->addJs('assets/app.js', ['defer' => '']);

// Meta tags
$head->addMeta('viewport', 'width=device-width, initial-scale=1.0');
$head->addMeta('author', 'Your Name');

// Custom head content
$head->addChild('link', [
    'rel' => 'icon',
    'type' => 'image/x-icon',
    'href' => '/favicon.ico'
]);


use WebFiori\UI\HTMLNode;

// Create elements with attributes
$container = new HTMLNode('div', [
    'id' => 'main-container',
    'class' => 'container-fluid',
    'data-role' => 'main'
]);

// Add multiple children
$container->addChild('h1', ['class' => 'title'])->text('Page Title');
$container->addChild('p', ['class' => 'description'])->text('Page description here.');

// Create complex nested structures
$section = $container->addChild('section', ['class' => 'content']);
$article = $section->addChild('article');
$article->addChild('h2')->text('Article Title');
$article->addChild('p')->text('Article content...');


$element = new HTMLNode('div');

// Set single attributes
$element->setAttribute('id', 'unique-id');
$element->setAttribute('class', 'btn btn-primary');
$element->setAttribute('data-toggle', 'modal');

// Set multiple attributes
$element->setAttributes([
    'role' => 'button',
    'tabindex' => '0',
    'aria-label' => 'Close dialog'
]);

// Get and check attributes
if ($element->hasAttribute('id')) {
    $id = $element->getAttribute('id');
    echo "Element ID: $id";
}

// Remove attributes
$element->removeAttribute('data-toggle');


$paragraph = new HTMLNode('p');

// Safe text (HTML entities escaped by default)
$paragraph->text('User input: <script>alert("xss")</script>');
// Output: User input: &lt;script&gt;alert("xss")&lt;/script&gt;

// Raw HTML (use with caution)
$paragraph->text('<strong>Bold text</strong>', false);
// Output: <strong>Bold text</strong>

// Add text nodes
$container = new HTMLNode('div');
$container->addTextNode('Plain text content');
$container->addTextNode(' More text', true); // HTML entities escaped


$list = new HTMLNode('ul');
$list->li('Item 1');
$list->li('Item 2');
$list->li('Item 3');

// Iterate over children
foreach ($list as $index => $child) {
    echo "Child $index: " . $child->getText() . "\n";
}

// Find specific children
$firstChild = $list->getChild(0);
$lastChild = $list->getChild($list->childrenCount() - 1);

// Find by ID
$specificElement = $list->getChildByID('special-item');

// Count children
echo "Total items: " . count($list); // Countable interface
echo "Total items: " . $list->childrenCount(); // Direct method


use WebFiori\UI\HTMLDoc;

$doc = new HTMLDoc();
$body = $doc->getBody();

// Create form container
$formContainer = $body->div(['class' => 'form-container']);
$formContainer->addChild('h2')->text('User Registration');

$form = $formContainer->form([
    'method' => 'post',
    'action' => '/register',
    'class' => 'registration-form',
    'novalidate' => ''
]);

// Personal Information Section
$personalSection = $form->div(['class' => 'form-section']);
$personalSection->addChild('h3')->text('Personal Information');

// First Name
$firstNameGroup = $personalSection->div(['class' => 'form-group']);
$firstNameGroup->addChild('label', ['for' => 'first-name'])->text('First Name *');
$firstNameGroup->input('text', [
    'id' => 'first-name',
    'name' => 'first_name',
    ' Country Selection
$countryGroup = $personalSection->div(['class' => 'form-group']);
$countryGroup->addChild('label', ['for' => 'country'])->text('Country');
$countrySelect = $countryGroup->addChild('select', [
    'id' => 'country',
    'name' => 'country',
    'class' => 'form-control'
]);

$countries = ['USA', 'Canada', 'UK', 'Germany', 'France', 'Japan'];
$countrySelect->addChild('option', ['value' => ''])->text('Select a country');
foreach ($countries as $country) {
    $countrySelect->addChild('option', ['value' => strtolower($country)])->text($country);
}

// Bio/Comments
$bioGroup = $personalSection->div(['class' => 'form-group']);
$bioGroup->addChild('label', ['for' => 'bio'])->text('Bio (Optional)');
$bioGroup->addChild('textarea', [
    'id' => 'bio',
    'name' => 'bio',
    'rows' => '4',
    'placeholder' => 'Tell us about yourself...',
    'class' => 'form-control'
]);

// Newsletter Subscription
$newsletterGroup = $personalSection->div(['class' => 'form-group checkbox-group']);
$newsletterGroup->input('checkbox', [
    'id' => 'newsletter',
    'name' => 'newsletter',
    'value' => '1'
]);
$newsletterGroup->addChild('label', ['for' => 'newsletter'])->text('Subscribe to newsletter');

// Form Actions
$actionsGroup = $form->div(['class' => 'form-actions']);
$actionsGroup->input('submit', [
    'value' => 'Create Account',
    'class' => 'btn btn-primary'
]);
$actionsGroup->input('reset', [
    'value' => 'Clear Form',
    'class' => 'btn btn-secondary'
]);

echo $doc;


// File upload
$fileGroup = $form->div(['class' => 'form-group']);
$fileGroup->addChild('label', ['for' => 'avatar'])->text('Profile Picture');
$fileGroup->input('file', [
    'id' => 'avatar',
    'name' => 'avatar',
    'accept' => 'image/*',
    'class' => 'form-control'
]);

// Range slider
$rangeGroup = $form->div(['class' => 'form-group']);
$rangeGroup->addChild('label', ['for' => 'experience'])->text('Years of Experience');
$rangeGroup->input('range', [
    'id' => 'experience',
    'name' => 'experience',
    'min' => '0',
    'max' => '50',
    'value' => '5',
    'class' => 'form-control'
]);

// Color picker
$colorGroup = $form->div(['class' => 'form-group']);
$colorGroup->addChild('label', ['for' => 'favorite-color'])->text('Favorite Color');
$colorGroup->input('color', [
    'id' => 'favorite-color',
    'name' => 'favorite_color',
    'value' => '#3498db',
    'class' => 'form-control'
]);

// Hidden fields
$form->input('hidden', ['name' => 'csrf_token', 'value' => 'abc123']);
$form->input('hidden', ['name' => 'form_id', 'value' => 'registration']);


use WebFiori\UI\HTMLNode;

// Create responsive data table
$tableContainer = new HTMLNode('div', ['class' => 'table-responsive']);
$table = $tableContainer->table([
    'class' => 'table table-striped table-hover',
    'id' => 'users-table'
]);

// Table header
$thead = $table->addChild('thead', ['class' => 'table-dark']);
$headerRow = $thead->tr();
$headerRow->addChild('th', ['scope' => 'col'])->text('#');
$headerRow->addChild('th', ['scope' => 'col'])->text('Name');
$headerRow->addChild('th', ['scope' => 'col'])->text('Email');
$headerRow->addChild('th', ['scope' => 'col'])->text('Role');
$headerRow->addChild('th', ['scope' => 'col'])->text('Status');
$headerRow->addChild('th', ['scope' => 'col'])->text('Actions');

// Table body with sample data
$tbody = $table->addChild('tbody');
$users = [
    ['id' => 1, 'name' => 'John Doe', 'email' => '[email protected]', 'role' => 'Admin', 'status' => 'Active'],
    ['id' => 2, 'name' => 'Jane Smith', 'email' => '[email protected]', 'role' => 'Editor', 'status' => 'Active'],
    ['id' => 3, 'name' => 'Bob Johnson', 'email' => '[email protected]', 'role' => 'User', 'status' => 'Inactive'],
    ['id' => 4, 'name' => 'Alice Brown', 'email' => '[email protected]', 'role' => 'Moderator', 'status' => 'Active']
];

foreach ($users as $user) {
    $row = $tbody->tr(['data-user-id' => $user['id']]);
    
    // ID column
    $row->addChild('td')->text($user['id']);
    
    // Name column
    $nameCell = $row->addChild('td');
    $nameCell->text($user['name']);
    
    // Email column
    $emailCell = $row->addChild('td');
    $emailCell->anchor($user['email'], [
        'href' => 'mailto:' . $user['email'],
        'class' => 'text-decoration-none'
    ]);
    
    // Role column with badge
    $roleCell = $row->addChild('td');
    $roleClass = match($user['role']) {
        'Admin' => 'bg-danger',
        'Editor' => 'bg-warning',
        'Moderator' => 'bg-info',
        default => 'bg-secondary'
    };
    $roleCell->addChild('span', ['class' => "badge $roleClass"])->text($user['role']);
    
    // Status column
    $statusCell = $row->addChild('td');
    $statusClass = $user['status'] === 'Active' ? 'text-success' : 'text-muted';
    $statusIcon = $user['status'] === 'Active' ? '●' : '○';
    $statusCell->addChild('span', ['class' => $statusClass])->text("$statusIcon {$user['status']}");
    
    // Actions column
    $actionsCell = $row->addChild('td');
    $actionGroup = $actionsCell->div(['class' => 'btn-group btn-group-sm']);
    
    $actionGroup->addChild('button', [
        'class' => 'btn btn-outline-primary',
        'data-bs-toggle' => 'tooltip',
        'title' => 'Edit User'
    ])->text('Edit');
    
    $actionGroup->addChild('button', [
        'class' => 'btn btn-outline-secondary',
        'data-bs-toggle' => 'tooltip',
        'title' => 'View Details'
    ])->text('View');
    
    $actionGroup->addChild('button', [
        'class' => 'btn btn-outline-danger',
        'data-bs-toggle' => 'tooltip',
        'title' => 'Delete User'
    ])->text('Delete');
}

echo $tableContainer->toHTML(true);


use WebFiori\UI\HTMLNode;

// Main navigation
$nav = new HTMLNode('nav', ['class' => 'navbar navbar-expand-lg navbar-dark bg-dark']);
$container = $nav->div(['class' => 'container']);

// Brand
$brand = $container->anchor('WebFiori UI', [
    'class' => 'navbar-brand',
    'href' => '/'
]);

// Toggle button for mobile
$toggleBtn = $container->addChild('button', [
    'class' => 'navbar-toggler',
    'type' => 'button',
    'data-bs-toggle' => 'collapse',
    'data-bs-target' => '#navbarNav'
]);
$toggleBtn->addChild('span', ['class' => 'navbar-toggler-icon']);

// Navigation items
$collapseDiv = $container->div([
    'class' => 'collapse navbar-collapse',
    'id' => 'navbarNav'
]);

$navList = $collapseDiv->ul(['class' => 'navbar-nav me-auto']);

$menuItems = [
    ['text' => 'Home', 'href' => '/', 'active' => true],
    ['text' => 'Documentation', 'href' => '/docs'],
    ['text' => 'Examples', 'href' => '/examples'],
    ['text' => 'API Reference', 'href' => '/api']
];

foreach ($menuItems as $item) {
    $li = $navList->li(['class' => 'nav-item']);
    $linkClass = 'nav-link' . (isset($item['active']) ? ' active' : '');
    $link = $li->anchor($item['text'], [
        'class' => $linkClass,
        'href' => $item['href']
    ]);
    
    if (isset($item['active'])) {
        $link->setAttribute('aria-current', 'page');
    }
}

echo $nav->toHTML(true);


// Complex nested list structure
$nestedList = new HTMLNode('ul', ['class' => 'nested-list']);

// Programming Languages
$langItem = $nestedList->li('Programming Languages');
$langSublist = $langItem->ul(['class' => 'nested-sublist']);

$frontendItem = $langSublist->li('Frontend');
$frontendSublist = $frontendItem->ul();
$frontendSublist->li('JavaScript');
$frontendSublist->li('TypeScript');
$frontendSublist->li('CSS/SCSS');

$backendItem = $langSublist->li('Backend');
$backendSublist = $backendItem->ul();
$backendSublist->li('PHP');
$backendSublist->li('Python');
$backendSublist->li('Node.js');

echo $nestedList->toHTML(true);


use WebFiori\UI\HTMLNode;

// Hero section with background image
$hero = new HTMLNode('section', ['class' => 'hero-section']);
$hero->setStyle([
    'background-image' => 'url("images/hero-bg.jpg")',
    'background-size' => 'cover',
    'background-position' => 'center',
    'min-height' => '500px'
]);

$heroContent = $hero->div(['class' => 'hero-content']);
$heroContent->addChild('h1', ['class' => 'hero-title'])->text('Welcome to Our Site');
$heroContent->addChild('p', ['class' => 'hero-subtitle'])->text('Discover amazing content');

// Responsive image with multiple sources
$picture = new HTMLNode('picture', ['class' => 'responsive-image']);
$picture->addChild('source', [
    'media' => '(min-width: 1200px)',
    'srcset' => 'images/large.jpg'
]);
$picture->addChild('source', [
    'media' => '(min-width: 768px)',
    'srcset' => 'images/medium.jpg'
]);
$picture->img([
    'src' => 'images/small.jpg',
    'alt' => 'Responsive image',
    'class' => 'img-fluid'
]);

// Image gallery
$gallery = new HTMLNode('div', ['class' => 'image-gallery']);
$galleryTitle = $gallery->addChild('h2', ['class' => 'gallery-title'])->text('Photo Gallery');

$galleryGrid = $gallery->div(['class' => 'gallery-grid']);

$images = [
    ['src' => 'gallery/photo1.jpg', 'alt' => 'Beautiful landscape', 'caption' => 'Mountain View'],
    ['src' => 'gallery/photo2.jpg', 'alt' => 'City skyline', 'caption' => 'Urban Life'],
    ['src' => 'gallery/photo3.jpg', 'alt' => 'Ocean waves', 'caption' => 'Peaceful Waters']
];

foreach ($images as $image) {
    $galleryItem = $galleryGrid->div(['class' => 'gallery-item']);
    
    $imageLink = $galleryItem->anchor('', [
        'href' => $image['src'],
        'class' => 'gallery-link',
        'data-lightbox' => 'gallery',
        'data-title' => $image['caption']
    ]);
    
    $imageLink->img([
        'src' => str_replace('.jpg', '_thumb.jpg', $image['src']),
        'alt' => $image['alt'],
        'class' => 'gallery-thumbnail',
        'loading' => 'lazy'
    ]);
    
    $caption = $galleryItem->div(['class' => 'gallery-caption']);
    $caption->text($image['caption']);
}

echo $hero->toHTML(true);
echo $picture->toHTML(true);
echo $gallery->toHTML(true);


use WebFiori\UI\HTMLNode;

$document = HTMLNode::fromFile('template.html', [
    'lang' => 'en',
    'page-title' => 'Welcome to WebFiori UI',
    'page-description' => 'A powerful PHP library for HTML generation',
    'site-name' => 'WebFiori UI',
    'header-class' => 'site-header bg-primary',
    'main-class' => 'main-content container',
    'footer-class' => 'site-footer bg-dark text-white',
    'hero-title' => 'Build Amazing Web Pages',
    'hero-subtitle' => 'With object-oriented PHP and clean code',
    'navigation' => '<a href="/">Home</a> | <a href="/docs">Docs</a>',
    'main-content' => '<p>Welcome to our amazing website built with WebFiori UI!</p>',
    'current-year' => date('Y')
]);

echo $document;


<article class="blog-post">
    <header class="post-header">
        <h1 class="post-title"><?= htmlspecialchars($title)


$blogPost = HTMLNode::fromFile('blog-post.php', [
    'title' => 'Getting Started with WebFiori UI',
    'author' => 'John Developer',
    'publishDate' => '2024-01-15',
    'tags' => ['PHP', 'HTML', 'Web Development', 'Tutorial'],
    'content' => '<p>WebFiori UI is a powerful library...</p><p>In this tutorial, we will explore...</p>',
    'comments' => [
        [
            'author' => 'Jane Reader',
            'date' => '2024-01-16',
            'content' => 'Great tutorial! Very helpful.'
        ],
        [
            'author' => 'Bob Coder',
            'date' => '2024-01-17',
            'content' => 'Thanks for sharing this. Looking forward to more posts.'
        ]
    ]
]);

echo $blogPost->toHTML(true);


use WebFiori\UI\HTMLNode;

$element = new HTMLNode('div');

// Set individual styles
$element->setStyle([
    'background-color' => '#f8f9fa',
    'border' => '1px solid #dee2e6',
    'border-radius' => '0.375rem',
    'padding' => '1rem',
    'margin-bottom' => '1rem',
    'box-shadow' => '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)'
]);

// Add more styles without overriding
$element->setStyle([
    'transition' => 'all 0.3s ease',
    'cursor' => 'pointer'
], false);

// Override specific styles
$element->setStyle([
    'background-color' => '#e9ecef'
], true);

// CSS classes management
$element->setClassName('card');
$element->applyClass('shadow-sm');
$element->applyClass('hover-effect');

// Conditional styling
$isActive = true;
if ($isActive) {
    $element->applyClass('active');
    $element->setStyle(['border-color' => '#0d6efd']);
}

echo $element->toHTML(true);


// Create responsive grid
$container = new HTMLNode('div', ['class' => 'container-fluid']);
$row = $container->div(['class' => 'row']);

// Responsive columns
$columns = [
    ['size' => 'col-12 col-md-6 col-lg-4', 'content' => 'Column 1'],
    ['size' => 'col-12 col-md-6 col-lg-4', 'content' => 'Column 2'],
    ['size' => 'col-12 col-md-12 col-lg-4', 'content' => 'Column 3']
];

foreach ($columns as $col) {
    $column = $row->div(['class' => $col['size']]);
    $card = $column->div(['class' => 'card h-100']);
    $cardBody = $card->div(['class' => 'card-body']);
    $cardBody->addChild('p', ['class' => 'card-text'])->text($col['content']);
}

// Responsive utilities
$hiddenOnMobile = new HTMLNode('div', ['class' => 'd-none d-md-block']);
$hiddenOnMobile->text('This content is hidden on mobile devices');

$visibleOnMobile = new HTMLNode('div', ['class' => 'd-block d-md-none']);
$visibleOnMobile->text('This content is only visible on mobile devices');

echo $container->toHTML(true);
echo $hiddenOnMobile->toHTML(true);
echo $visibleOnMobile->toHTML(true);


use WebFiori\UI\HTMLNode;

$menu = new HTMLNode('ul', ['class' => 'main-menu']);
$menu->li('Home');
$menu->li('About');
$menu->li('Services');
$menu->li('Contact');

// Iterate using foreach
foreach ($menu as $index => $menuItem) {
    echo "Menu item $index: " . $menuItem->getText() . "\n";
    
    // Add CSS class to each item
    $menuItem->applyClass('menu-item');
    
    // Add click handler
    $menuItem->setAttribute('onclick', "handleMenuClick('$index')");
}

// Count children
echo "Total menu items: " . count($menu) . "\n";
echo "Using childrenCount(): " . $menu->childrenCount() . "\n";

// Manual iteration control
$menu->rewind();
while ($menu->valid()) {
    $current = $menu->current();
    $key = $menu->key();
    
    echo "Processing item at position $key\n";
    
    $menu->next();
}


use WebFiori\UI\HTMLNode;

// Create SAML assertion
$assertion = new HTMLNode('saml:Assertion', [
    'xmlns:saml' => 'urn:oasis:names:tc:SAML:2.0:assertion',
    'xmlns:xs' => 'http://www.w3.org/2001/XMLSchema',
    'ID' => '_d71a3a8e9fcc45c9e9d248ef7049393fc8f04e5f75',
    'Version' => '2.0',
    'IssueInstant' => '2004-12-05T09:22:05Z'
]);

// Add issuer
$assertion->addChild('saml:Issuer')->text('https://idp.example.org/SAML2');

// Add subject
$subject = $assertion->addChild('saml:Subject');
$nameId = $subject->addChild('saml:NameID', [
    'Format' => 'urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress'
]);
$nameId->text('[email protected]');

// Add conditions
$conditions = $assertion->addChild('saml:Conditions', [
    'NotBefore' => '2004-12-05T09:17:05Z',
    'NotOnOrAfter' => '2004-12-05T09:27:05Z'
]);

$audienceRestriction = $conditions->addChild('saml:AudienceRestriction');
$audienceRestriction->addChild('saml:Audience')->text('https://sp.example.com/SAML2');

// Generate XML
echo $assertion->toXML(true);


use WebFiori\UI\HTMLNode;

// For production: Use unformatted output
$container = new HTMLNode('div');
$container->addChild('p')->text('Content here');

// Compact output (recommended for production)
$compactHTML = $container->toHTML(false);
echo "Compact size: " . strlen($compactHTML) . " bytes\n";

// Formatted output (for development/debugging)
$formattedHTML = $container->toHTML(true);
echo "Formatted size: " . strlen($formattedHTML) . " bytes\n";

// Size difference can be significant with large DOMs
echo "Size difference: " . (strlen($formattedHTML) - strlen($compactHTML)) . " bytes\n";


// Batch operations for better performance
$largeList = new HTMLNode('ul', ['class' => 'large-list']);

// Instead of adding children one by one:
// for ($i = 0; $i < 10000; $i++) {
//     $largeList->li("Item $i");
// }

// Use build() method for batch operations:
$items = [];
for ($i = 0; $i < 10000; $i++) {
    $items[] = ['li', ['class' => 'list-item'], "Item $i"];
}
$largeList->build($items);

// Clean up large objects when done
unset($largeList);

// Use text nodes for plain text content
$textNode = new HTMLNode(HTMLNode::TEXT_NODE);
$textNode->setText('Large amount of plain text content...');


// Prefer CSS classes over inline styles
$element = new HTMLNode('div');

// Less efficient (inline styles)
$element->setStyle([
    'color' => 'red',
    'font-size' => '14px',
    'margin' => '10px'
]);

// More efficient (CSS classes)
$element->setClassName('text-danger fs-6 m-2');

// Batch style operations
$styles = [
    'background-color' => '#f8f9fa',
    'border' => '1px solid #dee2e6',
    'border-radius' => '0.375rem',
    'padding' => '1rem'
];
$element->setStyle($styles); // Single operation instead of multiple calls


public function __construct(string $name = 'div', array $attrs = [])


public function __construct()



WebFiori\UI\HTMLDoc;

// Create a complete responsive web page
$doc = new HTMLDoc();
$doc->getHeadNode()->setPageTitle('WebFiori UI Demo');
$doc->setLanguage('en');

// Add CSS and JavaScript
$head = $doc->getHeadNode();
$head->addCSS('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
$head->addCSS('assets/custom.css');
$head->addJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js');

$body = $doc->getBody();

// Navigation
$nav = $body->addChild('nav', ['class' => 'navbar navbar-expand-lg navbar-dark bg-primary']);
$navContainer = $nav->div(['class' => 'container']);
$navContainer->anchor('WebFiori UI Demo', ['class' => 'navbar-brand', 'href' => '#']);

// Hero section
$hero = $body->addChild('section', ['class' => 'hero bg-light py-5']);
$heroContainer = $hero->div(['class' => 'container text-center']);
$heroContainer->addChild('h1', ['class' => 'display-4'])->text('Welcome to WebFiori UI');
$heroContainer->addChild('p', ['class' => 'lead'])->text('Build amazing web interfaces with PHP');
$heroContainer->addChild('button', ['class' => 'btn btn-primary btn-lg'])->text('Get Started');

// Features section
$features = $body->addChild('section', ['class' => 'features py-5']);
$featuresContainer = $features->div(['class' => 'container']);
$featuresContainer->addChild('h2', ['class' => 'text-center mb-5'])->text('Features');

$featuresRow = $featuresContainer->div(['class' => 'row']);

$featuresList = [
    ['title' => 'Object-Oriented', 'description' => 'Clean, maintainable code with OOP principles'],
    ['title' => 'Template Support', 'description' => 'HTML and PHP templates with variable injection'],
    ['title' => 'Type Safety', 'description' => 'Full type hints and comprehensive documentation']
];

foreach ($featuresList as $feature) {
    $col = $featuresRow->div(['class' => 'col-md-4 mb-4']);
    $card = $col->div(['class' => 'card h-100']);
    $cardBody = $card->div(['class' => 'card-body']);
    $cardBody->addChild('h5', ['class' => 'card-title'])->text($feature['title']);
    $cardBody->addChild('p', ['class' => 'card-text'])->text($feature['description']);
}

// Footer
$footer = $body->addChild('footer', ['class' => 'bg-dark text-white py-4']);
$footerContainer = $footer->div(['class' => 'container text-center']);
$footerContainer->addChild('p')->text('© 2024 WebFiori UI. Built with ❤️ and PHP.');

echo $doc;