Google Git
Sign in
apache / nifi-fds / b4139c5fc3282b1603700b90e74feb856231ada7
commitb4139c5fc3282b1603700b90e74feb856231ada7[log] [tgz]
authorScott Aslan <scottyaslan@gmail.com>Thu Mar 22 15:11:46 2018 -0400
committerScott Aslan <scottyaslan@gmail.com>Thu Mar 22 15:11:46 2018 -0400
tree120018b0b2e292c2848853042bdb65ecf05cf65e
initial commit
56 files changed
tree: 120018b0b2e292c2848853042bdb65ecf05cf65e
  1. platform/
  2. .gitignore
  3. Gruntfile.js
  4. karma-test-shim.js
  5. karma.conf.js
  6. LICENSE
  7. package.json
  8. README.md
README.md

Fluid Design System (FDS)

The Fluid Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume. The demo web application to consumes the FDS NGModule and allows users to interact with the FDS components: https://scottyaslan.github.io/fluid-design-system/

The FDS will have custom components that enforce standards and best practices through built-in design patterns.

npm

For developers not interested in building the FDS NgModule you can use npm to install the distribution files.

npm install git://github.com/scottyaslan/fluid-design-system.git

Setup

Import the Fluid Design System NgModule into your angular application:

var fdsCore = require('fluid-design-system/core');
NfRegistryAppModule.prototype = {
    constructor: NfRegistryAppModule
};

NfRegistryAppModule.annotations = [
    new ngCore.NgModule({
        imports: [
            fdsCore,
    ...
  ],
  ...
})
...

Styles, Icons and Theming

A typical theme file will look something like this:

@import '../../platform/core/theming/all-theme';

$primaryColor: #9E737D;
$primaryColorHover: #915D69;
$accentColor: #d0dbe0;
$accentColorHover: #CCCCCC;

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core;

// Define the palettes
$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);

// Define the theme (Optionally specify a default, lighter, and darker hue.)
$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);

// FDS theme mixin
@include fds-theme($fds-theme);

FDS NiFi Registry UI/UX Platform comes with a base CSS file node_modules/fluid-design-system/core/common/styles/css/fluid-design-system.min.css (includes icons).

Building FDS

Developers can easily build FDS using npm.

First install or update your local project's npm tools:

npm install

Next run:

npm run build

Testing FDS

Developers can easily test FDS using npm.

npm test

Or, during development:

npm run test:dev

Release Managment

For developers with permissions releasing a new version of FDS is simple with grunt bump

Running the FDS demo locally

For developers that would like to contribute to the demo please checkout the gh-pages branch:

git checkout gh-pages

Next, you will need to update the base url. To do this simply edit the index.html file on line 21:

<base href='/fluid-design-system/'>

should be:

<base href='/'>

Finally, start the application:

npm start

The FDS demo application should now be availalbe at: http://127.0.0.1:8080/.