Tiles and Cards examples done.

lib/imgholder.js

@@ -0,0 +1,8 @@
+import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';
+
+const defaults = {
+  bgColor: '#ccc',
+  textColor: '#888',
+}
+
+export const holder = (x, y) => simpleSvgPlaceholder({...defaults, width: x, height: y});

package-lock.json

@@ -32,6 +32,11 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@cloudfour/simple-svg-placeholder": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@cloudfour/simple-svg-placeholder/-/simple-svg-placeholder-1.0.2.tgz",
+      "integrity": "sha512-vZZ4Yp+TwdDhbxigDJyMFqGJM1zujqAES11R+Rmv8thnAgjOPaRIsJzd5LiTabE2O0sZDaHq4kmbjrmy1gP6Xg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "@cloudfour/simple-svg-placeholder": "^1.0.2",
     "Validator": "^1.1.2",
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",

public/code/Cards.css

@@ -0,0 +1,38 @@
+content {
+  display: flex;
+  flex: flex-shrink;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #eee;
+  width: min-content;
+}
+
+card top img {
+  padding: 0;
+  margin: 0;
+}
+
+card middle {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+card middle h4 {
+  margin: 0;
+}
+
+card bottom {
+  flex-shrink: 0;
+}
+
+card bottom button {
+  padding: 0.2rem;
+}

public/code/Cards.html

@@ -0,0 +1,20 @@
+<content>
+  <card>
+    <top>
+      <img src={ holder(16 * 30, 9 * 30) }/>
+    </top>
+
+    <middle>
+      <h4>
+        Card Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <bottom>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </bottom>
+  </card>
+</content>

public/code/Tiles.css

@@ -0,0 +1,36 @@
+content {
+  display: flex;
+  flex: flex-shrink;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+tile {
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #eee;
+  max-width: 50vh;  /* only for this display, I'd remove this. */
+}
+
+tile middle {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex-shrink: 3;
+}
+
+tile middle h4 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+tile right {
+  flex-shrink: 0;
+}
+
+tile right button {
+  padding: 0.2rem;
+}

public/code/Tiles.html

@@ -0,0 +1,20 @@
+<content>
+  <tile>
+    <left>
+      <img src={ holder(48, 48) }/>
+    </left>
+
+    <middle>
+      <h4>
+        Tile Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <right>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </right>
+  </tile>
+</content>
+

src/App.svelte

@@ -6,10 +6,6 @@
   import Darkmode from './components/Darkmode.svelte';
 </script>
 
-<svelte:head>
-  <title>LJSTHW Starter Template</title>
-</svelte:head>
-
 <style>
   header {
   }

src/Home.svelte

@@ -43,9 +43,9 @@
   </aside>
 
   <aside>
-    <h3>Add Flexbox</h3>
+    <h3>Add Flexbox + Grids</h3>
     <Icon name="box" size="64" />
-    <p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> you can layout anything you want without tons of divs.</p>
+    <p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grids</a> you can layout anything you want without tons of divs.</p>
   </aside>
 
   <aside>

src/demos/Cards.svelte

@@ -0,0 +1,69 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+
+  import { holder } from '../../lib/imgholder.js';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #eee;
+    width: min-content;
+  }
+
+  card top img {
+    padding: 0;
+    margin: 0;
+  }
+
+  card middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  card middle h4 {
+    margin: 0;
+  }
+
+  card bottom {
+    flex-shrink: 0;
+  }
+
+  card bottom button {
+    padding: 0.2rem;
+  }
+</style>
+
+<content>
+  <card>
+    <top>
+      <img src={ holder(16 * 30, 9 * 30) }/>
+    </top>
+
+    <middle>
+      <h4>
+        Card Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <bottom>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </bottom>
+  </card>
+</content>
+
+<CodeView source="/code/Cards" />

src/demos/Google.svelte

@@ -2,6 +2,7 @@
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
   import CodeView from '../components/CodeView.svelte';
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -88,7 +89,7 @@
 
   <figure>
     <a href="/demos/google" use:link>
-      <img src="https://via.placeholder.com/500x200?text=Google+Doodle">
+      <img src="{ holder(500,200) }">
     </a>
   </figure>
 

src/demos/Instagram.svelte

@@ -5,6 +5,7 @@
 
   let posts = [1,2,3,4,5,6,7,8,9,10];
   let pins = [1,2,3,4];
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -96,7 +97,7 @@
 
   <profile>
     <figure>
-      <img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
+      <img alt="Zed's Face" src="{ holder(256,256) }">
     </figure>
 
     <info>
@@ -118,7 +119,7 @@
   <pins>
   {#each pins as pin}
     <figure>
-      <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
+      <img alt="Stock photo" src="{ holder(82,82) }">
     </figure> 
   {/each}
   </pins>
@@ -137,7 +138,7 @@
   <posts>
   {#each posts as post}
     <figure>
-      <img alt="Stock photo" src="https://via.placeholder.com/300x300?text=Post Image">
+      <img alt="Stock photo" src="{ holder(300,300) }">
     </figure> 
   {/each}
   </posts>

src/demos/Login.svelte

@@ -1,6 +1,7 @@
 <script>
   import CodeView from '../components/CodeView.svelte';
 
+  import { holder } from '../../lib/imgholder.js';
 </script>
 <style>
   content {

src/demos/Pinterest.svelte

@@ -3,6 +3,7 @@
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
   import CodeView from '../components/CodeView.svelte';
+  import { holder } from '../../lib/imgholder.js';
 
   let samples = [1,2,3];
   let lanes = [1,2,3,4,5];
@@ -162,7 +163,7 @@ pins lane {
       </info>
 
       <figure>
-        <img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
+        <img alt="Zed's Face" src="{ holder(128,128) }">
       </figure>
     </profile>
 
@@ -171,7 +172,7 @@ pins lane {
       <lane>
         {#each random_sample(pin_sizes, 10) as height}
           <figure>
-            <img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
+            <img alt="Van Gogh Art" src={ holder(240, height) }>
             <figcaption>Something about Van Gogh {height} high.</figcaption>
           </figure>
         {/each}

src/demos/Tiles.svelte

@@ -0,0 +1,66 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+
+  import { holder } from '../../lib/imgholder.js';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  tile {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #eee;
+    max-width: 50vh;  /* only for this display, I'd remove this. */
+  }
+
+  tile middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex-shrink: 3;
+  }
+
+  tile middle h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  tile right {
+    flex-shrink: 0;
+  }
+
+  tile right button {
+    padding: 0.2rem;
+  }
+</style>
+
+<content>
+  <tile>
+    <left>
+      <img src={ holder(48, 48) }/>
+    </left>
+
+    <middle>
+      <h4>
+        Tile Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <right>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </right>
+  </tile>
+</content>
+
+<CodeView source="/code/Tiles" />

src/demos/Twitter.svelte

@@ -4,6 +4,7 @@
   import { onMount } from 'svelte';
   let tweets = [1,2,3,4,5];
   import CodeView from '../components/CodeView.svelte';
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -273,22 +274,22 @@
       <aside>
         <recent-media>
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82, 82) }">
           </figure> 
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82,82) }">
           </figure> 
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82,82) }">
           </figure> 
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82,82) }">
           </figure> 
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82,82) }">
           </figure> 
           <figure>
