Skip to content

prelim code review #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: refresh_guidelines_and_documentation
Choose a base branch
from
Open

prelim code review #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"px-demo-design": "^1.2.0",
"px-helpers-design": "^0.3.20",
"px-demo": "^1.5.10",
"px-toggle": "^1.0.5"
"px-toggle": "^1.0.5",
"px-tables-design": "^1.1.0"
}
}
2 changes: 1 addition & 1 deletion css/predix-ui-styles.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added img/browser_support.webp
View file
Open in desktop
Binary file not shown.
Binary file added img/data-table.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/data-table.webp
View file
Open in desktop
Binary file not shown.
Binary file modified img/px_logo.webp
View file
Open in desktop
Binary file not shown.
Binary file added img/sketch_logo.webp
View file
Open in desktop
Binary file not shown.
Binary file added img/sketch_logo2.webp
View file
Open in desktop
Binary file not shown.
Binary file added img/web_components.webp
View file
Open in desktop
Binary file not shown.
173 changes: 99 additions & 74 deletions pages/about/what-is-predix-ui.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,100 @@
<!DOCTYPE html>
<html lang="en" class="embedded">
<head>
<title>Predix UI</title>
<meta charset="utf-8" />
<meta name="description" content="Predix UI (IoT PaaS) helps you develop apps that connect people

<head>
<title>Predix UI</title>
<meta charset="utf-8" />
<meta name="description" content="Predix UI (IoT PaaS) helps you develop apps that connect people
with industrial machines through analytics and data for better business outcomes." />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="shortcut icon" href="../../favicon.ico" />
<link rel="import" href="../../css/predix-ui-styles.html"/>
<link rel="import" href="../../bower_components/px-theme/px-theme-styles.html">
<link rel="import" href="../../bower_components/px-polymer-font-awesome/px-polymer-font-awesome.html" />
<link rel="import" href="../../bower_components/px-clipboard/px-clipboard.html">
<link rel="import" href="../../bower_components/px-demo/px-demo-footer.html" />

</head>
<body unresolved class="body">
<!-- Include the style modules in body to ensure they come after their imported code (which will be inlined at the end of <head> by vulcanize in production) -->
<style include="predix-ui-styles" is="custom-style"></style>
<style include="px-theme-styles" is="custom-style"></style>

<section class="main u-mb++">
<h2 class="selected">About the Predix Design System</h2>
<p>The Predix Design System makes it easy to create powerful, user-friendly web applications with components built to withstand the demand of industrial use cases. The system is made up of three parts:</p>

<ul>
<li class="u-mv--">plug-and-play <strong>Predix UI Components</strong> that speed UI/UX development</li>
<li class="u-mv--">composable and reusable <strong>CSS modules</strong> that establish consistent design</li>
<li class="u-mv--">extensive <strong>stencils and guidelines</strong> to guide your application design</li>

</ul>

<p>Used together, these tools help teams jumpstart the creation of Industrial Internet web applications running on top of <a href="http://www.predix.com" target="_blank">Predix services</a> and data.</p>

<p><b>Supported browsers:</b></p>
<ul>
<li class="u-mv--">MacOS: Last two versions of Chrome, Safari & Firefox</li>
<li class="u-mv--">Windows: Last two versions of Edge, Firefox, Chrome on Windows + IE11</li>
<li class="u-mv--">Android: last two versions of Chrome (Android)</li>
<li class="u-mv--">iOS: last two versions of Safari</li>
</ul>
<hr/>
<h4>Predix UI Components</h4>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="shortcut icon" href="../../favicon.ico" />
<link rel="import" href="../../css/predix-ui-styles.html" />
<link rel="import" href="../../bower_components/px-theme/px-theme-styles.html">
<link rel="import" href="../../bower_components/px-polymer-font-awesome/px-polymer-font-awesome.html" />
<link rel="import" href="../../bower_components/px-clipboard/px-clipboard.html">
<link rel="import" href="../../bower_components/px-demo/px-demo-footer.html" />

</head>

<body unresolved class="body">
<!-- Include the style modules in body to ensure they come after their imported code (which will be inlined at the end of <head> by vulcanize in production) -->
<style include="predix-ui-styles" is="custom-style"></style>
<style include="px-theme-styles" is="custom-style"></style>

<section class="main u-mb++">
<h2 class="selected">About the Predix Design System</h2>
<p>The Predix Design System makes it easy to create powerful, user-friendly web applications with components built to withstand
the demand of industrial use cases. The system is made up of three parts:</p>

