Reference Manual

For AFY websites and stand alone subsites


01 . Color Palettes

Theme colors



100, 99, 94











177, 177, 174









239, 239, 239



Almost Black


Link Colors

Main (Hot Pink)


212, 50, 135

Hover (Dark Pink)


167, 29, 92



Featured Alt


Featured Hover


162, 3, 84

02 . Layouts PDFs

For layout reference only. If there are any conflicts with the HTML files, trust the HTML.



03 . Core

Global setting and css required for the entire site



Bands, or rows are full width, alternate in colour and can be customized:

CSS: core.layout.css


Global setting for the site content width, except for the News and News Release. This also rules padding on top and bottom and can be customized:

CSS: core.layout.css


The footer is present at the bottom of all pages and remains constant, except for the Sponsor section which can be customised per page. The default configuration should match the one at the bottom of this page. core.footer.css file must be placed after core.layout.css

CSS: core.footer.css



Default text formatting, regardless of the layout. Some overriding classes are included to accomodate exceptions:

  • .Note
  • .Intro
  • .Center
  • .Rag

CSS: core.typography.css


For stand alone buttons and default links colour

CSS: core.buttons.css


Just the font loader

CSS: font/fonts.css


.EN added to the body tags triggers some language switch in the CSS. i.e. ::Before

Note: The only communality between the English and the French site are the css and js files. Other than that, both sites should be 100% independent. Every object found on the French site is likely to be found on the English site.


Some objects and templates use JavaScript. jQuery is required.

05 . Templates

Used to display static content, these can be customized.


Heads are normally static, however, the portal/services pages have dynamic add referring to the calendar.

CSS: template.css

JS: swipper.css

JS: swipper.afy.css

JS: template.head.js

Options: (1)(2)(3)


Can be empty or contain some text, including a button.


Can have a common header that remains on top of all slides, including a button — Same as the static head. Or each slide can have it's own text, however, there a no button, the whole slide is clickable.


Portals and services need calendars ads included at the bottom

Extra CSS: events.listings.css

Code structure

All heads share the same structure.

News : By defalut, all background images are top alinged (y). However, after testing, we need to be able to indicate if a background "Y" alignement is be "center or bottom" instead of the default. I was thinking of injecting the CSS inline: background-position-y: center;. See _page.calendrier.html for some example.


Unlimited amount of columns.

CSS: template.css

Options: (1)(2)(3)(4)


Icon Contacts

Contacts are created individually, then added to a "Department" band manually. A contact could exist on more the one department.

Allow the possibility to mark a contact as Active or Inactive..

CSS: template.css

Options: (1)(2)(3)



Just a plain image, full width of the viewer.

CSS: template.css



Unlimited amount of columns.

Article: An option to wrap all columns in a single div. See sample page below.

URLs should use "target='_blank"', unless linking localy.

The following class should be available to customise the content of the colomns :

  • .Link (for lists)
  • .Links (for lists)
  • .Button (for URLs)
  • .Yukon (for paragraph)
  • .Note (for paragraph)
  • .Intro (for paragraph)
  • .Center (for paragraph)
  • .Rag (for paragraph)

CSS: template.css

JS: article.css

Options: (1)(2)(3)(4)


Customize Options

CSS overrides (1)

Custom CSS, applicable only to that template, can be added if needed.

.ContentWidth.Reverse (2)

Text can be reversed if not readable on the chosen background.

.Band (3)

Background colour/image can be changed.

Snug (4)

Template height and top/bottom padding can be adjusted. .Band > .ContentWidth


The contact bar is an object, not a templates. However, since they share much of the Icon template CSS, it is defined in the template CSS file

See :

for details.

06 . Special Templates

Displaying dynamic objects. Services page may be hand coded if easier.

Featured News

Same template for New / News Release: Add .Release to activate the News Release

CSS: events.listings.css

CSS: object.featurednews.css

JS: template.head.js

Note: not constrained by .ContentWidth


Feature Services (Services Page)

Appears at the bottom of the page, and is limited by .ContenWidth like the rest of the site.

It can link to a service page, or a band in that page. I would be great if this could by dynamic and reflect the actual page or band title. Dynamic or manual image background? To be discussed

New: Everything is now wrapped in .Band.RelatedServices div.

