├── gulpfile.js
├── app
    ├── styles
    │   ├── components
    │   │   ├── Checkbox.css
    │   │   ├── Sidebar.css
    │   │   ├── Note.css
    │   │   ├── Section.css
    │   │   ├── Input.css
    │   │   ├── Image.css
    │   │   ├── IconActions.css
    │   │   ├── Icon.css
    │   │   ├── IconButton.css
    │   │   ├── PinAction.css
    │   │   ├── Nav.css
    │   │   ├── InfoBox.css
    │   │   ├── LiveCodeDemo.css
    │   │   ├── Button.css
    │   │   ├── Footer.css
    │   │   └── App.css
    │   ├── base
    │   │   ├── variables.css
    │   │   ├── media.css
    │   │   ├── reset.css
    │   │   └── demos.css
    │   ├── vendor
    │   │   └── highlight.css
    │   ├── demos
    │   │   ├── Gallery.css
    │   │   ├── MultiColBox.css
    │   │   ├── Card.css
    │   │   ├── Form.css
    │   │   └── Calendar.css
    │   └── main.css
    ├── scripts
    │   ├── constants.js
    │   ├── transition.js
    │   ├── Sidebar.js
    │   ├── Nav.js
    │   ├── state.js
    │   ├── main.js
    │   ├── Content.js
    │   ├── App.js
    │   └── analytics.js
    └── templates
    │   ├── components
    │       ├── gallery.html
    │       ├── form.html
    │       ├── card.html
    │       ├── MultiColBox.html
    │       └── calendar.html
    │   ├── _nomodule-shim.html
    │   ├── _pin-action.html
    │   ├── demos
    │       ├── calendar.html
    │       ├── card.html
    │       ├── form.html
    │       ├── gallery.html
    │       ├── custom-breakpoints.html
    │       ├── custom-elements.html
    │       └── nested-components.html
    │   ├── footer.html
    │   ├── header.html
    │   ├── nav.html
    │   ├── overview.html
    │   ├── index.html
    │   ├── _resize-observer.html
    │   └── icons.svg
├── .gitignore
├── tasks
    ├── clean.js
    ├── build.js
    ├── serve.js
    ├── deploy.js
    ├── css.js
    ├── utils
    │   └── assets.js
    ├── templates.js
    └── javascript.js
├── .eslintrc
├── config.js
├── README.md
├── package.json
└── LICENSE


/gulpfile.js:
--------------------------------------------------------------------------------
1 | require('require-dir')('./tasks');
2 | 


--------------------------------------------------------------------------------
/app/styles/components/Checkbox.css:
--------------------------------------------------------------------------------
1 | .Checkbox {
2 |   display: inline-block;
3 |   margin-right: .5em;
4 | }
5 | 


--------------------------------------------------------------------------------
/app/styles/components/Sidebar.css:
--------------------------------------------------------------------------------
1 | .Sidebar {
2 |   padding: 0 var(--gutter) var(--gutter);
3 |   min-width: 16em;
4 | }
5 | 


