remove files and update README
Project: http://git-wip-us.apache.org/repos/asf/nifi-fds/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi-fds/commit/0856a5c8 Tree: http://git-wip-us.apache.org/repos/asf/nifi-fds/tree/0856a5c8 Diff: http://git-wip-us.apache.org/repos/asf/nifi-fds/diff/0856a5c8 Branch: refs/heads/gh-pages Commit: 0856a5c8c2c5fff58e3f436bf03ed0ddccd89e73 Parents: 877eecf Author: Scott Aslan <[email protected]> Authored: Tue Jun 5 17:41:59 2018 -0400 Committer: Scott Aslan <[email protected]> Committed: Tue Jun 5 17:41:59 2018 -0400 ---------------------------------------------------------------------- .gitignore | 1 + README.md | 13 ++++++++----- demo-app/index.html | 37 ------------------------------------- 3 files changed, 9 insertions(+), 42 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/0856a5c8/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index 45ff9c3..ef34551 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules/jasmine* node_modules/webdriver* .github/ demo-app/gh-pages* +demo-app/index.html scripts/ src/ test/ http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/0856a5c8/README.md ---------------------------------------------------------------------- diff --git a/README.md b/README.md index 6ddaea3..0d609e6 100644 --- a/README.md +++ b/README.md @@ -56,12 +56,14 @@ AppModule.annotations = [ ... ``` -#### Theming -The Apache NiFi Flow Design System provides a themeable UI/UX component platform. To customize the core FDS components create a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this: +#### Style and Theming +The Apache NiFi Flow Design System comes with a base CSS file `node_modules/@nifi-fds/core/common/styles/css/flow-design-system.min.css` (includes icons). This file must be included in the head of the HTML document before the theme file. + + +NiFi FDS is also a themeable UI/UX component platform. To customize the core FDS components create a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this: ```javascript @import '../../node_modules/@nifi-fds/core/common/styles/globalVars'; -@import '../../node_modules/@nifi-fds/core/common/styles/flow-design-system'; @import '../../node_modules/@nifi-fds/core/theming/all-theme'; //Change these @@ -89,10 +91,11 @@ $fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn); @include fds-theme($fds-theme); ``` -You don't have to use Sass to style the rest of your application but you will need to compile this one. Angular CLI, grunt-sass, gulp-sass, and node-sass are all great options; the output of which will be a CSS file that must be included in the head of the HTML document: +You don't have to use Sass to style the rest of your application but you will need to compile this one. Angular CLI, grunt-sass, gulp-sass, and node-sass are all great options; the output of which will be a CSS file that must be included in the head of the HTML document after the base NiFi FDS CSS styles: ```javascript -<link rel="stylesheet" href='node_modules/@nifi-fds/core/common/styles/css/fds-demo.min.css'/> +<link rel="stylesheet" href='node_modules/@nifi-fds/core/common/styles/css/flow-design-system.min.css'/> +<link rel="stylesheet" href='demo-app/css/fds-demo.min.css'/> ``` NOTE: The theme file may be concatenated and minified with the rest of the application's CSS. http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/0856a5c8/demo-app/index.html ---------------------------------------------------------------------- diff --git a/demo-app/index.html b/demo-app/index.html deleted file mode 100644 index ce269ea..0000000 --- a/demo-app/index.html +++ /dev/null @@ -1,37 +0,0 @@ -<!-- - Licensed to the Apache Software Foundation (ASF) under one or more - contributor license agreements. See the NOTICE file distributed with - this work for additional information regarding copyright ownership. - The ASF licenses this file to You under the Apache License, Version 2.0 - (the 'License'); you may not use this file except in compliance with - the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an 'AS IS' BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. ---> -<!DOCTYPE html> -<html> -<head> - <title>Apache NiFi Flow Design System Demo</title> - <base href='/'> - <meta charset='UTF-8'> - <meta name='viewport' content='width=device-width, initial-scale=1'> - <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> - <link rel="stylesheet" href="node_modules/@covalent/core/common/platform.css"> - <link rel="stylesheet" href='demo-app/css/fds-demo.min.css'/> - <link rel='stylesheet' href='node_modules/font-awesome/css/font-awesome.css'/> -</head> -<body> -<fds-app></fds-app> -</body> -<script src="node_modules/systemjs/dist/system.src.js"></script> -<script src="demo-app/systemjs.config.js?"></script> -<script> - System.import('demo-app/fds-bootstrap.js').catch(function (err) { - console.error(err); - }); -</script> -</html>
