10210 Systems Parkway, Suite 390 Sacramento, CA 95827 |
|
cd1@catalinadirect.com | |
1-800-959-SAIL (7245) |
{cfinclude template="put_layouthead.cfm"}
This CF tag 'includes' another template. It pulls code from another page and inserts it here. This is done for (a) readability of the code and (b) this chunk of code could be included on multiple pages. This is called code reuse and is important in all programming.
The included file is located at layouts/put_layouthead.cfm and adds our doctype, meta tags, favicon, and some javascript that needs to be loaded before the BODY.
{!-- normalize all browsers --} {link rel="stylesheet" href="css/foundation/normalize.css" /} {!-- Foundation Base CSS, don't edit --} {link rel="stylesheet" href="css/foundation/foundation.min.css" /} {!-- fontawsome icons --} {link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"} {!-- custom CSS for your store, add all your code here --} {link rel="stylesheet" href="css/default.css?v=660"} {!-- colored menus - modify the default menus --} {link rel="stylesheet" href="css/menu.css"}
Here we include the CSS files.
{cfinclude template="put_body.cfm"}
Put_body.cfm allows you to add some basic CSS directly from the Color Palette form. It's recommended that you leave the Color Palette blank and make changes through the default.css file.
{div class="row container wrapper collapse defaults"}{!-- BEGIN WRAPPER --}
This is the wrapper for the body. Consult the default.css for the different classes. Everything but row is optional.
{!-- HEADER --} {div class="row layout-header"} {div class="medium-6 small-12 columns"} {cfinclude template="put_sitelogo.cfm"} {/div} {div class="medium-6 columns hide-for-small text-right"} {cfoutput} {ul class="inline-list topnav"} {cfif isdefined('Request.AppSettings.phone') AND len(Request.AppSettings.phone)} {li}{a href="tel:#Request.AppSettings.phone#"}{strong}#Request.AppSettings.phone#{/strong}{/a}{/li}{/cfif} {li}{a href="#request.self#?fuseaction=users.manager#request.token2#"}My Account{/a}{/li} {li}{cfinclude template="put_topinfo.cfm"}{/li} {/ul} {/cfoutput} {cfinclude template="put_searchbox.cfm"} {/div} {/div} {!-- END HEADER --}
This is a mix of static and dynamic values.
{!-- MAIN NAVIGATION --} {div class="row"} {div class="small-12 columns"} {cfinclude template="put_top_navigation.cfm"} {/div} {/div} {!-- END MAIN NAVIGATION --}
Includes the main horizontal navigation bar.
{!-- BODY --} {div class="row"} {div class="small-12 columns" style="padding-bottom:20px"} {!--- THIS IS WHERE ALL GENERATED PAGE CONTENT GOES ----} {cfif fusebox.fuseaction neq "home"} {cfinclude template="put_breadcrumb.cfm"} {/cfif} {cfinclude template="put_storecontent.cfm"} {/div} {/div} {!-- END BODY --}
This is where the content gets loaded into the template. You can delete everything on the page except put_storecontent.cfm.
{!-- FOOTER --} {footer class="row"} {div class="small-12 columns text-center"} {cfinclude template="put_bottommenus.cfm"} {cfinclude template="put_copyright.cfm"} {cfinclude template="put_trackingcode.cfm"} {br /}{br /} {/div} {/footer} {!-- END FOOTER --}
Include common footer functions.
{!--- JAVASCRIPT ---} {!-- include jquery :: version 2 does not support IE8 --} {script src="//code.jquery.com/jquery-1.10.1.min.js"}{/script} {script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"}{/script} {!-- load foundation scripts --} {script src="js/foundation.min.js"}{/script} {script} $(document).foundation(); {/script}
The included javascript includes:
You can see that everything fits within the Foundation grid. You can move or delete anything on the page except put_storecontent.cfm and the site will run just fine.