├── sass ├── index.scss ├── px-layout-sketch.scss ├── _variables.scss ├── _mixins.scss ├── l-tabs-to-columns.scss ├── l-offcanvas.scss ├── l-splitview.scss ├── px-layout-demo.scss ├── px-layout.scss ├── l-progressive.scss └── px-layout-predix.scss ├── .bowerrc ├── index.scss ├── deploy.enc ├── demo ├── images │ ├── me.jpg │ ├── layout-lg.png │ ├── layout-md.png │ └── layout-sm.png ├── elements.html ├── scripts │ └── ghp.sh ├── template-login.html ├── template-header-layout.html ├── template-full.html ├── template-offcanvas.html ├── test-drive.html ├── template-content-mini-sidebar.html ├── progressive.html ├── template-content-sidebar.html ├── template-tabs-to-sidebar.html ├── template-charts-layout.html ├── demo.css ├── template-drawer-header-layout.html ├── template-basic.html ├── DemoBreadcrumbView.html ├── template-detail-sidebar.html ├── template-google-example.html ├── template-cards.html ├── template-predixio.html ├── template-tabs-to-columns.html ├── template-detail.html ├── template-dashboard.html ├── template-detail-turbine.html ├── template-vanilla-seed-layout.html ├── template-splitview.html └── template-detail-asset.html ├── .gitignore ├── .editorconfig ├── .jshintrc ├── index.html ├── docs.html ├── HISTORY.md ├── px-layout.html ├── px-layout ├── px-layout-item.html └── px-layout-behavior.html ├── wct.conf.json ├── test ├── px-layout-custom-tests.js └── px-layout-test-fixture.html ├── px-layout-partials.html ├── package.json ├── px-header-layout ├── demo.html └── px-header-layout.html ├── px-media-query ├── demo.html └── px-media-query.html ├── README.md ├── bower.json ├── .travis.yml ├── px-drawer-layout └── demo.html ├── Gruntfile.js ├── gulpfile.js ├── test.html └── scripts └── ghp.sh /sass/index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "strict-ssl": false 3 | } 4 | -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | @import "./sass/px-responsive-layouts-sketch.scss"; 2 | -------------------------------------------------------------------------------- /deploy.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-layout/HEAD/deploy.enc -------------------------------------------------------------------------------- /demo/images/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-layout/HEAD/demo/images/me.jpg -------------------------------------------------------------------------------- /demo/images/layout-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-layout/HEAD/demo/images/layout-lg.png -------------------------------------------------------------------------------- /demo/images/layout-md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-layout/HEAD/demo/images/layout-md.png -------------------------------------------------------------------------------- /demo/images/layout-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-layout/HEAD/demo/images/layout-sm.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | .tmp 4 | .idea 5 | coverage 6 | reports 7 | test-target 8 | 9 | jspm_packages 10 | docs 11 | -------------------------------------------------------------------------------- /sass/px-layout-sketch.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016 GE Global Research. All rights reserved. 3 | * 4 | * The copyright to the computer software herein is the property of 5 | * GE Global Research. The software may be used and/or copied only 6 | * with the written permission of GE Global Research or in accordance 7 | * with the terms and conditions stipulated in the agreement/contract 8 | * under which the software has been supplied. 9 | */ 10 | 11 | 12 | @import 'px-layout-predix.scss'; 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "undef": true, 15 | "unused": true, 16 | "globals": { 17 | "px": true, 18 | "wrap": true, 19 | "unwrap": true, 20 | "Polymer": true, 21 | "Platform": true, 22 | "page": true, 23 | "app": true 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | px-layout 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | px-responsive-layouts 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | v0.2.2 2 | ================== 3 | * changing ghp.sh to account for Alpha releases 4 | 5 | v0.2.1 6 | ================== 7 | * Update missed design depndencies 8 | 9 | v0.2.0 10 | ================== 11 | * Updated dependencies 12 | 13 | v0.1.3 14 | ================== 15 | * changing browser in wct testing from safari 8 to safari 10 on elcapitan 16 | 17 | v0.1.2 18 | ================== 19 | * changing all devDeps to ^ 20 | 21 | v0.1.1 22 | ================== 23 | * Update px-theme to 2.0.1 and update test fixtures 24 | 25 | v0.0.1 26 | ================== 27 | * Initial release 28 | -------------------------------------------------------------------------------- /px-layout.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 26 | -------------------------------------------------------------------------------- /px-layout/px-layout-item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 32 | 33 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "px-colors-design/_settings.colors.scss"; 2 | 3 | $layout-min-height : 99vh; 4 | 5 | $inuit-widths-columns-responsive: ( 1, 2, 3, 4, 6); 6 | $inuit-responsive-settings : true; 7 | $inuit-enable-margins--none : true; 8 | $inuit-enable-code--inline : true; 9 | $inuit-enable-responsive-margins: true; 10 | $inuit-enable-margins : true; 11 | $inuit-enable-paddings : true; 12 | $inuit-use-fractions : true; 13 | 14 | $grid-breakpoints: ( 15 | xs: calculateRem(round(330px)), 16 | sm: calculateRem(round(480px)), 17 | md: calculateRem(round(768px)), 18 | lg: calculateRem(round(992px)), 19 | xl: calculateRem(round(1200px)) 20 | ); 21 | /* 22 | 360px => 22.5em 23 | 460px => 28.75em 24 | 736px => 46em 25 | 768px => 48em 26 | 1024px => 64em 27 | 1080px => 67.5em 28 | 1200px => 29 | 1280px => 80em 30 | 31 | palm = 44.9375em 32 | lap-and-up = 45em 33 | lap = 45em - 63.9375em 34 | portable = 63.9375em 35 | desk <=64em 36 | retina = 37 | 38 | 39 | */ 40 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": true, 3 | "testTimeout": 300000, 4 | "plugins": { 5 | "local": { 6 | "browsers": [ 7 | "chrome" 8 | ] 9 | }, 10 | "sauce": { 11 | "name": "px-layout", 12 | "disabled": true, 13 | "browsers": [ 14 | "Windows 8.1/internet explorer", 15 | "OS X 10.10/chrome", 16 | "OS X 10.10/firefox", 17 | "OS X 10.10/safari", 18 | { 19 | "browserName": "firefox", 20 | "platform": "OS X 10.11" 21 | } 22 | ] 23 | }, 24 | "istanbul": { 25 | "dir": "./coverage", 26 | "reporters": [ 27 | "text-summary", 28 | "lcov" 29 | ], 30 | "include": [ 31 | "/px-drawer-layout/px-*.html", 32 | "/px-media-query/px-*.html", 33 | "/px-header-layout/px-*.html", 34 | "/px-layout/px-*.html", 35 | "/px-*.html" 36 | ], 37 | "exclude": [] 38 | } 39 | }, 40 | "suites": [ 41 | "test/px-layout-test-fixture.html" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /demo/elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /test/px-layout-custom-tests.js: -------------------------------------------------------------------------------- 1 | /* global assert, suite, test*/ 2 | // This is the wrapper for custom tests, called upon web components ready state 3 | function runCustomTests() { 4 | 5 | suite('', function () { 6 | var element = document.getElementById('fixture'); 7 | test('renders', function () { 8 | assert.ok(element); 9 | }); 10 | 11 | 12 | 13 | suite('', function () { 14 | var element = document.getElementById('px_layout_1'); 15 | test('renders', function () { 16 | assert.ok(element); 17 | }); 18 | test('has reference to px-drawer', function () { 19 | assert.ok(element.drawer); 20 | }); 21 | 22 | test('element is [drawer-toggle] when tapped toggles px-drawer', function () { 23 | assert.ok(element.drawer); 24 | }); 25 | }); 26 | 27 | 28 | suite('', function () { 29 | var element = document.getElementById('px_layout_2'); 30 | 31 | test('renders', function () { 32 | assert.ok(element); 33 | }); 34 | 35 | test('has reference to px-header', function () { 36 | assert.ok(element.header); 37 | }); 38 | 39 | test('has reference to px-footer', function () { 40 | assert.ok(element.footer); 41 | }); 42 | }); 43 | 44 | 45 | }); 46 | } 47 | -------------------------------------------------------------------------------- /px-layout-partials.html: -------------------------------------------------------------------------------- 1 | 12 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "px-layout", 3 | "version": "0.2.3", 4 | "description": "A px mobile web component.", 5 | "keywords": [ 6 | "px", 7 | "px-mobile" 8 | ], 9 | "license": "ISC", 10 | "author": "Jonnie Spratley", 11 | "devDependencies": { 12 | "bower": "*", 13 | "coveralls": "^2.11.9", 14 | "grunt": "~v0.4.5", 15 | "grunt-autoprefixer": "^3.0.3", 16 | "grunt-concurrent": "^2.0.1", 17 | "grunt-contrib-clean": "~v0.6.0", 18 | "grunt-contrib-cssmin": "^1.0.1", 19 | "grunt-contrib-jshint": "~v0.10.0", 20 | "grunt-contrib-watch": "~v0.6.1", 21 | "grunt-dep-serve": "git+https://github.com/GeneralElectric/grunt-dep-serve.git#master", 22 | "grunt-gh-pages": "^1.1.0", 23 | "grunt-sass": "^v1.0.0", 24 | "grunt-shell": "~v1.1.1", 25 | "gulp": "^3.9.1", 26 | "gulp-autoprefixer": "^3.1.0", 27 | "gulp-clean": "^0.3.2", 28 | "gulp-concat": "^2.6.0", 29 | "gulp-cssmin": "^0.1.7", 30 | "gulp-load-plugins": "^1.2.0", 31 | "gulp-rename": "^1.2.2", 32 | "gulp-sass": "^2.2.0", 33 | "gulp-sequence": "^0.4.5", 34 | "gulp-size": "^2.1.0", 35 | "gulp-sourcemaps": "^1.6.0", 36 | "gulp-style-modules": "^0.1.0", 37 | "gulp-vulcanize": "^6.1.0", 38 | "node-sass-import-once": "^1.2.0", 39 | "polybuild": "^1.1.0", 40 | "polymer-css-compiler": "git+https://github.com/jonniespratley/polymer-css-compiler.git", 41 | "sassdoc": "^2.1.20", 42 | "web-component-tester": "4.2.2", 43 | "web-component-tester-istanbul": "https://github.com/t2ym/web-component-tester-istanbul/tarball/0.10.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /demo/scripts/ghp.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit with nonzero exit code if anything fails 4 | set -e 5 | 6 | 7 | #set our source and traget branches 8 | SOURCE_BRANCH="master" 9 | TARGET_BRANCH="gh-pages" 10 | REPO=`git config remote.origin.url` 11 | 12 | #pull requests and commits to other branches shouldn't try to deploy 13 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then 14 | echo "Skipping deploy; just doing a build." 15 | exit 0 16 | fi 17 | 18 | #create a temp directory that will store the bower.json file 19 | mkdir tmp_bower 20 | 21 | #clone this repo, and go into that folder. 22 | git clone ${REPO} ghp_tmp 23 | cd ghp_tmp 24 | 25 | #find out our repo name from the bower file 26 | REPO_NAME=$(grep "name" bower.json | sed 's/"name": "//' | sed 's/",//') 27 | echo "repo name is ${REPO_NAME}" 28 | 29 | #set up our variables and configs 30 | git config user.name "Travis CI" 31 | git config user.email "PredixtravisCI@ge.com" 32 | 33 | SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:} 34 | 35 | #copy the bower.json file out of the directory to a temp one 36 | cp bower.json ../tmp_bower/bower.json 37 | #and checkout gh-pages - create it if it doesn't exist. 38 | git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH 39 | #copy the bower.json file from our temp directory into the current one, overriding it, and passing a yes in there's a prompt 40 | yes | cp ../tmp_bower/bower.json bower.json 41 | 42 | #install your new tag through bower, it will fail without forcing it. 43 | bower install ${REPO_NAME} --force 44 | 45 | #do the git stuff 46 | git add . 47 | git commit -m "rebuild github pages" 48 | eval `ssh-agent -s` 49 | #and cahnge permissions 50 | chmod 0400 $TRAVIS_BUILD_DIR/deploy_key 51 | ssh-add $TRAVIS_BUILD_DIR/deploy_key 52 | #Now that we're all set up, we can push. 53 | git push $SSH_REPO $TARGET_BRANCH 54 | -------------------------------------------------------------------------------- /sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import "px-mobile-design/sass/_mixins.scss"; 3 | 4 | /// Scrollable solution 5 | /// @group px-table-view 6 | @mixin scrollable() { 7 | // overflow-y : scroll; 8 | overflow-y : auto; 9 | -webkit-overflow-scrolling: touch; 10 | @content; 11 | } 12 | @mixin responsive-visibility-utils($bps:$breakpoints) { 13 | @content; 14 | 15 | /// Visibility utilities 16 | .invisible { 17 | visibility: hidden !important; 18 | } 19 | ///Responsive visibility utilities 20 | @each $bp in map-keys($bps) { 21 | .hidden-#{$bp}-up { 22 | @include media-breakpoint-up($bp) { 23 | display: none !important; 24 | } 25 | } 26 | .hidden-#{$bp}-down { 27 | @include media-breakpoint-down($bp) { 28 | display: none !important; 29 | } 30 | } 31 | } 32 | } 33 | 34 | 35 | 36 | @mixin full-height(){ 37 | height: 100%; 38 | min-height:100vh; 39 | @content; 40 | } 41 | 42 | 43 | ///------------------------------------------------------ 44 | /// Mixin to make list turn into columns on larger screen. 45 | @mixin n-columns($min-width, $gutter, $last-equal: false, $max-cols: 6) { 46 | display : flex; 47 | flex-wrap : wrap; 48 | flex-direction: row; 49 | margin-left: -$gutter; 50 | margin-top : -$gutter; 51 | 52 | > *{ 53 | flex : 1 0 $min-width; 54 | margin-left: $gutter; 55 | margin-top : $gutter; 56 | @if $last-equal { 57 | @for $i from 2 through $max-cols{ 58 | $screen-width: ($min-width*$i)+($gutter*$i); 59 | $column-width: (100%/$i); 60 | @media (min-width: $screen-width) { 61 | max-width: calc(#{$column-width} - #{$gutter}); 62 | } 63 | } 64 | $column-width: (100%/$max-cols); 65 | @media (min-width: $min-width*$max-cols) { 66 | min-width: calc(#{$column-width} - #{$gutter}); 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /sass/l-tabs-to-columns.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'mixins'; 3 | ///------------------------------------ 4 | .box-section { 5 | .border-right{ 6 | border-right: 1px solid $gray5; 7 | } 8 | .border-left{ 9 | border-right: 1px solid $gray5; 10 | } 11 | &--tabs-to-columns { 12 | .tabs, 13 | .tabs-container__nav { 14 | display: flex; 15 | flex-direction: row; 16 | align-items: stretch; 17 | 18 | ///------------------------------------ 19 | ///Hide tabs on desktop 20 | @include media-breakpoint-up(lg) { 21 | display: none !important; 22 | // height: 125px; 23 | } 24 | a, 25 | .tab-title { 26 | border-bottom: 1px solid $gray5; 27 | color: $black; 28 | text-decoration: none; 29 | white-space: nowrap; 30 | text-transform: uppercase; 31 | box-sizing: border-box; 32 | flex: 1; 33 | display: inline-block; 34 | padding: 1em; 35 | text-align: center; 36 | &.active { 37 | border-bottom: 1px solid $select-blue-default; 38 | color: $select-blue-default; 39 | font-weight: bold; 40 | } 41 | } 42 | } 43 | .box-section__columns-wrapper { 44 | min-height: 50vh; 45 | //border: 1px solid red; 46 | //margin-top: 3rem; 47 | ///------------------------------------ 48 | ///One section on tablet 49 | @include media-breakpoint-down(lg) { 50 | margin-top: 0; 51 | //width: 100%; 52 | overflow: hidden; 53 | } 54 | ///------------------------------------ 55 | .box-section__columns { 56 | display: flex; 57 | align-items: stretch; 58 | justify-content: space-around; 59 | ///------------------------------------ 60 | @include media-breakpoint-down(lg) { 61 | //width: 300%; 62 | } 63 | .box-section__column { 64 | box-sizing: border-box; 65 | flex: 1; 66 | order: 1; 67 | &.active { 68 | order: 1; 69 | flex: 2; 70 | } 71 | &:not(.active) { 72 | @include media-breakpoint-down(lg) { 73 | order: 3; 74 | display: none; 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /px-header-layout/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-header-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 48 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /demo/template-login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-login 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /px-media-query/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | px-media-query demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 | 26 | 27 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /sass/l-offcanvas.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins'; 2 | @import 'variables'; 3 | /*================================= Off Canvas ================================*/ 4 | .l-offcanvas { 5 | min-height : $layout-min-height; 6 | display : flex; 7 | flex-direction: row; 8 | flex-wrap : nowrap; 9 | // justify-content: space-between; 10 | align-content : stretch; 11 | align-items : stretch; 12 | transition : all 300ms ease-in; 13 | overflow : hidden; 14 | 15 | @include element ('primary-content') { 16 | transition: all 300ms ease-in; 17 | order : 2; 18 | flex : 1; 19 | flex-grow : 5; 20 | } 21 | 22 | @include element ('secondary-content') { 23 | position : relative; 24 | min-width : 200px; 25 | order : 1; 26 | align-self: auto; 27 | transition: all 300ms ease-in; 28 | 29 | &.is-active { 30 | display : block; 31 | visibility: visible !important; 32 | transform : translateX(0) !important; 33 | } 34 | 35 | &.is-passive { 36 | display : none !important; 37 | transform: translateX(-100%); 38 | } 39 | 40 | @include media-breakpoint (xs) { 41 | //visibility: hidden; 42 | //display:none; 43 | position : absolute; 44 | transform: translateX(-100%); 45 | 46 | &.is-active { 47 | visibility: visible; 48 | transform : translateX(0); 49 | } 50 | } 51 | 52 | @include media-breakpoint (sm) { 53 | //visibility: hidden; 54 | position : absolute !important; 55 | transform: translateX(-100%); 56 | 57 | &.is-passive { 58 | display: none !important; 59 | } 60 | } 61 | 62 | @include media-breakpoint (sm) { 63 | //display:none; 64 | transform: translateX(-100%); 65 | 66 | &.is-passive { 67 | display : none !important; 68 | transform: translateX(-100%); 69 | } 70 | 71 | &.is-active { 72 | display : block !important; 73 | transform: translateX(0); 74 | } 75 | } 76 | 77 | @include media-breakpoint (lg) { 78 | flex : 1 0 200px; 79 | display : block; 80 | transform: translateX(0); 81 | 82 | &.is-active, 83 | &.is-passive { 84 | display : block !important; 85 | visibility: visible !important; 86 | transform : translateX(0) !important; 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /demo/template-header-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-header-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | 59 | 60 | 61 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/template-full.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-full 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /demo/template-offcanvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-offcanvas 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 64 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /sass/l-splitview.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins'; 2 | @import 'variables'; 3 | 4 | $splitview-transition: all .4s ease; 5 | $splitview-sidebar-width: 25%; 6 | $splitview-right-width: 25%; 7 | $splitview-secondary-border-color: $gray5; 8 | $splitview-background-color: $white; 9 | 10 | $l-splitview-secondary-content-width: 200px; 11 | 12 | /*================================= Split View ================================*/ 13 | @include b ('l-container') { 14 | @include m ('splitview') { 15 | background : $splitview-background-color; 16 | min-height : $layout-min-height; 17 | display : flex; 18 | flex-direction : row; 19 | flex-wrap : nowrap; 20 | justify-content: space-between; 21 | align-content : stretch; 22 | align-items : stretch; 23 | transition : all 300ms ease-in; 24 | overflow : hidden; 25 | position : relative; 26 | } 27 | 28 | 29 | @include element ('secondary-content') { 30 | position : relative; 31 | order : 1; 32 | flex : 1 1 var(--l-splitview-secondary-content-width, $l-splitview-secondary-content-width); 33 | align-self : auto; 34 | transition : $splitview-transition; 35 | transform : translateX(0); 36 | border-right: 1px solid $splitview-secondary-border-color; 37 | min-height: $layout-min-height; 38 | overflow: hidden; 39 | // overflow-y: auto; 40 | 41 | @include media-breakpoint ('xs') { 42 | //display: none; 43 | } 44 | 45 | @include media-breakpoint ('sm') { 46 | // display: none; 47 | 48 | &.is-active { 49 | display: block; 50 | } 51 | } 52 | 53 | @include media-breakpoint ('md') { 54 | // display: none; 55 | 56 | &.is-active { 57 | display: block; 58 | } 59 | } 60 | 61 | @include media-breakpoint ('lg') { 62 | display: block; 63 | } 64 | 65 | @include media-breakpoint ('xl') { 66 | display: block; 67 | } 68 | } 69 | 70 | @include element ('primary-content') { 71 | position : relative; 72 | order : 2; 73 | flex : 1 0 300px; 74 | align-self: auto; 75 | flex-grow : 2; 76 | min-height: $layout-min-height; 77 | overflow: hidden; 78 | //overflow-y: auto; 79 | 80 | @include media-breakpoint ('xs') { 81 | //display: none; 82 | 83 | &.is-active { 84 | display: block !important; 85 | } 86 | } 87 | 88 | @include media-breakpoint ('sm') { 89 | //display: none; 90 | } 91 | 92 | @include media-breakpoint ('md') { 93 | //display: none; 94 | } 95 | 96 | @include media-breakpoint ('lg') { 97 | //display: block; 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # px-layout [![Build Status](https://travis-ci.org/PredixDev/px-layout.svg?branch=master)](https://travis-ci.org/PredixDev/px-layout) 2 | 3 | Includes pre-defined layout wrapper components that enable you to create responsive Industrial Internet applications. 4 | 5 | 6 | 7 | ``` 8 | $ bower install --save px-layout 9 | ``` 10 | 11 | 12 | 13 | ## Overview 14 | 15 | The markup structure of an application can become very messy and deeply nested. So we have identified the essential elements that are needed to create responsive Industrial Internet applications. 16 | 17 | ### Bundled layouts 18 | 19 | * [px-drawer-layout](http://predixdev.github.io/px-layout/bower_components/px-layout/px-drawer-layout/demo.html) 20 | * [px-header-layout](http://predixdev.github.io/px-layout/bower_components/px-layout/px-header-layout/demo.html) 21 | 22 | 23 | ### Bundled Elements 24 | 25 | * [px-button](https://github.com/PredixDev/px-partials) 26 | * [px-brand](https://github.com/PredixDev/px-partials) 27 | * [px-header](https://github.com/PredixDev/px-partials) 28 | * [px-footer](https://github.com/PredixDev/px-partials) 29 | * [px-icon](https://github.com/PredixDev/px-partials) 30 | * [px-title-bar](https://github.com/PredixDev/px-partials) 31 | 32 | ### Bundled Components 33 | 34 | * [px-navbar](https://github.com/PredixDev/px-navbar) 35 | * [px-drawer](https://github.com/PredixDev/px-drawer) 36 | 37 | 38 | ## Quick Start 39 | The following is the layout structure that your page should follow. 40 | 41 | 42 | ``` 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | My App 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | Look im inside a drawer! 75 | 76 | 77 | 78 | 79 |
80 | 81 | Look im a card! 82 | 83 |
84 | 85 | 86 | 87 | ``` 88 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "px-layout", 3 | "description": "A set responsive layout elements.", 4 | "version": "0.2.3", 5 | "main": "px-layout.html", 6 | "authors": [ 7 | "Jonnie Spratley" 8 | ], 9 | "license": "GE", 10 | "keywords": [ 11 | "px", 12 | "px-mobile" 13 | ], 14 | "moduleType": [], 15 | "homepage": "", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ], 23 | "dependencies": { 24 | "polymer": "~1.5.0", 25 | "px-partials": "^0.1.0", 26 | "px-navbar": "^0.2.0", 27 | "px-drawer": "^1.2.0", 28 | "hammerjs": "^2.0.8", 29 | "fastclick": "^1.0.6" 30 | }, 31 | "devDependencies": { 32 | "px-sample-cards": "^0.7.0", 33 | "px-card": "^0.6.0", 34 | "iron-component-page": "PolymerElements/iron-component-page#~v1.1.0", 35 | "iron-ajax": "PolymerElements/iron-ajax#^1.0.0", 36 | "px-mobile-design": "^0.2.0", 37 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#~1.2.3", 38 | "px-demo-helpers": "https://github.com/PredixDev/px-demo-helpers.git", 39 | "px-colors-design": "^0.2.33", 40 | "px-widths-responsive-design": "^0.4.0", 41 | "inuit-responsive-settings": "^0.1.5", 42 | "px-widths-design": "^0.3.18", 43 | "px-flexbox-design": "^0.4.0", 44 | "px-simple-bar-chart": "^1.7.0", 45 | "px-table-view": "^1.1.0", 46 | "px-simple-horizontal-bar-chart": "^0.7.0", 47 | "iron-pages": "^1.0.7", 48 | "px-theme": "^2.0.4", 49 | "px-box-design": "^0.4.4", 50 | "px-layout-design": "^0.4.5" 51 | }, 52 | "resolutions": { 53 | "px-library-design": "master", 54 | "px": "~v1.4.2", 55 | "px-theme": "0.8.0", 56 | "polymer": "^v1.6.1", 57 | "px-dropdown": "~0.9.2", 58 | "px-tooltip": "~0.6.0", 59 | "fetch": "~0.11.0", 60 | "es6-promise": "~3.0.2", 61 | "px-simple-chart-common-behavior": "^1.6.0", 62 | "web-animations-js": "^2.2.0", 63 | "polymer-font-awesome": "master", 64 | "px-simple-bar-chart": "~1.3.7", 65 | "px-navbar": "master", 66 | "px-drawer": "master", 67 | "px-table-view": "~0.0.3", 68 | "px-widths-responsive-design": "^0.4.0", 69 | "px-colors-design": "^0.3.0", 70 | "px-flexbox-design": "^0.5.0", 71 | "px-forms-design": "^1.1.2", 72 | "px-input-group-design": "^1.1.0", 73 | "px-spacing-design": "^0.4.0", 74 | "px-normalize-design": "^0.4.0", 75 | "px-spacing-responsive-design": "^0.4.0", 76 | "px-code-design": "^1.1.0", 77 | "px-iconography-design": "^0.3.8", 78 | "px-buttons-design": "^1.1.0", 79 | "px-typography-design": "^1.2.0", 80 | "px-defaults-design": "^1.0.2", 81 | "px-meta-lists-design": "^0.4.1", 82 | "px-mixins-design": "^0.3.0", 83 | "px-functions-design": "~1.0.0", 84 | "px-list-inline-design": "^0.3.0", 85 | "px-list-ui-design": "^1.1.0", 86 | "px-list-bare-design": "^0.3.0", 87 | "px-tables-design": "^1.1.0", 88 | "px-headings-design": "^0.3.0", 89 | "px-toggle-design": "^1.1.0" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /sass/px-layout-demo.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; 3 | //@import "px-mobile-mixin-design"; 4 | /** Debug Media Query Colors */ 5 | 6 | $oldColors: ( lap: lightblue, retina: blue, lap-and-up: green, portable: crimson, desk: purple, palm: gold ); 7 | 8 | ///Define new breakpoint colors; 9 | $newColors: ( xs: #fa62af, sm: #4abde6, md: #a3e572, lg:#ffab40, xl: #eddd46 ); 10 | $selector: 'responsive-demo'; 11 | @mixin createDebugColors($colors) { 12 | @each $alias, $color in $colors{ 13 | .color-#{$alias} { 14 | color: $color !important; 15 | } 16 | 17 | .u-bg-#{$alias} { 18 | background-color: $color !important; 19 | } 20 | } 21 | 22 | } 23 | 24 | .u-bg--gray7 { 25 | background-color: $gray7; 26 | } 27 | 28 | .u-bg--gray8 { 29 | background-color: $gray8; 30 | } 31 | 32 | .u-bg--gray9 { 33 | background-color: $gray9; 34 | } 35 | 36 | .u-bg--gray10 { 37 | background-color: $gray10; 38 | } 39 | 40 | 41 | .responsive-utilities { 42 | .is-visible { 43 | color : $dv-dark-green; 44 | background-color: $dv-light-green !important; 45 | } 46 | 47 | .is-hidden { 48 | color : $gray7; 49 | background-color: $gray2 !important; 50 | } 51 | 52 | td { 53 | text-align: center; 54 | } 55 | 56 | span { 57 | padding: 5px; 58 | } 59 | 60 | } 61 | 62 | .hidden-on .visible, 63 | .visible-on .visible { 64 | color : $dv-dark-green; 65 | background-color: $dv-light-green; 66 | border : 1px solid $dv-dark-green; 67 | } 68 | 69 | .hidden-on .not-visible, 70 | .visible-on .not-visible { 71 | color : #999; 72 | border: 1px solid #ddd; 73 | } 74 | @include createDebugColors($newColors); 75 | @include createDebugColors($oldColors); 76 | 77 | .debug-new-breakpoints { 78 | //@include createDebugBreakpointColors($newColors); 79 | @each $alias, $color in $newColors { 80 | // #{$alias} - #{$color} 81 | @include media-breakpoint($alias) { 82 | .#{$selector} { 83 | background-color: $color !important; 84 | } 85 | } 86 | } 87 | } 88 | 89 | .debug-old-breakpoints { 90 | //@include createDebugBreakpointColors($oldColors); 91 | @each $alias, $color in $oldColors { 92 | // #{$alias} - #{$color} 93 | @include media-breakpoint($alias) { 94 | .#{$selector} { 95 | background-color: $color !important; 96 | } 97 | } 98 | } 99 | } 100 | 101 | .debug { 102 | .responsive-demo *:nth-child(odd) { 103 | background-color: rgba(0, 0, 0, 0.2); 104 | } 105 | 106 | .responsive-demo *:nth-child(even) { 107 | background-color: rgba(0, 0, 0, 0.4); 108 | } 109 | } 110 | 111 | // TODO: Login demo 112 | .login { 113 | height : 100vh; 114 | display : flex; 115 | align-items : center; 116 | justify-content: center; 117 | align-content : center; 118 | 119 | h1 { 120 | color : #fff; 121 | font-weight: normal; 122 | margin-top : 0; 123 | } 124 | 125 | .box { 126 | flex : 1; 127 | background: transparent; 128 | border : none; 129 | text-align: center; 130 | max-width : 425px; 131 | overflow : hidden; 132 | } 133 | 134 | } 135 | -------------------------------------------------------------------------------- /demo/test-drive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-drawer-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 60 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /demo/template-content-mini-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-content-mini-sidebar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 75 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /demo/progressive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Progressive layout demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 31 | 35 | 36 | 37 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 |
57 | 58 | 59 | 60 |
    61 | 62 |
  • 63 | 64 |

    65 | Content 66 |

    67 |     68 |
    • 69 |
  • 70 | 71 |

    72 | Content 73 |

    74 |     75 |
    • 76 |
  • 77 | 78 |

    79 | Content 80 |

    81 |     82 |
    • 83 |
  • 84 | 85 |

    86 | Content 87 |

    88 |     89 |
    • 90 |
  • 91 | 92 |

    93 | Content 94 |

    95 |     96 |
    • 97 | 98 |
99 | 100 |
101 |
102 | 103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /demo/template-content-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-content-sidebar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /demo/template-tabs-to-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-tabs-to-sidebar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 74 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | language: node_js 4 | node_js: 5 | - stable 6 | branches: 7 | except: 8 | - gh-pages 9 | addons: 10 | firefox: latest 11 | apt: 12 | sources: 13 | - google-chrome 14 | packages: 15 | - google-chrome-stable 16 | before_script: 17 | - npm install web-component-tester 18 | - npm install bower 19 | - export PATH=$PWD/node_modules/.bin:$PATH 20 | - bower install 21 | script: 22 | - xvfb-run wct --skip-plugin sauce 23 | - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce --skip-plugin 24 | local; fi 25 | after_success: 26 | - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then openssl aes-256-cbc -k "$DEPLOYSECRET" 27 | -in deploy.enc -out deploy_key -d; fi 28 | - cd $TRAVIS_BUILD_DIR/scripts 29 | - chmod 755 ghp.sh 30 | - "./ghp.sh" 31 | env: 32 | global: 33 | - secure: WIp3O7oaCmCboiF3pVmthlJEFCFCEf+1jHAG2TFDuZh50lVwrJXqNP9LuXMUTJK5OAn86R+QUg3kEhuTgjaVr0rbfnFmG38lJwpf8HKYNSsN2SG3M9mFcP2yiXN/Nit3PEVFi0HIOkRM/Viwq/zc+G6duGmelipPkh1sDm9NY+xb24dk2KZHC9mbz/Yhku5l6uQqS6/ylIZndvutZjmCiacwa4DDm3mHnY1Dwj2LY/phYmLbM5eXU0DWJDTD3ofenDRYZ8IhX/dZSA+3lj9Plp7cPqqj+7LV3stVwVDHytqnFJoNzhn3PyAq9xBhnofA1cEyOVDywPHcKYEf/nR0hULjpa3oA3+f34fgwZrgOESb5jkpru96rzFCdmcuaFo34qGySOkuvC/CjO4cWqaPcw8zpG/OwkVGb/3wls+y+3zdE00kGrzBmR/C4GLREFtG9tygXjD9z/fLvNEvl4us+RgeTBwFzlsYdTZ9eFlweNz9fOjv1C+7GBj6k2FDZ/KncgptYFsyjffB5NJai1BMtEcVxGEmSvkBzEHuvieEx/tzqTw/zf+zXQHi3Gnwuf7tRmLveX5xsdC4k/pOVIwPmgfxCQgBgL5FRNX3QU93Fp5esJG8M0hbmfyAB48eyXOHX6NKRVvxBKiEyfTZIVdB/2b5U8xN+fD+iRDw56LoZ0o= 34 | - secure: sdsLw/up/f0f/+bjanvLdEI/PGVY36fXCpY5YF5mJNX3en9r4lDCLnX9z5w818Oap+tHcBxGr8AfCi8hYhj9TffDyuuMzoqSsIe9Isf9caHKL9puOwFc+8X0ssBmjYt5AUtOpEqT0MC+cw/lZpg4ySNKnwym9O6ENh02lJj6eNY5CylgysCF38Zo78PwgNVq5AjipHCtAfaev6wgQiopxKzEThfJQFHg3Ujm0WCGkXkHSZ2fNDX9ok5vqVLConFlZIFCk7dDPmuCNfpt/dyxiHoYUEIEJ6phlC/nGV8k5zfDvvmhnDgn2V4J33sYI8dCy1npOn3I+EppGxu9AXO/dSeYmJXlrg94/YYPWj6rUn4b33Gq8kghtdpGiv0nIwp32bEWIjUtcqvNLdI0Zfm8o+U3DPCcuuqEnN9dOYi/5ThNAWvhASn9oTrAUP+k3CkDpdaqsUrOL/XciX7SUSJj++S8w68n5Vd25ip65JreLG7s3gE6s6aa0EWFadafyjMeY2lbc4zA6zLV+aY0JcIDV+ddtIGzoPZY5pP20Quzi4IkCn7mcYFlyiMp9HL9NKyy33yIb82zUpuFc15ZVRypQLHv2ycQCzEw3N4jenC+E0/ac2/meDErzo68Wv2IEzcsE0sHtuGiQLvnYgTE41IgTvfMddRP4jt4v7U9BNyYOgQ= 35 | - secure: XM5NQRrdK8sJNNZna+e0cvlU+fuYw4Ydm36x4hKh0CzLXxxdN+V7IqtfN6LNavPTWXuFT3e5G3+Pi0nuz1YSIqIrSr/bMpxocG60NbxuddWh4kgfEYH0I0pgoAh9eID2AVJ9bVAJfvMmLzsa5NFrQ+OKkqMuW5m495o8elpvg/eFKVJOgZMRyDNOtGQND5De6x8o1r0LO2JF9jnI1lqFiEKWp5UTjI+5Wse3ohf+wAM89ulESp+93IMtkiqL+Ip8++fxkIKEu2HsVajaEmQwAmUYdgvMg9NKpz4pxFgvEKphjqM+uxsB1+Wi2RJRAST6vtagYgleICw6fcw2Jn/KkrQN8l3tvi+SshInEcmMby79j4nKx7bx8aevsq+vhWLsFNir8u9CnVFXPOuYogYI3JS+vR9dOUsweBpPqQQZm8JwBuVmP5IntVt3huF+k0i7fN5DUnhzsdLgE7+rFkp55WsrbBBW2lP61I5Kdh2zsFH2NfTHf47zojc4CdWdxn3PcT6PxI2QQ14QCCn7mWEVTXsCtaohRnk8FlXbDt2BlACrkQQRyrm5lYKrAwDGwyWYe2v2vIb7jZmoSwPmkJ2W1xI4B23o1p0YIW+niXtlKarvjDXJUa4Q2QDH5lxPDMI9C4gTezuHML8GHxWxWf4khsD0/bBBgN9LdMNx8EBToyI= 36 | - secure: HlQAVedbTQmi4lp/BfKJzjHH1Q8HEKf3QM5kXCOfbEMXSFv+wKhA3WKWJoa68VC0lNy37E0PMhh0S3zXiN+vVndwb4CrWHRZRyFfcdCDumUwe6LERYoHo6sE8ORiZ8mhExMsrdq92JJW4JhExibXF1c+vbedVdXpMuxolfzyoY2tlfXEBnpaEm/IY/1b8IS4JVhFlsohzYnYHVXkExfDL8SZvg8QfKVDrpiLPpA8a5REZYidDINflbuD17O/tw2i+AfMa/LHG4izyw6j7kumxPLUBV3PD51ajKXKDmHdQ93lB0lWPGVAkTQo9AoHYCKWarJa/rOMhHwza/VXhGccvYRW+O8nbkUwEtFIabTubgldJ4vZF8tIdkJ72XTtutj69NXnTuuh3ldNrsHSZNkQHSxViYk7mzC3wQ37eIVR8mJfUlc3zwD+PMVHetMkC3hjtMotH9hoo6Z6mwqUNuEOOQSCX5gm+oZbk6IS6eU1lkU2AZEu7QFbFIqSEzNxxTjQLZZnzEYX/QnS9TUKPLyRylo+BX0bj4vXhxn/n7fwR/U4ce7zpv2sDWacf/mo2rkJd6sayVcQr1TrWIOMsBAzNvHW2ou796M4snshNNELtfnL4IY4MAUvXPkfvlNIjQnH6bszCvh5FTVfWWHpvzQzNV85FTxMRsRPw3gzVztqVGY= 37 | -------------------------------------------------------------------------------- /demo/template-charts-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-drawer-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 58 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /sass/px-layout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016 GE Global Research. All rights reserved. 3 | * 4 | * The copyright to the computer software herein is the property of 5 | * GE Global Research. The software may be used and/or copied only 6 | * with the written permission of GE Global Research or in accordance 7 | * with the terms and conditions stipulated in the agreement/contract 8 | * under which the software has been supplied. 9 | */ 10 | @charset 'utf-8'; 11 | @import 'variables'; 12 | @import 'mixins'; 13 | 14 | $xs: #fa62af; 15 | $sm: #4abde6; 16 | $md: #a3e572; 17 | $lg: #ffab40; 18 | $xl: #eddd46; 19 | 20 | $l-container-transition: all 0.3s ease; 21 | $l-container-transition-wrapper: all 0.3s cubic-bezier(0.1, 0.7, 0.1, 1); 22 | 23 | //Remove all margins/paddings on lower 24 | body:not([style-scope]):not(.style-scope) { 25 | @include scrollable(); 26 | 27 | @include media-breakpoint-down ('md') { 28 | @include full-height(); 29 | @include scrollable(); 30 | // margin-bottom: 0; 31 | // padding: 0; 32 | } 33 | } 34 | 35 | .viewport, 36 | .viewport:not([style-scope]):not(.style-scope) { 37 | transition: all 0.3s ease; 38 | //Mobile first 39 | 40 | height : 100%; 41 | width : 100%; 42 | padding : 0; 43 | margin : 0 auto !important; 44 | 45 | &.debug { 46 | background-color: $xs; 47 | } 48 | 49 | @include m ('flush') { 50 | margin : 0 !important; 51 | padding: 0 !important; 52 | } 53 | 54 | //Remove all margins/paddings on lower 55 | @include media-breakpoint(sm) { 56 | &.debug { 57 | background-color: $sm; 58 | } 59 | } 60 | @include media-breakpoint(md) { 61 | //width : 100%; 62 | // 63 | &.debug { 64 | background-color: $md; 65 | } 66 | padding-left : var(--px-viewport-padding-md, .5rem); 67 | padding-right: var(--px-viewport-padding-md, .5rem); 68 | } 69 | @include media-breakpoint(xl) { 70 | max-width: 80rem; 71 | 72 | &.debug { 73 | background-color: $xl; 74 | } 75 | } 76 | @include media-breakpoint-up(lg) { 77 | max-width : 80rem; 78 | max-width : var(--px-viewport-max-width-lg, 80rem); 79 | padding-left : var(--px-viewport-padding-lg, 1rem); 80 | padding-right: var(--px-viewport-padding-lg, 1rem); 81 | 82 | &.debug { 83 | background-color: $lg; 84 | } 85 | } 86 | } 87 | 88 | .has-navbar { 89 | position : relative; 90 | padding-top: 56px; 91 | } 92 | 93 | @include b ('l-container') { 94 | position : relative; 95 | overflow : hidden; 96 | transition: $l-container-transition; 97 | 98 | 99 | 100 | *:not([style-scope]):not(.style-scope), 101 | *:not([style-scope]):not(.style-scope):after, 102 | *:not([style-scope]):not(.style-scope):before { 103 | box-sizing: border-box; 104 | } 105 | 106 | .l-bg-white { 107 | background: #fff; 108 | } 109 | 110 | .l-full-height { 111 | transition: $l-container-transition; 112 | height : 100%; 113 | 114 | @include media-breakpoint-down ('md') { 115 | @include full-height(); 116 | } 117 | } 118 | 119 | @include e ('wrapper') { 120 | transition: $l-container-transition-wrapper; 121 | } 122 | } 123 | @import "mixins"; 124 | 125 | 126 | @include c ('') { 127 | @include responsiveUtils(); 128 | @include responsive-utils(); 129 | 130 | .btn--transparent{ 131 | background-color: transparent; 132 | border: 1px solid transparent; 133 | border-radius: 2px; 134 | } 135 | } 136 | 137 | // TODO: Overriding default .layout base 138 | .row { 139 | @include n-columns(calculateRem($inuit-layout-min-width), $inuit-base-spacing-unit, false, 6); 140 | // margin-left: 0 !important; 141 | } 142 | -------------------------------------------------------------------------------- /px-drawer-layout/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-drawer-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 80 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /sass/l-progressive.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins'; 2 | @import 'variables'; 3 | 4 | $progressive-background-color: $white; 5 | $progressive-border: 1px solid $gray5; 6 | $progressive-min-height: 100vh; 7 | 8 | /*================================= progressive ================================*/ 9 | @include b ('l-container') { 10 | @include m ('progressive') { 11 | min-height: $progressive-min-height; 12 | display: flex; 13 | flex-direction: row; 14 | flex-wrap: nowrap; 15 | justify-content: space-between; 16 | align-content: stretch; 17 | align-items: stretch; 18 | transition: all 300ms ease-in; 19 | background: $progressive-background-color; 20 | 21 | .btn-toggle { 22 | @include media-breakpoint ('sm') { 23 | display: block; 24 | } 25 | 26 | @include media-breakpoint ('md') { 27 | display: block; 28 | } 29 | 30 | @include media-breakpoint ('lg') { 31 | display: none; 32 | } 33 | } 34 | 35 | &.active { 36 | display: block; 37 | } 38 | 39 | 40 | //Sidebar 41 | @include element ('primary-sidebar') { 42 | order: 0; 43 | flex: 0 1 220px; 44 | position: relative; 45 | border-right: $progressive-border; 46 | 47 | @include media-breakpoint-down('md') { 48 | //display: none; 49 | } 50 | 51 | @include media-breakpoint-up('lg') { 52 | 53 | &.is-passive { 54 | display: block; 55 | } 56 | 57 | } 58 | } 59 | //Secondary 60 | @include element ('secondary-content') { 61 | order: 1; 62 | flex: 1; 63 | position: relative; 64 | border-right: $progressive-border; 65 | 66 | @include media-breakpoint (xs) { 67 | display: none; 68 | 69 | &.is-active { 70 | display: block; 71 | } 72 | } 73 | 74 | @include media-breakpoint (sm) { 75 | display: none; 76 | 77 | &.is-active { 78 | display: block; 79 | } 80 | } 81 | 82 | @include media-breakpoint ('md') { 83 | display: block; 84 | } 85 | 86 | @include media-breakpoint ('lg') { 87 | display: block; 88 | 89 | &.is-passive { 90 | display: block !important; 91 | } 92 | } 93 | } 94 | //Primary 95 | @include element ('primary-content') { 96 | order: 2; 97 | flex: 4; 98 | align-self: auto; 99 | position: relative; 100 | 101 | @include media-breakpoint ('xs') { 102 | display: none; 103 | 104 | &.is-active { 105 | display: block; 106 | } 107 | } 108 | 109 | @include media-breakpoint ('sm') { 110 | display: none; 111 | 112 | &.is-active { 113 | display: block; 114 | } 115 | } 116 | 117 | @include media-breakpoint ('md') { 118 | display: block; 119 | } 120 | 121 | @include media-breakpoint ('lg') { 122 | display: block; 123 | 124 | &.is-passive { 125 | display: block !important; 126 | } 127 | } 128 | 129 | &.is-active { 130 | display: block; 131 | } 132 | 133 | &.is-passive { 134 | display: none; 135 | } 136 | } 137 | //Right Nav 138 | @include element ('secondary-sidebar') { 139 | order: 3; 140 | flex: 1 1 15%; 141 | align-self: auto; 142 | position: relative; 143 | border-left: $progressive-border; 144 | 145 | @include media-breakpoint ('xs') { 146 | display: none; 147 | } 148 | 149 | @include media-breakpoint ('sm') { 150 | display: none; 151 | } 152 | 153 | @include media-breakpoint ('md') { 154 | display: none; 155 | } 156 | 157 | @include media-breakpoint ('lg') { 158 | display: block; 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /px-media-query/px-media-query.html: -------------------------------------------------------------------------------- 1 | 2 | 26 | 27 | 32 | 35 | 138 | 139 | -------------------------------------------------------------------------------- /px-layout/px-layout-behavior.html: -------------------------------------------------------------------------------- 1 | 124 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | .app { 2 | position: relative; 3 | overflow: hidden; 4 | min-height: 480px; 5 | } 6 | .demo.demo-snippet { 7 | background: #eee; 8 | } 9 | .debug-colors li { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | .box { 15 | background-color: #fff; 16 | position: relative; 17 | overflow: hidden; 18 | } 19 | code { 20 | color: crimson; 21 | } 22 | .content{ 23 | background-color: white; 24 | min-height: 75vh; 25 | height: 100%; 26 | } 27 | 28 | body{ 29 | margin-bottom: 0 !important; 30 | } 31 | 32 | 33 | 34 | @media screen and (max-width: 21.3333333333rem) { 35 | .debug-new-breakpoints .responsive-demo { 36 | background-color: #fa62af !important; } } 37 | 38 | @media screen and (min-width: 22rem) and (max-width: 49.0666666667rem) { 39 | .debug-new-breakpoints .responsive-demo { 40 | background-color: #4abde6 !important; } } 41 | 42 | @media screen and (min-width: 51.2rem) and (max-width: 68.2rem) { 43 | .debug-new-breakpoints .responsive-demo { 44 | background-color: #a3e572 !important; } } 45 | 46 | @media screen and (min-width: 68.2666666667rem) and (max-width: 80rem) { 47 | .debug-new-breakpoints .responsive-demo { 48 | background-color: #ffab40 !important; } } 49 | 50 | @media screen and (min-width: 85.3333333333rem) { 51 | .debug-new-breakpoints .responsive-demo { 52 | background-color: #eddd46 !important; } } 53 | 54 | @media screen and (min-width: 45em) and (max-width: 63.9375em) { 55 | .debug-old-breakpoints .responsive-demo { 56 | background-color: lightblue !important; } } 57 | 58 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { 59 | .debug-old-breakpoints .responsive-demo { 60 | background-color: blue !important; } } 61 | 62 | @media screen and (min-width: 45em) { 63 | .debug-old-breakpoints .responsive-demo { 64 | background-color: green !important; } } 65 | 66 | @media screen and (max-width: 63.9375em) { 67 | .debug-old-breakpoints .responsive-demo { 68 | background-color: crimson !important; } } 69 | 70 | @media screen and (min-width: 64em) { 71 | .debug-old-breakpoints .responsive-demo { 72 | background-color: purple !important; } } 73 | 74 | @media screen and (max-width: 44.9375em) { 75 | .debug-old-breakpoints .responsive-demo { 76 | background-color: gold !important; } } 77 | 78 | 79 | .u-1\/6:before { 80 | content: 'u-1/6'; 81 | } 82 | .responsive-demo .layout .u-1\/6:before { 83 | content: "u-1/6"; 84 | } 85 | .responsive-demo .layout .u-2\/6:before { 86 | content: "u-2/6"; 87 | } 88 | .responsive-demo .layout .u-3\/6:before { 89 | content: "u-3/6"; 90 | } 91 | .responsive-demo .layout .u-4\/6:before { 92 | content: "u-4/6"; 93 | } 94 | .responsive-demo .layout .u-5\/6:before { 95 | content: "u-5/6"; 96 | } 97 | .responsive-demo .layout .u-1\/1:before { 98 | content: "u-1/1"; 99 | } 100 | .responsive-demo .layout .u-1\/2:before { 101 | content: "u-1/2"; 102 | } 103 | .responsive-demo .layout .u-1\/3:before { 104 | content: "u-1/3"; 105 | } 106 | .responsive-demo .layout .u-2\/3:before { 107 | content: "u-2/3"; 108 | } 109 | .responsive-demo .layout .u-1\/4:before { 110 | content: "u-1/4"; 111 | } 112 | .responsive-demo .layout .u-2\/4:before { 113 | content: "u-2/4"; 114 | } 115 | .responsive-demo .layout .u-3\/4:before { 116 | content: "u-3/4"; 117 | } 118 | .debug .responsive-demo .flex > * { 119 | margin: 4px; 120 | } 121 | .debug .responsive-demo .flex > *, 122 | .debug .responsive-demo .layout > * { 123 | padding: 0.5rem; 124 | text-align: center; 125 | font-size: 1.2rem; 126 | } 127 | .debug .responsive-demo .flex > *:nth-child(odd), 128 | .debug .responsive-demo .layout > *:nth-child(odd) { 129 | background-color: rgba(0, 0, 0, 0.2); 130 | } 131 | .debug .responsive-demo .flex > *:nth-child(even), 132 | .debug .responsive-demo .layout > *:nth-child(even) { 133 | background-color: rgba(0, 0, 0, 0.1); 134 | } 135 | .debug .layout__item p { 136 | text-align: center; 137 | padding: 1rem; 138 | background-color: #ccc; 139 | } 140 | -------------------------------------------------------------------------------- /demo/template-drawer-header-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-drawer-header-layout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 | 82 | 83 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var pkg = require('./package.json'); 4 | module.exports = function(grunt) { 5 | 6 | var importOnce = require('node-sass-import-once'); 7 | // Project configuration. 8 | grunt.initConfig({ 9 | pkg: pkg, 10 | clean: { 11 | css: ['css'], 12 | bower: ['bower_components'], 13 | reports: ['reports'] 14 | }, 15 | 16 | sass: { 17 | options: { 18 | importer: importOnce, 19 | importOnce: { 20 | index: true, 21 | bower: true 22 | } 23 | }, 24 | dist: { 25 | files: { 26 | 'css/noprefix/px-layout-sketch.css': 'sass/px-layout-sketch.scss', 27 | 'css/noprefix/px-layout.css': 'sass/px-layout-predix.scss' 28 | } 29 | } 30 | }, 31 | 32 | autoprefixer: { 33 | options: { 34 | browsers: ['last 2 versions', 'Safari 8'] 35 | }, 36 | multiple_files: { 37 | expand: true, 38 | flatten: true, 39 | src: 'css/noprefix/*.css', 40 | dest: 'css' 41 | } 42 | }, 43 | 44 | shell: { 45 | options: { 46 | stdout: true, 47 | stderr: true 48 | }, 49 | bower: { 50 | command: 'bower install' 51 | } 52 | }, 53 | 54 | jshint: { 55 | all: [ 56 | 'Gruntfile.js', 57 | 'js/**/*.js' 58 | ], 59 | options: { 60 | jshintrc: '.jshintrc' 61 | } 62 | }, 63 | 64 | watch: { 65 | sass: { 66 | files: ['sass/**/*.scss'], 67 | tasks: ['sass', 'autoprefixer'], 68 | options: { 69 | interrupt: true, 70 | livereload: true 71 | } 72 | }, 73 | htmljs: { 74 | files: ['*.html', '*.js'], 75 | options: { 76 | interrupt: true, 77 | livereload: true 78 | } 79 | } 80 | }, 81 | 82 | depserve: { 83 | options: { 84 | open: '<%= depserveOpenUrl %>' 85 | } 86 | }, 87 | webdriver: { 88 | options: { 89 | specFiles: ['test/*spec.js'] 90 | }, 91 | local: { 92 | webdrivers: ['chrome'] 93 | } 94 | }, 95 | concurrent: { 96 | devmode: { 97 | tasks: ['watch', 'depserve'], 98 | options: { 99 | logConcurrentOutput: true 100 | } 101 | } 102 | }, 103 | 'gh-pages': { 104 | options: { 105 | message: 'Auto-generated commit', 106 | base: '.' 107 | }, 108 | src: ['**'] 109 | }, 110 | cssmin: { 111 | target: { 112 | files: { 113 | 'css/<%= pkg.name %>.min.css': ['css/<%= pkg.name %>.css'] 114 | } 115 | } 116 | }, 117 | 'polymer-css-compiler': { 118 | target: { 119 | filename: '-styles', 120 | files: { 121 | './<%= pkg.name %>.html': ['css/<%= pkg.name %>.min.css'] 122 | } 123 | } 124 | } 125 | 126 | }); 127 | 128 | grunt.loadNpmTasks('grunt-sass'); 129 | grunt.loadNpmTasks('grunt-shell'); 130 | grunt.loadNpmTasks('grunt-contrib-clean'); 131 | grunt.loadNpmTasks('grunt-contrib-jshint'); 132 | grunt.loadNpmTasks('grunt-contrib-watch'); 133 | grunt.loadNpmTasks('grunt-dep-serve'); 134 | grunt.loadNpmTasks('webdriver-support'); 135 | grunt.loadNpmTasks('grunt-autoprefixer'); 136 | grunt.loadNpmTasks('grunt-concurrent'); 137 | grunt.loadNpmTasks('grunt-gh-pages'); 138 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 139 | grunt.loadNpmTasks('polymer-css-compiler'); 140 | 141 | // Default task. 142 | grunt.registerTask('default', 'Basic build', [ 143 | 'clean:css', 144 | 'sass', 145 | 'autoprefixer', 146 | 'cssmin', 147 | 'polymer-css-compiler' 148 | ]); 149 | 150 | grunt.registerTask('devmode', 'Development Mode', [ 151 | 'concurrent:devmode' 152 | ]); 153 | 154 | // First run task. 155 | grunt.registerTask('serve', 'Basic first run', function() { 156 | grunt.config.set('depserveOpenUrl', '/index.html'); 157 | grunt.task.run('default'); 158 | grunt.task.run('depserve'); 159 | }); 160 | 161 | // Default task. 162 | grunt.registerTask('test', 'Test', [ 163 | 'jshint' 164 | ]); 165 | 166 | grunt.registerTask('release', 'Release', [ 167 | 'clean', 168 | 'shell:bower', 169 | 'default', 170 | 'test' 171 | ]); 172 | 173 | }; 174 | -------------------------------------------------------------------------------- /demo/template-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-basic 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /demo/DemoBreadcrumbView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Demo BreadcrumbView 5 | 6 | 7 | 8 | 9 | 10 | 11 | 64 | 65 | 66 |
67 | Back 68 | Add 69 |
70 |
71 | 73 | 74 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /demo/template-detail-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-detail-sidebar 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 62 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /demo/template-google-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-google-example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 111 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const gulp = require('gulp'); 3 | const pkg = require('./package.json'); 4 | const $ = require('gulp-load-plugins')(); 5 | const gulpSequence = require('gulp-sequence'); 6 | const sassdoc = require('sassdoc'); 7 | const importOnce = require('node-sass-import-once'); 8 | 9 | const sassdocOptions = { 10 | dest: 'docs', 11 | verbose: true, 12 | display: { 13 | access: ['public', 'private'], 14 | alias: true, 15 | watermark: true, 16 | }, 17 | groups: { 18 | 'undefined': 'Ungrouped' 19 | } 20 | }; 21 | 22 | const sassOptions = { 23 | importer: importOnce, 24 | importOnce: { 25 | index: true, 26 | bower: true 27 | } 28 | }; 29 | 30 | gulp.task('sassdoc', function() { 31 | return gulp.src('./sass/px-layout-sketch.scss') 32 | .pipe(sassdoc(sassdocOptions)); 33 | }); 34 | 35 | gulp.task('clean', function() { 36 | return gulp.src(['.tmp', 'css'], { 37 | read: false 38 | }).pipe($.clean()); 39 | }); 40 | 41 | gulp.task('sass', function() { 42 | return gulp.src('./sass/px-layout-sketch.scss') 43 | .pipe($.sass(sassOptions).on('error', $.sass.logError)) 44 | .pipe($.size()) 45 | .pipe($.rename(pkg.name + '.css')) 46 | .pipe(gulp.dest('./css')); 47 | }); 48 | 49 | gulp.task('autoprefixer', function() { 50 | return gulp.src('css/**/*.css') 51 | .pipe($.autoprefixer({ 52 | browsers: ['last 2 versions'], 53 | cascade: false 54 | })) 55 | .pipe($.size()) 56 | .pipe(gulp.dest('css')); 57 | }); 58 | 59 | gulp.task('css', function() { 60 | return gulp.src('css/**/*.css') 61 | .pipe($.sourcemaps.init()) 62 | .pipe($.cssmin()) 63 | //.pipe($.concat(pkg.name + '.css')) 64 | .pipe($.sourcemaps.write('.')) 65 | .pipe($.rename({ 66 | suffix: '.min' 67 | })) 68 | .pipe($.size()) 69 | .pipe(gulp.dest('css')); 70 | }); 71 | 72 | gulp.task('sass:watch', function() { 73 | gulp.watch('./sass/**/*.scss', ['sass']); 74 | }); 75 | 76 | gulp.task('autoprefixer:watch', function() { 77 | gulp.watch('./css/**/*.css', ['autoprefixer']); 78 | }); 79 | const path = require('path'); 80 | const stylemod = require('gulp-style-modules'); 81 | 82 | /* 83 | Create style module 84 | 85 | Usage 86 | 87 | 88 | */ 89 | gulp.task('poly-styles', function() { 90 | gulp.src(`./css/${pkg.name}.min.css`) 91 | .pipe(stylemod({ 92 | // All files will be named 'styles.html' 93 | filename: 'styles', 94 | // Use '-css' suffix instead of '-styles' for module ids 95 | moduleId: function(file) { 96 | return pkg.name + '-css'; 97 | } 98 | })) 99 | .pipe($.rename(`${pkg.name}-styles.html`)) 100 | .pipe($.size()) 101 | .pipe(gulp.dest('.')); 102 | }); 103 | 104 | 105 | 106 | var vulcanize = require('gulp-vulcanize'); 107 | 108 | var VULCANIZE_FILES = [ 109 | './demo/*.html', 110 | './px-drawer-layout/**', 111 | './px-header-layout/**', 112 | './px-layout/**', 113 | './px-*.html', 114 | './px-media-query.html' 115 | ]; 116 | 117 | var VULCANIZE_DIR = './bower_components/_' + pkg.name; 118 | var VULCANIZE_FILE = './bower_components/_' + pkg.name + '.html'; 119 | var VULCANIZE_CONFIG = { 120 | abspath: '', 121 | excludes: [ 122 | '/\W*iron\W*.*/', 123 | '/iron-resize/', 124 | '/polymer/' 125 | ], 126 | addedImports: [], 127 | redirects: [], 128 | inlineCss: true, 129 | inlineScripts: true 130 | }; 131 | 132 | // TODO: Clean out temp dir 133 | gulp.task('clean-vulcanize', function() { 134 | return gulp.src(VULCANIZE_DIR).pipe($.clean()); 135 | }); 136 | 137 | // TODO: Copy files before vulcanize 138 | 139 | gulp.task('copy-vulcanize', ['clean-vulcanize'], function() { 140 | return gulp.src(VULCANIZE_FILES, { 141 | base: './' 142 | }) 143 | .pipe($.size()) 144 | .pipe(gulp.dest(VULCANIZE_DIR)); 145 | }); 146 | 147 | gulp.task('vulcanize', ['copy-vulcanize'], function() { 148 | return gulp.src(VULCANIZE_FILE) 149 | .pipe(vulcanize(VULCANIZE_CONFIG)) 150 | .pipe($.rename(pkg.name + '.min.html')) 151 | .pipe($.size()) 152 | .pipe(gulp.dest('.')); 153 | }); 154 | 155 | var polybuild = require('polybuild'); 156 | 157 | /** 158 | * This builds all the demo/element.html file into a min version for loading. 159 | */ 160 | gulp.task('build', ['copy-vulcanize'], function() { 161 | return gulp.src([ 162 | VULCANIZE_DIR + '/demo/elements.html' 163 | ]) 164 | .pipe(polybuild()) 165 | .pipe($.size()) 166 | .pipe(gulp.dest('./dist')); 167 | }); 168 | 169 | gulp.task('watch', ['sass:watch', 'autoprefixer:watch']); 170 | gulp.task('default', gulpSequence('clean', 'sass', 'autoprefixer', 'css', 'sassdoc', 'poly-styles', 171 | 'vulcanize')); 172 | -------------------------------------------------------------------------------- /demo/template-cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-cards 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 29 | 30 | 31 | 61 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /test/px-layout-test-fixture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Component Test : Fixture for px-layout 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |

Web Component Test : Fixture for px-layout

28 | 29 |
30 |

px-layout specs

31 | 32 | 33 |

34 | Primary Sidebar 35 |

36 | 37 | 38 |

39 | Secondary Sidebar 40 |

41 | 42 | 43 | 44 |
45 | 46 |
47 |
48 | 49 |
50 | 51 |

52 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 53 |

54 | 55 | 56 | 57 |
58 | 59 |
60 |
61 | 62 |
63 | 64 |

65 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 66 |

67 | 68 | 69 |
70 | 71 | 72 |
73 |

px-drawer-layout specs

74 | 75 | 76 | 77 |
78 | 79 |
80 | 81 |
82 | 83 |
84 | 85 | 86 |
87 | 88 | 89 |
90 |

px-header-layout specs

91 | 92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 |
100 | 101 | 102 |
103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /demo/template-predixio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-predixio 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /demo/template-tabs-to-columns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-tabs-to-columns 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 112 | 113 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 28 | 29 | 30 |

Web Component Test : Fixtures for px-button, px-icon, px-brand, px-header, px-footer

31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 |

Web Component Test : Fixture for px-layout, px-drawer-layout, px-header-layout

42 |
43 |

px-layout specs

44 | 45 | 46 |

47 | Primary Sidebar 48 |

49 | 50 | 51 |

52 | Secondary Sidebar 53 |

54 | 55 | 56 | 57 |
58 | 59 |
60 |
61 | 62 |
63 | 64 |

65 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 66 |

67 | 68 | 69 | 70 |
71 | 72 |
73 |
74 | 75 |
76 | 77 |

78 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 79 |

80 | 81 | 82 |
83 |
84 |

px-drawer-layout specs

85 | 86 | 87 |
88 | 89 |
90 | 91 |
92 | 93 |
94 | 95 | 96 |
97 |
98 |

px-header-layout specs

99 | 100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 |
108 | 109 | 110 |
111 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /scripts/ghp.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit with nonzero exit code if anything fails 4 | set -e 5 | 6 | # ------------------------------------------------------------------------------ 7 | # CONFIGURE SCRIPT 8 | # ------------------------------------------------------------------------------ 9 | 10 | # Set our source branch (where we'll build from) and our target branch (where we 11 | # want to send the build page to) 12 | SOURCE_BRANCH="master" 13 | TARGET_BRANCH="gh-pages" 14 | REPO=`git config remote.origin.url` 15 | 16 | # Prep git credentials 17 | GIT_USER_NAME="Travis CI" 18 | GIT_USER_EMAIL="PredixtravisCI@ge.com" 19 | GIT_COMMIT_MESSAGE="[Travis] Rebuild documentation for Github Pages" 20 | 21 | # Check if we should run a deploy, or if we should skip it. Only commits to master 22 | # should trigger a build. Pull requests and commits to features branches should not. 23 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then 24 | echo "Skipping deploy; just doing a build." 25 | exit 0 26 | fi 27 | 28 | # ------------------------------------------------------------------------------ 29 | # PREPARE FILESYSTEM 30 | # ------------------------------------------------------------------------------ 31 | 32 | cd $TRAVIS_BUILD_DIR 33 | 34 | # Find out our repo name from the bower file 35 | REPO_NAME=$(grep "name" bower.json | sed 's/"name": "//' | sed 's/",//') 36 | echo "repo name is ${REPO_NAME}" 37 | 38 | #delete all the files! 39 | rm -rf node_modules 40 | rm -rf bower_components 41 | rm -rf css 42 | rm -rf sass 43 | rm -rf scripts 44 | rm -rf test 45 | rm *.html 46 | rm *.json 47 | rm *.enc 48 | rm *.js 49 | rm *.png 50 | rm *.lock 51 | rm *.ico 52 | rm *.md 53 | rm *.pdf 54 | yes | rm .travis.yml 55 | rm .bowerrc 56 | rm .editorconfig 57 | rm -rf .github 58 | rm .gitignore 59 | rm .jshintrc 60 | 61 | # force installation of bower packages at the root 62 | echo "{ \"directory\": \".\" }" > .bowerrc 63 | 64 | #make sure the deploy key isn't saved into the git repo 65 | echo "deploy_key" > .gitignore 66 | 67 | # add the redirect. 68 | # Note: We are not overwriting the component's documentation `index.html` file 69 | # here, we are making sure that http://url/px-something/ redirects to 70 | # http://url/px-something/px-something/, where the demo page is installed 71 | meta_temp='' 72 | echo ${meta_temp/'COMPONENT_NAME'/$REPO_NAME} > index.html 73 | 74 | # ------------------------------------------------------------------------------ 75 | # BOWER 76 | # ------------------------------------------------------------------------------ 77 | # 78 | #for some reason, bower isn't available here, so, install it globally, so it doesn't end up as another folder. 79 | npm install bower -g 80 | bower cache clean 81 | # Install the repo and the dark-theme. 82 | bower install ${REPO_NAME} px-dark-theme 83 | 84 | #copy the bower file into our root 85 | yes | cp ${REPO_NAME}/bower.json bower.json 86 | 87 | #and run install 88 | bower install 89 | 90 | # ------------------------------------------------------------------------------ 91 | # BUILD PROJECT 92 | # ------------------------------------------------------------------------------ 93 | 94 | # Go into the component folder we've just installed from bower 95 | cd ${REPO_NAME} 96 | 97 | # @DARK_THEME: Copy `index.html` to new file, where we will add dark theme 98 | yes | cp index.html index-dark.html 99 | 100 | # @DARK_THEME: Import dark-theme on the `index-dark.html` page 101 | sed 's/px-theme\/px-theme-styles.html/px-dark-theme\/px-dark-theme-styles.html/g;' index-dark.html 102 | 103 | # ------------------------------------------------------------------------------ 104 | # SW-PRECACHE 105 | # ------------------------------------------------------------------------------ 106 | 107 | # npm install sw-precache 108 | # sw-precache --root='.' --static-file-globs='**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}' 109 | 110 | # ------------------------------------------------------------------------------ 111 | # GIT PUSH TO REMOTES 112 | # ------------------------------------------------------------------------------ 113 | 114 | # Remember to exit out of the component before we do any git stuff 115 | cd ../ 116 | 117 | # Do the git stuff 118 | 119 | # checkout a new orphan 120 | git checkout --orphan $TARGET_BRANCH 121 | 122 | git add -A . 123 | git commit -m "${GIT_COMMIT_MESSAGE}" 124 | 125 | # Set git credentials (defined in settings above) 126 | git config user.name ${GIT_USER_NAME} 127 | git config user.email ${GIT_USER_EMAIL} 128 | 129 | 130 | # We get the URL in this format: "https://github.com/PredixDev/px-something" 131 | # First, we need to replace https-style remote URL with a SSH-style remote 132 | # URL we can push to below 133 | SSH_GIT=${REPO/https:\/\/github.com\//git@github.com:} 134 | 135 | # Now, the URL is in this format: "git@github.com:PredixDev/px-something" 136 | # Next, replace `PredixDev` Github organization with `predix-ui` so configure 137 | # the correct remote to push to. 138 | # The resulting URL will be: "git@github.com:predix-ui/px-something" 139 | SSH_GIT_PREDIXUI=${SSH_GIT/:PredixDev\//:predix-ui\/} 140 | 141 | # Prepare ssh key, which we'll use to authenticate for SSH-push deploy 142 | eval `ssh-agent -s` 143 | # ... and change permissions for deploy key 144 | chmod 0400 $TRAVIS_BUILD_DIR/deploy_key 145 | 146 | # Push to predix-ui/repo `gh-pages` branch (force to override out-of-date refs) 147 | ssh-add $TRAVIS_BUILD_DIR/deploy_key 148 | git push $SSH_GIT_PREDIXUI $TARGET_BRANCH --force 149 | 150 | sleep 120s 151 | 152 | curl -X DELETE "https://api.cloudflare.com/client/v4/zones/${cloudflare_zone_identifier}/purge_cache" -H "X-Auth-Email: martin.wragg@ge.com" -H "X-Auth-Key: ${cloudflare}" -H "Content-Type: application/json" --data '{"purge_everything":true}' -------------------------------------------------------------------------------- /demo/template-detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-detail 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 100 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /demo/template-dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-dashboard 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /sass/px-layout-predix.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016 GE Global Research. All rights reserved. 3 | * 4 | * The copyright to the computer software herein is the property of 5 | * GE Global Research. The software may be used and/or copied only 6 | * with the written permission of GE Global Research or in accordance 7 | * with the terms and conditions stipulated in the agreement/contract 8 | * under which the software has been supplied. 9 | */ 10 | @charset "utf-8"; 11 | 12 | $inuit-widths-columns-responsive : ( 1, 2, 3, 4, 6 ); 13 | $inuit-base-spacing-unit: 1rem; 14 | 15 | /// Settings 16 | ///-------------------------------------------------------- 17 | 18 | @import "variables"; 19 | @import "px-defaults-design/_settings.defaults.scss"; 20 | @import "px-colors-design/_settings.colors.scss"; 21 | 22 | /// Base 23 | ///-------------------------------------------------------- 24 | //@import "px-typography-design/_base.typography.scss"; 25 | @import "px-headings-design/_base.headings.scss"; 26 | @import "px-flexbox-design/_base.flexbox.scss"; 27 | @import "px-viewport-design/_base.viewport.scss"; 28 | 29 | ///Tables 30 | $inuit-enable-table--fixed : true; 31 | $inuit-enable-table--small : true; 32 | $inuit-enable-table--large : true; 33 | $inuit-enable-table--no-cells : true; 34 | $inuit-enable-table--rows : true; 35 | $inuit-enable-table--columns : true; 36 | @import "px-tables-design/_base.tables.scss"; 37 | 38 | /// Objects 39 | ///-------------------------------------------------------- 40 | 41 | ///Boxes 42 | $inuit-enable-box--flush : true; 43 | $inuit-enable-box--tiny : true; 44 | $inuit-enable-box--small : true; 45 | $inuit-enable-box--large : true; 46 | $inuit-enable-box--huge : true; 47 | @import "px-box-design/_objects.box.scss"; 48 | 49 | ///Buttons 50 | $inuit-enable-btn--primary : true; 51 | $inuit-enable-btn--tertiary : true; 52 | $inuit-enable-btn--small : true; 53 | $inuit-enable-btn--large : true; 54 | $inuit-enable-btn--huge : true; 55 | $inuit-enable-btn--full : true; 56 | $inuit-enable-btn--icon : true; 57 | $inuit-enable-btn--bare : true; 58 | $inuit-enable-btn--disabled : true; 59 | 60 | @import "mixins"; 61 | //Style distrubited content 62 | @include c(''){ 63 | @import "px-buttons-design/_objects.buttons.scss"; 64 | @import "px-toggle-design/_objects.toggle.scss"; 65 | } 66 | 67 | ///.layout 68 | $inuit-layout-min-width: 200px; 69 | $inuit-enable-layout--tiny : true; 70 | $inuit-enable-layout--small : true; 71 | $inuit-enable-layout--large : true; 72 | $inuit-enable-layout--huge : true; 73 | $inuit-enable-layout--flush : true; 74 | $inuit-enable-layout--rev : true; 75 | $inuit-enable-layout--middle : true; 76 | $inuit-enable-layout--bottom : true; 77 | $inuit-enable-layout--full : true; 78 | $inuit-enable-layout--right : true; 79 | $inuit-enable-layout--center : true; 80 | $inuit-enable-layout__item--full : true; 81 | $inuit-enable-layout__item--center : true; 82 | $inuit-enable-layout__item--bottom : true; 83 | $inuit-global-border-box : true; 84 | @import "px-layout-design/_objects.layout.scss"; 85 | 86 | 87 | 88 | /// Trumps 89 | ///-------------------------------------------------------- 90 | ///Mobile breakpoints (xs, sm, md, lg, xl) 91 | @import 'px-mobile-design/_trumps.breakpoints.scss'; 92 | 93 | ///Margins 94 | $inuit-enable-paddings : true; 95 | $inuit-enable-paddings--tiny : true; 96 | $inuit-enable-paddings--small : true; 97 | $inuit-enable-paddings--large : true; 98 | $inuit-enable-paddings--huge : true; 99 | $inuit-enable-paddings--none : true; 100 | $inuit-enable-margins : true; 101 | $inuit-enable-margins--tiny : true; 102 | $inuit-enable-margins--small : true; 103 | $inuit-enable-margins--large : true; 104 | $inuit-enable-margins--huge : true; 105 | $inuit-enable-margins--negative : true; 106 | $inuit-enable-margins--negative-tiny : true; 107 | $inuit-enable-margins--negative-small : true; 108 | $inuit-enable-margins--negative-large : true; 109 | $inuit-enable-margins--negative-huge : true; 110 | $inuit-enable-margins--none : true; 111 | @import "px-spacing-design/_trumps.spacing.scss"; 112 | 113 | ///Paddings 114 | $inuit-enable-responsive-paddings : true; 115 | $inuit-enable-responsive-paddings--none : true; 116 | $inuit-enable-responsive-paddings--tiny : true; 117 | $inuit-enable-responsive-paddings--small : true; 118 | $inuit-enable-responsive-paddings--large : true; 119 | $inuit-enable-responsive-paddings--huge : true; 120 | $inuit-enable-responsive-margins : true; 121 | $inuit-enable-responsive-margins--none : true; 122 | $inuit-enable-responsive-margins--tiny : true; 123 | $inuit-enable-responsive-margins--small : true; 124 | $inuit-enable-responsive-margins--large : true; 125 | $inuit-enable-responsive-margins--huge : true; 126 | $inuit-enable-responsive-margins--negative : true; 127 | $inuit-enable-responsive-margins--negative-tiny : true; 128 | $inuit-enable-responsive-margins--negative-small: true; 129 | $inuit-enable-responsive-margins--negative-large: true; 130 | $inuit-enable-responsive-margins--negative-huge : true; 131 | 132 | 133 | ///Responsive spacing 134 | @import "px-spacing-responsive-design/_trumps.spacing-responsive.scss"; 135 | @import "px-widths-design/_trumps.widths.scss"; 136 | @import "px-widths-responsive-design/_trumps.widths-responsive.scss"; 137 | 138 | /// Tools 139 | ///-------------------------------------------------------- 140 | @import "px-mobile-design/sass/_mixins.scss"; 141 | @import "inuit-responsive-settings/_settings.responsive.scss"; 142 | @import "inuit-responsive-tools/_tools.responsive.scss"; 143 | @import "px-widths-tools-design/_tools.widths.scss"; 144 | 145 | 146 | /// Generic 147 | ///-------------------------------------------------------- 148 | @import "px-normalize-design/_generic.normalize.scss"; 149 | @import "px-box-sizing-design/_generic.box-sizing.scss"; 150 | @import "px-helpers-design/_generic.helpers.scss"; 151 | 152 | ///Components 153 | ///-------------------------------------------------------- 154 | @import 'l-splitview.scss'; 155 | @import 'l-tabs-to-columns.scss'; 156 | @import 'px-layout.scss'; 157 | 158 | ///Demo 159 | ///-------------------------------------------------------- 160 | @import 'px-layout-demo.scss'; 161 | -------------------------------------------------------------------------------- /demo/template-detail-turbine.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | template-detail-turbine 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 43 | 44 | 45 | 46 | 47 | 48 | 115 | 210 | 211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /px-header-layout/px-header-layout.html: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 52 | 53 | 54 | 101 | 214 | 215 | -------------------------------------------------------------------------------- /demo/template-vanilla-seed-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-vanilla-seed 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 145 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /demo/template-splitview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-splitview 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 111 | 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /demo/template-detail-asset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | template-detail-asset 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 59 | 60 | 61 | 137 | 231 | 232 | 233 | --------------------------------------------------------------------------------