Page Layout Component
A complete HTML5 page layout with Bootstrap 5 integration.
Parameters:
- title: string - Page title for the <title> tag and SEO
- description: string - Meta description for SEO
- content: string - Main content HTML to be rendered in the page container
- navbar: string - Optional navbar HTML to be placed at the top of the page (optional)
- container_class: string - Additional CSS classes for the main container (default: none) (optional)
Script Parameters:
- header_scripts: string - Additional scripts/styles to be included in the <head> section (optional)
- footer_scripts: string - Additional scripts to be included before </body> (optional)
Bootstrap Configuration:
- Bootstrap 5.3.5 is included by default
- CSS is loaded in the header
- JavaScript bundle is loaded in the footer
- Responsive viewport meta tag is included
- UTF-8 charset is set
Default Features:
- HTML5 doctype
- 'en' language attribute
- Responsive container for main content
- Bootstrap CDN integration (CSS and JS)
Example of how to use the page component
ThemedComponent::make('layout/page')
->title('Bootstrap 5 Component Examples')
->description('Examples and documentation of Bootstrap 5 components and their usage.')
->container_class('py-5')
->navbar(
ThemedComponent::make('navigation/navbar')
->brand([
'text' => 'Themed',
'url' => 'index.php'
])
->style('dark')
->bg('dark')
->container(true)
->expand('md')
->collapse([
'id' => 'navbarCollapse'
])
->items([
[
'text' => 'Home',
'url' => '#!'
],
[
'text' => 'Features',
'url' => '#!'
],
[
'text' => 'Dropdown',
'dropdown' => [
[
'text' => 'Dropdown Item 1',
'url' => '#!'
],
[
'text' => 'Dropdown Item 2',
'url' => '#!'
],
[
'text' => 'Dropdown Item 3',
'url' => '#!'
],
],
]
])
->class('mb-2 mb-md-0')
->render()
)
->content($content)
->header_scripts(Themed::headerScripts()) //Add last so all the scripts have a chance to load first
->footer_scripts(Themed::footerScripts()) //Add last so all the scripts have a chance to load first
->render();The Twig template file for the Page component
section {
border-bottom: 1px solid #dee2e6;
padding-bottom: 2rem;
margin-bottom: 2rem;
}
section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.accordion-button:not(.collapsed) {
background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.text-success.accordion-button:not(.collapsed) {
color: var(--bs-success);
background-color: rgba(var(--bs-success-rgb), 0.05);
}
.text-warning.accordion-button:not(.collapsed) {
color: var(--bs-warning);
background-color: rgba(var(--bs-warning-rgb), 0.05);
}
.text-danger.accordion-button:not(.collapsed) {
color: var(--bs-danger);
background-color: rgba(var(--bs-danger-rgb), 0.05);
}
pre {
max-height: 400px;
overflow-y: auto;
}
.accordion-button:not(.collapsed) {
background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.text-success.accordion-button:not(.collapsed) {
color: var(--bs-success);
background-color: rgba(var(--bs-success-rgb), 0.05);
}
.text-warning.accordion-button:not(.collapsed) {
color: var(--bs-warning);
background-color: rgba(var(--bs-warning-rgb), 0.05);
}
.text-danger.accordion-button:not(.collapsed) {
color: var(--bs-danger);
background-color: rgba(var(--bs-danger-rgb), 0.05);
}{# Page Layout Component
A complete HTML5 page layout with Bootstrap 5 integration.
Parameters:
- title: string - Page title for the <title> tag and SEO
- description: string - Meta description for SEO
- content: string - Main content HTML to be rendered in the page container
- navbar: string - Optional navbar HTML to be placed at the top of the page (optional)
- container_class: string - Additional CSS classes for the main container (default: none) (optional)
Script Parameters:
- header_scripts: string - Additional scripts/styles to be included in the <head> section (optional)
- footer_scripts: string - Additional scripts to be included before </body> (optional)
Bootstrap Configuration:
- Bootstrap 5.3.5 is included by default
- CSS is loaded in the header
- JavaScript bundle is loaded in the footer
- Responsive viewport meta tag is included
- UTF-8 charset is set
Default Features:
- HTML5 doctype
- 'en' language attribute
- Responsive container for main content
- Bootstrap CDN integration (CSS and JS)
#}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ content.title }}</title>
<meta name="description" content="{{ content.description }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
{% if content.header_scripts %}
{{ content.header_scripts|raw }}
{% endif %}
</head>
<body>
{% if content.navbar %}
{{ content.navbar|raw }}
{% endif %}
<div class="container{% if content.container_class %} {{ content.container_class }}{% endif %}">
{{ content.content|raw }}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
{% if content.footer_scripts %}
{{ content.footer_scripts|raw }}
{% endif %}
</body>
</html>