McGill Design System (mcgill-ds)

This project contains templates, styles and other resources for the web that adhere to the digital standards of McGill University.

Every release for this repository creates Composer and npm packages that distribute CSS (and related assets like fonts and logos) for use in any project. These assets are also published on unpkg and can be used directly from there in your project.

Changelog

The changelog is included in the package. You can view the latest version in the CHANGELOG.md file.

Installation

This project is available to install as an npm or composer package.

Options

| CSS Options | Description | |---------------------------|--------------------------------------------------------------| | dist/css/mds-scoped.css | Scoped - to avoid conflicts when layering on existing CSS | | dist/css/mds.css | Global - best used for foundational and boilerplate contexts |

To use the Composer package:

To include this package in a Drupal 9 project, you can use npm-asset:

composer require npm-asset/mcgill-wsg--mcgill-ds:VERSION

To use the NPM package:

• Add '@mcgill-wsg/mcgill-ds': 'xxx' (where xxx is your desired version) to your project's package.json file.
• Run npm install

Resources

Note: For internal development documentation, please refer to README-internal.md

Storybook

Storybook https://storybook.js.org can be run locally, allowing you to see all of the documented components in one place (useful if you want to work with them!), offering you the chance to see each one in isolation.

The latest version of the Storybook instance is also published publicly to https://docs.designsystem.mcgill.ca/

Icons & Ionicons

This package and the McGill Design System in general use icons from the open-source project Ionicons.

Invision

The McGill Invision app is our designs teams tool to inform what is provided in McGill-DS. Invision also has a handy inspect tool