Px-View is a Predix Experience ('Px') component
Read https://github.com/pages/PX/technical-principles/
From the component's directory...
$ npm install
$ bower install
$ grunt sass
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.
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.
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
}
}
}
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.
What is the public API of this component?
Documented CSS extension points?
See Polymer composition patterns