start working on layout

dwightjack · Jul 6, 2021 · 32cc938 · 32cc938
1 parent 3cf9fe2
commit 32cc938
Show file tree

Hide file tree

Showing 13 changed files with 855 additions and 837 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Marco Solazzi
+Copyright (c) 2021-present Marco Solazzi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/index.html b/index.html
@@ -5,12 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>YUI3 Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
     <script
       src="https://yui-s.yahooapis.com/3.18.1/build/yui/yui-min.js"
       defer
     ></script>
     <script src="/src/js/main.js" type="module"></script>
-    <style>
+    <!-- <style>
       #box {
         width: 200px;
         height: 200px;
@@ -23,10 +29,10 @@
         height: 300px;
         overflow: auto;
       }
-    </style>
+    </style> -->
   </head>
   <body>
-    <div id="app"></div>
+    <!-- <div id="app"></div>
     <ul id="list">
       <li>first</li>
       <li>second</li>
@@ -47,6 +53,24 @@
           <li><%= user.name %> <i>(<%= user.email %>)</i></li>
         <% }) %>
       </ul>
-    </script>
+    </script> -->
+    <main>
+      <h1>Time Zones</h1>
+      <article class="c-timezone">
+        <h2 class="c-timezone__title">Amsterdam, Netherlands</h2>
+        <p class="c-timezone__zone">JST (UTC +9)</p>
+        <fieldset class="c-timezone__fieldset">
+          <legend class="u-visually-hidden">Date and time</legend>
+          <div class="c-input">
+            <input class="c-input__field" type="date" value="2020-10-10" />
+          </div>
+          <div class="c-input">
+            <input class="c-input__field" type="time" value="23:24" />
+          </div>
+        </fieldset>
+        <button type="button">Remove</button>
+      </article>
+      <button type="button">Add</button>
+    </main>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,9 @@
   "author": "Marco Solazzi",
   "homepage": "https://github.com/dwightjack/yui3-demo",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "sanitize.css": "12.0.1"
+  },
   "engines": {
     "node": ">=14.0.0"
   },
@@ -19,15 +21,15 @@
     "lint": "eslint && npx stylelint --aei '**/*.css'"
   },
   "devDependencies": {
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "prettier": "^2.2.1",
-    "stylelint": "^13.0.0",
-    "stylelint-config-prettier": "^8.0.1",
-    "stylelint-config-standard": "^21.0.0",
-    "stylelint-prettier": "^1.1.2",
-    "vite": "^2.2.4"
+    "eslint": "7.30.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-node": "11.0.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "prettier": "2.3.2",
+    "stylelint": "13.13.1",
+    "stylelint-config-prettier": "8.0.1",
+    "stylelint-config-standard": "22.0.0",
+    "stylelint-prettier": "1.1.2",
+    "vite": "2.3.8"
   }
 }
