Getting Started with WET - nschonni/wet-boew GitHub Wiki

français

Table of Contents

Overview

The Web Experience Toolkit (WET) includes reusable components for building and maintaining innovative websites that are accessible, usable, and interoperable. Unlike previous versions, WET allows developers to package and optimize their JavaScript, CSS and plugins. This final build folder can be used by publishers to style and provide functionality to their websites.

The following documentation provides new users and contributors with the resources needed to create a website using WET.

Why WET 3.0?

WET is a toolkit which includes reusable components that can be used by web professionals to build websites. WET complies with the Web Standards released by the Government of Canada, and helps sites that employ it achieve compliance. It is also an open source project which is free to use and contribute to through GitHub.

Benefits:

  • All of the functionalities are accessible through HTML5, and do not require any JavaScript to implement.
  • Focus is on mobile development.
  • Simpler calling system for plugins.
  • CSS standardization and optimization.
  • More CMS friendly.
  • Provides reusable components.
  • Respects accessibility (WCAG 2.0 AA and WAI-ARIA), usability, and interoperability principles.
  • Reduces costs by providing re-usable Web tools and solutions.
  • Open source software that is free to use.
  • Uses advanced technologies, such as:
    • HTML5, CSS3, jQuery (JavaScript framework);
    • Ever-growing list of open source plugins and widgets; and
    • Supports a wide range of layouts and designs.

Main Components

  • WET Core Framework - The WET Core Framework includes functionality used in all WET pages. This includes jQuery plugins and CSS, JavaScript for processing mobile views and external libraries.
  • Base CSS - Every WET site uses a series of base CSS classes which are not theme dependent.
  • CSS Grid System - The grid system is CSS to style the content of the page using grids. It also includes additional CSS styles for the content area of Government of Canada websites.
  • Theming - Themes are composed of theme-specific stylesheets, images and jQuery.
  • Mobile support - WET allows pages to display differently on mobile devices.
  • i18n localization system - Language integration file which translates key words based on the language specified in html lang attribute.

Directory Structure

The following is an overview of the different directories contained in the WET project and their purpose.

The build folder and any site pages are part of your website. The src folder is what results in the build folder during developement.The build folder and any site pages are part of your website. The src folder is what results in the build folder during developement.

  • build - This directory contains everything required to implement WET on a website, including a variety of different components such as plugins, CSS and themes.
    • grids: Includes CSS and images included in the grid system.
    • js: Includes files for JQuery functionality, plugins and the CSS used to display styles.
    • lib: Contains libraries used as part of the build process. **Not required for implementation.**
    • theme-gcwu-fegc: This is the GC Web Usability theme, designed for all external facing Government of Canada websites.
    • theme-gcwu-intranet: This is the GC Web Usability Intranet theme, designed for all internal facing Government of Canada websites.
  • demo This folder contains the working examples for all WET features, components and plug-ins.
  • docs This folder contains the website for WET documentation and can be accessed here.
  • src - This folder includes the initial files and source code for the WET 3.0 project and is used solely for WET development. The build folder is built from code contained in this folder.
  • test - This folder is used for testing purposes by the developers of WET.

What Next?

Now that you know a little bit about the WET, see the following pages for information on how to use and contribute to WET:

  • Using Github for WET - This page contains information on how to used GitHub to use or contribute to WET.
  • Implementing WET - This page contains the information necessary to implement WET on your website.
  • Developing for WET - This page explains how WET works and has all the necessary information to contribute your own plugin or feature to WET.
⚠️ **GitHub.com Fallback** ⚠️