Getting started

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?

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

  • 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 style sheets, 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.

  • build: Contains the build scripts and build dependencies for WET.
  • dist: 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.
  • demos: This folder contains the working examples for all WET features, components and plug-ins.
  • docs: This folder contains the documentation for WET working examples.
  • src: This folder includes the initial files and source code for WET and is used solely for WET development. The dist 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 use 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.