Header and Footer

In utilizing these includes your site will ensure that it is immediately recognizable as an ACS branded website. The ACS global header and footer provide developers with a front-end code guidelines on which to build. Because these includes are shared through many ACS applications, it is very likely that an application which employs these includes will have CSS, JS and Images cached even on the first site visit

What is Server Side Include?

A Server Side Include (SSI) is usually a file which can be shared across many webpages. The SSIs provided by WSO are used to prepare the foundation for applications and websites. WSO recommends using our SSIs which will comprise the basic acs.org site template. With the exception of the vendor templates, all other templates are assembled using server side includes.

Hosting includes

SSIs should be ideally hosted on the assets.acs.org servers. Hosting your applications SSIs on assets will help us maintain the templates while keeping the template current with the latest version of acs.org. Applications may then "consume" the include by implementing a reverse proxy or scrapping the HTML from assets.acs.org servers. Contact WSO for assistance with this preferred configuration.

ACS applications generally utilize the global headers and footers. These include files should be used only when developing an ACS.org site and/or application. It is recommended to use v3.0 of the generic includes, although we do have back version support for v2.0 if needed.

You should point your SSI directly to the assets server in order to inherit future styling updates.

The host name {{//assetstest.acs.org}} should be replaced as a viariable for different enviroments inside your application.

FOR EXAMPLE:

DEV environment
assetsdev.acs.org

STAGE environment
assetstest.acs.org

PRODUCTION environment
assets.acs.org

Header and Footer

There are two types of header you can use, full and minimal

Full Header & Footer

If you need a header with all the navigation menu from acs.org, then use the full header.

http://assets.acs.org/generic/v3.0/header.inc 
http://assets.acs.org/generic/v3.0/scripts.inc 
http://assets.acs.org/generic/v3.0/footer.inc

Minimal Header

The Minimal Header is the recommended header for ACS applications use.

http://assets.acs.org/generic/v3.0/header-minimal.inc 
http://assets.acs.org/generic/v3.0/footer-minimal.inc 
http://assets.acs.org/generic/v3.0/scripts.inc 
(* Note: there is no minimal version of the scripts.inc)

Implementation of the Server Side Include may vary depending of the language of the application is developed in. Here is an example of what it might look like:


<!DOCTYPE html >
<head>
<title>Site name</title>
<meta name="HeadTitle" id="HeadTitle" content="Application Title"/>
<!--#include virtual="//assets.acs.org/generic/v3.0/scripts.inc"-->
</head>
<body class="application minimal-template">
<!--#include virtual="//assets.acs.org/generic/v3.0/header.inc"--> 
   <!-- start application page content-->
   <div id="bd" role="main">
     <!-- body code goes here-->
   </div>
<!--#include virtual="//assets.acs.org/generic/v3.0/footer.inc"--> 
</body>
</html>

!! It is important for the the body of your application must be surrounded with:


<div id="bd" role="main">
  <!-- body code goes here-->
</div>

Surrounding your body with a container div will ensure that your application is not full width

Your result page should look something like this:

Optional

Login Menu for Minimal template

Add in your header to have the login menu.

<meta name="login-menu" content="show"/>

Title for the Header

Add in your header to include application title.

<meta name="HeadTitle" id="HeadTitle" content="This Apps Title"/>

Additional Comments

All assets bootstrap and acs styles and js functionality is included with the scripts.inc thus should not be added in your application. Overwritting styles for the global header footer is not recommended as the styles and functionaly of the header and footer will change, if there is changes required please cotact WSO Design.