Power Xpert Blue is a complete design system for front-end development at Eaton. This system will help your team build beautiful applications that adhere to our design guidelines while ensuring flexibility and code reusability. Check out our Release Notes to see what's new in the latest version of PX Blue.
Power Xpert Blue is based on the Material Design language. If you are working with our Studio Blue design team, their designs will follow this standard. If you are not utilizing Studio Blue, ensure that your designers are following the Material Guidelines, best practices for your chosen Material component library, as well as any additional PX Blue design patterns, which can be seen on StackBlitz, e.g.:
- Login / User Registration
- Basic/Responsive Navigation
- Lists
- Toolbars
There are many open source component libraries that implement the Material Design system. In order to promote code reusability and consistency, we currently support application development with the following frameworks:
- Angular using Angular Material
- React with Material UI
- NativeScript + Angular
- React Native
- Apache Cordova (not Ionic)
PX Blue includes a number of open source resources to help expedite your development efforts. Most of these resources can be installed through npm:
- @pxblue/themes: theme definitions to apply to your chosen framework that will automatically apply the correct colors, typography, etc.
- @pxblue/colors: standard UI color palette definitions available in both JSON and SCSS format.
- @pxblue/colors-branding: supplemental color palette definitions for use in charting or other visuals.
- @pxblue/icons: icon font for all PX Blue supplemental icons.
- @pxblue/icons-mui: PX Blue icon components for use with Material UI.
- @pxblue/icons-svg: PX Blue supplemental icons in SVG format (and sprite sheet for Angular apps).
- @pxblue/ng-progress-icons: dynamic-fill icons to display progress/health/etc. (Angular).
- @pxblue/react-progress-icons: dynamic-fill icons to display progress/health/etc. (React).
- @pxblue/symbols: PX Blue 1.0 oneline symbols ported to PX Blue 2.0 in SVG format.
- @pxblue/symbols-mui: PX Blue 1.0 oneline symbols ported to PX Blue 2.0 as React components.
- @pxblue/mapbox: light and dark themes for Mapbox applications.
- @pxblue/highcharts: charting styles and helper functions for use with Highcharts.
Eaton employees can find our complete documentation at pxblue.etn.com. Most of this information can also be found distributed throughout our GitHub organization.
If you have any questions, comments, or feedback about getting started with PX Blue or how to use any of our resources, please contact us at pxblue@eaton.com.