Skip to content

PredixDev/px-view

Repository files navigation

Px-View

Overview

Px-View is a Predix Experience ('Px') component

Getting Started

Read https://github.com/pages/PX/technical-principles/

From the component's directory...

$ npm install
$ bower install
$ grunt sass

API and examples

From the component's directory

$ grunt depserve

Starts a local server. Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.

LiveReload

By default grunt depserve is configured to enable LiveReload and will be watching for modifications in your root directory as well as /css.

Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to livereload.com/extensions/.

Add, remove, modify file system patterns specified in the depserve.options.livereload array in your Gruntfile.js

This is an example depserve configuration:

depserve: {
    options: {
        open: '<%= depserveOpenUrl %>,
        livereload: [__dirname   "/js", __dirname   "/css", __dirname]
    }
}

Disable LiveReload by removing the livereload key from the configuration object.

DevMode

From the component's directory run:

$ grunt devmode

Starts a local server exactly the same as if you had run grunt depserve however in addition it also runs grunt watch concurrently which will execute commands on file change according to the specified matching patterns.

This is an example grunt watch configuration which watches for changes to SASS files, then on changes executes SASS compilation and automatic prefixing:

watch: {
    sass: {
        files: ['sass/**/*.scss'],
        tasks: ['sass', 'autoprefixer'],
        options: {
            interrupt: true
        }
    }
}

Options

Does this component have runtime configuration options? If so, they should be able to be passed as attributes on the element with examples shown below.

Function calls

What is the public API of this component?

Extending styles

Documented CSS extension points?

Extending behavior

See Polymer composition patterns

GE Coding Style Guide

GE JS Developer's Guide

Known Issues