WAI website theme

Pre-requisites

Before you begin, make sure you have the following installed:

• Ruby (>= 3.3)
• Bundler

Local build

After cloning the repository, run:

  bundle install
  bundle exec jekyll serve -w --config _config_doc.yml

Building CSS

The CSS files used in the local build are built and minimized from SCSS files. To this, run:

  gulp css

Theme installation

1. Add the following to your Gemfile:

    group :jekyll_plugins do
        gem 'wai-website-theme', git: 'https://github.com/w3c/wai-website-theme', branch: 'main'
    end
   

   Note: You can optionally specify a branch, tag, or commit to use. For more information, see Bundler documentation.

2. Run bundle install

3. Add the following to your config.yml file

      theme: wai-website-theme
   

4. Run Jekyll. In your project root directory, run:

      bundle install
      bundle exec jekyll serve
   

Theme update

To update the theme in existing projects, run the following within the project directory:

bundle update wai-website-theme --conservative

When there are updates, this will update the revision value in the Gemfile.lock to use the latest commit.

Note: Make sure to include the --conservative flag to avoid unintended updates of the theme dependencies.

How to update wcag22.json

To update _data/wcag22.json, run the following within the project directory:

node _update-wcag-json.mjs

This requires Node.js version 20 or later.