<ul>
<li class="u-mv--">plug-and-play <strong>Predix UI Components</strong> that speed UI/UX development</li>
<li class="u-mv--">composable and reusable <strong>CSS modules</strong> that establish consistent design</li>
<li class="u-mv--">extensive <strong>stencils and guidelines</strong> to guide your application design</li>

</ul>

<p>Used together, these tools help teams jumpstart the creation of Industrial Internet web applications running on top of
<a href="http://www.predix.com" target="_blank">Predix services</a> and data.</p>

<p><b>Supported browsers:</b></p>
<ul>
<li class="u-mv--">MacOS: last two versions of Chrome, Safari & Firefox</li>
<li class="u-mv--">Windows: last two versions of Edge, Firefox, Chrome on Windows + IE11</li>
<li class="u-mv--">Android: last two versions of Chrome</li>
<li class="u-mv--">iOS: last two versions of Safari</li>
</ul>
<hr/>
<h4>Predix UI Components</h4>
<picture>
<source srcset="../../img/polymer_logo.webp" type="image/webp">
<source srcset="../../img/polymer_logo.jpg" type="image/jpeg">
<img class="tech-logo" src="../../img/polymer_logo.jpg" alt="Polymer Logo">
<p>Predix UI Components are a set of user interface building blocks based on the <a href="https://www.w3.org/standards/techs/components#w3c_all" target="_blank">W3C web components standard</a> that can be quickly assembled together to build an application. Components are available for a wide range UI elements such as drop down menus, data tables and tabs as well more specialized D3-based data visualization charting components designed specifically for industrial internet use cases.</p>



<p>The components are framework agnostic and can fit into many existing JavaScript web applications such as Angular, React or Ember. <a href="https://www.polymer-project.org" target="_blank">Google's Polymer</a> provides innovative "syntactic sugar" and polyfill libraries for practical adoption of modern web components. Polymer helps build web applications with custom, encapsulated, reusable components that work just like HTML elements.</p>


<!-- <p>Our team tests and explicitly guarantees support for the last two major releases of Chrome, Firefox, Safari, and Edge (including IE11). With the webcomponentsjs polyfills, our components are very likely to work in older releases too.</p> //-->


<hr/>

<h4>CSS Modules</h4>
<img class="tech-logo" src="../../img/inuit.png" alt="Inuit CSS">

<p>The second part of the Design System is a set of CSS modules written in Sass using the powerful BEM (Block-Element-Modifier) and OOCSS (Object-Oriented CSS) code patterns, ensuring your CSS codebase can grow quickly and still be easy to maintain.</p>
<p>Components consume the CSS, but you can also choose to use the CSS independently to create the base typography, layout, and content design of your application. <a target="_blank" href="https://github.com/predixdev/px-getting-started/">The CSS starter kit</a> has everything you need to get going.</p>
<hr/>

<h4>UI Stencils &amp Design Guidelines</h4>
<img class="tech-logo" src="../../img/sketch_logo2.png" alt="Sketch Logo">
<p>Finally, the Design Starter Kit combined with the design guidelines provide the tools to start the design process off in the right direction. The Starter Kit is a Sketch file that contains the most common layouts and components and themes in a flexible, ready to use format. The guidelines are documented best practices and assist designers and developers in making key decisions about an applications design.</p>

<hr/>

<!--
</picture>
<p>Predix UI Components are a set of user interface building blocks based on the <a href="https://www.w3.org/standards/techs/components#w3c_all"
target="_blank">W3C web components standard</a> that can be quickly assembled together to build an application. Components
are available for a wide range UI elements such as drop down menus, data tables and tabs as well more specialized D3-based
data visualization charting components designed specifically for industrial internet use cases.</p>
<p>The components are framework agnostic and can fit into many existing JavaScript web applications such as Angular, React
or Ember. <a href="https://www.polymer-project.org" target="_blank">Google's Polymer</a> provides innovative "syntactic
sugar" and polyfill libraries for practical adoption of modern web components. Polymer helps build web applications
with custom, encapsulated, reusable components that work just like HTML elements.</p>


<!-- <p>Our team tests and explicitly guarantees support for the last two major releases of Chrome, Firefox, Safari, and Edge (including IE11). With the webcomponentsjs polyfills, our components are very likely to work in older releases too.</p> //-->


<hr/>

<h4>CSS Modules</h4>
<picture>
<source srcset="../../img/inuit.webp" type="image/webp">
<source srcset="../../img/inuit.png" type="image/jpeg">
<img class="tech-logo" src="../../img/inuit.png" alt="Inuit CSS">
</picture>

