@mcgill-wsg/mcgill-ds
Version:
McGill Design System - a set of components and styles to adhere to McGill University standards.
70 lines (42 loc) • 2.58 kB
Markdown
<img alt="McGill University logo" src="https://docs.designsystem.mcgill.ca/svgs/logo.svg" width="200">
# 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](https://www.npmjs.com/package/@mcgill-wsg/mcgill-ds) for this repository creates [Composer](https://getcomposer.org) and [npm](https://npmjs.com) packages that distribute CSS (and related assets like fonts and logos) for use in any project. These assets are also published on [unpkg](https://unpkg.com/browse/@mcgill-wsg/mcgill-ds/) 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](./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](./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](https://www.ionicons.com).
#### Invision
The [McGill Invision app](https://mcgill.invisionapp.com/dsm/mc-gill-university/mc-gill-design-system)
is our designs teams tool to inform what is provided in McGill-DS. Invision
also has a handy
[inspect tool](https://mcgill.invisionapp.com/overview/McGill-DS-draft-ckea33gdj00ez01uqgjwy5wm7/screens)