design-system-sass v1.15.0

design-system-sass

About

This design system is based off of Github's Primer design system, in terms of file structure and a base-8 spacing scale.

Install

npm install git+https://npm-install:3sA_EZq7E4Gr6fNxjuif@gitlab.digitalservices.syr.edu/web-development/design-system-sass.git

Build css

To install needed build tools

npm install

To run in developer mode

npm run dev

To build with compression

npm run build:compress

To build without compression

npm run build

Deploy

Create a new tag with a v ex: v1.1 this will deploy a new folder to the cdn and will be available at

https://fastly.cdn.digitalservices.syr.edu/dds/[TAG]/dds.min.css

Testing Updates

The DDS Documentation site repo has the design-system-sass installed as a git submodule. Test bug fixes or new css classes on the front end using the documentation site.

Development Process

1. Any new development should occur on the "develop" branch.
2. After making changes to develop, the package.json version number must be updated. Use the standard major, minor, bug fix, numbering convention.
3. Then push the changes, including the version number update to "production".
4. Create a new release in Gitlab. On the left sidebar under Repository, click "Tags", then in the top right click the "New Tag" button.
   1. In the Tag name field you will need to name the new version. The naming convention needs to be: vX.X.X.
   2. The Create from branch needs to be set to Master.
   3. Add release notes to the provided section.
5. Click the "Create tag" button. This will run the pipeline and will add a minified copy of the DDS to Minio. The minified file will be available at both https://fastly.cdn.syracuse.edu/dds/latest/dds.min.css and https://fastly.cdn.syracuse.edu/dds/vX.X.X/dds.min.css.
6. Once the pipeline has run, log into designsystem.syr.edu/admin and update the latest version number url in the documentation under Getting Started → Use Via CDN. Move the previous version under Archived Versions.

Adding new Icons

Follow the Answers Digital Design System instructions for how to add new icons to the icon library.