<p>The second part of the Design System is a set of CSS modules written in Sass using the powerful BEM (Block-Element-Modifier)
and OOCSS (Object-Oriented CSS) code patterns, ensuring your CSS codebase can grow quickly and still be easy to maintain.</p>
<p>Components consume the CSS, but you can also choose to use the CSS independently to create the base typography, layout,
and content design of your application. <a target="_blank" href="https://github.com/predixdev/px-getting-started/">The CSS starter kit</a> has everything you need to get going.</p>
<hr/>

<h4>UI Stencils &amp Design Guidelines</h4>
<picture>
<source srcset="../../img/sketch_logo2.webp" type="image/webp">
<source srcset="../../img/sketch_logo2.png" type="image/jpeg">
<img class="tech-logo" src="../../img/sketch_logo2.png" alt="Sketch Logo">
</picture>
<p>Finally, the Design Starter Kit combined with the design guidelines provide the tools to start the design process off
in the right direction. The Starter Kit is a Sketch file that contains the most common layouts and components and themes
in a flexible, ready to use format. The guidelines are documented best practices and assist designers and developers
in making key decisions about an applications design.</p>

<hr/>

<!--

<h4>Build from scratch or use in an existing app. It's your choice.</h4>

Expand All @@ -80,11 +104,12 @@ <h4>Build from scratch or use in an existing app. It's your choice.</h4>
<p>Developers have used the Predix Design System to save thousands of hours developing the UI base in huge Angular codebases. Some are using components inside React applications. Others have used the Web App Starter to build simple applications using just Polymer and vanilla JavaScript.</p>

<p><b>To start using Predix UI Components in your applications see the <a target="_blank" href="https://www.predix-ui.com/#/guides/getting-started/">components quick start guide.</a></b></p>

//-->
</section>
</section>

<!-- Footer -->
<px-demo-footer></px-demo-footer>
</body>

<!-- Footer -->
<px-demo-footer></px-demo-footer>
</body>
</html>
65 changes: 34 additions & 31 deletions pages/guidelines/data-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
<!DOCTYPE html>
<html lang="en" class="embedded">
<head>
<title>Predix Design System</title>
<meta charset="utf-8" />
<meta name="description" content="Predix UI (IoT PaaS) helps you develop apps that connect people

<head>
<title>Predix Design System</title>
<meta charset="utf-8" />
<meta name="description" content="Predix UI (IoT PaaS) helps you develop apps that connect people
with industrial machines through analytics and data for better business outcomes." />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="shortcut icon" href="../../favicon.ico" />
<link rel="import" href="../../css/predix-ui-styles.html"/>
<link rel="import" href="../../bower_components/px-theme/px-theme-styles.html">
<link rel="import" href="../../bower_components/px-polymer-font-awesome/px-polymer-font-awesome.html" />
<link rel="import" href="../../bower_components/px-clipboard/px-clipboard.html">
<link rel="import" href="../../elements/px-catalog-footer/px-catalog-footer.html" />

</head>
<body class="body">
<!-- Include the style modules in body to ensure they come after their imported code (which will be inlined at the end of <head> by vulcanize in production) -->
<style include="predix-ui-styles" is="custom-style"></style>
<style include="px-theme-styles" is="custom-style"></style>

<section class="main u-mb++">
<h2 class="selected">Data Input</h2>
<p></p>


</section>

<!-- Footer -->
<px-catalog-footer></px-catalog-footer>
</body>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="shortcut icon" href="../../favicon.ico" />
<link rel="import" href="../../css/predix-ui-styles.html" />
<link rel="import" href="../../bower_components/px-theme/px-theme-styles.html">
<link rel="import" href="../../bower_components/px-polymer-font-awesome/px-polymer-font-awesome.html" />
<link rel="import" href="../../bower_components/px-clipboard/px-clipboard.html">
<link rel="import" href="../../bower_components/px-demo/px-demo-footer.html" />

</head>

<body class="body">
<!-- Include the style modules in body to ensure they come after their imported code (which will be inlined at the end of <head> by vulcanize in production) -->
<style include="predix-ui-styles" is="custom-style"></style>
<style include="px-theme-styles" is="custom-style"></style>

<section class="main u-mb++">
<h2 class="selected">Data Input</h2>
<p></p>


</section>

<!-- Footer -->
<px-demo-footer></px-demo-footer>
</body>

</html>
Loading