wet-boew / gcweb

Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System

(Français)

Web Experience Toolkit (WET)

What is the Web Experience Toolkit?

• An award-winning front-end framework for building websites that are accessible, usable, interoperable, mobile friendly and multilingual
• A collection of flexible and themeable templates and reusable components
• A collaborative open source project led by the Government of Canada

Key resources

• Documentation
• Downloads
• Examples
• Version history and roadmap
• Terms and conditions (MIT license)
• Source code repository and contributing guidelines
• Communications material
• Websites using WET

Benefits

Accessibility

• Conforms to WCAG 2.0 level AA
• Leverages WAI-ARIA to further enhance accessibility
• Assistive technology testing (Access Working Group)

Usability

• Iterative approach to design
• Design patterns and usability testing (User Experience Working Group)

Interoperability

• HTML5-first approach (leveraging native HTML5 support and filling support gaps with “polyfills”)
• Supporting a wide variety of browsers (Edge, Firefox, Chrome, Safari, Opera)
• Building support for HTML data (RDFa 1.1 Lite, Schema.org)

Mobile friendly responsive design

• Adapts to different screen sizes and device capabilities
• Touchscreen support
• Optimized for performance
• Building support for device-based mobile applications

Multilingual

• Currently supports 34 languages (including right-to-left languages)
  • English
  • French
  • Afrikaans
  • Albanian
  • Arabic
  • Armenian
  • Bulgarian
  • Chinese
  • Chinese (Simplified)
  • Czech
  • Dutch
  • Estonian
  • German
  • Greek
  • Hindi
  • Hungarian
  • Icelandic
  • Indonesian
  • Inuktitut
  • Italian
  • Japanese
  • Korean
  • Latvian
  • Lithuanian
  • Polish
  • Portuguese
  • Portuguese (Brazilian)
  • Russian
  • Slovak
  • Spanish
  • Thai
  • Turkish
  • Ukranian
  • Vietnamese

Themeable and reusable

• Flexible framework that supports custom themes
• Includes support for 2 different themes
• Reusable templates, plugins and widgets
• Adapted to various CMS and programming frameworks (Drupal, WordPress, SharePoint (in development), DotNetNuke (in development), PHP, SSI, Java/Maven)

Reduces costs by openly sharing and collaborating

• Drives down research and development costs
• Avoids duplication of effort
• Produces better quality results

Collaborative approach

• Project managed openly on GitHub, including discussion through the issues tracker
• Encouraging a free flow of ideas, dialogue and innovation including sharing of challenges and ideas
• External contributions welcome
  • Pull requests
  • Design patterns
  • Issues and suggestions
  • Documentation
  • Testing
• Multi-level review process for contributions to ensure code integrity (combination of automated and manual reviews)

How to Contribute

See CONTRIBUTING.md

License

Unless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distributed under the MIT License.

The Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see Federal identity requirements.

---

Boîte à outils de l’expérience Web (BOEW)

Qu’est-ce que la Boîte à outils de l’expérience Web?

• Une bibliothèque de code primée pour construire des sites Web accessibles, faciles d'emploi, interopérables, optimisés pour les appareils mobiles et multilingues
• Des modèles, ainsi que des composants réutilisables, qui sont flexibles et personnalisables
• Un projet à source ouverte collaboratif dirigé par le Gouvernement du Canada

Ressources clés

• Documentation
• Téléchargements
• Exemples pratiques
• Historique des versions et feuille de route
• Conditions régissant l'utilisation (licence MIT)
• Dépôt de code source et lignes directrices pour les contributeurs
• Matériel de communications
• Sites Web qui se servent de la BOEW

Avantages

Accessibilité

• Conforme aux Règles pour l'accessibilité des contenus Web (WCAG) 2.0 niveau AA
• S'appuie sur WAI-ARIA pour améliorer l'accessibilité
• Vérification avec les technologies d'assistance (Groupe de travail sur l'accessibilité)

Facilité d'emploi

• Approche itérative pour la conception
• Patrons de conception et les essais de facilité d'emploi (Groupe de travail sur l'expérience des utilisateurs)

Interopérabilité

