Prefabs

Table Lite

HTML - Table Lite

<table>
  <caption><i>Example Table</i></caption>
  <tr>
    <td>Aaa</td>
    <td>Bbb</td>
    <td>Ccc</td>
  </tr>
  <tr>
    <td>Ddd</td>
    <td>Eee</td>
    <td>Fff</td>
  </tr>
  <tr>
    <td>Ggg</td>
    <td>Hhh</td>
    <td>Iii</td>
  </tr>
</table>

Table Rowspan Colspan

<table>
  <caption>rowspan and colspan example</caption>
  <tr>
    <th>a0</th>
    <th>a1</th>
    <th>a2</th>
    <th>a3</th>
  </tr>
  <tr>
    <td rowspan="2">b0 and c0</td>
    <td>b1</td>
    <td colspan="2">b2 and b3</td>
  </tr>
  <tr>
    <td>c1</td>
    <td>c2</td>
    <td>c3</td>
  </tr>
  <tr>
    <td rowspan="2">d0 and e0</td>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
  </tr>
  <tr>
    <td>e1</td>
    <td>e2</td>
    <td>e3</td>
  </tr>
</table>

Table Custom Style

CSS Table Custom Style

.styled-table {
  border-collapse: collapse;
  margin: 5px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
}

.styled-table tbody tr {
  border-bottom: 1px solid #ddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

.styled-table tbody td:nth-child(2) {
  background-color: aqua;
  text-align: right;
}

HTML Table Custom Style

<table class="styled-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dom</td>
      <td>6000</td>
    </tr>
    <tr class="active-row">
      <td>Melissa</td>
      <td>5150</td>
    </tr>
    <tr>
      <td>Qwr</td>
      <td>8700</td>
    </tr>
    <tr>
      <td>Zeru</td>
      <td>91700</td>
    </tr>
  </tbody>
</table>

Toggleable Tabs

Toggleable Tabs Structure

.simpletabs-container
 |
 |--.simpletabs-tabs
 |   |
 |   |--<p>Label A</p>
 |   |--<p>Label B</p>
 |   `--<p>Label C</p>
 |
 `--.simpletabs-content
     |
     |--<article>Article A</article>
     |--<article>Article B</article>
     `--<article>Article C</article>

CSS Toggleable Tabs

.simpletabs-container {
  overflow: hidden;
  display: block;
}

.simpletabs-tabs {
  overflow: hidden;
  border: none;
}

.simpletabs-tabs p {
  float: left;
  border: none;
  margin-right: 12px;
  margin-bottom: 0;
  padding: 8px 4px;
  outline: none;
  cursor: pointer;
}


.simpletabs-content {
  border: none;
  background-color: #b6fafa;
  min-height:3em;
}

.simpletabs-content article {
  padding: 16px;
}

.simpletabs-sel {
  background-color: #a397ff;
  color:#b6fafa;
}

.simpletabs-unsel {
  background-color: #b6fafa;
  color:#a397ff;
}

HTML Toggleable Tabs

<div class = "simpletabs-container">
<nav class="simpletabs-tabs">
  <p class="simpletabs-unsel" onclick="tabsShowArticle(this)" data-idx="0">Label A</p>
  <p class="simpletabs-unsel" onclick="tabsShowArticle(this)" data-idx="1">Label B</p>
  <p class="simpletabs-unsel" onclick="tabsShowArticle(this)" data-idx="2">Label C</p>
</nav>

<div class="simpletabs-content">
  <article hidden="" class="simpletabs-sel">Article A</article>
  <article hidden="" class="simpletabs-sel">Article B</article>
  <article hidden="" class="simpletabs-sel"><code>Article C</code></article>
</div>

Javascript Toggleable Tabs

console.clear()
function tabsShowArticle(actualTab)
{
  const idx = +actualTab.getAttribute('data-idx')
  const allTabs = actualTab.parentNode.children
  const allArticles = actualTab.parentNode.parentNode.children[1]

  for (let i = 0; i < allTabs.length; i++)
  {
    allTabs[i].classList.remove("simpletabs-sel")
    allTabs[i].classList.add("simpletabs-unsel")
    allArticles.children[i].hidden = true
    if (i === idx)
    {
      allArticles.children[i].hidden = false;
      actualTab.classList.add("simpletabs-sel")
      actualTab.classList.remove("simpletabs-unsel")
    }
  }
}

Tabs flex

CSS Tabs flex

.tabs-flex {
  display: flex;
  flex-flow: row wrap;
  width: 60%;
}

.tabs-flex label {
  padding: 0.5em 1em;
}
.tabs-flex label + article {
  padding: 1em;
}

.tabs-flex > [type=radio] {
  display: none;
}

.tabs-flex > [type=radio] + label {
  order: 1;
  cursor: pointer;
}

.tabs-flex > [type=radio] + label + article {
  width: 100%;
  order: 2;
}

.tabs-flex [type=radio]:checked + label,
.tabs-flex [type=radio]:checked + label + article {
  background-color: #000;
  color: #ccc;
}

.tabs-flex [type=radio]:checked + label + article {
  min-width: 100%;
}

.tabs-flex > [type=radio]:not(:checked) + label:hover {
  background-color: #8f8;
}

.tabs-flex > [type=radio]:not(:checked) + label + article {
  display: none;
}

HTML Tabs flex

<div class="tabs-flex">
  <input type="radio" id="tg1-1" name="tg1" checked>
  <label for="tg1-1">Label FA</label>
  <article>FTcontent 1</article>

  <input type="radio" id="tg1-2" name="tg1">
  <label for="tg1-2">Label FB</label>
  <article>
    <pre>FTcontent 2</pre>
  </article>

  <input type="radio" id="tg1-3" name="tg1">
  <label for="tg1-3">Label FC</label>
  <article>FTcontent 3</article>
</div>

HTML Boilerplate

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLhouse</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">

    </style>
  </head>

  <body>

  <script>

  </script>
  </body>
</html>

Details

CSS - Details

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .5em .5em 0;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}

HTML - Details

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

Float Left

CSS Float Left

hr.clear {
  clear: both;
  border: none;
}

.le {
float: left;
margin: 10px;
/*display: block;*/
}

HTML Float Left

<ul class="le">
   <li>A1</li>
   <li>A2</li>
 </ul>
 <ul class="le">
   <li>B1</li>
   <li>B2</li>
 </ul>
 <hr class="clear">

Aligned List

CSS Aligned List

.list-menu {
  list-style: none;
  display:inline-block;
}

HTML Aligned List

<div>
  <ul class="list-menu">
    <li>Aaa</li>
    <li>Bbb</li>
    <li>Ccc</li>
  </ul>
  <ul class="list-menu">
    <li>A exp</li>
    <li>B exp</li>
    <li>C exp</li>
  </ul>
</div>

Quick Multi Menu

CSS Quick Multi Menu

.quick-menu {
  background-color: #000;
  float: left;
}

.quick-menu label{
  margin: 0.2em;
  text-align: center;
  color: #fff;
}

.quick-menu:hover {
  background-color: #fff;
  border: 2px solid #000;
  border-top: 0;
}

.quick-menu:hover label,
.quick-menu ul {
  display: none;
}

.quick-menu:hover ul {
  display: block;
  padding: 0 1em;
  list-style: none;
/*background-color: #ccc;*/
}

.menu-wrapper {
  position: fixed;
  right: 0em;
  top: 0;
}

HTML Quick Multi Menu

<div class="menu-wrapper">

  <nav class="quick-menu">
    <label>First</label>
    <ul>
      <li><a href="#">aaa</a></li>
      <li><a href="#">bbbb</a></li>
    </ul>
  </nav>
      
  <nav class="quick-menu">
    <label>Second</label>
    <ul>
      <li><a href="#">cc</a></li>
      <li><a href="#">dddd</a></li>
    </ul>
  </nav>

  <nav class="quick-menu">
    <label>Other</label>
    <ul>
      <li><a href="#">eee</a></li>
      <li><a href="#">fff</a></li>
    </ul>
    <ul>
      <li><a href="#">gggg</a></li>
      <li><a href="#">hh</a></li>
    </ul>
  </nav>
</div>

Quick Droprown Menu

CSS Quick Droprown Menu

.quick-menu {
  background-color: #000;
  position: fixed;
  right: 1em;
}

.quick-menu label{
  margin: 0.2em;
  text-align: center;
  color: #fff;
}

.quick-menu:hover {
  background-color: #fff;
  border: 2px solid #000;
  border-top: 0;
}

.quick-menu:hover label,
.quick-menu ul {
  display: none;
}

.quick-menu:hover ul {
  display: block;
  padding: 0 1em;
  list-style: none;
}

HTML Quick Droprown Menu

<div class="quick-menu">
<label>Menu</label>
<ul>
  <li><a href="#">Aaaa</a></li>
  <li><a href="#">Bbbb</a></li>
</ul>
<ul>
  <li><a href="#">Ccccccc</a></li>
  <li><a href="#">Dd</a></li>
</ul>
</div>

Cola Menu

CSS - Cola Menu

.cola-check, .cola-body {
  display: none;
}

.cola-head {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  cursor: pointer;
  color: #899;
  border-bottom: 1px dashed #333;
}

.cola-body {
  box-sizing: border-box;
  padding: 10px 15px;
  border-bottom: 1px dashed #333;
}

input[type=radio]:checked + .cola-head + .cola-body {
  display: block;
}

input[type=radio]:checked + .cola-head + .cola-body a {
  text-decoration: none;
  color: #4b3;
}

input[type=radio]:checked + .cola-head {
  color: #000;
  background-color: #ccc;
}

HTML - Cola Menu

<h1>projects/works index</h1>
<p>Warning: some links are broken, descriptions are incomplete</p>

<input class='cola-check' type='radio' id='none' name='ir-group-1' />
<label class='cola-head' for='none'>-STO-</label>

<input class='cola-check' type='radio' id='section-1' name='ir-group-1' />
<label class='cola-head' for='section-1'>/applets</label>
<div class='cola-body'>
  <p>not actually applets in Java sense, but small web apps working in browser</p>
  <dl>
  <dt><a href='/applets/compressor.htm'>lz77 compressor</a></dt>
  <dt><a href='/applets/nanorsa.htm'>nanorsa</a></dt>
  <dt><a href='/applets/whiteboard.htm'>whiteboard</a></dt>
  <dt><a href='/applets/tempocalc.htm'>tempocalc</a></dt>
  <dt><a href='/applets/repitchcalc.htm'>repitchcalc</a></dt>
  <dt><a href='/applets/calc.htm'>pocket calculator simulator</a></dt>
  <dt><a href='/projects/p4/index.html'>p4 platform</a></dt>
  </dl>
</div>

<input class='cola-check' type='radio' id='section-4' name='ir-group-1' />
<label class='cola-head' for='section-4'>/programming</label>
<div class='cola-body'>
  <p>various stuff related to programming, from webdev tools to interpreters and VMs</p>
  <dl>
  <dt><a href='/projects/pg2/index.htm'>jspg</a></dt>
  <dt><a href='/applets/bfer.htm'>bfer</a></dt>
  <dt><a href='/projects/neos/neos.htm'>neos</a></dt>
  </dl>
</div>

<input class='cola-check' type='radio' id='section-2' name='ir-group-1' />
<label class='cola-head' for='section-2'>/games</label>
<div class='cola-body'>
  <p>some browser games (or almost games)</p>
  <dl>
  <dt><a href='/games/scroll/brace.htm'>b-race</a></dt>
  <dt><a href='/games/vcon/v2/vcon.htm'>vectrally v2</a></dt>
  </dl>
</div>