CSS: events.listings.css


Feature Services (Portal Page)

Appears just below the head and is full width.

Each service is added manually to the page. The number of entry should be dividable by 4. If it is not possible to have 4 or 8, we upload images to fill the void.

The displayed order is manual.

CSS: events.listings.css


Rolling News

Appears on the AFY page.

Swipes the latest 3 News/Press releases

Layout in progress

CSS: object.featurednews.css

CSS: events.listings.css



Same as main.nav, but full page and and with an extra button.

CSS: nav.main.css

JS: template.head.js

News Page

Same template for News Page / News Release Page: toggle .NewsPage and .NewsPageRelease.

Uses the same page layout as the event page.


JS: template.head.js

07 . Events

New : All Events based layout have a revised html structure. Content is the same, except for Event and Collection pages that now allows to have a page title in the Intro section. Also, while reviewing the events, please note that hypothetical current date used for creating the event pages is Mars 14.

Calendar Page

Only shows AFY events.

Events trigegr a popup and do not go directly to the description page.

CSS: events.listings.css

JS: template.head.js


Collection Page

Displays ALL upcomming events, including partner's events.

All logisting info is an open feild (Date, location, etc)

If triggered, the location map should show a pin for each event contained within the collection

Au Programme is an open Feild

Price button should not highlight if no URL is allocated.

Head can contain an image and/or some text. Refer to TemplateHead.

New : the Intro section now includes an h2 headline

CSS: events.listings.css


CSS: object.flexible.css

CSS: object.sharebar.css

CSS: object.videos.css

CSS: object.dropdown.css

CSS: template.css

JS: nav.scroll.js

JS: object.dropdown.js

JS: template.head.js


Event Page

Collection pane shows ALL upcoming events, including partner's events.

Collection pane shows ALL collection associated with the event.

Collection pane indicated the current event.

If the current event is past, load the page with the "Past events" roll-down menu expended.

Price button should not highlight if no URL is allocated.

Show all dates associated with an event. Each dates should appear in the event litings and the collections.

Head can contain an image and/or some text. Refer to TemplateHead.

New : the Intro section now includes an h2 headline

CSS: events.listings.css


CSS: object.flexible.css

CSS: object.sharebar.css

CSS: object.videos.css

CSS: object.dropdown.css

CSS: template.css

JS: nav.scroll.js

JS: object.dropdown.js

JS: template.head.js


Monthly Page

Collection pane shows selected collections.

Collection only the next three events.

Collection + button shows three more events, if any.

Collection pane shows ANY upcoming events, including partner's events.

Monthly pane shows only AFY events.

Monthly pane show the complete current month, plus any upcomming months

Head image can be changed from time to time.

CSS: events.listings.css


CSS: object.dropdown.css

CSS: template.css

JS: object.dropdown.js

JS: template.head.js


08 . Events Listings

All these share the same code structure, but are displayed differently, with selective data.


The "+" button now simply links to the appropriate Collection page

CSS: events.listings.css

CSS: object.dropdown.css

JS: object.dropdown.js


Featured Ads

Dynamically generated, these event ads appear in the head on Service and portal pages.

When creating/editing an event, we can select which services or portals will display its ad.

New : This is now a standalone row that lives just below the Head. There is also two new wrapper divs around the old code. (.Scroll .AdsWrapper).

New : JS: object.horisontalscroll.js

CSS: event.listings.css


Dynamically generated, these event ads appear below the head on Calendar/home page.

Up to 8 ads are displayed, but no more.

New : .TextureAFY class

CSS: event.listings.css


Featured Mini

Only appears on the Collection page.

Shows ALL upcoming events.

A message can be displayed if no more events are upcomming.

Local events go the event description page

Partener's events only trigger a pop up

New : .TextureAFY class

CSS: event.listings.css

CSS: object.dropdown.css

JS: object.dropdown.js


See Monthly Page in the section above.

CSS: event.listings.css


09 . Objects


Appears on Collection and Event pages.

On smaller screen, an extra button appears to the right of the container. On collection pages, it allows quick scrolling to the list of sub-event. On the Eventpage, it links directly to the collection pages.

Responsive layout in progrss

CSS: object.logistic.css

CSS: object.quicklinks.css

JS: nav.scroll