-            <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
+            <img alt="Stock photo" src="{ holder(82,82) }">
           </figure> 
         </recent-media>
       </aside>

src/demos/XorAcademy.svelte

@@ -6,6 +6,7 @@
 
   let posts = [1,2,3,4,5,6,7,8,9];
   let related = [1,2,3,4];
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -117,7 +118,7 @@
 
   <profile>
     <figure>
-      <img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb">
+      <img alt="Module Thumb" src="{ holder(256,256) }">
     </figure>
 
     <info>
@@ -139,7 +140,7 @@
   <related>
   {#each related as pin}
     <figure>
-      <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related">
+      <img alt="Stock photo" src="{ holder(82,82) }">
     </figure> 
   {/each}
   </related>
@@ -148,7 +149,7 @@
   {#each posts as post}
     <figure>
       <a href="/demos/xoracademy/watch" use:link>
-        <img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb">
+         <img alt="Placeholder" src="{ holder(300,300) }">
       </a>
     </figure> 
   {/each}

src/demos/XorAcademyWatch.svelte

@@ -5,6 +5,7 @@
   import CodeView from '../components/CodeView.svelte';
 
   let cards = [1,2,3,4];
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -184,7 +185,7 @@
   </header>
   <main>
     <figure>
-      <img src="https://via.placeholder.com/1280x720?text=Video">
+      <img src="{ holder(1280,720) }">
       <figcaption>
         <a>#tag</a> <a>#anothertag</a>
         <p>Title And Stuff</p>
@@ -204,7 +205,7 @@
       <promotion>
       <nav>
         <card>
-        <img src="https://via.placeholder.com/64x64?text=ME">
+        <img src="{ holder(64,64) }">
         <info>
         <h4>Zed A. Shaw</h4>
         <subs>1 subscriber</subs>
@@ -225,7 +226,7 @@
 
       {#each cards as card}
         <card>
-        <img src="https://via.placeholder.com/64x64?text=Person">
+        <img src="{ holder(64,64) }">
         <info>
         <h4>Guys</h4>
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>

src/demos/Youtube.svelte

@@ -7,6 +7,7 @@
 
   // this is used for display in the main grid
   export let thumbnail = false;
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 <style>
@@ -188,7 +189,7 @@
     <left>
       <figure>
         <a href="/demos/google" use:link>
-          <img src="https://via.placeholder.com/800x450?text=Video">
+          <img src="{ holder(800,450) }">
         </a>
         <figcaption>
           <a>#tag</a> <a>#anothertag</a>
@@ -209,7 +210,7 @@
       <promotion>
         <nav>
           <card>
-            <img src="https://via.placeholder.com/64x64?text=ME">
+            <img src="{ holder(64,64) }">
             <info>
             <h4>Zed A. Shaw</h4>
             <subs>1 subscriber</subs>
@@ -230,7 +231,7 @@
 
         {#each cards as card}
         <card>
-          <img src="https://via.placeholder.com/64x64?text=Person">
+          <img src="{ holder(64,64) }">
           <info>
             <h4>Guys</h4>
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
@@ -248,7 +249,7 @@
     <right>
       {#each cards as card}
       <card class="small">
-        <img src="https://via.placeholder.com/120x80?text=Thumb">
+        <img src="{ holder(120,80) }">
         <info>
           <h4>Video Thumb Title</h4>
           <author>Zed</author>
@@ -260,13 +261,13 @@
 
       <figure>
         <a href="/demos/google" use:link>
-          <img src="https://via.placeholder.com/300x150?text=Advert">
+          <img src="{ holder(300,150) }">
         </a>
       </figure>
 
       {#each cards as card}
       <card>
-        <img src="https://via.placeholder.com/120x80?text=Thumb">
+        <img src="{ holder(120,80) }">
         <info>
           <h4>Video Thumb Title</h4>
           <author>Zed</author>

src/demos/index.svelte

@@ -5,8 +5,10 @@
   import Instagram from '../thumbs/Instagram.svelte';
   import Pinterest from '../thumbs/Pinterest.svelte';
   import Login from '../thumbs/Login.svelte';
+  import Tiles from '../thumbs/Tiles.svelte';
 
   import {push} from 'svelte-spa-router';
+  import { holder } from '../../lib/imgholder.js';
 </script>
 
 
@@ -45,7 +47,7 @@
     left: 0;
   }
 </style>
-<h1>A Compendium of Layout Demos</h1>
+<h1>Full Websites</h1>
 
 <images>
 
@@ -59,11 +61,6 @@
   <figcaption>Twitter</figcaption>
 </figure>
 
-<figure id="main" on:click={ () => push('/demos/login') }>
-  <Login />
-  <figcaption>Basic Login</figcaption>
-</figure>
-
 <figure on:click={ () => push('/demos/youtube') }>
   <Youtube />
   <figcaption>Youtube</figcaption>
@@ -80,3 +77,18 @@
 </figure> 
 </images>
 
+<hr>
+<h1>Common UI Patterns</h1>
+
+<images>
+<figure on:click={ () => push('/demos/login') }>
+  <Login />
+  <figcaption>Basic Login</figcaption>
+</figure>
+
+
+<figure on:click={ () => push('/demos/tiles') }>
+  <Tiles />
+  <figcaption>Tiles</figcaption>
+</figure>
+</images>

src/routes.js

@@ -10,12 +10,16 @@ import Pinterest from "./demos/Pinterest.svelte";
 import XorAcademy from "./demos/XorAcademy.svelte";
 import XorAcademyWatch from "./demos/XorAcademyWatch.svelte";
 import Login from "./demos/Login.svelte";
+import Tiles from "./demos/Tiles.svelte";
+import Cards from "./demos/Cards.svelte";
 
 export default {
   "/": Home,
   "/about": About,
   "/demos": Demos,
   "/demos/login": Login,
+  "/demos/tiles": Tiles,
+  "/demos/cards": Cards,
   "/demos/google": Google,
   "/demos/twitter": Twitter,
   "/demos/youtube": Youtube,

src/thumbs/Cards.svelte

@@ -0,0 +1,68 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+
+  import { holder } from '../../lib/imgholder.js';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #eee;
+    width: min-content;
+  }
+
+  card top img {
+    padding: 0;
+    margin: 0;
+  }
+
+  card middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  card middle h4 {
+    margin: 0;
+  }
+
+  card bottom {
+    flex-shrink: 0;
+  }
+
+  card bottom button {
+    padding: 0.2rem;
+  }
+</style>
+
+<content>
+  <card>
+    <top>
+      <img src={ holder(16 * 30, 9 * 30) }/>
+    </top>
+
+    <middle>
+      <h4>
+        Card Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <bottom>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </bottom>
+  </card>
+</content>
+

src/thumbs/Google.svelte

@@ -86,7 +86,7 @@
 
   <figure>
     <a href="/demos/google" use:link>
-      <img src="https://via.placeholder.com/500x200?text=Google+Doodle">
+      <img src="http://via.placeholder.com/500x200?text=Google+Doodle">
     </a>
   </figure>
 

src/thumbs/Instagram.svelte

@@ -85,7 +85,7 @@
 
   <profile>
     <figure>
-      <img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
+      <img alt="Zed's Face" src="http://via.placeholder.com/256x256?text=Zed's Face">
     </figure>
 
     <info>
@@ -107,7 +107,7 @@
   <pins>
   {#each pins as pin}
     <figure>
-      <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
+      <img alt="Stock photo" src="http://via.placeholder.com/82x82?text=Story">
     </figure> 
   {/each}
   </pins>

src/thumbs/Pinterest.svelte

@@ -120,7 +120,7 @@
   </info>
 
   <figure>
-    <img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
+    <img alt="Zed's Face" src="http://via.placeholder.com/128x128?text=Zed's Face">
   </figure>
   </profile>
 </content>

src/thumbs/Tiles.svelte

@@ -0,0 +1,63 @@
+<script>
+  import Icon from '../components/Icon.svelte';
+  import { holder } from '../../lib/imgholder.js';
+</script>
+<style>
+  content {
+    display: flex;
+    flex: flex-shrink;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  tile {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #eee;
+    max-width: 50vh;  /* only for this display, I'd remove this. */
+  }
+
+  tile middle {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex-shrink: 3;
+  }
+
+  tile middle h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  tile right {
+    flex-shrink: 0;
+  }
+
+  tile right button {
+    padding: 0.2rem;
+  }
+</style>
+
+<content>
+  <tile>
+    <left>
+      <img src={ holder(48, 48) }/>
+    </left>
+
+    <middle>
+      <h4>
+        Tile Example
+      </h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </middle>
+
+    <right>
+    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
+    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
+    </right>
+  </tile>
+</content>
+

src/thumbs/Youtube.svelte

@@ -90,7 +90,7 @@
   <main>
     <left>
       <figure>
-        <img src="https://via.placeholder.com/800x450?text=Video">
+        <img src="http://via.placeholder.com/800x450?text=Video">
         <figcaption>
           <a>#tag</a> <a>#anothertag</a>
           <p>Title And Stuff</p>