feat(layout): add -print breakpoint alias

support layout and flex attributes

* remove superfluous use of `screen and` in mediaQueries
* also support `hide-print` to hide elements when printing
* update docs to hide sideNav when printing
* update docs to use white background colors for demos
* support Layout API usages with print-xx suffices; which enabled component printing at the specified breakpoint range.

src/core/services/layout/layout.print.scss

@@ -0,0 +1,105 @@
+/*
+*
+*  Adaptive Print settings with Breakpoint Aliases\
+*
+*/
+
+// General printing Rules resets to default Layout API
+@media print {
+
+  // Override layout API settings to use defaults when printing.
+
+  @include layouts_for_breakpoint();
+  @include layout-padding-margin();
+
+  // NOTE: the PRINT layouts will be the same as the default (no-aliase) layouts
+  // @include layouts_for_breakpoint(print);
+
+  .hide-print:not(.show-print):not(.show) {
+    display: none !important;
+  }
+}
+
+
+@media print and (max-width: $layout-breakpoint-xs - 1) {
+  // Xtra-SMALL  SCREEN
+  .hide-print-xs, .hide-print {
+    &:not(.show-xs):not(.show) {
+      display: none !important;
+    }
+  }
+  @include layouts_for_breakpoint(xs);
+}
+
+@media print and (min-width: $layout-breakpoint-xs) {
+  // BIGGER THAN Xtra-SMALL SCREEN
+  @include layouts_for_breakpoint(gt-xs);
+
+}
+
+@media print and (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
+  .hide-print, .hide-print-gt-xs {
+    &:not(.show-gt-xs):not(.show-sm):not(.show) {
+      display: none !important;
+    }
+  }
+  .hide-print-sm:not(.show-print-gt-xs):not(.show-print-sm):not(.show-print) {
+    display: none !important;
+  }
+
+  @include layouts_for_breakpoint(sm);
+}
+
+@media print and (min-width: $layout-breakpoint-sm) {
+  // BIGGER THAN SMALL SCREEN
+  @include layouts_for_breakpoint(gt-sm);
+
+}
+
+@media print and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
+  // MEDIUM SCREEN
+  .hide-print, .hide-print-gt-xs, .hide-print-gt-sm {
+    &:not(.show-print-gt-xs):not(.show-print-gt-sm):not(.show-print-md):not(.show-print) {
+      display: none !important;
+    }
+  }
+  .hide-print-md:not(.show-print-md):not(.show-print-gt-sm):not(.show-print-gt-xs):not(.show-print) {
+    display: none !important;
+  }
+  @include layouts_for_breakpoint(md);
+}
+
+@media print and (min-width: $layout-breakpoint-md) {
+  // BIGGER THAN MEDIUM SCREEN
+  @include layouts_for_breakpoint(gt-md);
+}
+
+@media print and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
+  // LARGE SCREEN
+  .hide-print,.hide-print-gt-xs, .hide-print-gt-sm, .hide-print-gt-md {
+    &:not(.show-print-gt-xs):not(.show-print-gt-sm):not(.show-print-gt-md):not(.show-print-lg):not(.show-print) {
+      display: none !important;
+    }
+  }
+  .hide-print-lg:not(.show-print-lg):not(.show-print-gt-md):not(.show-print-gt-sm):not(.show-print-gt-xs):not(.show-print) {
+    display: none !important;
+  }
+
+  @include layouts_for_breakpoint(lg);
+}
+
+@media print and (min-width: $layout-breakpoint-lg) {
+  @include layouts_for_breakpoint(gt-lg);
+  @include layouts_for_breakpoint(xl);
+
+  // BIGGER THAN LARGE SCREEN
+  .hide-print, .hide-print-gt-xs, .hide-print-gt-sm, .hide-print-gt-md, .hide-print-gt-lg {
+    &:not(.show-print-gt-xs):not(.show-print-gt-sm):not(.show-print-gt-md):not(.show-print-gt-lg):not(.show-print-xl):not(.show-print) {
+      display: none !important;
+    }
+  }
+  .hide-print-xl:not(.show-print-xl):not(.show-print-gt-lg):not(.show-print-gt-md):not(.show-print-gt-sm):not(.show-print-gt-xs):not(.show-print) {
+    display: none !important;
+  }
+
+}