CLF 2.0 theme - nschonni/wet-boew GitHub Wiki

français

The CLF 2.0 theme was developed to comply with CLF 2.0.

Table of Contents Overview Benefits Recommended usage Use When Do Not Use When Content Implementation General instructions Content page-specific instructions (cont*.html) Welcome page-specific instructions (wp-pa*.html) Server message page-specific instructions (serv*.html) Examples Development Known Issues Version History

Project lead: Madeleine Daigle (@maddydaigle)

• Top tasks have been tested with users: contact us, search, return to home page, learn about us, stay connected through social media, navigate the site, read the terms and conditions, and toggling to the users official language of choice.
• Conforms to the Standard on Web Accessibility and CLF 2.0
• Conforms to WCAG 2.0 AA
• Uses HTML5 semantic elements and WAI-ARIA to enhance accessibility
• Groups most of the navigation after the content area
• Validates to HTML5 and is XML conformant

• Transitioning to the latest version of the Web Experience Toolkit before moving to the GC Web Usability theme. Where possible, departments should move to the GC Web Usability theme at the same time as upgrading to the latest version of the Web Experience Toolkit in order to reduce costs.

• This theme can only be used on Government of Canada websites.

Content should focus on users' top tasks. Users tend to navigate through the content area first and then to the menus. They are looking for keywords that will help them meet their information need. Write in active voice and use verbs. Users will often scan the information looking for things that stand out - like links. Each link must be descriptive and representative of the content to which it leads. This is especially pronounced when users are accessing the site via a mobile device.

1. Use the \theme-clf2-nsi2\*.html files to create your Web pages.
2. Optional: Create and install one or more new CSS files (will be used for custom CSS)
3. Optional: Create link(s) to the new CSS file(s) in between the following comments:

< !-- CustomScriptsCSSStart -->
< !-- CustomScriptsCSSEnd -->

1. Correct all *.css, *.js, and *.gif file paths referenced in the installed *.html files
2. Replace the page title (in between <title> and </title>,) and the content title (in between <h1 id="wb-cont"> and </h1>)
3. Correct the metadata values
4. Correct the footer links

1. Correct the menu bar links
2. Correct the FIP signature
3. Correct the site title
4. Correct the breadcrumb
5. Correct the side menu links (if any)
6. Correct the Date modified/Date de modification

1. Correct the English and French language links

1. Replace the English and/or French messages.

• English working examples
• French working examples

The code for the CLF 2.0 theme is located in several places within the source folder of WET:

• theme-clf2-nsi2/js/theme.js - contains the JavaScript code for the CLF 2.0 theme
• theme-clf2-nsi2/sass/theme.scss - contains the CSS for the CLF 2.0 theme content pages
• theme-clf2-nsi2/sass/theme-ie.scss - contains the IE7/8-specific CSS for the CLF 2.0 theme content pages
• theme-clf2-nsi2/sass/theme-serv.scss - contains the CSS for the CLF 2.0 theme server message pages
• theme-clf2-nsi2/sass/theme-serv-ie.scss - contains the IE7/8-specific CSS for the CLF 2.0 theme server message pages
• theme-clf2-nsi2/sass/theme-sp-pe.scss - contains the CSS for the CLF 2.0 theme splash pages
• theme-clf2-nsi2/sass/theme-sp-pe-ie.scss - contains the IE7/8-specific CSS for the CLF 2.0 theme splash pages
• theme-clf2-nsi2/sass/includes/ - contains the include files for building the CSS files for the CLF 2.0 theme
• theme-clf2-nsi2/images/ - contains the images for the CLF 2.0 theme

• CSS styling will not be entirely consistent across all browsers since many of them will interpret CSS syntax differently.
• Usability testing is required on the styles in the CSS grid system.

• Theme.js
• Theme.scss
• Theme-ie.scss
• Theme-serv.scss
• Theme-serv-ie.scss
• Theme-sp-pe.scss
• Theme-sp-pe-ie.scss