Support Center & Knowledge base

Working locally

The repository lives on GitHub here. If you just want to work locally with it, clone it and follow the instructions below. If you’re looking to contribute, you should fork a copy for yourself. All contributions are then done through pull requests from your fork.

Getting started

This project is using Yarn workspaces. To get started you can simply run:

$ yarn

At the root of the project.

Global resources

Components from this library are to be considered as global resources available throughout an application consuming the component library. This means we need to register the components in the index.js file:

aurelia.globalResources(PLATFORM.moduleName('./pivotView/pivotView'), PLATFORM.moduleName('./pivotView/pivotView.html'));

Notice that you have to include the HTML file, if any. Typically this file will refer to the SCSS by requiring it.

Custom elements

Considerations related to creating custom elements can be found here. According to the HTML5 standard, a ‘-’ hyphen is required in the name of a custom element. Read more about it here.

The purpose of the control gallery is to enable a simple place to go to for reference on how to use a component. When working locally, it depends on the use of Yarn workspaces. For running the control gallery, just do the following from the folder called ControlGallery:

$ yarn start

This will start the Webpack DevServer and it will react to any changes, also those happening from the build.

The gallery is inspired by the official XAML Controls Gallery for Fluent Design System by Microsoft.

Building

Both for publishing and for working locally one needs to build on change. This can be done by doing:

$ yarn build

For VSCode users there is a default tasks.json file with a default build task. This means you can use the default keystroke for building (CMD+SHIFT+B on Mac, CTRL+SHIFT+B on Windows/Linux).