• Approche centrée sur le HTML5 (s'appuyant sur le soutien HTML5 natif et puis les «correctifs» pour résoudre les problèmes de soutien)
• Soutien pour plusieurs navigateurs (Edge, Firefox, Chrome, Safari, Opera)
• Soutien en développement pour les données HTML (RDFa 1.1 Lite, Schema.org)

Conception optimisée pour les appareils mobiles et réactive

• S'adapte à différentes tailles d'écran et capacités d'appareil
• Soutien pour les écrans tactiles
• Optimisé pour les performances
• Soutien en développement pour les applications s’installant sur un appareil mobile

Multilingue

• Soutien actuellement 34 langues (y compris les langues droite-à-gauche)
  • Anglais
  • Français
  • Afrikaans
  • Albanais
  • Allemand
  • Arabe
  • Arménien
  • Bulgare
  • Chinois
  • Chinois (simplifiée)
  • Coréen
  • Espagnol
  • Estonien
  • Grec
  • Hindi
  • Hongrois
  • Indonésien
  • Inuktitut
  • Islandais
  • Italien
  • Japonais
  • Letton
  • Lituanien
  • Néerlandais
  • Polonais
  • Portugais
  • Portugais (brésilien)
  • Russe
  • Slovaque
  • Tchèque
  • Thaï
  • Turc
  • Ukrainien
  • Vietnamien

Personnalisable et réutilisable

• Cadre flexible qui supporte des thèmes personnalisés
• Soutien 2 thèmes différents
• Modèles, plugiciels et gadgets réutilisables
• Adapté aux différents systèmes de gestion de contenu et cadres de programmation (Drupal, WordPress, SharePoint (en développement), DotNetNuke (en développement), PHP, SSI, Java/Maven)

Réduit les coûts en partageant et en collaborant ouvertement

• Réduit les coûts de recherche et de développement
• Évite la duplication des efforts
• Produit des résultats de meilleure qualité

Approche collaborative

• Projet géré ouvertement sur GitHub, y compris les discussions à travers le système de suivi des questions
• Encourage la libre circulation des idées, du dialogue et de l'innovation, y compris le partage des défis et des idées
• Les contributions externes sont invités
  • Soumissions de code
  • Patrons de conception
  • Problèmes et suggestions
  • Documentation
  • Évaluations
• Processus d'examen sur plusieurs niveaux pour les contributions pour assurer l'intégrité du code (combinaison d'évaluations automatisées et manuelles)

Comment contribuer

Voir CONTRIBUTING.md

Licence

Sauf indication contraire, le code source de ce projet est protégé par le droit d'auteur de la Couronne du gouvernement du Canada et distribué sous la licence MIT.

Le mot-symbole « Canada » et les éléments graphiques connexes liés à cette distribution sont protégés en vertu des lois portant sur les marques de commerce et le droit d'auteur. Aucune autorisation n'est accordée pour leur utilisation à l'extérieur des paramètres du programme de coordination de l'image de marque du gouvernement du Canada. Pour obtenir davantage de renseignements à ce sujet, veuillez consulter les Exigences pour l'image de marque.

gcweb's Issues

Proposed new look for left menu

If you remove this CSS from the theme file:

.wb-sec ul {
    margin-top: 10px;
    padding-left: 5px;
}

.wb-sec ul a {
    display: block;
    padding: 5px 0;
}

and recode the left menu like this:

<ul class="list-group list-unstyled">
    <li><a href="#" class="list-group-item active">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#" class="list-group-item">Officia, molestiae praesentium.</a></li>
    <li><a href="#" class="list-group-item">Officiis, dolorem ut sunt?</a></li>
    <li><a href="#" class="list-group-item">Harum, aliquam cupiditate!</a></li>
    <li><a href="#" class="list-group-item">Quos voluptates quisquam alias.</a></li>
  </ul>

Then you go from this 'non-menu-look':

To this menu look (which is already part of bootstrap).

That said, you have to add this CSS (as Bootstrap hasn't accounted for links in a ul, just in a div:

ul.list-group li a.list-group-item {
    border-radius:0;
    margin-top:-1px;
    text-decoration:none;
}
ul.list-group li:first-child .list-group-item {
    border-radius:4px 4px 0 0;
}
ul.list-group li:last-child .list-group-item {
    border-radius:0 0 4px 4px;
}

Lastly, I included the 'active' state for the left menu to show that I don't think we customized bootstrap all the way as the active items is still their default blue (#428BCA) and I suspect we want a dark version???

Menu expicon not positions / aligned proper

The down arrow (expicon) on the menu, with sub menus look is still off since changes in #80.

partners grid

Since we changed the grid system on the main pages, the partners pages with the left navigation aren't layout correctly.

index pages missing from /dist folder

The built index pages are missing from the /dist folder. The partners pages are there but the paths to the media files (CSS, JS) files are wrong, they need to go back another level.

main element missing padding in IE8

All the main element CSS rules do not work in IE8. When viewed in IE 8, the content sticks to the sides of the window.

Wrong code on multimedia demo page

The page https://github.com/bci-web/GCWeb-dist/blob/master/mediaplayer-en.html has the class col-offset-1 but there is no such thing as that class. It would need to be col-md-offset-1 but I'm not sure why you would want to offset it. It would more likely have no offset but increase the grid to a col-md-7?

<div class="row"> 
<div class="col-md-6 col-offset-1"> 
<h2 class="h3">Remembrance Vignette</h2> 
<p>...</p> 
<p class="text-center"><a class="btn btn-primary text-center" href="video-en.html">See the video</a></p> 
</div> 
<div class="col-md-5 profileimage"> 
<a href="video-en.html"><img class="thumbnail" alt="Remembrance Vignette" src="http://dev3.canada.ca/video/2012veterans.jpg"></a> 
</div> 
</div>

Search box is 1px off

The search input box is 1px taller than that search input button. They used to match but now don't. Not sure if you want to just increase the padding by 1px on the search button or if you want to add a 1px border to either the top or bottom etc.

Link to close Search functionality

Link “Close” that is supposed to be available only on small screens to close Search functionality is physically present on larger screens too. CSS is used to hide it from visual users but it is exposed to screen readers. This might be an issue because the link does nothing when page is viewed on larger screens.
Also link text “Close” is not descriptive enough. Text does not explain the purpose of the link. The visually impaired users can’t know what they would be closing.

Footer different language files

@masterbee we have the same problem with the footer include (/site/includes/footers.hbs) that we had with the menu include. We need to create a French version to accommodate for the difference in links. I will create the file (/site/includes/footerfr.hbs) but I'm not sure how to link in in the default page....

Visual indicator missing from <figcaption> link on home page when it receives focus

This link is keyboard accessible but it does not have visual indicator to indicate that it received focus. This would fail Guideline 2.4.7 Focus Visible: “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible” (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).
Without visible indicators, keyboard users can’t know if an element on the page received the focus and they can’t interact with that element. Keyboard focus indicator is dotted border that we see around links and form elements when we tab to them.

jQuery in IE <9

Has jQuery been disabled in IE <9?

cc/ @pjackson28

breadcrumbs on other pages missing a level

the breadcrumbs on the index-alt-en.html page is missing a level.
"Home / Finding a job" should be "Home / Jobs & the workplace / Finding a job"

Megamenu links are not keyboard accessible

This would fail Guideline 2.1 Keyboard Accessible (http://www.w3.org/TR/WCAG20/#keyboard-operation)
Right now the user can only tab to “Jobs” (first link of first level links) because the tabindex is set to 0 (tabindex=”0”). Other links (including sublinks) do not participate in the tabbing flow of the document because their tabindex is given a value of -1 (tabindex=”-1”).
If given a value of "-1", the element can't be tabbed to and it can’t be focused via the keyboard.

Mobile and social media gallery - IE 8

@thomasgohard has any IE 8 testing been done on your pages?

Proximity CSS

Over to you @patheard

.opct-100 {
opacity:1;
}

.opct-90 {
opacity:.9;
}

.opct-80 {
opacity:.8;
}

.opct-70 {
opacity:.7;
}

.opct-60 {
opacity:.6;
}

.opct-50 {
opacity:.5;
}

.opct-40 {
opacity:.4;
}

.opct-30 {
opacity:.3;
}

.opct-20 {
opacity:.2;
}

.opct-10 {
opacity:.1;
}

.clmn-2 {
column-count:2;
}

.clmn-3 {
column-count:3;
}

.clmn-4 {
column-count:4;
}

.pstn-lft,.pstn-lft-sm,.pstn-lft-md,.pstn-lft-lg,.pstn-lft-xlg,.pstn-rght,.pstn-rght-sm,.pstn-rght-md,.pstn-rght-lg,.pstn-rght-xlg,.pstn-tp,.pstn-tp-sm,.pstn-tp-md,.pstn-tp-lg,.pstn-tp-xlg,.pstn-bttm,.pstn-bttm-sm,.pstn-bttm-md,.pstn-bttm-lg,.pstn-bttm-xlg {
position:absolute!important;
margin:0!important;
}

.pstn-lft {
left:0!important;
}

.pstn-lft-sm {
left:10px!important;
}

.pstn-lft-md {
left:20px!important;
}

.pstn-lft-lg {
left:50px!important;
}

.pstn-lft-xlg {
left:100px!important;
}

.pstn-rght {
right:0!important;
}

.pstn-rght-sm {
right:10px!important;
}

.pstn-rght-md {
right:20px!important;
}

.pstn-rght-lg {
right:50px!important;
}

.pstn-rght-xlg {
right:100px!important;
}

.pstn-tp {
top:0!important;
}

.pstn-tp-sm {
top:10px!important;
}

.pstn-tp-md {
top:20px!important;
}

.pstn-tp-lg {
top:50px!important;
}

.pstn-tp-xlg {
top:100px!important;
}

.pstn-bttm {
bottom:0!important;
}

.pstn-bttm-sm {
bottom:10px!important;
}

.pstn-bttm-md {
bottom:20px!important;
}

.pstn-bttm-lg {
bottom:50px!important;
}

.pstn-bttm-xlg {
bottom:100px!important;
}

.mrgn-lft-0 {
margin-left:0!important;
}

.mrgn-lft-sm {
margin-left:5px!important;
}

.mrgn-lft-md {
margin-left:10px!important;
}

.mrgn-lft-lg {
margin-left:20px!important;
}

.mrgn-lft-xlg {
margin-left:50px!important;
}

.mrgn-bttm-0 {
margin-bottom:0!important;
}

.mrgn-bttm-sm {
margin-bottom:5px!important;
}

.mrgn-bttm-md {
margin-bottom:10px!important;
}

.mrgn-bttm-lg {
margin-bottom:20px!important;
}

.mrgn-bttm-xlg {
margin-bottom:50px!important;
}

.mrgn-tp-sm {
margin-top:5px!important;
}

.mrgn-tp-md {
margin-top:10px!important;
}

.mrgn-tp-lg {
margin-top:20px!important;
}

.mrgn-tp-xlg {
margin-top:50px!important;
}

.mrgn-rght-0 {
margin-right:0!important;
}

.mrgn-rght-sm {
margin-right:5px!important;
}

.mrgn-rght-md {
margin-right:10px!important;
}

.mrgn-rght-lg {
margin-right:20px!important;
}

.mrgn-rght-xlg {
margin-right:50px!important;
}

[class*=border] {
border:solid 0 #ccc;
}

.brdr-lft {
border-left-width:1px;
}

.brdr-rght {
border-right-width:1px;
}

.brdr-tp {
border-top-width:1px;
}

.brdr-bttm {
border-bottom-width:1px;
}

Build broken? Or am I doing it wrong?

I'm trying to build GCWeb for testing but it doesn't work. I'm not sure whether it's me doing something wrong or whether the build itself is broken.

What is the correct process for building GCWeb?

What I'm doing:
npm install
which fails with:

Running "hub:wetboew" (hub) task
>> Running [default] on lib\wet-boew\Gruntfile.coffee
>> lib\wet-boew\Gruntfile.coffee:
Loading "Gruntfile.coffee" tasks...
Warning: Task "hub:wetboew" failed. Use --force to continue.

Aborted due to warnings.
npm ERR! weird error 3
npm ERR! not ok code 0

If I run grunt from lib/wet-boew, I get:

Loading "Gruntfile.coffee" tasks...ERROR
>> Error: Unable to read ".jshintrc" file. (Error code: ENOENT).
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

Menu font too small

The menu font is still set at 14px and is too small for mobile standards. If we make it any bigger the menu wraps in French when viewed at medium size. A purposed fix was to remove the UPPERCASE text and remove the font-size declaration setting back to default. @masterbee any news on this change?

Add focus style to search button above menu.

Need to add focus (colour change) to the search button in the search form above the menu.

gh-pages wiping out master

The gh-pages/deploy stuff is wiping out the master content. This needs to be reverted to a previous commit

When exiting a submenu with the keyboard, the parent item should be highlighted

When pressing the left arrow or escape key to close a submenu, the parent menu item should be highlighted to indicate to the user where they are. It currently doesn't

Canada word-mark not fully clickable

The Canada word-mark isn't fully clickable. Need to add size to the element inside below the word-mark.

Why is benefits separate from jobs in the menu

Probably a stupid question, but the IA seems odd

IE 8 display issue

The template does not seem to display correctly in IE 8. I tested with second-en.html. In Firefox it work fine.

Why is there so many layouts??

There are 5 layouts in site/layouts that are practically identical. The differences should be addressed through variables and partials (includes)

What's the status on tabs/carousel and how can I help?

Also, curious to know if we are still using easytabs here?

Thanks.

Footer border-left uses background image

Because Bootstrap uses padding and percentages, you do NOT need background images for borders (like you did for fixed width grids).

Currently it's this code

footer .border-left {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAIAAACmkByiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjJFMEIzREYzNUQ3MTFFMzgxQzlBMTYxOUUwOTI0MDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjJFMEIzRTAzNUQ3MTFFMzgxQzlBMTYxOUUwOTI0MDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMkUwQjNERDM1RDcxMUUzODFDOUExNjE5RTA5MjQwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMkUwQjNERTM1RDcxMUUzODFDOUExNjE5RTA5MjQwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjVj5TYAAAAZSURBVHjaYjh05CgTAwPDKB7FoxgTAwQYAJdOA9pG4uR3AAAAAElFTkSuQmCC");
    background-position: 0 15px;
    background-repeat: no-repeat;
}

Additionally, the border isn't rendering the proper height of the div it's attached to. It should just be this:

.border-left {
border-left:1px solid #ccc;

}

Here is what is currently displaying

HTML minifier fails at random

The HTML minifier fails at random.

I can run the build and it fails. Then I run the build immediately again, without making any changes, and it passes.

H2 get squished when on two lines

H2 when the text crosses over two line get squished.

Partners second pages

I noticed that the layout is bigger then 100% of the screen size for the partners second-en.html and second-fr.html pages. You actually have a horizontal scroll bar and white space to the right of the GoC wrapper. This is happening on all browser. I suspect there some issue with the class="secondary" in the body.

Form validation not working in IE8

Refer to wet-boew
wet-boew/wet-boew#3548

Images in footer don't match footer background colour

There is a 1px solid white border on the image.

Also I don't think the gray background on the image is the same gray as in the footer.

Date modified is smaller then the rest of the content and positions is wrong

Date modified on the partners pages is all the way to the left and the font size is smaller then the rest of the content.

Footer markup question

Which of the following is correct:
A)

<div class="wb-equalheight"> 
            <div class="sect-lnks"> 
                <figure class="thumbnail"> 
                    <img src="./img/healthy.jpg" alt="..."> 
                    <figcaption class="caption">
                        <a href="#">Healthy Canadians</a>
                    </figcaption> 
                </figure> 
            </div>

or, B)

<div class="wb-equalheight">
            <figure class="sect-lnks thumbnail">
                <img src="./img/healthy.jpg" alt="...">
                <figcaption class="caption">
                    <a href="#">Healthy Canadians</a>
                </figcaption>
            </figure>

Thanks!

Build, menu and WET 4

When I run the built on my local machine, the menu is not working and it doesn't see to bring in any updates from the WET v4.0 project. The GCWeb-dist repo is working fine.

Issues with document structure

Just noticed some issues with the document structure. There are several unnamed sections in the HTML5 outline which will be problematic for people that navigate by the HTML5 outline, including screen reader users. Please ensure all sectioning elements include a heading.

 1.  Welcome to Canada.ca
    1.   Language selection
    2.   Untitled SECTION
    3.   Search
    4.   Untitled NAV
       1.    Site menu
       2.    Site Information
    5.   Breadcrumb trail
    6.   Untitled ASIDE
    7.   Most requested services and information
    8.   Lorem ipsum dolor sit.
    9.   Necessitatibus, et accusantium debitis.
   10.  Velit, sit placeat consequatur!
   11.  Lorem ipsum dolor sit.
   12.  Provident molestiae enim totam.
   13.  Adipisci dignissimos voluptatibus voluptatem.
   14.  Lorem ipsum dolor sit.
   15.  Ipsam natus placeat saepe!
   16.  Ipsum est fugit fuga!
   17.  Departments and Agencies
       1.    Lorem ipsum dolor.
       2.    Praesentium, culpa iure.
       3.    Assumenda, ab, obcaecati.
   18.  Untitled SECTION
   19.  Features
   20. Site Information
       1.    Government
       2.    Transparency
       3.    News
       4.    Contact information
       5.    Social media
       6.    Mobile centre

How will a left menu transform in mobile?

None of the demo pages show a left menu. How will the left menu be displayed in mobile, as the main menu/footer is now in a different ajax file?

H1 size in IE 8 very large

When viewing the page in IE 8 the H1 is extremely large.

Footer link spacing too large?

Do we really need a 1em bottom spacer on the footer link? (Wouldn't a 0.5 be fine?) Currently we have this...

footer nav li {
    margin-bottom: 1em;
}

Megamenu stays active (expanded)

When you un-hover the megamenu the megamenu stays expanded (open). This is happening in all browsers. The only way to hide the megamenu is if you un-hover by moving the cursor away from the megamenu from the top of the banner (white space) all the way to the right or left where there is no megamenu item.

Zebra striping for Tables

Implementing zebra striping on tables does not work for me and my colleagues. Used the "table-striped" class within the "table" class and also used it with the "wb-tables" class as well. Still not displaying, am I missing something? Thanks for the help.

date modified on alt pages

Should the date modified be on the alt pages also?
index-alt-en.html?

Content page for GCWeb theme

I will create a content page similar to the one we had/have for WET for this theme.
http://wet-boew.github.io/wet-boew/demos/theme-gcwu-fegc/cont-en.html

PS I'm using the issues as my todo list but if anyone else wants to take these on go...

Can anyone show an example left menu page

Can't see any in demos.

Also, any details relating to modifying it.

Thanks

Validation issue duplicate ID

There is a duplicate ID "wb-slc" in the skip to content code.

• Skip to content
• Skip to footer

Menu drop down not disappearing

Maybe it's just my version of the downloaded zip, but the drop down from the menu bar does not disappear unless I hover over a different menu item

For example, if I hover and the drop down appears, but then I decide I want to stay on the page, so I mouse away, the drop down stays and won't go away.

Adding Geo Target into WET 4

I will be working on adding the Geo Target into the WET 4 template.

You can assign it to Louis Galipeau.

Menu hover

@masterbee there seems to be a problem with the menu hovering not going away once we hover off the menu item.

Standardising the front matter

Right now we have front matter in both JSON and YAML. We should chose one.

I have no preference either way, although I'm more familiar with JSON.

What's the preferred format?

Multiplayer crashed in IE 8

When opening the demo multimedia player in IE 8 it crashes the browser window.

ATTENTION regarding class or id names

Please, as early implementers are migrating huge volumes of content from WET3 to gcweb/WET4, we need everyone's participation at this stage to quit changing class or id names. Bite the bullet and wait until we are done with this first release.

If it is critical, warn us here or by mass email as we cannot guess.

Thanks.