Appears on Event and Monthly pages.

This small menu replaces the Collection Pane and links directly to the collection pages, if Any.

On the Event page it apears as a button in the Logistic object.

On the Monthly page it apears on top of the month listing

CSS: object.quicklinks.css

JS: nav.scroll

Contact Bar

Appears on Event, Collection, News and Press release pages. It includes either :

A contact from the contact page, trigerring it's related Contact Card if clicked. Only the Active contact should be selectable from the list.

A custom contact, includes thumbnail, name, title, phone number and email. It is tied to that page only. On click, A popUp showing the phone number and Telephone will apear"if this info is not already visible, depending on media size.

Layout in progress.

New : The Pop up layout for the non-active contacts uses the regular Contactcard layout but requires only the top section (.Mug). There are some sligh layout diffirences triggered by the new .Alien class.

CSS: template.css


Share bar

Appears on Event, Collection, News and Press release pages

Display only those that apply.

The share buttons pops a dialog box.

All others point to a single url/mail.

Include the posiblity to add one that is not a presets, with a custom icon and lable.

Always display in the same order.

CSS: object.sharebar.css


10 . Objects — Flexible Content

Appears on the Event, Collection. News and Press releases pages.


One or many schedules can be inserted at the top of the .Flexible div

If title is entered, the default headline is "Schedule"

A schedule is an ul list. By default, only two olumns are displayed, unless .C3 is added, which will display three columns instead.

CSS: object.flexible.css



Downloads are inserted at the bottom .Flexible div

If no title is entered, the default headline is "Downloads"

CSS: object.flexible.css


Open Text Box

Used on Events, Collection, and News pages

If a schedule, or a download object is used, it would be content within the wrapper div.

These class should be available:

  • .Intro
  • .Video
  • .Links
  • .Link
  • .Button
  • .Yukon

CSS: object.flexible.css

CSS: object.videos.css

CSS: template.css


11 . Pop Ups

Toggeling the wrapper class .PopUpOff and .PopUp. for a given ID shows or hides the popup.

The class .Contentwidth has been removed from all pop ups


New Simplified Layout

CSS: popup.css

JS: popup.css



The contact PopUp uses the same data as the footer. Literally.

New The Team AFY html has been simplified and has a new .Staff class.

The Staff icon is based on the Icon Template.

The Job posting link should be editable, somehow.

CSS: core.footer.css


CSS: popup.css

CSS: template.css

JS: popup.css


Contact Card

Appears when a contact icon is pressed from the Contact page, or the Contact bar.

The five progress bars and fun facts have optional labels, per card.

At work, and After 5pm heads are ruled by the CSS.

The phone number should be dialled able.

New : Dv wrapper in the Work section (Au travail)

New : Fix labels are now CSS generated

CSS: popup.contactcard.css

CSS: popup.css

JS: popup.css


PopUp Event

Shows only from the Calendar Grid page.

CSS: popup.css


JS: popup.css



PopUp Event Partner

Partner's events don't have a page, but only a PopUp

If no image is avaible, the top bar remains empty with a grey background.

CSS: popup.css

JS: popup.css


PopUp Map

Triggered from the Event and Collection pages. It should include a pointer to the event(s) location(s).


CSS: popup.css

JS: popup.css

PopUp Add to Calendar

Triggered from the Event pages.

CSS: popup.css

JS: popup.css


PopUp Share

Triggered from the Share Bar.

CSS: popup.css

JS: popup.css


12 . Portal Pages

The pages are not in the site navigation, but can be added manually to the footer template. Note that each portal page is likely to have its own CSS overriding the colour theme in order to match targeted advertising. I.e.: Yellow instead of pink.

13 . Banner Ads

Same as the Text Template, except that only one free text column is "needed", instead of multiple like in the regular text template. Banner ads will be inserted on multiple pages

14 . VIP Page

Cancelled. However, there is a placeholer in the footer for future implementation.

15 . Wall of Fame

Cancelled. We'll use the Icon template to acheive it

16 . Micosites

Cancelled. All microsites are hand coded and are not part of this contract

Standalone Nav Bar

Only intended for one page microsites that are not attached to AFY website.

CSS: nav.standalone.css

JS: nav.standalone.js

JS: jquery.min.js