Reference Manual

For AFY websites and stand alone subsites

TOC

01 . Color Palettes

Theme colors

Theme

#64635e

100, 99, 94

90%

#73726e

80%

#83827e

70%

#73726e

60%

#a2a19e

50%

#b1b1ae

177, 177, 174

40%

#c1c1bf

30%

#d0d0ce

20%

#e0e0df

10%

#efefef

239, 239, 239

Darker

#51504a

Almost Black

#1c1b14

Link Colors

Main (Hot Pink)

#d43287

212, 50, 135

Hover (Dark Pink)

#a71d5c

167, 29, 92

Featured

#b20566

Featured Alt

#aa045d

Featured Hover

#a20354

162, 3, 84

02 . Layouts PDFs

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

French

English

03 . Core

Global setting and css required for the entire site

core.layout.css

.Band

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

  • .White
  • .Alt
  • .Theme
  • Custom Colour (Inline style)
  • Custom image (Inline style)

CSS: core.layout.css

core.band.html

.ContentWidth

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:

  • .Snug
  • .SnugUP
  • .SnugDOWN
  • .FullScreen

CSS: core.layout.css

core.band.contentwidth.html

Footer

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

  • Contact — global
  • Also — global, but will evolve
  • Sponsors — Global However, a new per page sponsor band (row) is now at the bottom of the Collection and Event pages — it is literally the same band as the one used in the footer. See sample pages using the top navigation.
  • Credit — global

CSS: core.footer.css

site.footer.html

Typography

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

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

CSS: core.typography.css

Buttons

For stand alone buttons and default links colour

CSS: core.buttons.css

font.css

Just the font loader

CSS: font/fonts.css

Language

.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.

jQuery

Some objects and templates use JavaScript. jQuery is required.

05 . Templates

Used to display static content, these can be customized.

Heads

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)

Static

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

Swipper

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.

Ads

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.

Icons

Unlimited amount of columns.

CSS: template.css

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

template.icon.html

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)

template.Icon.contacts.html

Image

Just a plain image, full width of the viewer.

CSS: template.css

template.image.html

Text

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)

template.text.html

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

Others

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

special.featurednews

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

special.featuredservices.html

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

special.featuredservices.portal.html

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

special.rolling

Services

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

CSS: nav.main.css

JS: template.head.js

special.services

News Page

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

Uses the same page layout as the event page.

CSS: events.page.css

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

events.calendar.html

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: events.page.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

collection.html

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: events.page.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.html

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: events.page.css

CSS: object.dropdown.css

CSS: template.css

JS: object.dropdown.js

JS: template.head.js

events.monthly.html

08 . Events Listings

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

Collection

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

CSS: events.listings.css

CSS: object.dropdown.css

JS: object.dropdown.js

events.listing.collection.html

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

events.listing.ads.html

Featured

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

events.listing.featured.html

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

events.listing.featured.mini.html

Monthly

See Monthly Page in the section above.

CSS: event.listings.css

events.listing.monthly.html

09 . Objects

Logistic

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

object.logistic.html

QuickLinks

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

object.contactbar.html

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

object.sharebar.html

10 . Objects — Flexible Content

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

Schedule

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

object.flexible.schedule.html

Downloads

Downloads are inserted at the bottom .Flexible div

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

CSS: object.flexible.css

object.flexible.downloads.html

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

object.flexible.html

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

Language

New Simplified Layout

CSS: popup.css

JS: popup.css

popup.Language.html

Contact

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: object.map.css

CSS: popup.css

CSS: template.css

JS: popup.css

popup.Contact.html

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.contactcard.html

PopUp Event

Shows only from the Calendar Grid page.

CSS: popup.css

CSS: events.page.css

JS: popup.css

popup.event.html

popup.event.partner.html

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.event.partner.html

PopUp Map

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

CSS: object.map.css

CSS: popup.css

JS: popup.css

popup.map.html

PopUp Add to Calendar

Triggered from the Event pages.

CSS: popup.css

JS: popup.css

popup.calendar.html

PopUp Share

Triggered from the Share Bar.

CSS: popup.css

JS: popup.css

popup.share.html

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

nav.standalone.html