Home Page Layout

The home page layout file (_layout_[PAGEID].cfm) will include all of the same elements as the default layout, with some modifications.

Home pages are typically much more locked down, with the client only able to make content edits via Page Content rather than the Add Content menu. Because of this we have the ability to hide the Add Content and Sort Content buttons in the Perpetua Toolbar. Add the following line directly above the Perpetua toolbar include:

<cfset request.show_add_content = false>

The #fusebox.layout# still must be included on the page, but it can be wrapped in a div set to display: none:

<div style="display:none;"><cfoutput>#fusebox.layout#</cfoutput></div>
 

Example 

<!DOCTYPE html>
<html>
    <!--- get page content --->
    <cfinclude template="#request.dir_globals#/qry_page_content_inheritance.cfm">
    <head>
        <cfset request._css_array = [
            "/css/_grid.css",
            "/css/_events.css",
            "/css/_home.css"
        ]>
        <cfset request._js_array = [
            "/includes/slider/slider.js",
            "/js/_globals.js",
            "/js/_home.js"
        ]>

        <cfinclude template="/_partials/_global_head.cfm">
    </head>
    <body>
        <!--- pulls in the Perpetua Administration bar, if they are logged in --->
        <cfset request.show_add_content = false>
        <cfinclude template="#request.dir_base#/images_ADMIN/#adminSkin#/topmenu.cfm">
        <div id="mainContainer" class="main-container">
            <div class="site-header wide">
                <cfinclude template="/_partials/_top.cfm">
                <div class="hero wide" style="background-image: url('<cfoutput>#pcValue("pcItem_1_1_1")#</cfoutput>');"></div>
                <div class="floating">
                    <div class="floating-content">
                        <div class="tag">
                            <div class="container">
                                <cfoutput>#pcValue("pcItem_1_1_2")#</cfoutput>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--- ADD HOME PAGE SECTIONS HERE --->
            <cfinclude template="/_partials/_bottom.cfm">
        </div>
        <div style="display:none;"><cfoutput>#fusebox.layout#</cfoutput></div>

        <cfparam name="request._js_array_globals" default="[]">
        <cfparam name="request._js_array" default="[]">
        <cfset ArrayAppend(request._js_array_globals, request._js_array, true)>
        <cfloop array="#request._js_array#" index="request._js_file">
            <script src="<cfoutput>#Application.fileAutoTimestamp.cacheBuster(request._js_file)#</cfoutput>"></script>
        </cfloop>        
    </body>
</html>

Adding a new section 

<section id="[section-name]">
  <div class="section_content_wrapper flex wow fadeIn">
  </div>
</section>

A note on specificity (classes vs. ids):
Elements that occur exactly once inside a page should use IDs, otherwise, use classes. IDs are more specific and should be used sparingly (e.g., for in-page bookmarks), while classes make for great reusable components.