Cadre fondamental - nschonni/wet-boew GitHub Wiki
Needs translation
The Core Framework binds the themes, plugins, polyfills and other components together into a seamless tool-kit that promotes
accessibility, usability and a mobile conscious design.
The Web Experience Toolkit (WET) emerged out of CLF (Common Look and Feel), but its current incarnation is focused on promoting accessible and usable solutions for web sites, by using best practices, meeting WCAG requirements and following WAI-ARIA guidelines set by the W3C.
WET also provides a strong mobile experience, by maintaining a small footprint and implementing a responsive-design layout.
There are many benefits to using WET, some of which include:
- Respects accessibility (WCAG 2.0 AA and WAI-ARIA), usability, and interoperability.
- Reduces costs by consolidating Web tools and solutions.
- Open source software that is free to use by departments and external Web communities.
To implement WET use the build folder. The only necessary sub-folders are:
- grids - the CSS grid system folder
- js - the JavaScript folder
- and an appropriate theme folder (optional):
- theme-gcwu-fegc - The Government of Canada Web Usability theme
- theme-gcwu-intranet - The Government of Canada Web Usability Intranet theme
- theme-clf2-nsi2 - The CLF 2 theme
WET requires the following stylesheets and jQuery be loaded in the header.
The style sheets are separated into two different sets, one for IE7 and another for all other browsers.
<head> ... <--[if lte IE 8]> <script src="../../build/js/polyfills/html5shiv-min.js"></script> <link rel="stylesheet" href="../../build/grids/css/util-ie-min.css" /> <link rel="stylesheet" href="../../build/js/css/pe-ap-ie-min.css" /> <link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ie-min.css" /> <![endif]--> <--[if gt IE 8]><--> <link rel="stylesheet" href="../../build/grids/css/util-min.css"> <link rel="stylesheet" href="../../build/js/css/pe-ap-min.css"> <link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-min.css"> <--<![endif]--> <noscript><link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ns-min.css"></noscript> ... </head>
JQuery is the only JavaScript file we recommend loading in the header.
<head> ... <script src="../../build/js/jquery.min.js"></script> ... </head>Note: We recommend you use the jQuery file included in WET and not from a public CDN as this is the version used within the toolkit.
We load the rest of the JavaScript files in the body to decrease the load time of the page. This way the browser will load the content and run the JavaScript enhancements simultaneously.
Load the following files at the bottom of the body:
<body> ... <-- ScriptsStart --> <script src="../../build/theme-gcwu-fegc/js/theme-min.js"></script> <script src="../../build/js/settings.js"></script> <script src="../../build/js/pe-ap-min.js"></script> <-- ScriptsEnd --> </body>
The CSS Grid System provides a layout grid for dividing up horizontal and vertical space. This helps to create visually appealing layouts by enabling consistent placement of content. The CSS Grid System also enhances the appearance of standard Web page components and provides modules and other features building building and styling Web page content. How to use the CSS Grid System]
All plugin calls in WET are done via the class tags using the format: class="wet-boew-plugin-name parameter1 parameter2 etc"
Here is an example using the Prettify plugin:
<h2 id="examples" class="wet-boew-prettify all-pre" data-load="prettify">Examples</h2>In this example the plugin-name is "prettify" and there is only one parameter "all-pre" which is passed.
For more detailed instructions regarding plugins see the documentation regarding each individual plugin.