fix(grid): add css debugger (#99)

packages/core/gulpfile.js

@@ -5,6 +5,7 @@ const rename = require('gulp-rename');
 const uglify = require('gulp-uglify');
 const sourcemaps = require('gulp-sourcemaps');
 const babel = require('gulp-babel');
+const concat = require('gulp-concat');
 const del = require('del');
 const rollup = require('rollup');
 const rollupConfig = require('./config/rollup.config');
@@ -24,8 +25,15 @@ gulp.task('clean', () =>
 
 gulp.task('sass:compiled', () => {
  function buildStyles(prod) {
+ const scssSources = ['src/ray-core.scss'];
+
+ if (!prod) {
+ scssSources.push('src/ray-debug.scss');
+ }
+
  return gulp
- .src('src/ray-core.scss')
+ .src(scssSources)
+ .pipe(concat('ray-core.scss'))
  .pipe(sourcemaps.init())
  .pipe(
  sass({

packages/core/package.json

@@ -33,6 +33,7 @@
  "gulp": "4.0.0",
  "gulp-autoprefixer": "6.0.0",
  "gulp-babel": "8.0.0",
+ "gulp-concat": "2.6.1",
  "gulp-rename": "1.4.0",
  "gulp-sass": "4.0.2",
  "gulp-sourcemaps": "2.6.5",

packages/core/src/global/material-grid/mdc-layout-grid-debug.scss

@@ -0,0 +1,66 @@
+@import '../variables';
+
+/* Grid Debug - Settings */
+:root {
+ --g-columns: var(--ray-layout-grid-columns-phone);
+ --g-gutter: var(--ray-layout-grid-gutter-phone);
+ --g-margin: var(--ray-layout-grid-margin-phone);
+ --g-color: hsla(4, 80%, 72%, 0.35);
+}
+
+@media (min-width: map-get($ray-layout-grid-breakpoints, tablet)) {
+ :root {
+ --g-columns: var(--ray-layout-grid-columns-tablet);
+ --g-gutter: var(--ray-layout-grid-gutter-tablet);
+ --g-margin: var(--ray-layout-grid-margin-tablet);
+ }
+}
+
+@media (min-width: map-get($ray-layout-grid-breakpoints, desktop)) {
+ :root {
+ --g-columns: var(--ray-layout-grid-columns-desktop);
+ --g-gutter: var(--ray-layout-grid-gutter-desktop);
+ --g-margin: var(--ray-layout-grid-margin-desktop);
+ }
+}
+
+/* Grid Debug - Helper variables */
+:root {
+ --g-repeating-width: calc((100% / var(--g-columns)));
+ --g-column-width: calc((100% / var(--g-columns)) - var(--g-gutter));
+ --g-background-columns: repeating-linear-gradient(
+ to right,
+ var(--g-color),
+ var(--g-color),
+ var(--g-column-width),
+ transparent var(--g-column-width),
+ transparent var(--g-repeating-width)
+ );
+}
+
+.#{$ray-class-prefix}grid--debug {
+ position: relative;
+
+ &.#{$ray-class-prefix}grid::before {
+ right: var(--g-margin) !important;
+ margin-right: calc(-1 * var(--g-gutter)) !important;
+ }
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ height: 100%;
+ left: var(--g-margin);
+ right: calc(var(--g-margin) + -1 * var(--g-gutter));
+ top: 0;
+ bottom: 0;
+ max-width: calc(
+ #{map-get($ray-layout-grid-max-width, desktop)} - var(--g-margin) * 2 + var(--g-gutter)
+ );
+ margin: 0 auto;
+ background-image: var(--g-background-columns);
+ z-index: 1000;
+ pointer-events: none;
+ }
+}

packages/core/src/global/material-grid/mdc-layout-grid.scss

@@ -25,6 +25,10 @@
 @include exports('ray-grid') {
  :root {
  @each $size in map-keys($ray-layout-grid-columns) {
+ --ray-layout-grid-columns-#{$size}: #{map-get(
+ $ray-layout-grid-columns,
+ $size
+ )};
  --ray-layout-grid-margin-#{$size}: #{map-get(
  $ray-layout-grid-default-margin,
  $size

packages/core/src/ray-debug.scss

@@ -0,0 +1 @@
+@import './global/material-grid/mdc-layout-grid-debug';

packages/core/stories/grid.stories.js

@@ -21,7 +21,11 @@ function RayGridInnerWithBackground(props) {
  <div
  {...props}
  className="ray-grid__inner"
- style={{ backgroundColor: 'hsl(0, 100%, 75%)', ...props.style }}
+ style={{
+ position: 'relative',
+ backgroundColor: 'hsl(0, 100%, 75%)',
+ ...props.style
+ }}
  />
  );
 }
@@ -162,6 +166,65 @@ storiesOf('Grid', module)
  </div>
  </div>
  ))
+ .add('debugger', () => (
+ <div>
+ <div className="ray-grid ray-grid--debug">
+ <div className="ray-grid__inner" style={{ position: 'relative' }}>
+ <div
+ className="ray-grid__cell--span-4"
+ style={{
+ zIndex: '1',
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ display: 'flex',
+ alignItems: 'center'
+ }}
+ >
+ <div
+ style={{
+ backgroundColor: '#fff',
+ padding: '1rem',
+ width: '100%'
+ }}
+ >
+ <pre
+ style={{
+ margin: 0
+ }}
+ >
+ z-index: 1;
+ <br />
+ position: absolute;
+ <br />
+ top: 0;
+ <br />
+ bottom: 0;
+ <br />
+ display: flex;
+ <br />
+ align-items: center;
+ <br />
+ </pre>
+ </div>
+ </div>
+ <div
+ className="ray-grid__cell--span-10"
+ style={{
+ marginLeft: 'auto'
+ }}
+ >
+ <div
+ className="ray-bg ray-bg--16by9"
+ style={{
+ backgroundImage: `url(//cdn.wework.com/6vy33zo2mgy3/2C7F8u8yfW4kKAI6OUa0a2/aae67b57aa0e7a26fcc84c561e823ee8/1_Web_150DPI-20180717_WeWork_Constellation_-_Common_Areas_-_Internal_Staircase.jpg?auto=compress&faces=false&w=1000&fit=crop&dpr=2&h=)`
+ }}
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ ))
  .add('sample utils', () => (
  <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
  <div className="ray-grid ray-grid--justify-center">

packages/core/stories/styles/index.scss

@@ -1,4 +1,5 @@
 @import '../../src/ray-core.scss';
+@import '../../src/ray-debug.scss';
 
 .ray-color-white {
  background-color: $ray-color-white;

packages/docs-app/src/components/GridDocumentation/index.js

@@ -16,9 +16,26 @@ function GridDocumentation() {
  <GridExample />
 
  <h4 className="ray-text--h4" style={{ marginTop: '3rem' }}>
- Breakpoints
+ Debug Overlay
  </h4>
+ <p className="ray-text--body">
+ You can enable a visual grid overlay by adding a{' '}
+ <code>ray-grid--debug</code> class name to either the{' '}
+ <code>ray-grid</code> div or any parent, full-width container (ie, html
+ or body). Grid overlay is aware of phone/tablet/desktop breakpoints and
+ will adjust accordingly.
+ </p>
+ <p>
+ <strong>Note:</strong> These classes are not available in the{' '}
+ compiled css output, but are
+ available in the non-minified version as well as the{' '}
+ <code>scss/ray-debug.scss</code> file.
+ </p>
+ <GridDebugExample />
 
+ <h4 className="ray-text--h4" style={{ marginTop: '3rem' }}>
+ Breakpoints
+ </h4>
  <Breakpoints breakpoints={breakpoints} />
  </div>
  );
@@ -45,6 +62,7 @@ function RayGridInnerWithBackground(props) {
  />
  );
 }
+
 function GridExample() {
  return (
  <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
@@ -72,6 +90,22 @@ function GridExample() {
  );
 }
 
+function GridDebugExample() {
+ return (
+ <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
+ <div className="ray-grid ray-grid--debug" style={{ height: '10rem' }}>
+ <div className="ray-grid__inner">
+ {range(12).map(n => (
+ <div className="ray-grid__cell--span-1" key={n}>
+ <SampleContent>cell</SampleContent>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+}
+
 function Breakpoints({ breakpoints }) {
  return (
  <table className="ray-table">

packages/docs-app/src/styles/index.scss

@@ -1,4 +1,5 @@
 @import '../../../core/src/ray-core.scss';
+@import '../../../core/src/ray-debug.scss';
 
 $font-family: 'Apercu', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
 $transition--base: 0.3s;

yarn.lock

@@ -5733,6 +5733,13 @@ concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@
  readable-stream "^2.2.2"
  typedarray "^0.0.6"
 
+concat-with-sourcemaps@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
+ integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
+ dependencies:
+ source-map "^0.6.1"
+
 config-chain@^1.1.11, config-chain@^1.1.12:
  version "1.1.12"
  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -7236,7 +7243,7 @@ duplexer@^0.1.1:
  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
 
-duplexify@^3.2.0, duplexify@^3.4.2, duplexify@^3.6.0:
+duplexify@^3.2.0, duplexify@^3.4.2, duplexify@^3.5.0, duplexify@^3.6.0:
  version "3.7.1"
  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
@@ -8734,6 +8741,11 @@ forever-agent@~0.6.1:
  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+fork-stream@^0.0.4:
+ version "0.0.4"
+ resolved "https://registry.yarnpkg.com/fork-stream/-/fork-stream-0.0.4.tgz#db849fce77f6708a5f8f386ae533a0907b54ae70"
+ integrity sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=
+
 [email protected]:
  version "1.0.0-alpha.6"
  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.0.0-alpha.6.tgz#826c57048addf8a3253853615c84f3ff7beeaf45"
@@ -9978,6 +9990,15 @@ gulp-cli@^2.0.0:
  v8flags "^3.0.1"
  yargs "^7.1.0"
 
+[email protected]:
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/gulp-concat/-/gulp-concat-2.6.1.tgz#633d16c95d88504628ad02665663cee5a4793353"
+ integrity sha1-Yz0WyV2IUEYorQJmVmPO5aR5M1M=
+ dependencies:
+ concat-with-sourcemaps "^1.0.0"
+ through2 "^2.0.0"
+ vinyl "^2.0.0"
+
 gulp-decompress@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/gulp-decompress/-/gulp-decompress-1.2.0.tgz#8eeb65a5e015f8ed8532cafe28454960626f0dc7"
@@ -9988,6 +10009,22 @@ gulp-decompress@^1.2.0:
  gulp-util "^3.0.1"
  readable-stream "^2.0.2"
 
+[email protected]:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/gulp-if/-/gulp-if-2.0.2.tgz#a497b7e7573005041caa2bc8b7dda3c80444d629"
+ integrity sha1-pJe351cwBQQcqivIt92jyARE1ik=
+ dependencies:
+ gulp-match "^1.0.3"
+ ternary-stream "^2.0.1"
+ through2 "^2.0.1"
+
+gulp-match@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/gulp-match/-/gulp-match-1.0.3.tgz#91c7c0d7f29becd6606d57d80a7f8776a87aba8e"
+ integrity sha1-kcfA1/Kb7NZgbVfYCn+Hdqh6uo4=
+ dependencies:
+ minimatch "^3.0.3"
+
 [email protected], gulp-rename@^1.2.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.4.0.tgz#de1c718e7c4095ae861f7296ef4f3248648240bd"
@@ -20662,6 +20699,16 @@ term-size@^1.2.0:
  dependencies:
  execa "^0.7.0"
 
+ternary-stream@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/ternary-stream/-/ternary-stream-2.0.1.tgz#064e489b4b5bf60ba6a6b7bc7f2f5c274ecf8269"
+ integrity sha1-Bk5Im0tb9gumpre8fy9cJ07Pgmk=
+ dependencies:
+ duplexify "^3.5.0"
+ fork-stream "^0.0.4"
+ merge-stream "^1.0.0"
+ through2 "^2.0.1"
+
 terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.1, terser-webpack-plugin@^1.2.2:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz#3f98bc902fac3e5d0de730869f50668561262ec8"