Symfony Structure
Symfony Folder Structure
- templates
-
layouts
- _customizer.html.twig / Contain the right sidebar theme customization HTML code.
- _footer.html.twig
- _head-css.html.twig / added common css files link in this file.
- _main.html.twig / html tag with attributes is stored in this common file.
- _menu.html.twig
- _pattern.html.twig / pattern svg image defined in this file.
- _topbar.html.twig / Topbar-related code is in this file.
- _vendor-scripts.html / Common js files are linked in this file.
- base.html.twig / main layout file for all pages.
- layout-without-nav.html.twig / this layout file for Auth pages.
Symfony file structure
{% extends 'layouts/base.html.twig' %}
{% block title %}Starter{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block content %}
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-md-5">
{{ component('breadcrumb', { pagetitle: 'Judia', title: 'Starter' }) }}
</div><!--end col-->
<div class="col-md-auto ms-auto">
{% include 'layouts/_customizer.html.twig' %}
</div><!--end col-->
</div><!--end row-->
</div>
{% endblock %}
{% block javascripts %}
<!-- App js -->
<script src="assets/js/app.js"></script>
{% endblock %}
Layout setup
You can set the default layout in the templates/layouts/_main.html.twig
file in the html tag.
<html data-topbar="light" data-layout-width="fluid" data-card-layout="borderless">
data-layout-width="fluid" | To set fluid layout width. |
---|---|
data-layout-width="boxed" | To set boxed layout width. |
data-card-layout="borderless" | To set borderless card layouts. |
data-card-layout="border" | To set border card layouts. |
data-layout-mode="light" | To set Light layout mode. |
data-layout-mode="dark" | To set Dark layout mode. |
data-layout-mode="brand" | To set Brand layout mode. |
data-layout-position="fixed" | To set layout position Fixed. |
data-layout-position="scrollable" | To set layout position Scrollable. |
data-topbar="light" | To set the Light color of Topbar. |
data-topbar="dark" | To set the dark color of Topbar. |
data-topbar="brand" | To set the brand color of Topbar. |
data-topbar-image="pattern-1" | To set the pattern One of Topbar. |
data-topbar-image="pattern-2" | To set the pattern Two of Topbar. |
data-topbar-image="pattern-3" | To set the pattern Three of Topbar. |
data-preloader="enable" | To enable the preloader on the Page. |
data-preloader="disable" | To disable the preloader on the Page. |