ssv-au-ui

UI components library for Aurelia by Sketch7.

NOTE: This project is under development and is not intended for general production use yet.

Quick links

Change logs | Project Repository

Installation

Get library via npm

npm install @ssv/au-ui --save
# install peers
npm install normalize-scss node-waves @ssv/core @ssv/au-core aurelia-dependency-injection aurelia-logging --save

Setup Plugin

Register au-ui plugin with optional global configuration and bootstrap.

import { UiConfig, UiBootstrapper, buttonType } from "@ssv/au-ui";
const uiConfig: UiConfig = {
    button: { type: buttonType.raised }
};
// register plugin with aurelia + configure
aurelia.use.plugin("@ssv/au-ui", uiConfig);
aurelia.start().then(() => {
    // invoke bootstrapper to initialize
    const uiBootstrapper = aurelia.container.get(UiBootstrapper) as UiBootstrapper;
    uiBootstrapper.init();
});

Styling

Register sass includePaths with the following naming.

"./node_modules/@ssv/au-ui/dist/sass",
"./node_modules/normalize-scss/sass",
"./node_modules/node-waves/src/scss",

Configure and import sass.

// configure/override
$ssv-primary-color: red;
// import all (vendors, core and components)
@import "@ssv/au-ui/all";
// import only vendors
@import "@ssv/au-ui/vendors";
// import only core
@import "@ssv/au-ui/core";
// import only components
@import "@ssv/au-ui/components";

Import fonts

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">

Features

Value Converters

Getting Started

Setup Machine for Development

Install/setup the following:

• NodeJS v8+
• Visual Studio Code or similar code editor
• TypeScript 2.5+
• Git + SourceTree, SmartGit or similar (optional)
• Ensure to install global NPM modules using the following:

npm install -g git gulp yarn

Cloning Repo

• Run git clone https://github.com/sketch7/ssv-au-ui.git
• Switch to develop branch

Project Setup

The following process need to be executed in order to get started.

npm install

Building the code

gulp build
// or
npm run build

In order to view all other tasks invoke gulp or check the gulp tasks directly.

Running the tests

gulp test
// or
npm test

Development utils

Trigger gulp watch

Handles compiling of changes.

gulp watch
// or
npm start

Running Continuous Tests

Spawns test runner and keep watching for changes.

gulp tdd
// or
npm run tdd

Preparation for Release

gulp prepare-release --bump major|minor|patch|prerelease (default: patch)

Check out the release workflow guide in order to guide you creating a release and publishing it.

Library Size

Will be adding library file sizes once it will be completed.