2.1 Blade: Templates

Template Structure:

The entire system layout was defined by felaraframe::layout. This template loads the header and footer, sets locations of the contents and sidebars.

The only templates needed for development were really just:

• felaraframe::page. It is used to create a new page under the site layout.
• felaraframe::dashboard. If you want to make changes to the dashboard/widget area of the page.

There are many blade templates available to use or extend. Please refer to the list below for details.

Note: all template files are stored under "/vendor/feiron/felaraframe/src/resources/views"

Template name	Description
felaraframe::layout	The complete template for the site. This file defines the structure of the front-end layout, setting locations for header,footer,menu,sidebar,contents,etc.
felaraframe::page	This would be the template to extend from when defining custom blade files.
felaraframe::controlPanel	Used for centralized control panel page. Handling site settings, function outlets, etc.
felaraframe::dashboard	Home page dashboard template. This is used to render home page widgets.
felaraframe::footer	Footer template used by the layout. Used for loading JS libraries and display footer contents.
felaraframe::header	Header template used by the layout. Used for loading css/js files and display header contents.
felaraframe::home	Template made for others to extend. This would be the ideal place to start when using system provided templates since it extends layout template.
felaraframe::notification	Template used to render site notification page.
felaraframe::profile	Template used to render user profile information and settings page.
felaraframe::sidebar	Definition of sidebar layouts.
felaraframe::terms	A template used for terms and conditions.

---

How to use:

When building a page for your application. First extend your custom blade file from felaraframe::page.

When a page is rendered, there are many sections/portions of the page that you can override or make changes to. Please refer to the following list for details.

note: Side bar on the right is called to display by JS function toggleQuickview() at the front-end.

Example: customHome.blade.php

@extends('felaraframe::page')
@section('title')
    This is an awesome framework!
@endsection

Section name	Description
title	Title value of the site.
main_menu	Site menu section.
header	Header tag contents.
footer	Footer contents at the bottom of the page.
topbar	Top bar contents that are displayed at the very top bar.
content	Main contents of the page.
quickview_header	Header contents displayed at the top of the optional sidebar that slides in from the right side of the page.
sidebar_alt	Main contents displayed at the top of the optional sidebar that slides in from the right side of the page.
sidebar_alt_footer	Footer contents displayed at the top of the optional sidebar that slides in from the right side of the page.
Widget_Area	Widget rendering area. Only for dashboard template.
sidebar_widget	Contents under menus on the right side of the page.
sidebar_footer	Contents displayed at the bottom right side of the page.
user_name	User name displayed at the top right corner of the page.
site_description	Meta tag description in header
site_author	Meta tag author in header
favicon	URL to the fav icon. Default to asset('/feiron/felaraframe/images/favicon.png')

There are also some blade stacks to use when building templates:

Stack name	Location	Description
headerstyles	in header tag	Can be used to insert js files or initialize some variables.
headerscripts	in header tag	Can be used to insert css files or set meta tags.
footerscripts	Bottom of the page	Can be used to insert js files.
footerstyles	Bottom of the page	Can be used to insert css files.
JsBeforeReady	after footerstyles before DocumentReady	Can be used to insert js contents. Stack contents are wrapped in script tag. Make sure inserting js contents only.
DocumentReady	after JsBeforeReady	Can be used to insert js contents. Stack contents are wrapped in script tag. Make sure inserting js contents only.
OutletResource	Bottom of the page, before footerscripts,DocumentReady and footerstyles stacks	Can be used to insert js/css files for outlet controls.

---

Blade Utility Directive:

There is one custom directive available to push a specific resource into the stack once only.

@pushonce('StackName','KeyName') @endpushonce

Example:

@pushonce('footerscripts','DataTables')
<script type="text/javascript" src="{{asset('feiron/felaraframe/plugins/datatables/jquery.dataTables.min.js')}}">
</script> <!-- DataTables -->
//more assets here ...
@endpushonce

This will make sure anything defined under key "DataTables" throughout the system will be pushed into footerscripts once.