--------------------------------------------------------------------------------
/app/styles/components/Note.css:
--------------------------------------------------------------------------------
1 | .Note {
2 |   background: hsl(60, 100%, 93%);
3 |   font-size: 1em;
4 |   margin: 0 0 1.5em;
5 |   padding: 1em 1.5em;
6 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OS or Editor folders
 2 | .DS_Store
 3 | 
 4 | # Node stuff
 5 | node_modules
 6 | 
 7 | # Static site output
 8 | responsive-components
 9 | 
10 | # Log files
11 | *.log
12 | 


--------------------------------------------------------------------------------
/app/styles/components/Section.css:
--------------------------------------------------------------------------------
 1 | /* This will get overridden by the visible section or the <noscript> */
 2 | 
 3 | .Section {
 4 |   display: none;
 5 | }
 6 | 
 7 | .Section--isSelected {
 8 |   display: block;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/scripts/constants.js:
--------------------------------------------------------------------------------
 1 | export const SECTIONS = new Set([
 2 |   'overview',
 3 |   'calendar',
 4 |   'card',
 5 |   'form',
 6 |   'gallery',
 7 |   'nested-components',
 8 |   'custom-breakpoints',
 9 |   'custom-elements',
10 | ]);
11 | 


--------------------------------------------------------------------------------
/app/styles/components/Input.css:
--------------------------------------------------------------------------------
 1 | .Input {
 2 |   border-radius: 4px;
 3 |   border: 1px solid #ccc;
 4 |   max-width: 36em;
 5 |   padding: .5em;
 6 |   width: 100%;
 7 | }
 8 | 
 9 | .Input--checkBox,
10 | .Input--radioButton {
11 |   width: auto;
12 | }
13 | 


--------------------------------------------------------------------------------
/tasks/clean.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs-extra');
 2 | const gulp = require('gulp');
 3 | const {resetManifest} = require('./utils/assets');
 4 | const config = require('../config');
 5 | 
 6 | gulp.task('clean', async () => {
 7 |   await fs.remove(config.publicDir);
 8 |   resetManifest();
 9 | });
10 | 


--------------------------------------------------------------------------------
/app/styles/components/Image.css:
--------------------------------------------------------------------------------
 1 | .Image {
 2 |   border: 1px solid hsl(0, 0%, 90%);
 3 |   padding: .25em;
 4 | }
 5 | 
 6 | .Image::after {
 7 |   background: hsl(0, 0%, 90%);
 8 |   content: '';
 9 |   display: block;
10 |   height: 0;
11 |   padding-top: calc(100% * 9 / 16);
12 |   width: 100%;
13 | }
14 | 


--------------------------------------------------------------------------------
/app/styles/components/IconActions.css:
--------------------------------------------------------------------------------
 1 | .IconActions {
 2 |   display: flex;
 3 |   flex-flow: row wrap;
 4 |   font-size: 0.8em;
 5 | }
 6 | 
 7 | .IconActions > .Icon {
 8 |   color: #aaa;
 9 |   transition: color 0.2s var(--material-easing);
10 | }
11 | 
12 | .IconActions > .Icon:hover {
13 |   color: #444;
14 | }
15 | 


--------------------------------------------------------------------------------
/app/templates/components/gallery.html:
--------------------------------------------------------------------------------
1 | <ul class="Gallery">
2 |   <li><figure class="Image"></figure></li>
3 |   <li><figure class="Image"></figure></li>
4 |   <li><figure class="Image"></figure></li>
5 |   <li><figure class="Image"></figure></li>
6 |   <li><figure class="Image"></figure></li>
7 |   <li><figure class="Image"></figure></li>
8 | </ul>


--------------------------------------------------------------------------------
/tasks/build.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | 
 3 | // Ensure referenced tasks are registered.
 4 | require('./clean.js');
 5 | require('./css.js');
 6 | require('./javascript.js');
 7 | require('./templates.js');
 8 | 
 9 | gulp.task('build', gulp.series(
10 |     'clean',
11 |     gulp.parallel('css', 'javascript'),
12 |     'templates'));
13 | 


--------------------------------------------------------------------------------
/app/styles/components/Icon.css:
--------------------------------------------------------------------------------
 1 | .Icon {
 2 |   contain: strict;
 3 |   display: inherit;
 4 |   fill: currentColor;
 5 |   height: 1.5em;
 6 |   min-width: 1.5em;
 7 |   width: 1.5em;
 8 | }
 9 | 
10 | .Icon--inline {
11 |   margin-right: 0.667em;
12 | }
13 | 
14 | .Icon--inline:last-child {
15 |   margin-right: 0;
16 |   margin-left: 0.667em;
17 | }
18 | 


--------------------------------------------------------------------------------
/app/styles/base/variables.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --gutter: 1.5em;
 3 |   --accentColor: hsl(300, 50%, 50%);
 4 |   --accentColorMuted: hsl(300, 40%, 40%);
 5 |   --material-easing: cubic-bezier(0.4, 0, 0.2, 1);
 6 | }
 7 | 
 8 | @media (max-width: 23.97em) {
 9 |   :root {
10 |     --gutter: 1.25rem;
11 |   }
12 | }
13 | 
14 | @media (min-width: 72em) {
15 |   :root {
16 |     --gutter: 2rem;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/app/styles/vendor/highlight.css:
--------------------------------------------------------------------------------
 1 | @import 'highlight.js/styles/github';
 2 | 
 3 | pre {
 4 |   border: 1px solid hsla(0, 0%, 0%, 0.075);
 5 |   border-radius: .25em;
 6 |   background: #fff;
 7 |   margin: 1em 0;
 8 |   overflow: auto;
 9 |   padding: 1em 1.5em;
10 |   -webkit-text-size-adjust: none;
11 |   white-space: pre;
12 | }
13 | 
14 | /* Allow for highlighting specific parts of a code block. */
15 | pre mark {
16 |   background-color: hsla(60, 100%, 50%, 0.4);
17 |   box-shadow: 0 0 0 .1em hsla(60, 100%, 50%, 0.4);
18 |   font-style: normal;
19 | }
20 | 


--------------------------------------------------------------------------------
/app/styles/components/IconButton.css:
--------------------------------------------------------------------------------
 1 | .IconButton {
 2 |   background-color: hsla(0, 0%, 0%, 0);
 3 |   border: 0;
 4 |   border-radius: 50%;
 5 |   color: inherit;
 6 |   contain: layout style;
 7 |   cursor: pointer;
 8 |   display: flex;
 9 |   margin: -0.5em;
10 |   padding: 0.5em;
11 |   transition: background-color 0.3s var(--material-easing);
12 | }
13 | 
14 | .IconButton:hover,
15 | .IconButton:focus {
16 |   background-color: hsla(0, 0%, 0%, 0.1);
17 |   outline: 0;
18 | }
19 | 
20 | .IconButton--dark:hover,
21 | .IconButton--dark:focus {
22 |   background-color: hsla(0, 0%, 0%, 0.25);
23 | }
24 | 


--------------------------------------------------------------------------------
/app/styles/components/PinAction.css:
--------------------------------------------------------------------------------
 1 | .PinAction {
 2 |   margin: 0 0 1.5em;
 3 | }
 4 | 
 5 | .PinAction-activeIcon,
 6 | .PinAction-inactiveIcon {
 7 |   margin-left: 0.667em;
 8 | }
 9 | 
10 | .PinAction-activeText {
11 |   display: none;
12 | }
13 | 
14 | .PinAction-activeIcon {
15 |   display: none;
16 | }
17 | 
18 | .PinAction--isActive .PinAction-activeText {
19 |   display: initial;
20 | }
21 | 
22 | .PinAction--isActive .PinAction-activeIcon {
23 |   display: initial;
24 | }
25 | 
26 | .PinAction--isActive .PinAction-inactiveText {
27 |   display: none;
28 | }
29 | 
30 | .PinAction--isActive .PinAction-inactiveIcon {
31 |   display: none;
32 | }
33 | 


--------------------------------------------------------------------------------
/app/styles/base/media.css:
--------------------------------------------------------------------------------
 1 | @media (max-width: 47.97em) {
 2 |   .hidden\@MD {
 3 |     display: none!important;
 4 |   }
 5 | }
 6 | 
 7 | @media (min-width: 48em) {
 8 |   .visible\@MD {
 9 |     display: none!important;
10 |   }
11 | }
12 | 
13 | @media (max-width: 59.97em) {
14 |   .hidden\@LG {
15 |     display: none!important;
16 |   }
17 | }
18 | 
19 | @media (min-width: 60em) {
20 |   .visible\@LG {
21 |     display: none!important;
22 |   }
23 | }
24 | 
25 | @media (max-width: 71.97em) {
26 |   .hidden\@XL {
27 |     display: none!important;
28 |   }
29 | }
30 | 
31 | @media (min-width: 72em) {
32 |   .visible\@XL {
33 |     display: none!important;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/tasks/serve.js:
--------------------------------------------------------------------------------
 1 | const connect = require('connect');
 2 | const gulp = require('gulp');
 3 | const serveStatic = require('serve-static');
 4 | const config = require('../config');
 5 | 
 6 | gulp.task('serve', gulp.series('build', () => {
 7 |   const port = 8080;
 8 |   const url = `http://localhost:${port}${config.publicPath}`;
 9 |   console.log(`Running app on ${url} and listening for changes`);
10 | 
11 |   connect().use(serveStatic('./')).listen(port);
12 | 
13 |   gulp.watch('app/**/*.css', gulp.series('css', 'templates'));
14 |   gulp.watch('app/**/*.js', gulp.series('javascript', 'templates'));
15 |   gulp.watch('app/**/*.html', gulp.series('templates'));
16 | }));
17 | 


--------------------------------------------------------------------------------
/app/templates/_nomodule-shim.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
 3 | (function() {
 4 |   var check = document.createElement('script');
 5 |   if (!('noModule' in check) && 'onbeforeload' in check) {
 6 |     var support = false;
 7 |     document.addEventListener('beforeload', function(e) {
 8 |       if (e.target === check) {
 9 |         support = true;
10 |       } else if (!e.target.hasAttribute('nomodule') || !support) {
11 |         return;
12 |       }
13 |       e.preventDefault();
14 |     }, true);
15 | 
16 |     check.type = 'module';
17 |     check.src = '.';
18 |     document.head.appendChild(check);
19 |     check.remove();
20 |   }
21 | })();
22 | </script>
23 | 


--------------------------------------------------------------------------------
/app/templates/_pin-action.html:
--------------------------------------------------------------------------------
 1 | <div class="PinAction hidden@MD" data-pin-action data-requires-js>
 2 |   <button class="Button Button--action">
 3 |     <div class="Button-wrapper">
 4 |       <div class="Button-text">
 5 |         <span class="PinAction-inactiveText">Pin demo in sidebar</span>
 6 |         <span class="PinAction-activeText">Demo pinned in sidebar</span>
 7 |       </div>
 8 |       <span class="PinAction-inactiveIcon">
 9 |         <svg class="Icon">
10 |           <use xlink:href="#arrow_forward"></use>
11 |         </svg>
12 |       </span>
13 |       <span class="PinAction-activeIcon">
14 |         <svg class="Icon">
15 |           <use xlink:href="#check"></use>
16 |         </svg>
17 |       </span>
18 |     </div>
19 |   </button>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/app/scripts/transition.js:
--------------------------------------------------------------------------------
 1 | export const transition =
 2 |     ($el, timeout, {to, using, from, useTransitions = true} = {}) => {
 3 |   return new Promise((resolve, reject) => {
 4 |     const change = () => {
 5 |       if (to) {
 6 |         $el.classList.add(to);
 7 |       } else if (from) {
 8 |         $el.classList.remove(from);
 9 |       }
10 |     };
11 | 
12 |     if (useTransitions) {
13 |       $el.classList.add(using);
14 | 
15 |       // Double rAF to ensure a frame happens before the class is added.
16 |       requestAnimationFrame(() => requestAnimationFrame(change));
17 | 
18 |       setTimeout(() => {
19 |         $el.classList.remove(using);
20 |         resolve();
21 |       }, timeout);
22 |     } else {
23 |       change();
24 |       resolve();
25 |     }
26 |   });
27 | };
28 | 


--------------------------------------------------------------------------------
/app/styles/demos/Gallery.css:
--------------------------------------------------------------------------------
 1 | .Gallery {
 2 |   background: #fff;
 3 |   border: 1px solid hsla(0, 0%, 0%, 0.075);
 4 |   margin: 0;
 5 |   max-width: 100%;
 6 |   padding: 0;
 7 | }
 8 | 
 9 | .Gallery > li {
10 |   list-style: none;
11 |   margin: 1em;
12 | }
13 | 
14 | @supports (display: grid) {
15 |   .Gallery {
16 |     display: grid;
17 |     grid-gap: 1em;
18 |     grid-template-columns: 1fr;
19 |     padding: 1em;
20 |   }
21 | 
22 |   .Gallery > li {
23 |     margin: 0;
24 |   }
25 | 
26 | 
27 |   /* -------------- */
28 |   /* Breakpoint: MD */
29 |   /* -------------- */
30 | 
31 |   .MD > .Gallery {
32 |     grid-template-columns: 1fr 1fr;
33 |   }
34 | 
35 |   /* -------------- */
36 |   /* Breakpoint: XL */
37 |   /* -------------- */
38 | 
39 |   .XL > .Gallery {
40 |     grid-template-columns: 1fr 1fr 1fr;
41 |   }
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/app/styles/components/Nav.css:
--------------------------------------------------------------------------------
 1 | .Nav {
 2 |   padding: .5rem 0;
 3 |   min-width: 16em;
 4 | }
 5 | 
 6 | .Nav-item {
 7 |   list-style: none;
 8 |   margin: 0;
 9 | }
10 | 
11 | .Nav-link {
12 |   align-items: center;
13 |   background-color: transparent;
14 |   color: inherit;
15 |   contain: strict;
16 |   display: flex;
17 |   font-size: 0.9em;
18 |   height: 3.25rem;
19 |   padding: 0 var(--gutter);
20 |   text-decoration: none;
21 |   transition: background-color 0.2s var(--material-easing);
22 | }
23 | 
24 | .Nav-link:hover {
25 |   background-color: hsla(0, 0%, 100%, 0.05);
26 |   text-decoration: none;
27 | }
28 | 
29 | .Nav-link--selected {
30 |   background-color: hsla(0, 0%, 100%, 0.1);
31 |   text-decoration: none;
32 | }
33 | 
34 | .Nav-link--selected:hover,
35 | .Nav-link--selected:focus {
36 |   background-color: hsla(0, 0%, 100%, 0.1);
37 |   cursor: default;
38 | }
39 | 


--------------------------------------------------------------------------------
/app/templates/demos/calendar.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="calendar">
 2 |   <h2 class="Heading">
 3 |     <span id="calendar" data-section-anchor></span>
 4 |     Calendar
 5 |   </h2>
 6 |   <div data-demo-root data-observe-resizes>
 7 |     {% include 'components/Calendar.html' %}
 8 |   </div>
 9 |   {% include '_pin-action.html' %}
10 | 
11 |   <h3>The code</h3>
12 | 
13 |   {% highlight 'html' %}
14 |   <!-- Container element -->
15 |   <div data-observe-resizes>
16 |     <!-- Component element -->
17 |     <div class="Calendar">...</div>
18 |   </div>
19 |   {% endhighlight %}
20 | 
21 |   <ul>
22 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Calendar.css">
23 |     Full calendar CSS source</a></li>
24 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/components/calendar.html">
25 |     Full calendar HTML source</a></li>
26 |   </ul>
27 | </section>


--------------------------------------------------------------------------------
/app/templates/demos/card.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="card">
 2 |   <h2 class="Heading">
 3 |     <span id="card" data-section-anchor></span>
 4 |     Card
 5 |   </h2>
 6 |   <div data-demo-root data-observe-resizes>
 7 |     {% include 'components/Card.html' %}
 8 |   </div>
 9 |   {% set component = 'Card' %}
10 |   {% include '_pin-action.html' %}
11 | 
12 |   <h3>The code</h3>
13 | 
14 |   {% highlight 'html' %}
15 |   <!-- Container element -->
16 |   <div data-observe-resizes>
17 |     <!-- Component element -->
18 |     <div class="Card">...</div>
19 |   </div>
20 |   {% endhighlight %}
21 | 
22 |   <ul>
23 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Card.css">
24 |     Full card CSS source</a></li>
25 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/components/card.html">
26 |     Full card HTML source</a></li>
27 |   </ul>
28 | </section>
29 | 


--------------------------------------------------------------------------------
/app/templates/demos/form.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="form">
 2 |   <h2 class="Heading">
 3 |     <span id="form" data-section-anchor></span>
 4 |     Form
 5 |   </h2>
 6 |   <div data-demo-root data-observe-resizes>
 7 |     {% include 'components/Form.html' %}
 8 |   </div>
 9 |   {% set component = 'Form' %}
10 |   {% include '_pin-action.html' %}
11 | 
12 |   <h3>Go deeper</h3>
13 | 
14 |   {% highlight 'html' %}
15 |   <!-- Container element -->
16 |   <div data-observe-resizes>
17 |     <!-- Component element -->
18 |     <form class="Form">...</form>
19 |   </div>
20 |   {% endhighlight %}
21 | 
22 |   <ul>
23 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Form.css">
24 |     Full form CSS source</a></li>
25 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/components/form.html">
26 |     Full form HTML source</a></li>
27 |   </ul>
28 | </section>
29 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "html",
 4 |   ],
 5 |   "env": {
 6 |     "browser": true,
 7 |     "node": true,
 8 |   },
 9 |   "globals": {
10 |     "browser": false
11 |   },
12 |   "extends": [
13 |     "eslint:recommended", "google"
14 |   ],
15 |   "rules": {
16 |     "eqeqeq": 2,
17 |     "require-jsdoc": 0
18 |   },
19 |   "overrides": [{
20 |     "files": ["app/**/*.js"],
21 |     "env": {
22 |       "browser": true,
23 |       "es6": true
24 |     },
25 |     "parser": "babel-eslint",
26 |   }, {
27 |     "files": ["tasks/**/*.js"],
28 |     "parser": "babel-eslint",
29 |     "env": {
30 |       "es6": true,
31 |       "node": true
32 |     },
33 |     "rules": {
34 |       "no-console": 0
35 |     }
36 |   }, {
37 |     "files": ["app/templates/**/*.html"],
38 |     "env": {
39 |       "browser": true
40 |     },
41 |     "rules": {
42 |       "no-var": 0
43 |     }
44 |   }]
45 | }
46 | 


--------------------------------------------------------------------------------
/app/templates/components/form.html:
--------------------------------------------------------------------------------
 1 | <form class="Form" onsubmit="return false">
 2 |   <div class="Form-field">
 3 |     <label class="Form-fieldLabel">Username</label>
 4 |     <div class="Form-fieldInput">
 5 |       <input class="Input" placeholder="Username">
 6 |     </div>
 7 |   </div>
 8 | 
 9 |   <div class="Form-field">
10 |     <label class="Form-fieldLabel">Password</label>
11 |     <div class="Form-fieldInput">
12 |       <input class="Input" placeholder="Password" type="password">
13 |     </div>
14 |     <span class="Form-fieldSubText">Must be at least 8 characters</span>
15 |   </div>
16 | 
17 |   <div class="Form-field">
18 |     <div class="Form-fieldInput">
19 |       <label>
20 |         <input type="checkbox" />
21 |         I don't read terms
22 |       </label>
23 |     </div>
24 |   </div>
25 | 
26 |   <div class="Form-field">
27 |     <div class="Form-fieldInput">
28 |       <button class="Button">Submit</button>
29 |     </div>
30 |   </div>
31 | </form>
32 | 


--------------------------------------------------------------------------------
/app/templates/demos/gallery.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="gallery">
 2 |   <h2 class="Heading">
 3 |     <span id="gallery" data-section-anchor></span>
 4 |     Gallery
 5 |   </h2>
 6 |   <div data-demo-root data-observe-resizes>
 7 |     {% include 'components/Gallery.html' %}
 8 |   </div>
 9 |   {% set component = 'Gallery' %}
10 |   {% include '_pin-action.html' %}
11 | 
12 |   <h3>The code</h3>
13 | 
14 |   {% highlight 'html' %}
15 |   <!-- Container element -->
16 |   <div data-observe-resizes>
17 |     <!-- Component element -->
18 |     <ul class="Gallery">
19 |       <li></li>
20 |       <li></li>
21 |       <li></li>
22 |       ...
23 |     </ul>
24 |   </div>
25 |   {% endhighlight %}
26 | 
27 |   <ul>
28 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Gallery.css">
29 |     Full gallery CSS source</a></li>
30 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/components/gallery.html">
31 |     Full gallery HTML source</a></li>
32 |   </ul>
33 | </section>


--------------------------------------------------------------------------------
/app/styles/demos/MultiColBox.css:
--------------------------------------------------------------------------------
 1 | .MultiColBox {
 2 |   background: #fff;
 3 |   border: 1px solid hsla(0, 0%, 0%, 0.075);
 4 |   padding: 1.5em;
 5 | }
 6 | 
 7 | .MultiColBox-title {
 8 |   border-bottom: 1px solid hsla(0, 0%, 0%, .1);
 9 |   font-weight: 700;
10 |   letter-spacing: 0.15em;
11 |   margin-bottom: 1em;
12 |   padding-bottom: .5em;
13 |   text-transform: uppercase;
14 | }
15 | 
16 | .MultiColBox-content {
17 |   column-count: 1;
18 | }
19 | 
20 | .MultiColBox-content > aside {
21 |   color: #aaa;
22 | }
23 | 
24 | /* -------------- */
25 | /* Breakpoint: C2 */
26 | /* -------------- */
27 | 
28 | .C2 > .MultiColBox .MultiColBox-content {
29 |   column-count: 2;
30 | }
31 | 
32 | /* -------------- */
33 | /* Breakpoint: C3 */
34 | /* -------------- */
35 | 
36 | .C3 > .MultiColBox .MultiColBox-content {
37 |   column-count: 3;
38 | }
39 | 
40 | /* -------------- */
41 | /* Breakpoint: C4 */
42 | /* -------------- */
43 | 
44 | .C4 > .MultiColBox .MultiColBox-content {
45 |   column-count: 4;
46 | }
47 | 


--------------------------------------------------------------------------------
/app/styles/demos/Card.css:
--------------------------------------------------------------------------------
 1 | .Card {
 2 |   background: #fff;
 3 |   border: 1px solid hsla(0, 0%, 0%, 0.1);
 4 |   border-radius: 4px;
 5 |   display: flex;
 6 |   flex-flow: column;
 7 |   min-width: 0;
 8 |   overflow: hidden;
 9 |   padding: 1em;
10 |   position: relative;
11 |   transition: flex-grow 0.5s;
12 | }
13 | 
14 | .Card-figure {
15 |   width: 100%;
16 |   min-width: 0;
17 |   margin-bottom: 1em;
18 | }
19 | 
20 | .Card-body :last-child {
21 |   margin-bottom: 0;
22 | }
23 | 
24 | .Card-title {
25 |   font-weight: 600;
26 |   font-size: 1.4em;
27 |   margin-bottom: calc(.75em / 1.4);
28 | }
29 | 
30 | /* -------------- */
31 | /* Breakpoint: SM */
32 | /* -------------- */
33 | 
34 | .SM > .Card {
35 |   flex-flow: row;
36 | }
37 | 
38 | .SM > .Card > .Card-figure {
39 |   border-right: 1px solid #eee;
40 |   flex: 2;
41 |   margin-right: 1em;
42 |   margin-bottom: 0;
43 |   min-width: 0;
44 |   padding-right: 1em;
45 | }
46 | 
47 | .SM > .Card > .Card-body {
48 |   min-width: 0;
49 |   flex: 5;
50 | }
51 | 


--------------------------------------------------------------------------------
/app/styles/main.css:
--------------------------------------------------------------------------------
 1 | @import "./base/variables.css";
 2 | @import "./base/reset.css";
 3 | @import "./base/demos.css";
 4 | @import "./base/media.css";
 5 | 
 6 | @import "./components/App.css";
 7 | @import "./components/Button.css";
 8 | @import "./components/Checkbox.css";
 9 | @import "./components/Footer.css";
10 | @import "./components/Icon.css";
11 | @import "./components/IconActions.css";
12 | @import "./components/IconButton.css";
13 | @import "./components/Image.css";
14 | @import "./components/InfoBox.css";
15 | @import "./components/Input.css";
16 | @import "./components/LiveCodeDemo.css";
17 | @import "./components/Nav.css";
18 | @import "./components/Note.css";
19 | @import "./components/PinAction.css";
20 | @import "./components/Section.css";
21 | @import "./components/Sidebar.css";
22 | 
23 | @import "./demos/Card.css";
24 | @import "./demos/Calendar.css";
25 | @import "./demos/Form.css";
26 | @import "./demos/Gallery.css";
27 | @import "./demos/MultiColBox.css";
28 | 
29 | @import "./vendor/highlight.css"
30 | 


--------------------------------------------------------------------------------
/app/scripts/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import {stateListener} from './state.js';
 2 | 
 3 | export default class Sidebar {
 4 |   constructor($root, {app}) {
 5 |     this.$root = $root;
 6 |     this.app = app;
 7 | 
 8 |     // Bind callbacks
 9 |     this.onStateChange = this.onStateChange.bind(this);
10 | 
11 |     stateListener.on('change', this.onStateChange);
12 |   }
13 | 
14 |   onStateChange(oldState, state, changedProps) {
15 |     if (changedProps.has('pinnedDemo')) {
16 |       const $oldDemo = this.$root.querySelector('[data-demo-root]');
17 |       const $newDemo = this.app.content.cloneSelectedDemo(state.pinnedDemo);
18 |       const $demoParent = $oldDemo.parentElement;
19 | 
20 |       $demoParent.insertBefore($newDemo, $oldDemo);
21 |       $demoParent.removeChild($oldDemo);
22 |     }
23 | 
24 |     if (changedProps.has('isSidebarTransitioning')) {
25 |       if (state.isSidebarTransitioning) {
26 |         this.$root.style.minWidth = `${state.sidebarWidth - 1}px`;
27 |       } else {
28 |         this.$root.style.minWidth = null;
29 |       }
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/app/templates/demos/custom-breakpoints.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="custom-breakpoints">
 2 |   <h2 class="Heading">
 3 |     <span id="custom-breakpoints" data-section-anchor></span>
 4 |     Custom breakpoints
 5 |   </h2>
 6 |   <div id="custom" data-demo-root data-observe-resizes
 7 |        data-breakpoints='{"C2":400,"C3":800,"C4":1200}'>
 8 |     {% include 'components/MultiColBox.html' %}
 9 |   </div>
10 |   {% include '_pin-action.html' %}
11 | 
12 |   <h3>The code</h3>
13 | 
14 |   {% highlight 'html' %}
15 |   <!-- Container element -->
16 |   <div **data-breakpoints='{"C2":400,"C3":800,"C4":1200}'** data-observe-resizes>
17 |     <!-- Component element -->
18 |     <div class="MultiColBox">...</div>
19 |   </div>
20 |   {% endhighlight %}
21 | 
22 |   <ul>
23 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/MultiColBox.css">
24 |     Full MultiColBox CSS source</a></li>
25 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/demos/custom-breakpoints.html">
26 |     Full MultiColBox HTML source</a></li>
27 |   </ul>
28 | </section>
29 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | const title = `Responsive Components`;
 2 | const repo = `responsive-components`;
 3 | const url = `https://philipwalton.github.io/${repo}/`
 4 | const desc = `a modern approach to styling elements ` +
 5 |     `based on the size of their container`;
 6 | 
 7 | const authorUrl = `https://philipwalton.com`;
 8 | const articleUrl = `${authorUrl}/articles/` +
 9 |     `responsive-components-a-solution-to-the-container-queries-problem/`;
10 | 
11 | const repoUrl = `https://github.com/philipwalton/${repo}`;
12 | const publicPath = `/${repo}/`;
13 | const publicDir = `${repo}`;
14 | const publicStaticDir = `${repo}/static`;
15 | const publicStaticPath = `/${repo}/static/`;
16 | const manifestFileName = `revisioned-asset-manifest.json`;
17 | const shareInfo = {
18 |   url: url,
19 |   text: `${title}: ${desc}`,
20 |   via: `philwalton`,
21 | };
22 | 
23 | module.exports = {
24 |   title,
25 |   repo,
26 |   url,
27 |   desc,
28 |   authorUrl,
29 |   articleUrl,
30 |   repoUrl,
31 |   publicPath,
32 |   publicDir,
33 |   publicStaticDir,
34 |   publicStaticPath,
35 |   manifestFileName,
36 |   shareInfo,
37 | };
38 | 


--------------------------------------------------------------------------------
/app/styles/components/InfoBox.css:
--------------------------------------------------------------------------------
 1 | .InfoBox {
 2 |   background: #fff;
 3 |   border: 1px solid hsl(0, 0%, 90%);
 4 |   padding: 1.5em 1.5em 0.5em;
 5 |   margin: 0 0 1.5em;
 6 | }
 7 | 
 8 | .InfoBox-figure {
 9 |   display: none;
10 | }
11 | 
12 | .InfoBox-title {
13 |   font-size: 1.333em;
14 |   font-weight: 500;
15 |   margin-bottom: 1em;
16 | }
17 | 
18 | .InfoBox-content p:first-child {
19 |   margin-top: 0;
20 |   padding-right: 2em;
21 | }
22 | 
23 | .InfoBox-content ul > li {
24 |   margin-bottom: 0.5em;
25 | }
26 | 
27 | /* -------------- */
28 | /* Breakpoint: SM */
29 | /* -------------- */
30 | 
31 | .SM > .InfoBox {
32 |   display: flex;
33 | }
34 | 
35 | .SM > .InfoBox > .InfoBox-content {
36 |   flex: 1 0 0%;
37 | }
38 | 
39 | .SM > .InfoBox .InfoBox-title {
40 |   margin-bottom: 0.75em;
41 |   border-bottom: 1px solid hsl(0, 0%, 93%);
42 |   padding-bottom: .75em;
43 | }
44 | 
45 | .SM > .InfoBox .InfoBox-figure {
46 |   color: hsl(0, 0%, 80%);
47 |   display: block;
48 |   font-size: 1.75em;
49 |   margin-right: calc(1.5em / 2);
50 | }
51 | 
52 | .SM > .InfoBox .InfoBox-content ul {
53 |   max-width: 42em;
54 | }
55 | 


--------------------------------------------------------------------------------
/app/styles/components/LiveCodeDemo.css:
--------------------------------------------------------------------------------
 1 | .LiveCodeDemo {
 2 |   margin-top: 0;
 3 | }
 4 | 
 5 | .LiveCodeDemo-spacer {
 6 |   display: none;
 7 | }
 8 | 
 9 | .LiveCodeDemo-classAttr {
10 |   display: none;
11 | }
12 | 
13 | /* -------------- */
14 | /* Breakpoint: SM */
15 | /* -------------- */
16 | 
17 | .SM > .LiveCodeDemo .LiveCodeDemo-spacer {
18 |   display: inline;
19 | }
20 | 
21 | .SM > .LiveCodeDemo .LiveCodeDemo-classAttr {
22 |   background-color: hsla(60, 100%, 50%, 0.4);
23 |   display: inline;
24 | }
25 | 
26 | .SM > .LiveCodeDemo .LiveCodeDemo-classAttrValue::after {
27 |   content: 'SM';
28 | }
29 | 
30 | /* -------------- */
31 | /* Breakpoint: MD */
32 | /* -------------- */
33 | 
34 | .MD > .LiveCodeDemo .LiveCodeDemo-classAttrValue::after {
35 |   content: 'SM MD';
36 | }
37 | 
38 | /* -------------- */
39 | /* Breakpoint: LG */
40 | /* -------------- */
41 | 
42 | .LG > .LiveCodeDemo .LiveCodeDemo-classAttrValue::after {
43 |   content: 'SM MD LG';
44 | }
45 | 
46 | /* -------------- */
47 | /* Breakpoint: XL */
48 | /* -------------- */
49 | 
50 | .XL > .LiveCodeDemo .LiveCodeDemo-classAttrValue::after {
51 |   content: 'SM MD LG XL';
52 | }
53 | 


--------------------------------------------------------------------------------
/app/styles/demos/Form.css:
--------------------------------------------------------------------------------
 1 | .Form {
 2 |   background: #fff;
 3 |   border: 1px solid hsla(0, 0%, 0%, 0.075);
 4 |   padding: 1.5em 1em 0;
 5 | }
 6 | 
 7 | .Form-field {
 8 |   margin: 0 0 1em;
 9 | }
10 | .Form-fieldLabel {
11 |   display: block;
12 |   font-weight: 600;
13 |   margin: 0 0 0.25em;
14 | }
15 | 
16 | .Form-fieldInput {
17 |   width: 100%;
18 | }
19 | 
20 | .Form-fieldSubText {
21 |   display: block;
22 | 
23 |   color: #777;
24 |   font-size: 0.75em;
25 |   margin: 0.25em 0 0 1px;
26 | }
27 | 
28 | /* -------------- */
29 | /* Breakpoint: MD */
30 | /* -------------- */
31 | 
32 | @supports (display: grid) {
33 |   .MD > .Form .Form-field {
34 |     align-items: baseline;
35 |     display: grid;
36 |     grid-template-columns: 10em 1fr;
37 |     grid-template-areas:
38 |         "label input"
39 |         "label subText";
40 |     margin: 0 0 1.5em;
41 |   }
42 | 
43 |   .MD > .Form .Form-fieldLabel {
44 |     grid-area: label;
45 | 
46 |     margin-right: 1em;
47 |     text-align: right;
48 |   }
49 | 
50 |   .MD > .Form .Form-fieldInput {
51 |     grid-area: input;
52 |   }
53 | 
54 |   .MD > .Form .Form-fieldSubText {
55 |     grid-area: subText;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/app/templates/components/card.html:
--------------------------------------------------------------------------------
 1 | <div class="Card">
 2 |   <div class="Card-figure">
 3 |     <figure class="Image"></figure>
 4 |   </div>
 5 |   <div class="Card-body">
 6 |     <h3 class="Card-title">Card title</h3>
 7 |     <p>A basic card component with an image, title, description, and call to action. By default, the image is on top and full-width, but inside larger containers the image is positioned on the left with the rest of the content beside it.</p>
 8 |     <div class="IconActions">
 9 |       <svg class="Icon Icon--inline">
10 |         <use xlink:href="#thumb_up"></use>
11 |       </svg>
12 |       <svg class="Icon Icon--inline">
13 |         <use xlink:href="#insert_emoticon"></use>
14 |       </svg>
15 |       <svg class="Icon Icon--inline">
16 |         <use xlink:href="#favorite"></use>
17 |       </svg>
18 |       <svg class="Icon Icon--inline">
19 |         <use xlink:href="#insert_comment"></use>
20 |       </svg>
21 |       <svg class="Icon Icon--inline">
22 |         <use xlink:href="#insert_link"></use>
23 |       </svg>
24 |       <svg class="Icon Icon--inline">
25 |         <use xlink:href="#share"></use>
26 |       </svg>
27 |     </div>
28 |   </div>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/app/styles/components/Button.css:
--------------------------------------------------------------------------------
 1 | .Button {
 2 |   background: hsla(0, 0%, 0%, 0.1);
 3 |   border: 1px solid transparent;
 4 |   border-radius: 4px;
 5 |   color: inherit;
 6 |   cursor: pointer;
 7 |   display: inline-block;
 8 |   max-width: 100%;
 9 |   opacity: 1;
10 |   padding: .4em 1em;
11 |   text-decoration: none!important;
12 |   transition:
13 |     background 0.2s var(--material-easing),
14 |     opacity 0.2s var(--material-easing);
15 |   white-space: nowrap;
16 | }
17 | 
18 | .Button-wrapper {
19 |   display: flex;
20 | }
21 | 
22 | .Button-text {
23 |   max-width: 100%;
24 |   overflow: hidden;
25 |   text-overflow: ellipsis;
26 |   white-space: nowrap;
27 | }
28 | 
29 | .Button:hover,
30 | .Button:focus {
31 |   background: hsla(0, 0%, 0%, 0.2);
32 | }
33 | 
34 | .Button[disabled] {
35 |   cursor: default;
36 |   opacity: 0.6;
37 |   pointer-events: none;
38 | }
39 | 
40 | .Button--action {
41 |   background: var(--accentColor);
42 |   color: #fff;
43 | }
44 | 
45 | .Button--action:hover,
46 | .Button--action:focus {
47 |   background: var(--accentColorMuted);
48 | }
49 | 
50 | .Button--small {
51 |   font-size: 0.85em;
52 | }
53 | 
54 | .Button--cozy {
55 |   padding: .333em .666em;
56 | }
57 | 


--------------------------------------------------------------------------------
/app/templates/footer.html:
--------------------------------------------------------------------------------
 1 | <footer class="Footer">
 2 |   <div class="Footer-social">
 3 |     <iframe class="Footer-socialFrame"
 4 |       src="https://ghbtns.com/github-btn.html?user=philipwalton&repo={{ repo }}&type=watch&count=true"
 5 |       width="93"
 6 |       height="30"></iframe>
 7 |     <iframe class="Footer-socialFrame"
 8 |       src="https://platform.twitter.com/widgets/follow_button.html?screen_name={{ shareInfo.via }}"
 9 |       title="Follow @{{ shareInfo.via }}"
10 |       width="230"
11 |       height="30"></iframe>
12 |     <iframe class="Footer-socialFrame"
13 |       src="https://platform.twitter.com/widgets/tweet_button.html?{{ shareInfo | urlencode }}"
14 |       width="70"
15 |       height="30"
16 |       title="Twitter Tweet Button"></iframe>
17 |   </div>
18 | 
19 |   <div class="Footer-credits">
20 |     <span class="Footer-credit">Created and maintained by <a href="{{ authorUrl }}">Philip Walton</a>.</span>
21 |     <span class="Footer-credit">Source code and examples released under the <a href="{{ repo }}/blob/master/LICENSE">MIT</a> license.</span>
22 |     <span class="Footer-credit">Website and documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</span>
23 |   </div>
24 | </footer>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Components
 2 | 
 3 | A working implementation of the strategy outlined in the article [Responsive Components: a Solution to the Container Queries Problem](https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/)
 4 | 
 5 | [View Site](https://philipwalton.github.io/responsive-components/)
 6 | 
 7 | ## Viewing the Site Locally
 8 | 
 9 | The Responsive Components site can be built with [Node.js](http://nodejs.org/). If you have Node.js installed on your system, you can run the following commands to build and serve a local version.
10 | 
11 | ```sh
12 | # Clone the git repository and cd into the cloned directory.
13 | git clone https://github.com/philipwalton/responsive-components.git
14 | cd responsive-components
15 | 
16 | # Install the dependencies
17 | npm install
18 | 
19 | # Build and serve the site at http://localhost:8080
20 | npm start
21 | ```
22 | 
23 | This starts up a local server on port 8080. To view the site in your browser, navigate to [http://localhost:8080](http://localhost:8080).
24 | 
25 | In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.
26 | 


--------------------------------------------------------------------------------
/app/scripts/Nav.js:
--------------------------------------------------------------------------------
 1 | import delegate from 'dom-utils/lib/delegate';
 2 | import {getState, setState, stateListener} from './state.js';
 3 | 
 4 | export default class Nav {
 5 |   constructor($root, {app}) {
 6 |     this.$root = $root;
 7 |     this.app = app;
 8 | 
 9 |     // Bind callbacks.
10 |     this.onLinkClick = this.onLinkClick.bind(this);
11 |     this.onStateChange = this.onStateChange.bind(this);
12 | 
13 |     stateListener.on('change', this.onStateChange);
14 |     delegate(this.$root, 'click', '.Nav-link', this.onLinkClick);
15 |   }
16 | 
17 |   onStateChange(oldState, newState) {
18 |     if (oldState.selectedPage === newState.selectedPage) return;
19 | 
20 |     const prevSelectedLink = this.$root.querySelector(`.Nav-link--selected`);
21 |     if (prevSelectedLink) {
22 |       prevSelectedLink.classList.remove('Nav-link--selected');
23 |     }
24 | 
25 |     const nextSelectedLink =
26 |         this.$root.querySelector(`.Nav-link[href="#${newState.selectedPage}"]`);
27 |     if (nextSelectedLink) {
28 |       nextSelectedLink.classList.add('Nav-link--selected');
29 |     }
30 |   }
31 | 
32 |   onLinkClick(evt, link) {
33 |     evt.preventDefault();
34 |     window.location.hash = link.hash;
35 | 
36 |     const state = getState();
37 |     if (state.isNavInDrawerMode) {
38 |       setState({isNavDrawerOpen: false});
39 |     }
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/app/templates/header.html:
--------------------------------------------------------------------------------
 1 | <h1 class="App-mainHeaderTitle">
 2 |   <em class="App-mainHeaderTitleEmphasis">Responsive</em> Components
 3 | </h1>
 4 | <nav class="App-mainHeaderLinks">
 5 |   <a class="App-mainHeaderLink" href="{{ repoUrl }}">
 6 |     <span class="hidden@XL">
 7 |       <span class="Button">
 8 |         <span class="Button-wrapper">
 9 |           <svg class="Icon Icon--inline">
10 |             <use xlink:href="#github"></use>
11 |           </svg>
12 |           <span class="Button-text">
13 |             View demo source
14 |           </span>
15 |         </span>
16 |       </span>
17 |     </span>
18 |     <span class="IconButton visible@XL">
19 |       <svg class="Icon">
20 |         <use xlink:href="#github"></use>
21 |       </svg>
22 |     </span>
23 |   </a>
24 | 
25 |   <a class="App-mainHeaderLink" href="http://twitter.com/intent/tweet?{{ shareInfo | urlencode }}">
26 |     <span class="Button hidden@XL">
27 |       <span class="Button-wrapper">
28 |         <svg class="Icon Icon--inline">
29 |           <use xlink:href="#twitter"></use>
30 |         </svg>
31 |         <span class="Button-text">
32 |           Spread the word
33 |         </span>
34 |       </span>
35 |     </span>
36 |     <span class="IconButton visible@XL">
37 |       <svg class="Icon">
38 |         <use xlink:href="#twitter"></use>
39 |       </svg>
40 |     </span>
41 |   </a>
42 | </nav>


--------------------------------------------------------------------------------
/app/scripts/state.js:
--------------------------------------------------------------------------------
 1 | import EventEmitter from 'autotrack/lib/event-emitter.js';
 2 | 
 3 | // Enumerate valid keys.
 4 | let state = {
 5 |   selectedPage: null,
 6 |   pinnedDemo: null,
 7 |   sidebarWidth: null,
 8 |   isSidebarHidden: null,
 9 |   isSidebarTransitioning: null,
10 |   isSidebarDragging: null,
11 |   isNavInDrawerMode: null,
12 |   isNavDrawerOpen: null,
13 |   isNavSidebarCollapsed: null,
14 |   isNavTransitioning: null,
15 | };
16 | 
17 | export const stateListener = new EventEmitter();
18 | 
19 | export const setState = (appliedState) => {
20 |   const changedProps = new Set();
21 |   const oldState = state;
22 |   state = Object.assign({}, oldState, appliedState);
23 | 
24 |   for (const [key, value] of Object.entries(appliedState)) {
25 |     if (process.env.NODE_ENV !== 'production') {
26 |       if (!oldState.hasOwnProperty(key)) {
27 |         throw new Error(`Invalid state key ${key} passed to setState()`);
28 |       }
29 |     }
30 |     if (oldState[key] !== value) {
31 |       changedProps.add(key);
32 |     }
33 |   }
34 | 
35 |   if (process.env.NODE_ENV !== 'production') {
36 |     // eslint-disable-next-line
37 |     console.log('State change:', appliedState, changedProps, oldState, state);
38 |   }
39 |   stateListener.emit('change', oldState, state, changedProps);
40 | };
41 | 
42 | export const getState = () => {
43 |   return Object.assign({}, state);
44 | };
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------
/tasks/deploy.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp');
 2 | const path = require('path');
 3 | const sh = require('shelljs');
 4 | const config = require('../config');
 5 | 
 6 | // Ensure referenced tasks are registered.
 7 | require('./build.js');
 8 | 
 9 | gulp.task('deploy', gulp.series('build', (done) => {
10 |   if (process.env.NODE_ENV !== 'production') {
11 |     throw new Error('Deploying requires NODE_ENV to be set to production');
12 |   }
13 |   // Create a tempory directory and
14 |   // checkout the existing gh-pages branch.
15 |   sh.rm('-rf', '_tmp');
16 |   sh.mkdir('_tmp');
17 |   sh.cd('_tmp');
18 |   sh.exec('git init');
19 |   sh.exec('git remote add origin git@github.com:philipwalton/' +
20 |       config.repo + '.git');
21 |   sh.exec('git pull origin gh-pages');
22 | 
23 |   // Delete all the static files and add the new ones from the build directory.
24 |   // NOTE: don't delete `responsive-components-demo.mp4`.
25 |   sh.rm('-rf', './static');
26 |   sh.cp('-rf', path.join('..', config.publicDir, '/*'), './');
27 |   sh.exec('git add -A');
28 | 
29 |   // Commit and push the changes to
30 |   // the gh-pages branch.
31 |   sh.exec('git commit -m "Deploy site"');
32 |   sh.exec('git branch -m gh-pages');
33 |   sh.exec('git push origin gh-pages');
34 | 
35 |   // Clean up.
36 |   sh.cd('..');
37 |   sh.rm('-rf', '_tmp');
38 |   sh.rm('-rf', config.publicDir);
39 | 
40 |   done();
41 | }));
42 | 


--------------------------------------------------------------------------------
/app/templates/demos/custom-elements.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="custom-elements">
 2 |   <h2 class="Heading">
 3 |     <span id="custom-elements" data-section-anchor></span>
 4 |     Custom elements
 5 |   </h2>
 6 |   <responsive-container data-demo-root>
 7 |     {% include 'components/Calendar.html' %}
 8 |   </responsive-container>
 9 |   {% include '_pin-action.html' %}
10 | 
11 |   <h3>The code</h3>
12 | 
13 |   <p>This demo shows the responsive <a href="#calendar">Calendar</a> component inside the <a href="https://developers.google.com/web/fundamentals/web-components/customelements">custom element</a> <code>&lt;responsive-container&gt;</code> rather than <code>&lt;div data-observe-resizes&gt;</code> as in the other examples. Custom elements are a perfect fit for responsive components if you're able to use them.</p>
14 | 
15 |   {% highlight 'html' %}
16 |   <!-- Container element -->
17 |   <responsive-container>
18 |     <!-- Component element -->
19 |     <div class="Calendar">...</div>
20 |   </responsive-container>
21 |   {% endhighlight %}
22 | 
23 |   <ul>
24 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Calendar.css">
25 |     Full calendar CSS source</a></li>
26 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/components/calendar.html">
27 |     Full calendar HTML source</a></li>
28 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/demos/custom-elements.html">
29 |     Full demo HTML source</a></li>
30 |   </ul>
31 | </section>
32 | 


--------------------------------------------------------------------------------
/tasks/css.js:
--------------------------------------------------------------------------------
 1 | const cssnano = require('cssnano');
 2 | const fs = require('fs-extra');
 3 | const gulp = require('gulp');
 4 | const path = require('path');
 5 | const postcss = require('postcss');
 6 | const atImport = require('postcss-import');
 7 | const cssnext = require('postcss-cssnext');
 8 | const {generateRevisionedAsset} = require('./utils/assets');
 9 | 
10 | const compileCss = async (srcPath) => {
11 |   const css = await fs.readFile(srcPath, 'utf-8');
12 | 
13 |   const plugins = [
14 |     atImport(),
15 |     cssnext({
16 |       browsers: ['debug', 'production'].includes(process.env.NODE_ENV) ?
17 |           'defaults' : 'last 2 Chrome versions',
18 |       features: {
19 |         customProperties: {
20 |           warnings: true,
21 |           preserve: true,
22 |         },
23 |       },
24 |     }),
25 |   ];
26 |   if (process.env.NODE_ENV === 'production') {
27 |     plugins.push(cssnano({preset: [
28 |       'default', {
29 |         discardComments: {removeAll: true},
30 |         // This must be disabled because it breaks postcss-custom-properties:
31 |         // https://github.com/ben-eb/cssnano/issues/448
32 |         mergeLonghand: false,
33 |       }
34 |     ]}));
35 |   }
36 | 
37 |   const result = await postcss(plugins).process(css, {from: srcPath});
38 | 
39 |   return result.css;
40 | };
41 | 
42 | gulp.task('css', async () => {
43 |   try {
44 |     const srcPath = './app/styles/main.css';
45 |     const css = await compileCss(srcPath);
46 |     await generateRevisionedAsset(path.basename(srcPath), css);
47 |   } catch (err) {
48 |     console.error(err);
49 |   }
50 | });
51 | 


--------------------------------------------------------------------------------
/app/scripts/main.js:
--------------------------------------------------------------------------------
 1 | import 'babel-polyfill';
 2 | import App from './App.js';
 3 | import {SECTIONS} from './constants.js';
 4 | import {getState, setState} from './state.js';
 5 | 
 6 | const main = async () => {
 7 |   const app = new App(document.querySelector('.App'));
 8 |   document.querySelector('.App').classList.add('App--isInteractive');
 9 | 
10 | 
11 |   // Listen for breakpoint changes that affect the nav drawer.
12 |   const mql = window.matchMedia('(min-width: 48em)');
13 | 
14 |   // Set initial state. Do this after all other components are initialized.
15 |   const sectionId = location.hash.slice(1);
16 |   setState({
17 |     selectedPage: SECTIONS.has(sectionId) ? sectionId : 'overview',
18 |     pinnedDemo: 'card',
19 |     sidebarWidth: app.getSidebarWidth(),
20 |     isSidebarHidden: false,
21 |     isSidebarTransitioning: false,
22 |     isNavInDrawerMode: !mql.matches,
23 |     isNavDrawerOpen: false,
24 |     isNavSidebarCollapsed: false,
25 |     isNavTransitioning: false,
26 |   });
27 | 
28 |   // Update the state when the matched media changes.
29 |   mql.addListener((evt) => {
30 |     const state = getState();
31 | 
32 |     if (mql.matches) {
33 |       const newState = {
34 |         isNavInDrawerMode: false,
35 |       };
36 |       if (state.isNavDrawerOpen) {
37 |         newState.isNavSidebarCollapsed = false;
38 |       }
39 |       setState(newState);
40 |     } else {
41 |       setState({isNavInDrawerMode: true});
42 |     }
43 |   });
44 | 
45 |   // Lazily load analytics
46 |   const analytics = await import('./analytics.js');
47 |   analytics.init();
48 | };
49 | 
50 | main();
51 | 


--------------------------------------------------------------------------------
/app/templates/nav.html:
--------------------------------------------------------------------------------
 1 | <ul class="Nav">
 2 |   <li class="Nav-item">
 3 |     <a href="#overview" class="Nav-link">
 4 |       <svg class="Icon Icon--inline">
 5 |         <use xlink:href="#home"></use>
 6 |       </svg>
 7 |       <span>Overview</span>
 8 |     </a>
 9 |   </li>
10 |   <li class="Nav-item">
11 |     <a href="#calendar" class="Nav-link">
12 |       <svg class="Icon Icon--inline">
13 |         <use xlink:href="#today"></use>
14 |       </svg>
15 |       <span>Calendar</span>
16 |     </a>
17 |   </li>
18 |   <li class="Nav-item">
19 |     <a href="#card" class="Nav-link">
20 |       <svg class="Icon Icon--inline">
21 |         <use xlink:href="#note"></use>
22 |       </svg>
23 |       <span>Card</span>
24 |     </a>
25 |   </li>
26 |   <li class="Nav-item">
27 |     <a href="#form" class="Nav-link">
28 |       <svg class="Icon Icon--inline">
29 |         <use xlink:href="#assignment"></use>
30 |       </svg>
31 |       <span>Form</span>
32 |     </a>
33 |   </li>
34 |   <li class="Nav-item">
35 |     <a href="#gallery" class="Nav-link">
36 |       <svg class="Icon Icon--inline">
37 |         <use xlink:href="#apps"></use>
38 |       </svg>
39 |       <span>Gallery</span>
40 |     </a>
41 |   </li>
42 |   <li class="Nav-item">
43 |     <a href="#nested-components" class="Nav-link">
44 |       <svg class="Icon Icon--inline">
45 |         <use xlink:href="#picture_in_picture"></use>
46 |       </svg>
47 |       <span>Nested components</span>
48 |     </a>
49 |   </li>
50 |   <li class="Nav-item">
51 |     <a href="#custom-breakpoints" class="Nav-link">
52 |       <svg class="Icon Icon--inline">
53 |         <use xlink:href="#devices_other"></use>
54 |       </svg>
55 |       <span>Custom breakpoints</span>
56 |     </a>
57 |   </li>
58 |   <li class="Nav-item">
59 |     <a href="#custom-elements" class="Nav-link">
60 |       <svg class="Icon Icon--inline">
61 |         <use xlink:href="#code"></use>
62 |       </svg>
63 |       <span>Custom Elements</span>
64 |     </a>
65 |   </li>
66 | </ul>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "responsive-components",
 3 |   "description": "A modern strategy for styling components based on the size of their container",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git://github.com/philipwalton/responsive-components.git"
 7 |   },
 8 |   "private": true,
 9 |   "author": {
10 |     "name": "Philip Walton",
11 |     "url": "https://philipwalton.com"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/philipwalton/responsive-components/issues"
15 |   },
16 |   "license": "MIT",
17 |   "scripts": {
18 |     "build": "gulp build",
19 |     "lint": "eslint app/**/*.js app/templates/_*.html tasks/**/*.js",
20 |     "start": "gulp serve",
21 |     "deploy": "gulp deploy"
22 |   },
23 |   "devDependencies": {
24 |     "@webcomponents/custom-elements": "^1.1.1",
25 |     "autotrack": "^2.4.1",
26 |     "babel-core": "^6.26.3",
27 |     "babel-eslint": "^8.2.3",
28 |     "babel-loader": "^7.1.4",
29 |     "babel-plugin-dynamic-import-system-import": "^1.0.0",
30 |     "babel-preset-env": "^1.7.0",
31 |     "connect": "^3.6.6",
32 |     "cssnano": "4.0.0-rc.0",
33 |     "dom-utils": "^0.9.0",
34 |     "eslint": "^4.19.1",
35 |     "eslint-config-google": "^0.9.1",
36 |     "eslint-plugin-html": "^4.0.3",
37 |     "fs-extra": "^6.0.1",
38 |     "gulp": "^4.0.0",
39 |     "highlight.js": "^9.12.0",
40 |     "html-minifier": "^3.5.15",
41 |     "material-design-icons": "^3.0.1",
42 |     "md5": "^2.2.1",
43 |     "name-all-modules-plugin": "^1.0.1",
44 |     "nunjucks": "^3.1.3",
45 |     "postcss": "^6.0.22",
46 |     "postcss-cssnext": "^3.1.0",
47 |     "postcss-import": "^11.1.0",
48 |     "require-dir": "^1.0.0",
49 |     "resize-observer-polyfill": "^1.5.0",
50 |     "rev-hash": "^2.0.0",
51 |     "rev-path": "^2.0.0",
52 |     "serve-static": "^1.13.2",
53 |     "shelljs": "^0.8.2",
54 |     "uglify-es": "^3.3.9",
55 |     "uglifyjs-webpack-plugin": "^1.2.5",
56 |     "webpack": "^3.10.0",
57 |     "webpack-manifest-plugin": "^1.3.2"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/app/styles/components/Footer.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * .Footer
 3 |  * ------------------------------------------------------------------------ \\
 4 |  */
 5 | .Footer {
 6 |   background: hsl(0, 0%, 25%);
 7 |   padding: 1.5rem var(--gutter);
 8 | }
 9 | @media (min-width: 48em) {
10 |   .Footer {
11 |     background: none;
12 |     border-top: 1px solid hsla(0, 0%, 0%, 0.075);
13 |   }
14 | }
15 | 
16 | /**
17 |  * .Footer-credit
18 |  * ------------------------------------------------------------------------ \\
19 |  */
20 | .Footer-credit {
21 |   margin-top: 0.333em;
22 | }
23 | @media (min-width: 48em) {
24 |   .Footer-credit {
25 |     margin-right: 0.75em;
26 |   }
27 | }
28 | 
29 | /**
30 |  * .Footer-credit > a
31 |  * ------------------------------------------------------------------------ \\
32 |  */
33 | @media (max-width: 47.97em) {
34 |   .Footer-credit > a {
35 |     color: hsl(0,0%,90%);
36 |   }
37 | }
38 | 
39 | /**
40 |  * .Footer-credits
41 |  * ------------------------------------------------------------------------ \\
42 |  */
43 | .Footer-credits {
44 |   color: hsl(0,0%,60%);
45 |   display: flex;
46 |   font-size: 0.85em;
47 |   flex-flow: row wrap;
48 |   justify-content: center;
49 | }
50 | @media (min-width: 48em) {
51 |   .Footer-credits {
52 |     color: inherit;
53 |     justify-content: start;
54 |   }
55 | }
56 | 
57 | /**
58 |  * .Footer-social
59 |  * ------------------------------------------------------------------------ \\
60 |  */
61 | .Footer-social {
62 |   display: flex;
63 |   flex-flow: row wrap;
64 |   justify-content: center;
65 |   margin-bottom: 0.333em;
66 | }
67 | @media (min-width: 48em) {
68 |   .Footer-social {
69 |     justify-content: start;
70 |   }
71 | }
72 | 
73 | /**
74 |  * .Footer-socialFrame
75 |  * ------------------------------------------------------------------------ \\
76 |  */
77 | .Footer-socialFrame {
78 |   border: 0;
79 |   overflow: hidden;
80 | }
81 | @media (min-width: 48em) {
82 |   .Footer-socialFrame {
83 |     margin-right: 0.5em;
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/tasks/utils/assets.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs-extra');
 2 | const path = require('path');
 3 | const revHash = require('rev-hash');
 4 | const revPath = require('rev-path');
 5 | const config = require('../../config');
 6 | 
 7 | let revisionedAssetManifest;
 8 | 
 9 | const getManifest = () => {
10 |   if (!revisionedAssetManifest) {
11 |     revisionedAssetManifest = fs.readJsonSync(path.join(
12 |     config.publicStaticDir, config.manifestFileName), {throws: false}) || {};
13 |   }
14 | 
15 |   return revisionedAssetManifest;
16 | };
17 | 
18 | const saveManifest = () => {
19 |   fs.outputJson(
20 |       path.join(config.publicStaticDir, config.manifestFileName),
21 |       revisionedAssetManifest, {spaces: 2});
22 | };
23 | 
24 | 
25 | const resetManifest = () => {
26 |   revisionedAssetManifest = {};
27 |   saveManifest();
28 | };
29 | 
30 | 
31 | const getAsset = (filename) => {
32 |   getManifest();
33 | 
34 |   if (!revisionedAssetManifest[filename]) {
35 |     throw new Error(`Revisioned file for '${filename}' doesn't exist`);
36 |   }
37 | 
38 |   return revisionedAssetManifest[filename];
39 | };
40 | 
41 | 
42 | const addAsset = async (filename, revisionedFilename) => {
43 |   getManifest();
44 | 
45 |   revisionedAssetManifest[filename] = revisionedFilename;
46 | 
47 |   saveManifest();
48 | };
49 | 
50 | 
51 | const getRevisionedAssetUrl = (filename) => {
52 |   return path.join(config.publicStaticPath, getAsset(filename));
53 | };
54 | 
55 | 
56 | const generateRevisionedAsset = async (filename, content) => {
57 |   const hash = revHash(content);
58 |   const revisionedFilename = revPath(filename, hash);
59 | 
60 |   // Updates the internal revision map so it can be referenced later.
61 |   addAsset(filename, revisionedFilename);
62 | 
63 |   await fs.outputFile(
64 |       path.join(config.publicStaticDir, revisionedFilename), content);
65 | };
66 | 
67 | module.exports = {
68 |   getManifest,
69 |   saveManifest,
70 |   resetManifest,
71 |   getAsset,
72 |   addAsset,
73 |   getRevisionedAssetUrl,
74 |   generateRevisionedAsset,
75 | };
76 | 


--------------------------------------------------------------------------------
/app/scripts/Content.js:
--------------------------------------------------------------------------------
 1 | import delegate from 'dom-utils/lib/delegate';
 2 | import {getState, setState, stateListener} from './state.js';
 3 | 
 4 | export default class Content {
 5 |   constructor($root, {app}) {
 6 |     this.$root = $root;
 7 |     this.app = app;
 8 | 
 9 |     // Bind callbacks
10 |     this.onPinDemoButtonClick = this.onPinDemoButtonClick.bind(this);
11 |     this.onStateChange = this.onStateChange.bind(this);
12 | 
13 |     stateListener.on('change', this.onStateChange);
14 |     delegate(this.$root, 'click', '[data-pin-action]',
15 |         this.onPinDemoButtonClick);
16 |   }
17 | 
18 |   onStateChange(oldState, newState) {
19 |     if (oldState.selectedPage !== newState.selectedPage) {
20 |       const $oldSection = this.getSection(oldState.selectedPage);
21 | 
22 |       if ($oldSection) {
23 |         $oldSection.classList.remove('Section--isSelected');
24 |       }
25 | 
26 |       const $newSection = this.getSection(newState.selectedPage);
27 |       if ($newSection) {
28 |         $newSection.classList.add('Section--isSelected');
29 |       }
30 | 
31 |       window.scrollTo(0, 0);
32 |     }
33 |     if (oldState.pinnedDemo !== newState.pinnedDemo) {
34 |       const $oldPinAction = this.getSectionPinDemoBtn(oldState.pinnedDemo);
35 |       if ($oldPinAction) {
36 |         $oldPinAction.classList.remove('PinAction--isActive');
37 |         $oldPinAction.querySelector('button').disabled = false;
38 |       }
39 | 
40 |       const $newPinDemoBtn = this.getSectionPinDemoBtn(newState.pinnedDemo);
41 |       $newPinDemoBtn.classList.add('PinAction--isActive');
42 |       $newPinDemoBtn.querySelector('button').disabled = true;
43 |     }
44 |   }
45 | 
46 |   getSection(id) {
47 |     return this.$root.querySelector(`[data-section="${id}"]`);
48 |   }
49 | 
50 |   getSectionDemo(id) {
51 |     return this.$root.querySelector(`[data-section="${id}"] [data-demo-root]`);
52 |   }
53 | 
54 |   getSectionPinDemoBtn(id) {
55 |     return this.$root.querySelector(`[data-section="${id}"] [data-pin-action]`);
56 |   }
57 | 
58 |   cloneSelectedDemo(id) {
59 |     return this.getSectionDemo(id).cloneNode(true);
60 |   }
61 | 
62 |   onPinDemoButtonClick(evt) {
63 |     evt.preventDefault();
64 |     setState({
65 |       pinnedDemo: getState().selectedPage,
66 |     });
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/app/templates/demos/nested-components.html:
--------------------------------------------------------------------------------
 1 | <section class="Section" data-section="nested-components">
 2 |   <h2 class="Heading">
 3 |     <span id="nested-components" data-section-anchor></span>
 4 |     Nested components
 5 |   </h2>
 6 |   <div data-demo-root data-observe-resizes>
 7 |     <ul class="Gallery">
 8 |       <li data-observe-resizes>
 9 |         {% include 'components/card.html' %}
10 |       </li>
11 |       <li data-observe-resizes>
12 |         {% include 'components/card.html' %}
13 |       </li>
14 |       <li data-observe-resizes>
15 |         {% include 'components/card.html' %}
16 |       </li>
17 |       <li data-observe-resizes>
18 |         {% include 'components/card.html' %}
19 |       </li>
20 |       <li data-observe-resizes>
21 |         {% include 'components/card.html' %}
22 |       </li>
23 |       <li data-observe-resizes>
24 |         {% include 'components/card.html' %}
25 |       </li>
26 |     </ul>
27 |   </div>
28 |   {% include '_pin-action.html' %}
29 | 
30 |   <h3>The code</h3>
31 | 
32 |   <p>This demo shows the responsive <a href="#card">Card</a> component nested inside the responsive <a href="#gallery">Gallery</a> component. As the gallery's matching breakpoint changes, its layout will update and in turn cause a change in size to the card's container element.</p>
33 | 
34 |   {% highlight 'html' %}
35 |   <!-- Outter container element -->
36 |   <div data-demo-root data-observe-resizes>
37 |       <!-- Outer component element -->
38 |       <ul class="Gallery">
39 |         <!-- Inner container element -->
40 |         <li data-observe-resizes>
41 |           <!-- Inner component element -->
42 |           <div class="Card">...</div>
43 |         </li>
44 |         <!-- Inner container element -->
45 |         <li data-observe-resizes>
46 |           <!-- Inner component element -->
47 |           <div class="Card">...</div>
48 |         </li>
49 |         ...
50 |       </ul>
51 |     </div>
52 |   {% endhighlight %}
53 | 
54 |   <ul>
55 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Card.css">
56 |     Full card CSS source</a></li>
57 |     <li><a href="{{ repoUrl }}/blob/master/app/styles/demos/Gallery.css">
58 |     Full gallery CSS source</a></li>
59 |     <li><a href="{{ repoUrl }}/blob/master/app/templates/demos/custom-breakpoints.html">
60 |     Full demo HTML source</a></li>
61 |   </ul>
62 | </section>
63 | 


--------------------------------------------------------------------------------
/app/styles/base/reset.css:
--------------------------------------------------------------------------------
  1 | *, *::before, *::after {
  2 |   box-sizing: inherit;
  3 |   font: inherit;
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   list-style: none;
  7 | }
  8 | 
  9 | body {
 10 |   box-sizing: border-box;
 11 |   color: hsl(0, 0%, 25%);
 12 | 
 13 | 	/* Ensure IE11 min-height works on .App */
 14 |   display: flex;
 15 |   flex-flow: column;
 16 | 
 17 |   font: 1em/1.5 system-ui;
 18 |   -webkit-font-smoothing: antialiased;
 19 |   margin: 0;
 20 |   overflow-x: hidden;
 21 |   overflow-y: scroll;
 22 | }
 23 | 
 24 | @supports (contain: strict) {
 25 |   body {
 26 |     /* The IE11 hack above breaks containment, so unset it. */
 27 |     display: block;
 28 |   }
 29 | }
 30 | 
 31 | main, header, footer, nav, aside {
 32 |   display: block;
 33 | }
 34 | 
 35 | h2 {
 36 |   font-size: 1.4em;
 37 |   font-weight: 500;
 38 |   margin-bottom: 1em;
 39 |   padding-bottom: 0.3em;
 40 |   border-bottom: 1px solid hsla(0,0%,0%,0.075);
 41 | }
 42 | 
 43 | h3 {
 44 |   font-size: 1.2em;
 45 |   font-weight: 500;
 46 |   margin-bottom: 0.8em;
 47 | }
 48 | 
 49 | a {
 50 |   color: var(--accentColorMuted);
 51 |   text-decoration: underline;
 52 | }
 53 | 
 54 | p {
 55 |   margin: 0 0 1em;
 56 |   max-width: 48em;
 57 | }
 58 | 
 59 | ul {
 60 |   margin: 0 0 1em;
 61 |   max-width: 48em;
 62 |   padding-left: 1.2em;
 63 | }
 64 | 
 65 | li {
 66 |   list-style: square;
 67 | }
 68 | 
 69 | strong {
 70 |   font-weight: 600;
 71 | }
 72 | 
 73 | em {
 74 |   font-style: italic;
 75 | }
 76 | 
 77 | code {
 78 |   background: hsla(0, 0%, 0%, 0.05);
 79 |   border-radius: 2px;
 80 |   color: #000;
 81 |   display: inline-block;
 82 |   font-family: Monaco, monospace;
 83 |   font-size: 0.8em;
 84 |   padding: 2px 5px 1px;
 85 |   text-decoration: inherit;
 86 | }
 87 | 
 88 | pre code {
 89 |   background: inherit;
 90 |   color: inherit;
 91 |   display: block;
 92 |   font-size: 0.875em;
 93 |   padding: 0;
 94 | }
 95 | 
 96 | table {
 97 |   border-collapse: collapse;
 98 |   margin: 0 0 1em;
 99 |   max-width: 100%;
100 |   width: 100%;
101 | }
102 | 
103 | th {
104 |   font-weight: 700;
105 |   vertical-align: bottom;
106 | }
107 | 
108 | td {
109 |   vertical-align: top;
110 | }
111 | 
112 | th, td {
113 |   background-color: #fff;
114 |   border: 1px solid hsl(0, 0%, 92.5%);
115 |   padding: .5em 1em;
116 |   text-align: left;
117 | }
118 | 
119 | [type="checkbox"] {
120 |   vertical-align: .1em;
121 |   margin-right: .333em;
122 | }
123 | 
124 | [tabindex="-1"] {
125 |   outline: none;
126 | }
127 | 


--------------------------------------------------------------------------------
/app/templates/components/MultiColBox.html:
--------------------------------------------------------------------------------
 1 | <div class="MultiColBox">
 2 |   <h3 class="MultiColBox-title">Multi-column layout</h3>
 3 |   <div class="MultiColBox-content">
 4 |     <p>Most of the demos on this site use the same, global set of breakpoints, but in some cases a component needs to define its own breakpoints due to its particular design needs.</p>
 5 | 
 6 |     <p>For example, <strong>this component</strong> defines custom breakpoints so it can know when to switch from a 1-column layout to a 2-column layout (and from 2 to 3). The default breakpoints don't quite work here, so custom breakpoints are needed.</p>
 7 | 
 8 |     <p>The custom breakpoints are defined on this specific component by setting JSON in the <code>data-breakpoints</code> attribute of the container element. Check out the source links below for more details.</p>
 9 | 
10 |     <aside>
11 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor posuere sem sed ultricies. Integer eget imperdiet ipsum, sit amet aliquet urna. Etiam ultricies scelerisque molestie. Nunc efficitur leo id nisl efficitur blandit. Proin condimentum lorem ac leo rutrum pulvinar. Sed ligula nisi, scelerisque a libero eget, sagittis tempor eros. Ut quis finibus neque. Cras molestie diam mi, eget consequat lorem gravida sit amet. Donec quis tortor dictum ligula vulputate interdum nec quis tortor. Nullam vitae consequat est, in maximus neque. Quisque dignissim, augue ac suscipit ullamcorper, elit nisl posuere purus, sed pretium ex mauris porttitor massa. Nunc et neque egestas lorem hendrerit tempus ac eu est. Proin sit amet nunc nisi.</p>
12 | 
13 |       <p>Donec pretium, sapien at sagittis pulvinar, nisi metus finibus neque, nec facilisis libero ex interdum diam. Ut non turpis pulvinar, vulputate est consectetur, ornare nulla. Praesent eu sagittis nunc, ac dignissim urna. Sed at turpis vel massa laoreet vestibulum eu quis justo. Nam non elementum est, dignissim rutrum dui. Maecenas at lorem nibh. In a elit quis eros fermentum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
14 | 
15 |       <p>Donec eu faucibus purus, at maximus erat. Cras velit felis, cursus nec massa in, blandit consectetur mauris. Duis eget magna tellus. Proin urna libero, sollicitudin vel dictum non, lobortis ac turpis. Pellentesque vitae elit porttitor, cursus libero a, ultricies leo. Sed iaculis bibendum lacus. Nam molestie mattis nunc vitae posuere. Donec in eros sagittis eros malesuada facilisis. Suspendisse eu dictum orci. Proin dapibus eget augue nec laoreet.</p>
16 |     </aside>
17 |   </div>
18 | </div>
19 | 


--------------------------------------------------------------------------------
/app/styles/base/demos.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Ensures anchor links are fixed to the top of the page when JS is enabled,
  3 |  * so new page loads referencing an anchor always display the header.
  4 |  * (this is unset in a <noscript> tag)
  5 |  */
  6 | [data-section-anchor] {
  7 |   position: fixed;
  8 |   top: 0;
  9 | }
 10 | 
 11 | [data-demo-root] {
 12 |   margin-bottom: 1.5em;
 13 | }
 14 | 
 15 | [data-observe-resizes],
 16 | responsive-container {
 17 |   contain: content;
 18 |   overflow: hidden;
 19 |   position: relative;
 20 | }
 21 | 
 22 | [data-observe-resizes]::before,
 23 | responsive-container::before {
 24 |   background-color: #ccc;
 25 |   color: hsla(0, 100%, 100%, 0);
 26 |   content: "\00a0";
 27 |   font-size: 0.8em;
 28 |   -webkit-font-smoothing: initial;
 29 |   font-weight: 700;
 30 |   letter-spacing: .1em;
 31 |   position: absolute;
 32 |   right: -3.1em;
 33 |   text-align: center;
 34 |   top: -1.2em;
 35 |   transform: rotate(45deg);
 36 |   transform-origin: 0 0;
 37 |   width: 6em;
 38 |   z-index: 10;
 39 | }
 40 | 
 41 | [data-observe-resizes][data-observing="true"]::before,
 42 | responsive-container[observing]::before {
 43 |   transition: background-color 0.2s var(--material-easing) 0.05s,
 44 |     color 0.2s var(--material-easing) 0.05s;
 45 | }
 46 | 
 47 | [data-observe-resizes] [data-observe-resizes]::before,
 48 | responsive-container responsive-container::before {
 49 |   left: -1.2em;
 50 |   right: auto;
 51 |   top: 3.1em;
 52 |   transform: rotate(-45deg);
 53 | }
 54 | 
 55 | .SM[data-observe-resizes]::before,
 56 | responsive-container.SM::before {
 57 |   background-color: #40bf80;
 58 |   color: hsla(0, 100%, 100%, 100);
 59 |   content: "SM";
 60 | }
 61 | 
 62 | .MD[data-observe-resizes]::before,
 63 | responsive-container.MD::before {
 64 |   background-color: #33b2cc;
 65 |   content: "MD";
 66 | }
 67 | 
 68 | .LG[data-observe-resizes]::before,
 69 | responsive-container.LG::before {
 70 |   background-color: #bc79ec;
 71 |   content: "LG";
 72 | }
 73 | 
 74 | .XL[data-observe-resizes]::before,
 75 | responsive-container.XL::before {
 76 |   background-color: #f0427c;
 77 |   content: "XL";
 78 | }
 79 | 
 80 | /* Custom breakpoints */
 81 | 
 82 | .C2[data-observe-resizes]::before,
 83 | responsive-container.C2::before {
 84 |   background-color: #40bf80;
 85 |   color: hsla(0, 100%, 100%, 100);
 86 |   content: "C2";
 87 | }
 88 | 
 89 | .C3[data-observe-resizes]::before,
 90 | responsive-container.C3::before {
 91 |   background-color: #33b2cc;
 92 |   content: "C3";
 93 | }
 94 | 
 95 | .C4[data-observe-resizes]::before,
 96 | responsive-container.C4::before {
 97 |   background-color: #bc79ec;
 98 |   content: "C4";
 99 | }
100 | 


--------------------------------------------------------------------------------
/tasks/templates.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs-extra');
  2 | const gulp = require('gulp');
  3 | const hljs = require('highlight.js');
  4 | const htmlMinifier = require('html-minifier');
  5 | const nunjucks = require('nunjucks');
  6 | const path = require('path');
  7 | const config = require('../config');
  8 | 
  9 | const {getRevisionedAssetUrl} = require('./utils/assets');
 10 | 
 11 | const env = nunjucks.configure('./app/templates', {
 12 |   autoescape: false,
 13 |   watch: false,
 14 |   noCache: true,
 15 | });
 16 | 
 17 | env.addFilter('revision', (filename) => {
 18 |   return getRevisionedAssetUrl(filename);
 19 | });
 20 | 
 21 | const inlineCache = {};
 22 | env.addFilter('inline', (filepath) => {
 23 |   if (!inlineCache[filepath]) {
 24 |     inlineCache[filepath] =
 25 |         fs.readFileSync(`${config.publicDir}/${filepath}`, 'utf-8');
 26 |   }
 27 | 
 28 |   return inlineCache[filepath];
 29 | });
 30 | 
 31 | function RemoteExtension() {
 32 |   this.tags = ['highlight'];
 33 | 
 34 |   this.parse = function(parser, nodes, lexer) {
 35 |     // get the tag token
 36 |     let tok = parser.nextToken();
 37 | 
 38 |     // parse the args and move after the block end. passing true
 39 |     // as the second arg is required if there are no parentheses
 40 |     let args = parser.parseSignature(null, true);
 41 |     parser.advanceAfterBlockEnd(tok.value);
 42 | 
 43 |     // parse the block contents
 44 |     let body = parser.parseUntilBlocks('endhighlight');
 45 |     parser.advanceAfterBlockEnd();
 46 | 
 47 |     return new nodes.CallExtension(this, 'run', args, [body]);
 48 |   };
 49 | 
 50 |   this.run = function(context, lang, block) {
 51 |     // Remove leading and trailing whitespace, with the exception of
 52 |     // leading whitespace on the first line with text.
 53 |     let code = block().replace(/^(\s*\n)+|\s+$/g, '');
 54 | 
 55 |     const firstLineWhitespace = /^\s*/.exec(code);
 56 |     if (firstLineWhitespace) {
 57 |       code = code.split('\n').map((line) => {
 58 |         return line.replace(firstLineWhitespace, '');
 59 |       }).join('\n');
 60 |     }
 61 | 
 62 |     code = hljs.highlight(lang, code).value;
 63 | 
 64 |     // Allow for highlighting portions of code blocks
 65 |     // using `**` before and after.
 66 |     return `<pre><code class="language-${lang}">${
 67 |         code.replace(/\*\*(.+)?\*\*/g, `<mark>$1</mark>`)}</code></pre>`;
 68 |   };
 69 | }
 70 | 
 71 | env.addExtension('RemoteExtension', new RemoteExtension());
 72 | 
 73 | const minifyHtml = (html) => {
 74 |   let opts = {
 75 |     removeComments: true,
 76 |     collapseWhitespace: true,
 77 |     collapseBooleanAttributes: true,
 78 |     removeAttributeQuotes: true,
 79 |     removeRedundantAttributes: true,
 80 |     useShortDoctype: true,
 81 |     removeEmptyAttributes: true,
 82 |     minifyJS: true,
 83 |     minifyCSS: true,
 84 |   };
 85 | 
 86 |   return htmlMinifier.minify(html, opts);
 87 | };
 88 | 
 89 | const processHtml = (html) => {
 90 |   return process.env.NODE_ENV === 'production' ? minifyHtml(html) : html;
 91 | };
 92 | 
 93 | gulp.task('templates', async () => {
 94 |   try {
 95 |     const data = Object.assign({ENV: process.env.NODE_ENV}, config);
 96 |     const html = nunjucks.render('index.html', data);
 97 |     await fs.outputFile(
 98 |         path.join(config.publicDir, 'index.html'), processHtml(html));
 99 |   } catch (err) {
100 |     console.error(err);
101 |   }
102 | });
103 | 


--------------------------------------------------------------------------------
/app/styles/demos/Calendar.css:
--------------------------------------------------------------------------------
  1 | .Calendar {
  2 |   background: hsl(0, 0%, 100%);
  3 |   border: 1px solid hsl(0, 0%, 93%);
  4 |   padding: 0.2em 1em;
  5 | }
  6 | 
  7 | .Calendar-times {
  8 |   display: none;
  9 | }
 10 | 
 11 | .Calendar-day {
 12 |   border-top: 1px solid hsl(0, 0%, 92.5%);
 13 | }
 14 | 
 15 | .Calendar-day:first-of-type {
 16 |   border: 0;
 17 | }
 18 | 
 19 | .Calendar-dayHeader {
 20 |   position: relative;
 21 |   flex: 0 0 4em;
 22 |   margin-right: 1em;
 23 | }
 24 | 
 25 | .Calendar-date {
 26 |   display: flex;
 27 |   align-items: baseline;
 28 |   padding: 0.75em 0;
 29 | }
 30 | 
 31 | .Calendar-dateMo {
 32 |   font-size: 1.5em;
 33 |   font-weight: 500;
 34 |   line-height: 1;
 35 |   margin-right: 0.2em;
 36 | }
 37 | 
 38 | .Calendar-dateWk {
 39 |   font-size: 0.8em;
 40 |   text-transform: uppercase;
 41 |   font-weight: 600;
 42 | }
 43 | 
 44 | .Calendar-entries {
 45 |   margin: 0;
 46 |   max-width: 100%;
 47 |   padding: 0;
 48 | }
 49 | 
 50 | .Calendar-entry {
 51 |   border: 1px solid hsl(0, 0%, 75%);
 52 |   border-radius: 0.2em;
 53 |   cursor: pointer;
 54 |   line-height: 1.2;
 55 |   list-style: none;
 56 |   margin: 0 0 1em;
 57 |   padding: 0.5em;
 58 | }
 59 | 
 60 | .Calendar-entryTime {
 61 |   font-size: 0.9em;
 62 |   font-weight: 600;
 63 |   margin-bottom: 0.1em;
 64 | }
 65 | 
 66 | .Calendar-entryDesc {
 67 |   font-size: 0.9em;
 68 | }
 69 | 
 70 | 
 71 | /* -------------- */
 72 | /* Breakpoint: SM */
 73 | /* -------------- */
 74 | 
 75 | .SM > .Calendar .Calendar-day {
 76 |   display: flex;
 77 | }
 78 | 
 79 | .SM > .Calendar .Calendar-dateMo {
 80 |   margin: 0;
 81 | }
 82 | 
 83 | .SM > .Calendar .Calendar-entries {
 84 |   flex: 1 0 0%;
 85 | }
 86 | 
 87 | .SM > .Calendar .Calendar-entry {
 88 |   margin: 1em 0;
 89 | }
 90 | 
 91 | .SM > .Calendar .Calendar-date {
 92 |   align-items: stretch;
 93 |   position: sticky;
 94 |   top: 0em;
 95 |   left: 0;
 96 | 
 97 |   flex-flow: column;
 98 |   padding: 0.75em 0;
 99 |   text-align: center;
100 | }
101 | 
102 | .SM > .Calendar .Calendar-dateWk {
103 |   font-size: 0.8em;
104 |   text-transform: uppercase;
105 |   font-weight: 600;
106 | }
107 | 
108 | .SM > .Calendar .Calendar-dateMo {
109 |   font-size: 2.5em;
110 |   font-weight: 300;
111 |   line-height: 1;
112 | }
113 | 
114 | /* -------------- */
115 | /* Breakpoint: LG  */
116 | /* -------------- */
117 | 
118 | /* The LG breakpoint requires custom properties, so feature detect first */
119 | @supports (color: var(--custom)) {
120 |   .LG > .Calendar {
121 |     --Calendar-dateHeight: 4.5em;
122 |     --Calendar-entryHeight: 3.333em;
123 | 
124 |     display: flex;
125 |     padding: 1.5em;
126 |   }
127 | 
128 |   .LG > .Calendar .Calendar-times {
129 |     display: block;
130 |     margin-top: var(--Calendar-dateHeight);
131 |     min-width: 4em;
132 |   }
133 | 
134 |   .LG > .Calendar .Calendar-time {
135 |     --Calendar-timeSize: 0.8;
136 | 
137 |     border-top: 1px solid #eee;
138 |     font-size: calc(1em * var(--Calendar-timeSize));
139 |     height: calc(var(--Calendar-entryHeight) / var(--Calendar-timeSize));
140 |     list-style: none;
141 |     padding-top: 0.25em;
142 |   }
143 | 
144 |   .LG > .Calendar .Calendar-day {
145 |     flex: 1 0 0%;
146 |     min-width: 0;
147 | 
148 |     border: 0;
149 |     border-left: 1px solid #eee;
150 |     flex-flow: column;
151 |     padding: 0 1em;
152 |   }
153 | 
154 |   .LG > .Calendar .Calendar-day:last-child {
155 |     padding-right: 0;
156 |   }
157 | 
158 |   .LG > .Calendar .Calendar-dayHeader {
159 |     position: static;
160 |   }
161 | 
162 |   .LG > .Calendar .Calendar-date {
163 |     padding: 0;
164 |     position: static;
165 |     text-align: left;
166 |     height: var(--Calendar-dateHeight);
167 |     overflow: hidden;
168 |   }
169 | 
170 |   .LG > .Calendar .Calendar-entries {
171 |     position: relative;
172 |   }
173 | 
174 |   .LG > .Calendar .Calendar-entry {
175 |     --Calendar-entryOffset: calc(9 * var(--Calendar-entryHeight));
176 | 
177 |     height: calc(var(--Calender-entryDur) * var(--Calendar-entryHeight));
178 |     margin: 0;
179 |     position: absolute;
180 |     top: calc(var(--Calender-entryTime) * var(--Calendar-entryHeight) -
181 |       var(--Calendar-entryOffset));
182 |     width: 100%;
183 |   }
184 | 
185 |   .LG > .Calendar .Calendar-entryDesc {
186 |     font-size: 0.8em;
187 |   }
188 | }
189 | 


--------------------------------------------------------------------------------
/app/templates/components/calendar.html:
--------------------------------------------------------------------------------
  1 | <div class="Calendar">
  2 |   <ul class="Calendar-times">
  3 |     <li class="Calendar-time">9 a.m.</li>
  4 |     <li class="Calendar-time">10 a.m.</li>
  5 |     <li class="Calendar-time">11 a.m.</li>
  6 |     <li class="Calendar-time">12 p.m.</li>
  7 |     <li class="Calendar-time">1 p.m.</li>
  8 |     <li class="Calendar-time">2 p.m.</li>
  9 |     <li class="Calendar-time">3 p.m.</li>
 10 |     <li class="Calendar-time">4 p.m.</li>
 11 |     <li class="Calendar-time">5 p.m.</li>
 12 |   </ul>
 13 | 
 14 |   <div class="Calendar-day">
 15 |     <header class="Calendar-dayHeader">
 16 |       <div class="Calendar-date">
 17 |         <div class="Calendar-dateMo">5</div>
 18 |         <div class="Calendar-dateWk">Mon</div>
 19 |       </div>
 20 |     </header>
 21 | 
 22 |     <ul class="Calendar-entries">
 23 |       <li class="Calendar-entry" style="
 24 |         --Calender-entryTime: 9;
 25 |         --Calender-entryDur: 2;
 26 |         ">
 27 |         <div class="Calendar-entryTime">9 &ndash; 11 a.m.</div>
 28 |         <div class="Calendar-entryDesc">Planning</div>
 29 |       </li>
 30 | 
 31 |       <li class="Calendar-entry" style="
 32 |         --Calender-entryTime: 12;
 33 |         --Calender-entryDur: 2;
 34 |         ">
 35 |         <div class="Calendar-entryTime">12 &ndash; 2 p.m.</div>
 36 |         <div class="Calendar-entryDesc">Team lunch</div>
 37 |       </li>
 38 |     </ul>
 39 |   </div>
 40 | 
 41 |   <div class="Calendar-day">
 42 |     <header class="Calendar-dayHeader">
 43 |       <div class="Calendar-date">
 44 |         <div class="Calendar-dateMo">6</div>
 45 |         <div class="Calendar-dateWk">Tue</div>
 46 |       </div>
 47 |     </header>
 48 | 
 49 |     <ul class="Calendar-entries">
 50 |       <li class="Calendar-entry" style="
 51 |         --Calender-entryTime: 12;
 52 |         --Calender-entryDur: 1;
 53 |         ">
 54 |         <div class="Calendar-entryTime">12 &ndash; 1 p.m.</div>
 55 |         <div class="Calendar-entryDesc">Work out</div>
 56 |       </li>
 57 |       <li class="Calendar-entry" style="
 58 |         --Calender-entryTime: 14;
 59 |         --Calender-entryDur: 1;
 60 |         ">
 61 |         <div class="Calendar-entryTime">2 &ndash; 3 p.m.</div>
 62 |         <div class="Calendar-entryDesc">Doctor</div>
 63 |       </li>
 64 |       <li class="Calendar-entry" style="
 65 |         --Calender-entryTime: 16;
 66 |         --Calender-entryDur: 2;
 67 |         ">
 68 |         <div class="Calendar-entryTime">4 &ndash; 6 p.m.</div>
 69 |         <div class="Calendar-entryDesc">Soccer</div>
 70 |       </li>
 71 |     </ul>
 72 |   </div>
 73 | 
 74 |   <div class="Calendar-day">
 75 |     <header class="Calendar-dayHeader">
 76 |       <div class="Calendar-date">
 77 |         <div class="Calendar-dateMo">7</div>
 78 |         <div class="Calendar-dateWk">Wed</div>
 79 |       </div>
 80 |     </header>
 81 | 
 82 |     <ul class="Calendar-entries">
 83 |       <li class="Calendar-entry" style="
 84 |         --Calender-entryTime: 9;
 85 |         --Calender-entryDur: 2;
 86 |         ">
 87 |         <div class="Calendar-entryTime">9 &ndash; 11 p.m.</div>
 88 |         <div class="Calendar-entryDesc">Customer call</div>
 89 |       </li>
 90 |       <li class="Calendar-entry" style="
 91 |         --Calender-entryTime: 14;
 92 |         --Calender-entryDur: 4;
 93 |         ">
 94 |         <div class="Calendar-entryTime">2 &ndash; 6 p.m.</div>
 95 |         <div class="Calendar-entryDesc">Team event</div>
 96 |       </li>
 97 |     </ul>
 98 |   </div>
 99 | 
100 |   <div class="Calendar-day">
101 |     <header class="Calendar-dayHeader">
102 |       <div class="Calendar-date">
103 |         <div class="Calendar-dateMo">8</div>
104 |         <div class="Calendar-dateWk">Thu</div>
105 |       </div>
106 |     </header>
107 | 
108 |     <ul class="Calendar-entries">
109 |       <li class="Calendar-entry" style="
110 |         --Calender-entryTime: 12;
111 |         --Calender-entryDur: 1;
112 |         ">
113 |         <div class="Calendar-entryTime">12 &ndash; 1 p.m.</div>
114 |         <div class="Calendar-entryDesc">Work out</div>
115 |       </li>
116 |     </ul>
117 |   </div>
118 | 
119 |   <div class="Calendar-day">
120 |     <header class="Calendar-dayHeader">
121 |       <div class="Calendar-date">
122 |         <div class="Calendar-dateMo">9</div>
123 |         <div class="Calendar-dateWk">Fri</div>
124 |       </div>
125 |     </header>
126 | 
127 |     <ul class="Calendar-entries">
128 |       <li class="Calendar-entry" style="
129 |         --Calender-entryTime: 9;
130 |         --Calender-entryDur: 9;
131 |         ">
132 |         <div class="Calendar-entryTime">9 &ndash; 6 p.m.</div>
133 |         <div class="Calendar-entryDesc">No meetings</div>
134 |       </li>
135 |     </ul>
136 |   </div>
137 | </div>


--------------------------------------------------------------------------------
/app/templates/overview.html:
--------------------------------------------------------------------------------
  1 | <section class="Section" data-section="overview">
  2 |   <h2 class="Heading">
  3 |     <span id="overview" data-section-anchor></span>
  4 |     Overview
  5 |   </h2>
  6 | 
  7 |   <p>This demo site is a working, cross-browser implementation of the strategy outlined in the article <a href="{{ articleUrl }}">Responsive Components: a Solution to the Container Queries Problem</a>.
  8 | 
  9 |   <p>The strategy is simple to implement, highly-performant, and embraces progressive enhancement, so <strong>you can actually use it today!</strong></p>
 10 | 
 11 |   <div data-observe-resizes>
 12 |     <div class="InfoBox">
 13 |       <div class="InfoBox-figure">
 14 |         <svg class="Icon">
 15 |           <use xlink:href="#star"></use>
 16 |         </svg>
 17 |       </div>
 18 |       <div class="InfoBox-content">
 19 |         <noscript>
 20 |           <aside class="Note">
 21 |             <strong>It looks like you have JavaScript disabled.</strong> That's OK! All the content on the site is still viewable, but keep in mind most of the interactive features won't work.
 22 |           </aside>
 23 |         </noscript>
 24 | 
 25 |         <h3 class="InfoBox-title">How to use the site</h3>
 26 |         <ul>
 27 |           <li>Browse through the demos listed in the left-hand navigation menu. For each of the demos, resize them to see how they respond.
 28 |           <strong class="visible@MD">Note: the demos are best viewed on a large screen so you can resize them.</strong></li>
 29 |           <li>You can resize demo by dragging the divider between this content area and the "Pinned demo" sidebar. You can also collapse both the right and left sidebars or resize the browser window.
 30 |           <li>Lastly, you can click the "pin demo in sidebar" button from any demo page to compare different demos side by side.</li>
 31 |         </ul>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | 
 36 |   <h3>How it works</h3>
 37 | 
 38 |   <p>The key ingredient that makes this strategy work is the new <a href="https://developers.google.com/web/updates/2016/10/resizeobserver">ResizeObserver API</a>. With just <a href="{{ articleUrl }}#observing-container-resizes">one small snippet of code</a>, you can performantly observe size changes to as many components on your page as you want.</p>
 39 | 
 40 |   <p>This demo site automatically observes all elements with the attribute <code>data-observe-resizes</code>. To make a component responsive to its container, just wrap it in an element with this attribute, and let your <a href="{{ repoUrl }}/tree/master/app/styles/demos">CSS do the rest!</a></p>
 41 | 
 42 |   <p>Here's a live demo of the container markup. Resize the content area to see it change:</p>
 43 | 
 44 | <!-- <pre> indentation is significant, so keep to the left -->
 45 | <div data-observe-resizes>
 46 | <pre class="LiveCodeDemo"><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span><span class="LiveCodeDemo-spacer"> </span><span class="LiveCodeDemo-classAttr"><span class="hljs-attr">class</span>=<span class="hljs-string">"<span class="LiveCodeDemo-classAttrValue"></span>"</span></span> <span class="hljs-attr">data-observe-resizes</span>&gt;</span>
 47 |   <span class="hljs-comment">&lt;!-- Component goes here... --&gt;</span>
 48 | <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
 49 | </div>
 50 | 
 51 |   <p>The default breakpoint classes used on this site correspond to the following size definitions <em>(note that not all components defines styles for every breakpoint)</em>:</p>
 52 | 
 53 |   <table>
 54 |     <tr>
 55 |       <th>Breakpoint class name</th>
 56 |       <th>Container size</th>
 57 |     </tr>
 58 |     <tr>
 59 |       <td>SM</td>
 60 |       <td><code>min-width: 24em</code></td>
 61 |     </tr>
 62 |     <tr>
 63 |       <td>MD</td>
 64 |       <td><code>min-width: 36em</code></td>
 65 |     </tr>
 66 |     <tr>
 67 |       <td>LG</td>
 68 |       <td><code>min-width: 48em</code></td>
 69 |     </tr>
 70 |     <tr>
 71 |       <td>XL</td>
 72 |       <td><code>min-width: 60em</code></td>
 73 |     </tr>
 74 |   </table>
 75 | 
 76 |   <aside class="Note">
 77 |     <strong>Note:</strong> if you want to use custom breakpoints on a per-container basis, you can! See the <a href="#custom-breakpoints">custom breakpoints</a> demo for an example.
 78 |   </aside>
 79 | 
 80 |   <p>Once you get a feel for the demos, check out <a href="{{ articleUrl }}">the article</a> for an in-depth explanation of the strategy and implementation.</p>
 81 | 
 82 |   <h3>Next steps</h3>
 83 | 
 84 |   <ul>
 85 |     <li>
 86 |       <p><strong>Love the idea?</strong><br>
 87 |         Awesome! Go build something with it, and help <a href="http://twitter.com/intent/tweet?{{ shareInfo | urlencode }}">spread the word</a>.</p>
 88 |     </li>
 89 |     <li>
 90 |       <p><strong>Want to go deeper?</strong><br>
 91 |         Read about the <a href="{{ articleUrl }}">implementation</a> and check out the <a href="{{ repoUrl }}">source code</a>.</p>
 92 |     <li>
 93 |       <p><strong>Have an idea to improve the strategy?</strong><br>
 94 |         <a href="{{ repoUrl }}/issues/new">Open an issue</a> on Github!</p>
 95 |     <li>
 96 |       <p><strong>Disagree with everything I've ever said?</strong><br>
 97 |         Cool, write a blog post and tell the world why your idea is better!</p>
 98 |     </li>
 99 |   </ul>
100 | </section>
101 | 


--------------------------------------------------------------------------------
/app/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <title>{{ title }}</title>
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |   <link rel="stylesheet" href="{{ 'main.css' | revision }}">
  7 | 
  8 |   <!-- Adds an event listener to capture uncaught errors. -->
  9 |   <script>addEventListener('error', window.__e=function f(e){f.q=f.q||[];f.q.push(e)});</script>
 10 |   <script async src="https://www.google-analytics.com/analytics.js"></script>
 11 | 
 12 |   <script defer type="module" src="{{ 'runtime.js' | revision }}"></script>
 13 |   <script defer type="module" src="{{ 'main.js' | revision }}"></script>
 14 | 
 15 |   <link rel="canonical" href="{{ url }}">
 16 | 
 17 |   <meta name="twitter:card" content="summary">
 18 |   <meta name="twitter:creator" content="@{{ shareInfo.via }}">
 19 |   <meta property="og:url" content="{{ url }}">
 20 |   <meta property="og:title" content="{{ title }}">
 21 |   <meta property="og:description" content="{{ desc }}">
 22 |   <meta property="og:image" content="{{ url }}responsive-components-demo.png">
 23 | 
 24 |   <meta name="google-site-verification" content="q5KncOje-dNdD5uxqSOG1znSAo5Wsz5MlBcAmteQAJA">
 25 | </head>
 26 | <body>
 27 |   <div class="App">
 28 |     <div class="App-nav" tabindex="-1">
 29 |       <header class="App-navHeader">
 30 |         <span class="App-navHeaderTitle">Demos</span>
 31 |         <span class="App-navHide" data-requires-js>
 32 |           <button class="IconButton IconButton--dark">
 33 |             <svg class="Icon">
 34 |               <use xlink:href="#arrow_back"></use>
 35 |             </svg>
 36 |           </button>
 37 |         </span>
 38 |       </header>
 39 |       {% include 'nav.html' %}
 40 |     </div>
 41 | 
 42 |     <div class="App-main">
 43 |       <div class="App-mainHeader" tabindex="-1">
 44 |         <span class="App-navShow" data-requires-js tabindex="-1">
 45 |           <button class="IconButton">
 46 |             <svg class="Icon">
 47 |               <use xlink:href="#menu"></use>
 48 |             </svg>
 49 |           </button>
 50 |         </span>
 51 |         {% include 'header.html' %}
 52 |         <span class="App-sidebarShow" data-requires-js tabindex="-1">
 53 |           <button class="IconButton">
 54 |             <svg class="Icon">
 55 |               <use xlink:href="#chrome_reader_mode"></use>
 56 |             </svg>
 57 |           </button>
 58 |         </span>
 59 |       </div>
 60 | 
 61 |       <div class="App-mainContent">
 62 |         <div class="App-content">
 63 |           <main class="Content">
 64 |             {% include 'overview.html' %}
 65 |             {% include 'demos/calendar.html' %}
 66 |             {% include 'demos/card.html' %}
 67 |             {% include 'demos/form.html' %}
 68 |             {% include 'demos/gallery.html' %}
 69 |             {% include 'demos/nested-components.html' %}
 70 |             {% include 'demos/custom-breakpoints.html' %}
 71 |             {% include 'demos/custom-elements.html' %}
 72 |             <script>
 73 |               (function() {
 74 |                 // Show the chosen selection or the first one.
 75 |                 var $section = document.querySelector(
 76 |                     '[data-section="' + location.hash.slice(1) + '"]') ||
 77 |                         document.querySelector('.Section');
 78 | 
 79 |                 if ($section) {
 80 |                   $section.classList.add('Section--isSelected');
 81 |                 } else {
 82 |                   throw new Error('No section to display');
 83 |                 }
 84 |               }());
 85 |             </script>
 86 |           </main>
 87 |         </div>
 88 |         <div class="App-sidebar" tabindex="-1">
 89 |           <div class="App-sidebarGutter" data-requires-js></div>
 90 |           <header class="App-sidebarHeader">
 91 |             <span class="App-sidebarHeaderTitle">Pinned demo</span>
 92 |             <span class="App-sidebarHide" data-requires-js>
 93 |               <button class="IconButton">
 94 |                 <svg class="Icon">
 95 |                   <use xlink:href="#close"></use>
 96 |                 </svg>
 97 |               </button>
 98 |             </span>
 99 |           </header>
100 |           <aside class="Sidebar">
101 |             <div data-demo-root data-observe-resizes>
102 |               {% include 'components/card.html' %}
103 |             </div>
104 |           </aside>
105 |         </div>
106 |       </div>
107 |       <div class="App-footer">
108 |         {% include 'footer.html' %}
109 |       </div>
110 |     </div>
111 |     <div class="App-modalOverlay" data-requires-js></div>
112 |   </div>
113 |   {% include 'icons.svg' %}
114 | 
115 |   {% if ENV === 'production' or ENV === 'debug' %}
116 |     {% include '_nomodule-shim.html' %}
117 |     <script defer nomodule src="{{ 'runtime-legacy.js' | revision }}"></script>
118 |     <script defer nomodule src="{{ 'main-legacy.js' | revision }}"></script>
119 |   {% endif %}
120 |   {% include '_resize-observer.html' %}
121 |   <noscript>
122 |     <style>
123 |       .Section {
124 |         display: block!important;
125 |       }
126 |       [data-requires-js] {
127 |         display: none;
128 |       }
129 |       [data-section-anchor] {
130 |         position: static!important;
131 |         display: inline!important;
132 |       }
133 |       @media (max-width: 48em) {
134 |         .App-nav {
135 |           contain: content;
136 |           display: block;
137 |           overflow: hidden;
138 |           position: static!important;
139 |           width: 100%;
140 |         }
141 |       }
142 |     </style>
143 |   </noscript>
144 | </body>
145 | </html>
146 | 


--------------------------------------------------------------------------------
/tasks/javascript.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs-extra');
  2 | const gulp = require('gulp');
  3 | const md5 = require('md5');
  4 | const NameAllModulesPlugin = require('name-all-modules-plugin');
  5 | const path = require('path');
  6 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  7 | const UglifyJS = require('uglify-es');
  8 | const webpack = require('webpack');
  9 | const ManifestPlugin = require('webpack-manifest-plugin');
 10 | const config = require('../config');
 11 | const {generateRevisionedAsset, getManifest, addAsset} =
 12 |     require('./utils/assets');
 13 | 
 14 | const configurePlugins = (opts = {}) => {
 15 |   const plugins = [
 16 |     new webpack.DefinePlugin({
 17 |       'process.env.NODE_ENV':
 18 |           JSON.stringify(process.env.NODE_ENV || 'development'),
 19 |     }),
 20 | 
 21 |     // Give modules a deterministic name for better long-term caching:
 22 |     // https://github.com/webpack/webpack.js.org/issues/652#issuecomment-273023082
 23 |     new webpack.NamedModulesPlugin(),
 24 | 
 25 |     // Give dynamically `import()`-ed scripts a deterministic name for better
 26 |     // long-term caching. Solution adapted from:
 27 |     // https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
 28 |     new webpack.NamedChunksPlugin((chunk) => chunk.name ? chunk.name :
 29 |         md5(chunk.mapModules((m) => m.identifier()).join()).slice(0, 10)),
 30 | 
 31 |     // Extract runtime code so updates don't affect app-code caching:
 32 |     // https://webpack.js.org/guides/caching/
 33 |     new webpack.optimize.CommonsChunkPlugin({
 34 |       name: opts.runtimeName || 'runtime',
 35 |     }),
 36 | 
 37 |     // Give deterministic names to all webpacks non-"normal" modules
 38 |     // https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
 39 |     new NameAllModulesPlugin(),
 40 | 
 41 |     new ManifestPlugin({
 42 |       seed: getManifest(),
 43 |       fileName: config.manifestFileName,
 44 |       reduce: (oldManifest, {name, path}) => {
 45 |         addAsset(name, path);
 46 |         return getManifest();
 47 |       },
 48 |     }),
 49 |   ];
 50 | 
 51 |   if (process.env.NODE_ENV === 'production') {
 52 |     plugins.push(new UglifyJSPlugin({
 53 |       sourceMap: true,
 54 |       uglifyOptions: {
 55 |         mangle: {
 56 |           // Works around a Safari 10 bug:
 57 |           // https://github.com/mishoo/UglifyJS2/issues/1753
 58 |           safari10: true,
 59 |         },
 60 |       },
 61 |     }));
 62 |   }
 63 | 
 64 |   return plugins;
 65 | };
 66 | 
 67 | const configureBabelLoader = (browserlist) => {
 68 |   return {
 69 |     test: /\.js$/,
 70 |     use: {
 71 |       loader: 'babel-loader',
 72 |       options: {
 73 |         babelrc: false,
 74 |         presets: [
 75 |           ['env', {
 76 |             debug: true,
 77 |             modules: false,
 78 |             useBuiltIns: true,
 79 |             targets: {
 80 |               browsers: browserlist,
 81 |             },
 82 |           }],
 83 |         ],
 84 |         plugins: ['dynamic-import-system-import'],
 85 |       },
 86 |     },
 87 |   };
 88 | };
 89 | 
 90 | const baseConfig = {
 91 |   output: {
 92 |     path: path.resolve(__dirname, '..', config.publicStaticDir),
 93 |     publicPath: config.publicStaticPath,
 94 |     filename: '[name]-[chunkhash:10].js',
 95 |   },
 96 |   cache: {},
 97 |   devtool: '#source-map',
 98 | };
 99 | 
100 | const getModernConfig = () => Object.assign({}, baseConfig, {
101 |   entry: {
102 |     'main': './app/scripts/main.js',
103 |   },
104 |   plugins: configurePlugins({runtimeName: 'runtime'}),
105 |   module: {
106 |     rules: [
107 |       configureBabelLoader([
108 |         // The last two versions of each browser, excluding versions
109 |         // that don't support <script type="module">.
110 |         'last 2 Chrome versions', 'not Chrome < 60',
111 |         'last 2 Safari versions', 'not Safari < 10.1',
112 |         'last 2 iOS versions', 'not iOS < 10.3',
113 |         'last 2 Firefox versions', 'not Firefox < 54',
114 |         'last 2 Edge versions', 'not Edge < 15',
115 |       ]),
116 |     ],
117 |   },
118 | });
119 | 
120 | const getLegacyConfig = () => Object.assign({}, baseConfig, {
121 |   entry: {
122 |     'main-legacy': './app/scripts/main.js',
123 |   },
124 |   plugins: configurePlugins({runtimeName: 'runtime-legacy'}),
125 |   module: {
126 |     rules: [
127 |       configureBabelLoader([
128 |         '> 1%',
129 |         'last 2 versions',
130 |         'Firefox ESR',
131 |       ]),
132 |     ],
133 |   },
134 | });
135 | 
136 | const createCompiler = (config) => {
137 |   const compiler = webpack(config);
138 |   return () => {
139 |     return new Promise((resolve, reject) => {
140 |       compiler.run((err, stats) => {
141 |         if (err) return reject(err);
142 |         console.log(stats.toString({colors: true}) + '\n');
143 |         resolve();
144 |       });
145 |     });
146 |   };
147 | };
148 | 
149 | 
150 | const getCustomElementsPolyfill = async () => {
151 |   const customElementsPolyfill = await fs.readFile(
152 |       'node_modules/@webcomponents/custom-elements/custom-elements.min.js',
153 |       'utf-8');
154 | 
155 |   return customElementsPolyfill
156 |       .replace(/\/\/# sourceMappingURL=.*?\.map\n/, '');
157 | };
158 | 
159 | const getResizeObserverPolyfill = async () => {
160 |   let resizeObserverPolyfill = await fs.readFile(
161 |       './node_modules/resize-observer-polyfill/dist/ResizeObserver.global.js',
162 |       'utf-8');
163 | 
164 |   return UglifyJS.minify(resizeObserverPolyfill).code;
165 | };
166 | 
167 | 
168 | const bundlePolyfills = async () => {
169 |   const polyfills = await Promise.all([
170 |     getCustomElementsPolyfill(),
171 |     getResizeObserverPolyfill(),
172 |   ]);
173 | 
174 |   generateRevisionedAsset('polyfills.js', polyfills.join('\n'));
175 | }
176 | 
177 | gulp.task('javascript', async () => {
178 |   // Generate the main bundle.
179 |   const compileModernBundle = createCompiler(getModernConfig());
180 |   await compileModernBundle();
181 |   await bundlePolyfills();
182 | 
183 |   if (['debug', 'production'].includes(process.env.NODE_ENV)) {
184 |     // Generate the main-legacy bundle.
185 |     const compileLegacyBundle = createCompiler(getLegacyConfig());
186 |     await compileLegacyBundle();
187 |   }
188 | });
189 | 


--------------------------------------------------------------------------------
/app/templates/_resize-observer.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | [data-observe-resizes],
  3 | responsive-container {
  4 |   display: block;
  5 |   opacity: 0;
  6 |   transition: opacity .2s ease-in-out;
  7 |   animation: .5s ease-in-out 2s 1 forwards responsive-container-nojs
  8 | }
  9 | @keyframes responsive-container-nojs {
 10 |   from {opacity: 0} to {opacity: 1}
 11 | }
 12 | [data-observe-resizes][data-observing],
 13 | responsive-container[observing] {
 14 |   opacity: 1;
 15 |   animation: none
 16 | }
 17 | </style>
 18 | <noscript>
 19 |   <style>
 20 |   [data-observe-resizes]
 21 |   responsive-container {
 22 |     opacity: 1;
 23 |     animation: none;
 24 |   }
 25 |   </style>
 26 | </noscript>
 27 | 
 28 | <script>
 29 | (function() {
 30 |   // Default breakpoints that should apply to all observed
 31 |   // elements that don't define their own custom breakpoints.
 32 |   var defaultBreakpoints = {SM: 384, MD: 576, LG: 768, XL: 960};
 33 | 
 34 |   // A technique for loading polyfills only when needed. Details here:
 35 |   // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
 36 |   if ((typeof ResizeObserver === 'undefined' ||
 37 |       typeof customElements === 'undefined') &&
 38 |       matchMedia('(min-width: ' + defaultBreakpoints.MD + 'px)').matches) {
 39 |     // Browsers at larger breakpoints that don't support all
 40 |     // required features must load the polyfills first.
 41 |     loadScript('{{ "polyfills.js" | revision }}', main);
 42 |   } else {
 43 |     // Browsers that don't need polyfills run `main()` immediately.
 44 |     main();
 45 |   }
 46 | 
 47 |   function main() {
 48 |     // Create a single ResizeObserver instance to handle all
 49 |     // container elements. The instance is created with a callback,
 50 |     // which is invoked as soon as an element is observed as well
 51 |     // as any time that element's size changes.
 52 |     var ro = new ResizeObserver(function(entries) {
 53 |       entries.forEach(function(entry) {
 54 |         // If the target has an `updateBreakpoints` property then it's
 55 |         // a <responsive-container> element.
 56 |         if (entry.target.updateBreakpoints) {
 57 |           entry.target.updateBreakpoints(entry.contentRect.width);
 58 |         } else {
 59 |           var breakpoints = entry.target.dataset.breakpoints ?
 60 |               JSON.parse(entry.target.dataset.breakpoints) :
 61 |               defaultBreakpoints;
 62 | 
 63 |           // For non-custom-elements, use the data-obsevering attribute
 64 |           // to target observed elements in CSS.
 65 |           if (entry.width === 0) {
 66 |             entry.target.dataset.observing = false;
 67 |           } else {
 68 |             entry.target.dataset.observing = true;
 69 |           }
 70 | 
 71 |           // Update the matching breakpoints on the target element.
 72 |           Object.keys(breakpoints).forEach(function(breakpoint) {
 73 |             var minWidth = breakpoints[breakpoint];
 74 |             if (entry.contentRect.width >= minWidth) {
 75 |               entry.target.classList.add(breakpoint);
 76 |             } else {
 77 |               entry.target.classList.remove(breakpoint);
 78 |             }
 79 |           });
 80 |         }
 81 |       });
 82 |     });
 83 | 
 84 |     // Observe all non-custom element containers, i.e. all elements with the
 85 |     // `data-observe-resizes` attribute. Note: custom element containers
 86 |     // are observed via the connectedCallback() lifecycle method.
 87 |     var elements = document.querySelectorAll('[data-observe-resizes]');
 88 |     for (var element, i = 0; element = elements[i]; i++) {
 89 |       ro.observe(element);
 90 |     }
 91 | 
 92 |     // Monitor the DOM for changes for non-custom-element containers.
 93 |     var mo = new MutationObserver(function(entries) {
 94 |       entries.forEach(function(entry) {
 95 |         eachObserveableElement(entry.addedNodes, ro.observe.bind(ro));
 96 |       });
 97 |     });
 98 |     mo.observe(document.body, {childList: true, subtree: true});
 99 | 
100 |     // Initialize the <responsive-container> custom elements.
101 |     // Note this uses ES5 syntax so it works on IE11 with the polyfills.
102 |     function ResponsiveContainer() {
103 |       return typeof Reflect === 'object' ?
104 |           Reflect.construct(HTMLElement, [], ResponsiveContainer) :
105 |               HTMLElement.call(this) || this;
106 |     }
107 |     ResponsiveContainer.prototype = Object.create(HTMLElement.prototype, {
108 |       constructor: {
109 |         value: ResponsiveContainer,
110 |       },
111 |       connectedCallback: {
112 |         value: function() {
113 |           var breakpointsAttr = this.getAttribute('breakpoints');
114 |           this.breakpoints = breakpointsAttr ?
115 |               JSON.parse(breakpointsAttr) : defaultBreakpoints;
116 | 
117 |           ro.observe(this);
118 |           this.setAttribute('observing', '');
119 |         },
120 |       },
121 |       updateBreakpoints: {
122 |         value: function(width) {
123 |           if (width > 0) {
124 |             this.setAttribute('observing', '');
125 |           } else {
126 |             this.removeAttribute('observing');
127 |           }
128 | 
129 |           for (var breakpoint in this.breakpoints) {
130 |             var minWidth = this.breakpoints[breakpoint];
131 |             if (width >= minWidth) {
132 |               this.classList.add(breakpoint);
133 |             } else {
134 |               this.classList.remove(breakpoint);
135 |             }
136 |           }
137 |         },
138 |       },
139 |     });
140 | 
141 |     self.customElements.define('responsive-container', ResponsiveContainer);
142 |   }
143 | 
144 |   // Iterates through a subtree
145 |   function eachObserveableElement(nodes, fn) {
146 |     if (nodes) {
147 |       [].slice.call(nodes).forEach(function(node) {
148 |         if (node.nodeType === 1) {
149 |           var containers = [].slice.call(
150 |               node.querySelectorAll('[data-observe-resizes]'));
151 |           if (node.hasAttribute('data-observe-resizes')) {
152 |             containers.push(node);
153 |           }
154 |           for (var container, i = 0; container = containers[i]; i++) {
155 |             fn(container);
156 |           }
157 |         }
158 |       });
159 |     }
160 |   }
161 | 
162 |   function loadScript(src, done) {
163 |     var js = document.createElement('script');
164 |     js.src = src;
165 |     js.onload = done;
166 |     document.head.appendChild(js);
167 |   }
168 | })();
169 | </script>
170 | 


--------------------------------------------------------------------------------
/app/templates/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg width="0" height="0" display="none">
 2 | 
 3 |   <symbol id="github" viewBox="0 0 24 24">
 4 |     <path d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.010-1.040-0.015-2.040-3.338 0.724-4.042-1.61-4.042-1.61-0.546-1.385-1.335-1.755-1.335-1.755-1.087-0.744 0.084-0.729 0.084-0.729 1.205 0.084 1.838 1.236 1.838 1.236 1.070 1.835 2.809 1.305 3.495 0.998 0.108-0.776 0.417-1.305 0.76-1.605-2.665-0.3-5.466-1.332-5.466-5.93 0-1.31 0.465-2.38 1.235-3.22-0.135-0.303-0.54-1.523 0.105-3.176 0 0 1.005-0.322 3.3 1.23 0.96-0.267 1.98-0.399 3-0.405 1.020 0.006 2.040 0.138 3 0.405 2.28-1.552 3.285-1.23 3.285-1.23 0.645 1.653 0.24 2.873 0.12 3.176 0.765 0.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92 0.42 0.36 0.81 1.096 0.81 2.22 0 1.606-0.015 2.896-0.015 3.286 0 0.315 0.21 0.69 0.825 0.57 4.801-1.574 8.236-6.074 8.236-11.369 0-6.627-5.373-12-12-12z"></path>
 5 |   </symbol>
 6 | 
 7 |   <symbol id="twitter" viewBox="0 0 24 24">
 8 |     <path fill="#1da1f2" style="fill: var(--color1, #1da1f2)" d="M23.954 4.569c-0.885 0.389-1.83 0.654-2.825 0.775 1.014-0.611 1.794-1.574 2.163-2.723-0.951 0.555-2.005 0.959-3.127 1.184-0.896-0.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 0.39 0.045 0.765 0.127 1.124-4.090-0.193-7.715-2.157-10.141-5.126-0.427 0.722-0.666 1.561-0.666 2.475 0 1.71 0.87 3.213 2.188 4.096-0.807-0.026-1.566-0.248-2.228-0.616v0.061c0 2.385 1.693 4.374 3.946 4.827-0.413 0.111-0.849 0.171-1.296 0.171-0.314 0-0.615-0.030-0.916-0.086 0.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-0.39 0-0.779-0.023-1.17-0.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-0.209 0-0.42-0.015-0.63 0.961-0.689 1.8-1.56 2.46-2.548l-0.047-0.020z"></path>
 9 |   </symbol>
10 | 
11 |   <symbol viewBox="0 0 24 24" id="apps">
12 |     <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
13 |   </symbol>
14 | 
15 |   <symbol viewBox="0 0 24 24" id="arrow_back">
16 |     <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
17 |   </symbol>
18 | 
19 |   <symbol viewBox="0 0 24 24" id="arrow_forward">
20 |     <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
21 |   </symbol>
22 | 
23 |   <symbol viewBox="0 0 24 24" id="assignment">
24 |     <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
25 |   </symbol>
26 | 
27 |   <symbol viewBox="0 0 24 24" id="check">
28 |     <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
29 |   </symbol>
30 | 
31 |   <symbol viewBox="0 0 24 24" id="chrome_reader_mode">
32 |     <path d="M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z"/>
33 |   </symbol>
34 | 
35 |   <symbol viewBox="0 0 24 24" id="close">
36 |     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
37 |   </symbol>
38 | 
39 |   <symbol viewBox="0 0 24 24" id="code">
40 |     <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
41 |   </symbol>
42 | 
43 |   <symbol viewBox="0 0 24 24" id="devices_other">
44 |     <path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z"/>
45 |   </symbol>
46 | 
47 |   <symbol viewBox="0 0 24 24" id="favorite">
48 |     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
49 |   </symbol>
50 | 
51 |   <symbol viewBox="0 0 24 24" id="home">
52 |     <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
53 |   </symbol>
54 | 
55 |   <symbol viewBox="0 0 24 24" id="info_outline">
56 |     <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
57 |   </symbol>
58 | 
59 |   <symbol viewBox="0 0 24 24" id="insert_comment">
60 |     <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
61 |   </symbol>
62 | 
63 |   <symbol viewBox="0 0 24 24" id="insert_emoticon">
64 |     <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
65 |   </symbol>
66 | 
67 |   <symbol viewBox="0 0 24 24" id="insert_link">
68 |     <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
69 |   </symbol>
70 | 
71 |   <symbol viewBox="0 0 24 24" id="menu">
72 |     <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
73 |   </symbol>
74 | 
75 |   <symbol viewBox="0 0 24 24" id="note">
76 |     <path d="M22 10l-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5l5.5 5.5H15V5.5z"/>
77 |   </symbol>
78 | 
79 |   <symbol viewBox="0 0 24 24" id="picture_in_picture">
80 |     <path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/>
81 |   </symbol>
82 | 
83 |   <symbol viewBox="0 0 24 24" id="share">
84 |     <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
85 |   </symbol>
86 | 
87 |   <symbol viewBox="0 0 24 24" id="star">
88 |     <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
89 |   </symbol>
90 | 
91 |   <symbol viewBox="0 0 24 24" id="thumb_up">
92 |     <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/>
93 |   </symbol>
94 | 
95 |   <symbol viewBox="0 0 24 24" id="today">
96 |     <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
97 |   </symbol>
98 | </svg>


--------------------------------------------------------------------------------
/app/scripts/App.js:
--------------------------------------------------------------------------------
  1 | import {SECTIONS} from './constants.js';
  2 | import Content from './Content.js';
  3 | import Nav from './Nav.js';
  4 | import Sidebar from './Sidebar.js';
  5 | import {getState, setState, stateListener} from './state.js';
  6 | import {transition} from './transition';
  7 | 
  8 | const CONTENT_MIN_WIDTH = 256; /* 16em */
  9 | const SIDEBAR_MIN_WIDTH = 257; /* 16em + 1px (border) */
 10 | 
 11 | const NAV_OPEN_TIMEOUT = 600;
 12 | const SIDEBAR_TRANSITION_TIME = 300;
 13 | 
 14 | export default class App {
 15 |   constructor($root) {
 16 |     this.$root = $root;
 17 |     this.$main = document.querySelector('.App-main');
 18 |     this.$modalOverlay = document.querySelector('.App-modalOverlay');
 19 |     this.$nav = document.querySelector('.App-nav');
 20 |     this.$navShow = document.querySelector('.App-navShow');
 21 |     this.$navHide = document.querySelector('.App-navHide');
 22 |     this.$sidebar = document.querySelector('.App-sidebar');
 23 |     this.$sidebarShow = document.querySelector('.App-sidebarShow');
 24 |     this.$sidebarHide = document.querySelector('.App-sidebarHide');
 25 |     this.$sidebarGutter = document.querySelector('.App-sidebarGutter');
 26 | 
 27 |     // Bind callbacks
 28 |     this.onStateChange = this.onStateChange.bind(this);
 29 |     this.onHashChange = this.onHashChange.bind(this);
 30 |     this.onSidebarHide = this.onSidebarHide.bind(this);
 31 |     this.onSidebarShow = this.onSidebarShow.bind(this);
 32 |     this.hideNav = this.hideNav.bind(this);
 33 |     this.showNav = this.showNav.bind(this);
 34 |     this.hideSidebar = this.hideSidebar.bind(this);
 35 |     this.showSidebar = this.showSidebar.bind(this);
 36 |     this.onSidebarStartDrag = this.onSidebarStartDrag.bind(this);
 37 |     this.onSidebarStopDrag = this.onSidebarStopDrag.bind(this);
 38 |     this.onSidebarDrag = this.onSidebarDrag.bind(this);
 39 | 
 40 |     // Initialize sub-components
 41 |     this.content = new Content(document.querySelector('.Content'), {app: this});
 42 |     this.nav = new Nav(document.querySelector('.Nav'), {app: this});
 43 |     this.sidebar = new Sidebar(document.querySelector('.Sidebar'), {app: this});
 44 | 
 45 |     // Initialize controls
 46 |     this.initNav();
 47 |     this.initSidebar();
 48 | 
 49 |     window.addEventListener('hashchange', this.onHashChange);
 50 |     stateListener.on('change', this.onStateChange);
 51 |   }
 52 | 
 53 |   initNav() {
 54 |     this.$navHide.addEventListener('touchend', this.hideNav);
 55 |     this.$navHide.addEventListener('click', this.hideNav);
 56 |     this.$modalOverlay.addEventListener('touchend', this.hideNav);
 57 |     this.$modalOverlay.addEventListener('click', this.hideNav);
 58 | 
 59 |     this.$navShow.addEventListener('touchend', this.showNav);
 60 |     this.$navShow.addEventListener('click', this.showNav);
 61 |   }
 62 | 
 63 |   initSidebar() {
 64 |     this.$sidebarShow.addEventListener('touchend', this.onSidebarShow);
 65 |     this.$sidebarShow.addEventListener('click', this.onSidebarShow);
 66 |     this.$sidebarHide.addEventListener('touchend', this.onSidebarHide);
 67 |     this.$sidebarHide.addEventListener('click', this.onSidebarHide);
 68 | 
 69 |     this.$sidebarGutter.addEventListener(
 70 |         'touchstart', this.onSidebarStartDrag, {passive: true});
 71 |     this.$sidebarGutter.addEventListener(
 72 |         'mousedown', this.onSidebarStartDrag);
 73 |   }
 74 | 
 75 |   getSidebarWidth() {
 76 |     return this.$sidebar.clientWidth;
 77 |   }
 78 | 
 79 |   async onStateChange(oldState, state, changedProps) {
 80 |     if (changedProps.has('isNavDrawerOpen')) {
 81 |       if (state.isNavDrawerOpen) {
 82 |         this.openNavDrawer({useTransitions: state.isNavTransitioning});
 83 |       } else {
 84 |         this.closeNavDrawer({useTransitions: state.isNavTransitioning});
 85 |       }
 86 |     }
 87 | 
 88 |     if (changedProps.has('isNavSidebarCollapsed')) {
 89 |       if (state.isNavSidebarCollapsed) {
 90 |         this.collapseNav({useTransitions: state.isNavTransitioning});
 91 |       } else {
 92 |         this.expandNav({useTransitions: state.isNavTransitioning});
 93 |       }
 94 |     }
 95 | 
 96 |     if (changedProps.has('isSidebarHidden')) {
 97 |       if (state.isSidebarHidden) {
 98 |         this.hideSidebar({useTransitions: state.isSidebarTransitioning});
 99 |       } else {
100 |         this.showSidebar({useTransitions: state.isSidebarTransitioning});
101 |       }
102 |     }
103 | 
104 |     if (changedProps.has('sidebarWidth')) {
105 |       // Only set the sidebar width if the sidebar can be visible.
106 |       if (!state.isNavInDrawerMode) {
107 |         this.$sidebar.style.width = `${state.sidebarWidth}px`;
108 |       }
109 |     }
110 |   }
111 | 
112 |   showNav(evt) {
113 |     evt.preventDefault();
114 | 
115 |     const state = getState();
116 |     if (state.isNavInDrawerMode) {
117 |       setState({isNavDrawerOpen: true, isNavTransitioning: true});
118 |     } else {
119 |       setState({isNavSidebarCollapsed: false, isNavTransitioning: true});
120 |     }
121 |   }
122 | 
123 |   hideNav(evt) {
124 |     evt.preventDefault();
125 | 
126 |     const state = getState();
127 |     if (state.isNavInDrawerMode) {
128 |       setState({isNavDrawerOpen: false, isNavTransitioning: true});
129 |     } else {
130 |       setState({isNavSidebarCollapsed: true, isNavTransitioning: true});
131 |     }
132 |   }
133 | 
134 |   async openNavDrawer({useTransitions}) {
135 |     await transition(this.$root, NAV_OPEN_TIMEOUT, {
136 |       to: 'App--isNavDrawerOpen',
137 |       using: 'App--isNavTransitioning',
138 |     });
139 |     // TODO(philipwalton): in addition to adding focus here,
140 |     // consider traping focus in the nav unless the ESC key is pressed
141 |     this.$nav.focus({preventScroll: true});
142 |     if (useTransitions) {
143 |       setState({isNavTransitioning: false});
144 |     }
145 |   }
146 | 
147 |   async closeNavDrawer({useTransitions}) {
148 |     await transition(this.$root, NAV_OPEN_TIMEOUT, {
149 |       from: 'App--isNavDrawerOpen',
150 |       using: 'App--isNavTransitioning',
151 |     });
152 |     this.$navShow.focus({preventScroll: true});
153 |     if (useTransitions) {
154 |       setState({isNavTransitioning: false});
155 |     }
156 |   }
157 | 
158 |   async expandNav({useTransitions}) {
159 |     await transition(this.$root, NAV_OPEN_TIMEOUT, {
160 |       from: 'App--isNavSidebarCollapsed',
161 |       using: 'App--isNavTransitioning',
162 |     });
163 |     this.$nav.focus({preventScroll: true});
164 |     if (useTransitions) {
165 |       setState({isNavTransitioning: false});
166 |     }
167 |   }
168 | 
169 |   async collapseNav({useTransitions}) {
170 |     await transition(this.$root, NAV_OPEN_TIMEOUT, {
171 |       to: 'App--isNavSidebarCollapsed',
172 |       using: 'App--isNavTransitioning',
173 |     });
174 |     this.$navShow.focus({preventScroll: true});
175 |     if (useTransitions) {
176 |       setState({isNavTransitioning: false});
177 |     }
178 |   }
179 | 
180 |   async hideSidebar({useTransitions}) {
181 |     await transition(this.$root, SIDEBAR_TRANSITION_TIME, {
182 |       to: 'App--isSidebarHidden',
183 |       using: 'App--isSidebarTransitioning',
184 |       useTransitions,
185 |     });
186 |     this.$sidebarShow.focus({preventScroll: true});
187 |     if (useTransitions) {
188 |       setState({isSidebarTransitioning: false});
189 |     }
190 |   }
191 | 
192 |   async showSidebar({useTransitions}) {
193 |     await transition(this.$root, SIDEBAR_TRANSITION_TIME, {
194 |       from: 'App--isSidebarHidden',
195 |       using: 'App--isSidebarTransitioning',
196 |       useTransitions,
197 |     });
198 | 
199 |     // Not all browsers support `preventScroll`, so we set scroll just in case.
200 |     this.$sidebar.focus({preventScroll: true});
201 |     window.scrollTo(0, 0);
202 |     if (useTransitions) {
203 |       setState({isSidebarTransitioning: false});
204 |     }
205 |   }
206 | 
207 |   onHashChange() {
208 |     const sectionId = location.hash.slice(1);
209 |     if (SECTIONS.has(sectionId)) {
210 |       setState({selectedPage: sectionId});
211 |     }
212 |   }
213 | 
214 |   onSidebarHide(evt) {
215 |     evt.preventDefault();
216 |     setState({isSidebarHidden: true, isSidebarTransitioning: true});
217 |   }
218 | 
219 |   onSidebarShow(evt) {
220 |     evt.preventDefault();
221 |     setState({isSidebarHidden: false, isSidebarTransitioning: true});
222 |   }
223 | 
224 |   onSidebarStartDrag(evt) {
225 |     evt.preventDefault();
226 | 
227 |     // Cache these values at the start of a drag,
228 |     // so constant DOM measurements/lookups aren't required.
229 |     this._screenWidth = this.$root.clientWidth;
230 |     this._navWidth = this.$nav.clientWidth;
231 | 
232 |     document.addEventListener('touchmove', this.onSidebarDrag);
233 |     document.addEventListener('mousemove', this.onSidebarDrag);
234 |     document.addEventListener('touchend', this.onSidebarStopDrag);
235 |     document.addEventListener('mouseup', this.onSidebarStopDrag);
236 | 
237 |     setState({isSidebarDragging: true});
238 |   }
239 | 
240 |   onSidebarStopDrag(evt) {
241 |     evt.preventDefault();
242 | 
243 |     document.removeEventListener('touchmove', this.onSidebarDrag);
244 |     document.removeEventListener('mousemove', this.onSidebarDrag);
245 |     document.removeEventListener('touchend', this.onSidebarStopDrag);
246 |     document.removeEventListener('mouseup', this.onSidebarStopDrag);
247 | 
248 |     setState({isSidebarDragging: false});
249 |   }
250 | 
251 |   onSidebarDrag(evt) {
252 |     evt.preventDefault();
253 | 
254 |     // Use the touch target's pageX value if it's a touch event.
255 |     const pageX = evt.targetTouches ? evt.targetTouches[0].pageX : evt.pageX;
256 | 
257 |     // Ensure the sidebar width is greater than --App-sidebarMinWidth
258 |     // but not so big that it would force the content area to be smaller
259 |     // than --App-contentMinWidth.
260 |     const contentWidthCandidate = Math.max(CONTENT_MIN_WIDTH,
261 |         pageX - this._navWidth);
262 | 
263 |     const sidebarWidth = Math.max(SIDEBAR_MIN_WIDTH,
264 |         this._screenWidth - (this._navWidth + contentWidthCandidate));
265 | 
266 |     setState({sidebarWidth});
267 |   }
268 | }
269 | 


--------------------------------------------------------------------------------
/app/scripts/analytics.js:
--------------------------------------------------------------------------------
  1 | // Import the individual autotrack plugins you want to use.
  2 | import 'autotrack/lib/plugins/clean-url-tracker';
  3 | import 'autotrack/lib/plugins/media-query-tracker';
  4 | import 'autotrack/lib/plugins/outbound-link-tracker';
  5 | import 'autotrack/lib/plugins/page-visibility-tracker';
  6 | import {getState, stateListener} from './state.js';
  7 | 
  8 | 
  9 | /* global ga */
 10 | 
 11 | 
 12 | /**
 13 |  * The tracking ID for your Google Analytics property.
 14 |  * https://support.google.com/analytics/answer/1032385
 15 |  */
 16 | const TRACKING_ID = 'UA-40829935-7';
 17 | 
 18 | 
 19 | /**
 20 |  * Bump this when making backwards incompatible changes to the tracking
 21 |  * implementation. This allows you to create a segment or view filter
 22 |  * that isolates only data captured with the most recent tracking changes.
 23 |  */
 24 | const TRACKING_VERSION = '2';
 25 | 
 26 | 
 27 | /**
 28 |  * A default value for dimensions so unset values always are reported as
 29 |  * something. This is needed since Google Analytics will drop empty dimension
 30 |  * values in reports.
 31 |  */
 32 | const NULL_VALUE = '(not set)';
 33 | 
 34 | 
 35 | /**
 36 |  * A mapping between custom dimension names and their indexes.
 37 |  */
 38 | const dimensions = {
 39 |   TRACKING_VERSION: 'dimension1',
 40 |   CLIENT_ID: 'dimension2',
 41 |   WINDOW_ID: 'dimension3',
 42 |   HIT_ID: 'dimension4',
 43 |   HIT_TIME: 'dimension5',
 44 |   HIT_TYPE: 'dimension6',
 45 |   HIT_SOURCE: 'dimension7',
 46 |   VISIBILITY_STATE: 'dimension8',
 47 |   URL_QUERY_PARAMS: 'dimension9',
 48 |   BREAKPOINT: 'dimension10',
 49 |   SELECTED_PAGE: 'dimension11',
 50 |   PINNED_DEMO: 'dimension12',
 51 | };
 52 | 
 53 | 
 54 | /**
 55 |  * A mapping between custom metric names and their indexes.
 56 |  */
 57 | const metrics = {
 58 |   PAGE_LOADS: 'metric1',
 59 |   PAGE_VISIBLE_TIME: 'metric2',
 60 | };
 61 | 
 62 | 
 63 | /**
 64 |  * Initializes all the analytics setup. Creates trackers and sets initial
 65 |  * values on the trackers.
 66 |  */
 67 | export const init = () => {
 68 |   // Initialize the command queue in case analytics.js hasn't loaded yet.
 69 |   window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
 70 | 
 71 |   createTracker();
 72 |   trackErrors();
 73 |   trackCustomDimensions();
 74 |   requireAutotrackPlugins();
 75 | 
 76 |   stateListener.on('change', onStateChange);
 77 | };
 78 | 
 79 | const onStateChange = (oldState, state, changedProps) => {
 80 |   ga('set', dimensions.SELECTED_PAGE, state.selectedPage);
 81 |   ga('set', dimensions.PINNED_DEMO, state.pinnedDemo);
 82 | 
 83 |   if (changedProps.has('selectedPage')) {
 84 |     ga('send', 'pageview');
 85 |   }
 86 |   if (changedProps.has('pinnedDemo')) {
 87 |     ga('send', 'event', {
 88 |       eventCategory: 'Pinned Demo',
 89 |       eventAction: 'change',
 90 |       eventLabel: state.pinnedDemo,
 91 |     });
 92 |   }
 93 |   if (changedProps.has('isSidebarDragging')) {
 94 |     if (!state.isSidebarDragging) {
 95 |       ga('send', 'event', {
 96 |         eventCategory: 'Sidebar',
 97 |         eventAction: 'drag',
 98 |         eventLabel: state.sidebarWidth,
 99 |         eventValue: state.sidebarWidth,
100 |       });
101 |     }
102 |   }
103 |   if (changedProps.has('isSidebarHidden')) {
104 |     if (state.isSidebarHidden) {
105 |       ga('send', 'event', {
106 |         eventCategory: 'Sidebar',
107 |         eventAction: 'hide',
108 |       });
109 |     } else {
110 |       ga('send', 'event', {
111 |         eventCategory: 'Sidebar',
112 |         eventAction: 'show',
113 |       });
114 |     }
115 |   }
116 |   if (changedProps.has('isNavSidebarCollapsed')) {
117 |     if (state.isNavSidebarCollapsed) {
118 |       ga('send', 'event', {
119 |         eventCategory: 'Nav',
120 |         eventAction: 'collapse',
121 |       });
122 |     } else {
123 |       ga('send', 'event', {
124 |         eventCategory: 'Nav',
125 |         eventAction: 'uncollapse',
126 |       });
127 |     }
128 |   }
129 |   if (changedProps.has('isNavDrawerOpen')) {
130 |     if (state.isNavDrawerOpen) {
131 |       ga('send', 'event', {
132 |         eventCategory: 'Nav',
133 |         eventAction: 'open',
134 |       });
135 |     }
136 |   }
137 | };
138 | 
139 | 
140 | /**
141 |  * Tracks a JavaScript error with optional fields object overrides.
142 |  * This function is exported so it can be used in other parts of the codebase.
143 |  * E.g.:
144 |  *
145 |  *    `fetch('/api.json').catch(trackError);`
146 |  *
147 |  * @param {(Error|Object)=} err
148 |  * @param {Object=} fieldsObj
149 |  */
150 | export const trackError = (err = {}, fieldsObj = {}) => {
151 |   ga('send', 'event', Object.assign({
152 |     eventCategory: 'Error',
153 |     eventAction: err.name || '(no error name)',
154 |     eventLabel: `${err.message}\n${err.stack || '(no stack trace)'}`,
155 |     nonInteraction: true,
156 |   }, fieldsObj));
157 | };
158 | 
159 | 
160 | /**
161 |  * Creates the trackers and sets the default transport and tracking
162 |  * version fields. In non-production environments it also logs hits.
163 |  */
164 | const createTracker = () => {
165 |   ga('create', TRACKING_ID, 'auto');
166 | 
167 |   // Ensures all hits are sent via `navigator.sendBeacon()`.
168 |   ga('set', 'transport', 'beacon');
169 | 
170 |   // Log hits in non-production environments.
171 |   if (process.env.NODE_ENV !== 'production') {
172 |     ga('set', 'sendHitTask', function(model) {
173 |       let paramsToIgnore = ['v', 'did', 't', 'tid', 'ec', 'ea', 'el', 'ev',
174 |           'a', 'z', 'ul', 'de', 'sd', 'sr', 'vp', 'je', 'fl', 'jid'];
175 | 
176 |       let hitType = model.get('&t');
177 |       let hitPayload = model.get('hitPayload');
178 |       let hit = hitPayload
179 |           .split('&')
180 |           .map(decodeURIComponent)
181 |           .filter((item) => {
182 |             const [param] = item.split('=');
183 |             return !(param.charAt(0) === '_' ||
184 |                 paramsToIgnore.indexOf(param) > -1);
185 |           });
186 | 
187 |       let parts = [model.get('&tid'), hitType];
188 |       if (hitType === 'event') {
189 |         parts = [
190 |           ...parts,
191 |           model.get('&ec'),
192 |           model.get('&ea'),
193 |           model.get('&el'),
194 |         ];
195 |         if (model.get('&ev')) parts.push(model.get('&ev'));
196 |       }
197 | 
198 |       // eslint-disable-next-line no-console
199 |       console.log(...parts, hit);
200 |     });
201 |   }
202 | };
203 | 
204 | 
205 | /**
206 |  * Tracks any errors that may have occured on the page prior to analytics being
207 |  * initialized, then adds an event handler to track future errors.
208 |  */
209 | const trackErrors = () => {
210 |   // Errors that have occurred prior to this script running are stored on
211 |   // `window.__e.q`, as specified in `index.html`.
212 |   const loadErrorEvents = window.__e && window.__e.q || [];
213 | 
214 |   const trackErrorEvent = (evt) => {
215 |     // Use a different eventCategory for uncaught errors.
216 |     const fieldsObj = {eventCategory: 'Uncaught Error'};
217 | 
218 |     // Ignore the ResizeObserver loop limit exceeded error.
219 |     if (evt.message.includes('ResizeObserver loop limit exceeded')) {
220 |       return;
221 |     }
222 | 
223 |     // Some browsers don't have an error property, so we fake it.
224 |     const err = evt.error || {
225 |       message: `${evt.message} (${evt.lineno}:${evt.colno})`,
226 |     };
227 | 
228 |     trackError(err, fieldsObj);
229 |   };
230 | 
231 |   // Replay any stored load error events.
232 |   for (let evt of loadErrorEvents) {
233 |     trackErrorEvent(evt);
234 |   }
235 | 
236 |   // Add a new listener to track event immediately.
237 |   window.addEventListener('error', trackErrorEvent);
238 | };
239 | 
240 | /**
241 |  * Sets a default dimension value for all custom dimensions on all trackers.
242 |  */
243 | const trackCustomDimensions = () => {
244 |   // Sets a default dimension value for all custom dimensions to ensure
245 |   // that every dimension in every hit has *some* value. This is necessary
246 |   // because Google Analytics will drop rows with empty dimension values
247 |   // in your reports.
248 |   Object.keys(dimensions).forEach((key) => {
249 |     ga('set', dimensions[key], NULL_VALUE);
250 |   });
251 | 
252 |   // Adds tracking of dimensions known at page load time.
253 |   ga((tracker) => {
254 |     const {selectedPage, pinnedDemo} = getState();
255 |     tracker.set({
256 |       // General dimensions
257 |       [dimensions.TRACKING_VERSION]: TRACKING_VERSION,
258 |       [dimensions.CLIENT_ID]: tracker.get('clientId'),
259 |       [dimensions.WINDOW_ID]: uuid(),
260 |       // Demo dimensions
261 |       [dimensions.SELECTED_PAGE]: selectedPage,
262 |       [dimensions.PINNED_DEMO]: pinnedDemo,
263 |     });
264 |   });
265 | 
266 |   // Adds tracking to record each the type, time, uuid, and visibility state
267 |   // of each hit immediately before it's sent.
268 |   ga((tracker) => {
269 |     const originalBuildHitTask = tracker.get('buildHitTask');
270 |     tracker.set('buildHitTask', (model) => {
271 |       const qt = model.get('queueTime') || 0;
272 |       model.set(dimensions.HIT_TIME, String(new Date - qt), true);
273 |       model.set(dimensions.HIT_ID, uuid(), true);
274 |       model.set(dimensions.HIT_TYPE, model.get('hitType'), true);
275 |       model.set(dimensions.VISIBILITY_STATE, document.visibilityState, true);
276 | 
277 |       originalBuildHitTask(model);
278 |     });
279 |   });
280 | };
281 | 
282 | /**
283 |  * Requires select autotrack plugins and initializes each one with its
284 |  * respective configuration options.
285 |  */
286 | const requireAutotrackPlugins = () => {
287 |   ga('require', 'cleanUrlTracker', {
288 |     stripQuery: true,
289 |     queryDimensionIndex: getDefinitionIndex(dimensions.URL_QUERY_PARAMS),
290 |     trailingSlash: 'add',
291 |   });
292 |   ga('require', 'mediaQueryTracker', {
293 |     definitions: [
294 |       {
295 |         name: 'Breakpoint',
296 |         dimensionIndex: getDefinitionIndex(dimensions.BREAKPOINT),
297 |         items: [
298 |           {name: 'XS', media: 'all'},
299 |           {name: 'SM', media: '(min-width: 24em)'},
300 |           {name: 'MD', media: '(min-width: 36em)'},
301 |           {name: 'LG', media: '(min-width: 48em)'},
302 |           {name: 'XL', media: '(min-width: 60em)'},
303 |         ],
304 |       },
305 |     ],
306 |   });
307 |   ga('require', 'outboundLinkTracker', {
308 |     events: ['click', 'auxclick', 'contextmenu'],
309 |   });
310 |   ga('require', 'pageVisibilityTracker', {
311 |     sendInitialPageview: true,
312 |     pageLoadsMetricIndex: getDefinitionIndex(metrics.PAGE_LOADS),
313 |     visibleMetricIndex: getDefinitionIndex(metrics.PAGE_VISIBLE_TIME),
314 |     timeZone: 'America/Los_Angeles',
315 |     fieldsObj: {[dimensions.HIT_SOURCE]: 'pageVisibilityTracker'},
316 |   });
317 | };
318 | 
319 | /**
320 |  * Accepts a custom dimension or metric and returns it's numerical index.
321 |  * @param {string} definition The definition string (e.g. 'dimension1').
322 |  * @return {number} The definition index.
323 |  */
324 | const getDefinitionIndex = (definition) => +/\d+$/.exec(definition)[0];
325 | 
326 | /**
327 |  * Generates a UUID.
328 |  * https://gist.github.com/jed/982883
329 |  * @param {string|undefined=} a
330 |  * @return {string}
331 |  */
332 | const uuid = function b(a) {
333 |   return a ? (a ^ Math.random() * 16 >> a / 4).toString(16) :
334 |       ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, b);
335 | };
336 | 


--------------------------------------------------------------------------------
/app/styles/components/App.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * .App
  3 |  * ------------------------------------------------------------------------ \\
  4 |  */
  5 | .App {
  6 |   position: relative;
  7 |   min-height: 100vh;
  8 | }
  9 | @media (min-width: 48em) {
 10 |   .App {
 11 |     display: flex;
 12 |     position: static;
 13 |   }
 14 | }
 15 | 
 16 | /**
 17 |  * .App-content
 18 |  * ------------------------------------------------------------------------ \\
 19 |  */
 20 | .App-content {
 21 |   contain: content;
 22 |   padding: var(--gutter);
 23 | }
 24 | @media (min-width: 48em) {
 25 |   .App-content {
 26 |     flex: 1 1 0%;
 27 |     min-width: 16em;
 28 |   }
 29 | }
 30 | 
 31 | /**
 32 |  * .App-footer
 33 |  * ------------------------------------------------------------------------ \\
 34 |  */
 35 | .App-footer {
 36 |   contain: content;
 37 | }
 38 | 
 39 | /**
 40 |  * .App-main
 41 |  * ------------------------------------------------------------------------ \\
 42 |  */
 43 | .App-main {
 44 |   contain: content;
 45 |   background: hsl(0, 0%, 96%);
 46 | }
 47 | @media (min-width: 48em) {
 48 |   .App-main {
 49 |     display: flex;
 50 |     flex: 1 1 0%;
 51 |     flex-flow: column;
 52 |     min-width: 0;
 53 |   }
 54 | }
 55 | 
 56 | /**
 57 |  * .App-mainContent
 58 |  * ------------------------------------------------------------------------ \\
 59 |  */
 60 | @media (min-width: 48em) {
 61 |   .App-mainContent {
 62 |     contain: content;
 63 |     display: flex;
 64 |     flex: 1 0 auto;
 65 |   }
 66 | }
 67 | 
 68 | /**
 69 |  * .App-mainHeader
 70 |  * ------------------------------------------------------------------------ \\
 71 |  */
 72 | .App-mainHeader {
 73 |   align-items: center;
 74 |   background: hsl(0, 0%, 100%);
 75 |   border-top: 1px solid var(--accentColor);
 76 |   border-bottom: 1px solid hsla(0, 0%, 0%, 0.075);
 77 |   contain: strict;
 78 |   display: flex;
 79 |   height: 5em;
 80 |   padding: 0 var(--gutter);
 81 | }
 82 | @media (min-width: 48em) {
 83 |   .App-mainHeader {
 84 |     position: relative;
 85 |   }
 86 | }
 87 | 
 88 | /**
 89 |  * .App-mainHeaderLink
 90 |  * --------------------
 91 |  */
 92 | .App-mainHeaderLink {
 93 |   color: inherit;
 94 |   margin-left: 1.25em;
 95 | }
 96 | @media (min-width: 72em) {
 97 |   .App-mainHeaderLink {
 98 |     font-size: 0.8em;
 99 |     margin-left: 0.75em;
100 |   }
101 | }
102 | .App-mainHeaderLink:first-child {
103 |   margin-left: 0;
104 | }
105 | 
106 | 
107 | /**
108 |  * .App-mainHeaderLinks
109 |  * --------------------
110 |  */
111 | .App-mainHeaderLinks {
112 |   display: none;
113 | }
114 | @media (min-width: 28em) {
115 |   .App-mainHeaderLinks {
116 |     align-items: center;
117 |     display: flex;
118 |   }
119 | }
120 | @media (min-width: 48em) {
121 |   .App-mainHeaderLinks {
122 |     transform: translate3d(0em, 0, 0);
123 |   }
124 |   .App--isSidebarTransitioning .App-mainHeaderLinks {
125 |     transition: transform 0.3s var(--material-easing);
126 |   }
127 |   .App--isSidebarHidden .App-mainHeaderLinks {
128 |     transform: translate3d(-3em, 0, 0);
129 |   }
130 | }
131 | 
132 | 
133 | 
134 | /**
135 |  * .App-mainHeaderTitle
136 |  * ------------------------------------------------------------------------ \\
137 |  */
138 | .App-mainHeaderTitle {
139 |   color: #666;
140 |   flex: 1;
141 |   font-weight: 700;
142 |   letter-spacing: 0.1em;
143 |   margin: 0;
144 |   max-width: 100%;
145 |   overflow: hidden;
146 |   text-overflow: ellipsis;
147 |   text-transform: uppercase;
148 |   white-space: nowrap;
149 |   word-spacing: 0.2em;
150 | }
151 | @media (min-width: 48em) {
152 |   .App-mainHeaderTitle {
153 |     word-spacing: 0.2em;
154 |     transform: translate3d(0, 0, 0);
155 |   }
156 |   .App--isNavTransitioning .App-mainHeaderTitle {
157 |     transition: transform 0.3s var(--material-easing);
158 |   }
159 |   .App--isNavSidebarCollapsed .App-mainHeaderTitle {
160 |     transform: translate3d(3em, 0, 0);
161 |   }
162 | }
163 | 
164 | /**
165 |  * .App-mainHeaderTitleEmphasis
166 |  * ------------------------------------------------------------------------ \\
167 |  */
168 | .App-mainHeaderTitleEmphasis {
169 |   color: var(--accentColor);
170 |   font-style: normal;
171 | }
172 | 
173 | /**
174 |  * .App-modalOverlay
175 |  * ------------------------------------------------------------------------ \\
176 |  */
177 | .App-modalOverlay {
178 |   display: none;
179 | }
180 | .App--isNavTransitioning .App-modalOverlay,
181 | .App--isNavDrawerOpen .App-modalOverlay {
182 |   background: #000;
183 |   bottom: 0;
184 |   display: block;
185 |   left: 0;
186 |   right: 0;
187 |   position: absolute;
188 |   top: 0;
189 |   z-index: 100;
190 | }
191 | .App--isNavTransitioning .App-modalOverlay {
192 |   opacity: 0;
193 |   transition: opacity 0.3s var(--material-easing);
194 | }
195 | .App--isNavDrawerOpen .App-modalOverlay {
196 |   opacity: 0.333;
197 | }
198 | 
199 | /**
200 |  * .App-nav
201 |  * ------------------------------------------------------------------------ \\
202 |  */
203 | .App-nav {
204 |   background: hsl(0, 0%, 23%);
205 |   contain: strict;
206 |   color: hsl(0, 0%, 80%);
207 |   width: 16em;
208 | }
209 | @media (max-width: 47.97em) {
210 |   .App-nav {
211 |     box-shadow: none;
212 |     bottom: 0;
213 |     display: none;
214 |     left: -16em;
215 |     position: absolute;
216 |     top: 0;
217 |     transform: translate3d(0%, 0, 0);
218 |     z-index: 101;
219 |   }
220 |   .App--isNavDrawerOpen .App-nav {
221 |     display: block;
222 |     box-shadow: 0 0 1em hsla(0, 0%, 0%, .5);
223 |     transform: translate3d(100%, 0, 0);
224 |   }
225 |   .App--isNavTransitioning .App-nav {
226 |     display: block;
227 |     transition:
228 |         box-shadow 0.3s var(--material-easing),
229 |         transform 0.3s var(--material-easing);
230 |   }
231 | }
232 | @media (min-width: 48em) {
233 |   .App-nav {
234 |     background: hsl(0, 0%, 23%)
235 |         linear-gradient(to left, hsla(0,0%,0%,.07), transparent 0.5em);
236 |     width: 16em;
237 |     flex: 0 0 auto;
238 |     overflow: hidden;
239 |     position: static;
240 |     will-change: width;
241 |   }
242 |   .App--isNavTransitioning .App-nav {
243 |     transition: width 0.3s var(--material-easing);
244 |   }
245 |   .App--isNavSidebarCollapsed .App-nav {
246 |     flex-shrink: 1;
247 |     width: 0;
248 |   }
249 |   .App--isNavSidebarCollapsed:not(.App--isNavTransitioning) .App-nav {
250 |     display: none;
251 |   }
252 | }
253 | 
254 | /**
255 |  * .App-navHeader
256 |  * ------------------------------------------------------------------------ \\
257 |  */
258 | .App-navHeader {
259 |   align-self: stretch;
260 |   align-items: center;
261 |   border-top: 1px solid #000;
262 |   border-bottom: 1px solid hsla(0, 0%, 100%, 0.075);
263 |   color: hsla(0, 0%, 100%, .85);
264 |   contain: strict;
265 |   display: flex;
266 |   justify-content: space-between;
267 |   padding: 0 var(--gutter);
268 | 
269 |   height: 5em;
270 | }
271 | 
272 | /**
273 |  * .App-navHeaderTitle
274 |  * ------------------------------------------------------------------------ \\
275 |  */
276 | .App-navHeaderTitle {
277 |   font-size: 0.9em;
278 |   font-weight: 600;
279 |   letter-spacing: 0.25em;
280 |   text-transform: uppercase;
281 | }
282 | 
283 | /**
284 |  * .App-navShow
285 |  * ------------------------------------------------------------------------ \\
286 |  */
287 | .App-navShow {
288 |   color: hsl(0, 0%, 60%);
289 |   display: flex;
290 |   width: 2.6em;
291 | }
292 | @media (min-width: 48em) {
293 |   .App-navShow {
294 |     align-items: center;
295 |     display: none;
296 |     height: 100%;
297 |     opacity: 0;
298 |     position: absolute;
299 |     top: 0;
300 |   }
301 |   .App--isNavSidebarCollapsed .App-navShow {
302 |     display: flex;
303 |     opacity: 1;
304 |   }
305 |   .App--isNavTransitioning .App-navShow {
306 |     display: flex;
307 |     transition: opacity 0.3s var(--material-easing);
308 |   }
309 | }
310 | 
311 | /**
312 |  * .App-navHide
313 |  * ------------------------------------------------------------------------ \\
314 |  */
315 | .App-navHide {
316 |   display: flex;
317 | }
318 | 
319 | /**
320 |  * .App-sidebar
321 |  * ------------------------------------------------------------------------ \\
322 |  */
323 | .App-sidebar {
324 |   display: none;
325 | }
326 | @media (min-width: 48em) {
327 |   .App-sidebar {
328 |     background: hsl(0, 0%, 100%);
329 |     border-left: 1px solid hsla(0, 0%, 0%, 0.075);
330 |     contain: layout style;
331 |     display: block;
332 |     flex: 0 1 auto;
333 |     padding: 0;
334 |     position: relative;
335 |     transform: translate3d(0, 0, 0);
336 |     width: 24em;
337 |     will-change: width;
338 |   }
339 |   .App--isSidebarTransitioning .App-sidebar {
340 |     transition: width 0.3s var(--material-easing);
341 |   }
342 |   .App--isSidebarHidden .App-sidebar {
343 |     width: 0!important;
344 |   }
345 |   .App--isSidebarHidden:not(.App--isSidebarTransitioning) .App-sidebar {
346 |     display: none;
347 |   }
348 | }
349 | 
350 | /**
351 |  * .App-sidebarGutter
352 |  * ------------------------------------------------------------------------ \\
353 |  */
354 | .App-sidebarGutter {
355 |   contain: strict;
356 |   cursor: ew-resize;
357 |   display: block;
358 |   height: 100%;
359 |   opacity: 1;
360 |   position: absolute;
361 |   left: -15px;
362 |   top: 0;
363 |   width: 30px;
364 | }
365 | 
366 | 
367 | /**
368 |  * .App-sidebarGutter::before
369 |  * ------------------------------------------------------------------------ \\
370 |  */
371 | .App-sidebarGutter::before {
372 |   display: none;
373 | }
374 | @media(min-width: 48em) {
375 |   .App-sidebarGutter::before {
376 |     background-image: linear-gradient(
377 |         90deg, #888, #888 1px, transparent 2px, transparent 5px);
378 |     background-size: 4px;
379 |     content: '';
380 |     display: block;
381 |     height: 30px;
382 |     margin-left: 10px;
383 |     opacity: 1;
384 |     position: fixed;
385 |     position: sticky; /* Prefer sticky but fall back to fixed */
386 |     pointer-events: none;
387 |     top: 50vh;
388 |     width: 10px;
389 |   }
390 |   .App--isSidebarTransitioning .App-sidebarGutter::before {
391 |     transition: opacity 0.3s var(--material-easing);
392 |   }
393 |   .App--isSidebarHidden .App-sidebarGutter::before {
394 |     opacity: 0;
395 |   }
396 | }
397 | 
398 | /**
399 |  * .App-sidebarHeader
400 |  * ------------------------------------------------------------------------ \\
401 |  */
402 | .App-sidebarHeader {
403 |   align-items: center;
404 |   display: flex;
405 |   contain: strict;
406 |   height: 6em;
407 |   justify-content: space-between;
408 |   min-width: 16em;
409 |   padding: 0 var(--gutter);
410 | }
411 | 
412 | 
413 | /**
414 |  * .App-sidebarHeaderTitle
415 |  * ------------------------------------------------------------------------ \\
416 |  */
417 | .App-sidebarHeaderTitle {
418 |   font-size: 1.333em;
419 |   overflow: hidden;
420 |   text-overflow: ellipsis;
421 |   white-space: nowrap;
422 | }
423 | 
424 | 
425 | /**
426 |  * .App-sidebarHide
427 |  * ------------------------------------------------------------------------ \\
428 |  */
429 | .App-sidebarHide {
430 |   color: hsla(0, 0%, 70%);
431 |   display: inline-flex;
432 | }
433 | 
434 | /**
435 |  * .App-sidebarShow
436 |  * ------------------------------------------------------------------------ \\
437 |  */
438 | .App-sidebarShow {
439 |   display: none;
440 | }
441 | @media (min-width: 48em) {
442 |   .App-sidebarShow {
443 |     align-items: center;
444 |     color: hsl(0, 0%, 60%);
445 |     height: 100%;
446 |     position: absolute;
447 |     right: var(--gutter);
448 |     opacity: 0;
449 |     top: 0;
450 |   }
451 |   .App--isSidebarTransitioning .App-sidebarShow {
452 |     display: flex;
453 |     transition: opacity 0.3s var(--material-easing);
454 |   }
455 |   .App--isSidebarHidden .App-sidebarShow {
456 |     display: flex;
457 |     opacity: 1;
458 |   }
459 | }
460 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright 2018 Google LLC
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        https://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------