diff --git a/src/.eslintrc.json b/src/.eslintrc.json
@@ -15,11 +15,5 @@
     "block-scoped-var": "error",
     "consistent-return": "error",
     "eqeqeq": "error"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.test.js", "**/*.spec.js"],
-      "env": { "jest": true }
-    }
-  ]
+  }
 }
diff --git a/src/css/components/input.css b/src/css/components/input.css
@@ -0,0 +1,33 @@
+.c-input {
+  display: grid;
+  grid-template-columns: [input-start] 1fr [input-end];
+  grid-template-rows: [input-start] 1fr [input-end];
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+.c-input::after {
+  content: '';
+  display: block;
+  grid-area: input;
+  background-color: currentColor;
+  opacity: 0.1;
+  border-radius: var(--size-border-radius-s);
+  padding: var(--s-1) var(--s-2);
+}
+
+.c-input__field {
+  border: 0;
+  grid-area: input;
+  background-color: transparent;
+  font-size: inherit;
+  color: inherit;
+  padding: var(--s-1) var(--s-2);
+  font-family: var(--font-family-mono);
+  min-width: 0;
+}
+
+.c-input.-reset {
+  appearance: none;
+}
diff --git a/src/css/components/timezone.css b/src/css/components/timezone.css
@@ -0,0 +1,28 @@
+.c-timezone {
+  --timezone-color-background: var(--color-background-primary);
+  background-color: var(--timezone-color-background);
+  color: var(--color-text-primary);
+  border-radius: var(--size-border-radius-m);
+  padding: var(--s-3) var(--s-4);
+  font-size: var(--font-size-m);
+}
+
+.c-timezone__title {
+  margin-top: var(--s-0);
+  margin-bottom: var(--s-0);
+  font-weight: var(--font-weight-semibold);
+  font-size: inherit;
+}
+
+.c-timezone__zone {
+  margin-top: var(--s-0);
+  margin-bottom: var(--s-0);
+  font-size: var(--font-size-s);
+}
+
+.c-timezone__fieldset {
+  border: 0;
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -0,0 +1,12 @@
+@import 'sanitize.css/evergreen.css';
+@import 'sanitize.css/reduce-motion.css';
+@import './tokens';
+@import 'components/timezone.css';
+@import 'components/input.css';
+@import './utilities.css';
+
+html {
+  font-family: var(--font-family-sans);
+  font-size: 100%;
+  line-height: 1.5;
+}
diff --git a/src/css/tokens.css b/src/css/tokens.css
@@ -0,0 +1,36 @@
+:root {
+  --color-white: 255, 255, 255;
+  --color-gray-700: 56, 56, 56;
+  --color-green-900: 37, 89, 87;
+  --color-green-500: 42, 157, 143;
+  --color-red-400: 231, 111, 81;
+  --color-yellow-400: 233, 196, 106;
+  --color-background-canvas: rgb(var(--color-white));
+  --color-background-primary: rgb(var(--color-gray-700));
+  --color-text-canvas: rgb(var(--color-gray-700));
+  --color-text-primary: rgb(var(--color-white));
+
+  /* Font sizes */
+  --font-size-s: 0.75rem;
+  --font-size-m: 1.125rem;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-family-sans: 'Inter', sans-serif;
+  --font-family-mono: 'Roboto Mono', monospace;
+
+  /* Size */
+  --size-spacing-0: 0;
+  --size-spacing-1: 0.25rem;
+  --size-spacing-2: 0.5rem;
+  --size-spacing-3: 0.75rem;
+  --size-spacing-4: 1rem;
+  --size-border-radius-s: 0.25rem;
+  --size-border-radius-m: 0.5rem;
+
+  /* Size shortcuts */
+  --s-0: var(--size-spacing-0);
+  --s-1: var(--size-spacing-1);
+  --s-2: var(--size-spacing-2);
+  --s-3: var(--size-spacing-3);
+  --s-4: var(--size-spacing-4);
+}
diff --git a/src/css/utilities.css b/src/css/utilities.css
@@ -0,0 +1,11 @@
+.u-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
diff --git a/src/js/main-old.js b/src/js/main-old.js
@@ -0,0 +1,103 @@
+import hello from './modules/hello.js?url';
+import links from './modules/links.js?url';
+import users from './modules/users.js?url';
+
+YUI({
+  modules: {
+    hello: {
+      fullpath: hello,
+      requires: ['node-base'],
+    },
+    links: {
+      fullpath: links,
+      requires: ['node-base', 'node-event-delegate', 'base-build'],
+    },
+    users: {
+      fullpath: users,
+      requires: ['io-base', 'json-parse'],
+    },
+  },
+}).use('hello', 'node', 'transition', (Y) => {
+  Y.Hello.hello();
+
+  const $list = Y.one('#list');
+
+  if ($list) {
+    const $num = Y.Node.create('<b />');
+
+    $list.all('li').each(($el, i) => {
+      $el.append($num.cloneNode().set('text', i));
+    });
+  }
+
+  Y.Transition.fx.fadeSlideIn = {
+    opacity: 1,
+    duration: 0.5,
+    transform: 'translateY(0)',
+    left: {
+      value: 0,
+      duration: 0.5,
+      delay: 0.5,
+    },
+  };
+
+  Y.Transition.fx.fadeSlideOut = {
+    left: {
+      value: '10px',
+      delay: 0,
+      duration: 0.5,
+    },
+    opacity: 0,
+    delay: 0.5,
+    transform: 'translateY(100px)',
+  };
+
+  Y.Transition.HIDE_TRANSITION = 'fadeSlideOut';
+  Y.Transition.SHOW_TRANSITION = 'fadeSlideIn';
+
+  Y.one('#btn').on('click', () => {
+    const $box = Y.one('#box');
+    if ($box.get('hidden')) {
+      $box.show(true);
+      return;
+    }
+    $box.hide(true);
+  });
+
+  const $p = Y.Node.create('<p />');
+  const $container = Y.one('#container');
+
+  function addNodes(num) {
+    const $nodes = new Y.NodeList();
+    for (let i = 0; i < num; i++) {
+      $nodes.push($p.cloneNode().set('text', Y.guid()));
+    }
+    $container.append($nodes);
+  }
+
+  addNodes(10);
+
+  $container.on('scroll', () => {
+    if ($container.one('> p:last-child').inRegion($container)) {
+      addNodes(10);
+    }
+  });
+
+  Y.use('links', () => {
+    const clicker = new Y.Links.Clicker();
+
+    Y.on('clicker:msgChange', ({ newVal }) => {
+      Y.log(newVal);
+    });
+
+    clicker.render('#clicker');
+  });
+
+  Y.use('template', 'users', 'array-extras', () => {
+    const template = Y.Lang.trim(Y.one('#user-list-tmpl').get('text'));
+    const micro = new Y.Template();
+    Y.Users.fetch((data) => {
+      Y.one('#user-list').setHTML(micro.render(template, { users: data }));
+    });
+  });
+});