html

Collapsible element

Rendered html

<details>
  <summary>Some text goes here</summary>
  ... some more text goes here.
</details>

With the open attribute <details open> the details are unfolded by default.

Minimal 2 column layout

Rendered html

<style>
.grid-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1em
}
.col1 {
  grid-column-start: 1;
  background-color: red;
  padding-left: 1em;
}
.col2 {
  grid-column-start: 2;
  background-color: green;
  padding-left: 1em;
}
</style>
<div class="grid-2col">
  <div class="col1">
    <p>Some text in the first column.</p>
  </div>
  <div class="col2">
    <p>Some text in the second column.</p>
  </div>
</div>

Minimal grid area

Rendered html

<style>
.page-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
      "h h"
      "s m"
      "f f";
  gap: 1em;
}
.gh {
  grid-area: h;
  background-color: orange;
}
.gs {
  grid-area: s;
  background-color: green;
}
.gm {
  grid-area: m;
  background-color: gray;
}
.gf {
  grid-area: f;
  background-color: yellow;
}
.nav-items {
  display: flex;                  /* flexbox model => flexible layout on row */
  justify-content: space-around;  /* align flex boxes horizontally with space around */
  align-items: center;            /* center flex items vertically */
  list-style: none;
}
p {
  margin: 1em;
}
</style>
<div class="page-grid">
  <div class="gh">
      <ul class="nav-items">
          <li class="nav-item"><a href="">aa</a></li>
          <li class="nav-item"><a href="">bb</a></li>
          <li class="nav-item"><a href="">cc</a></li>
      </ul>
  </div>
  <div class="gs">
    <p>Some text in the second column.</p>
  </div>
  <div class="gm">
    <p>Some text in the second column.</p>
  </div>
  <div class="gf">
    <p>Some text in the second column.</p>
  </div>
</div>

Minimal tabs

Rendered html

<script>
const showTab = (E, T) => {
    const TABS = Array.from(document.getElementsByClassName("content"));
    TABS.forEach(T => {
        T.style.display = "none";
    });

    document.getElementById(T).style.display = "block";
};

window.onload = () => {
    document.getElementById("bTab1").onclick = (E) => {
        showTab(E, "tTab1");
    };
    document.getElementById("bTab2").onclick = (E) => {
        showTab(E, "tTab2");
    };
}
</script>

<button type="button" id="bTab1">Tab1</button>
<button type="button" id="bTab2">Tab2</button>

<div id="tTab1" class="content" style="display: block;">
    <p>Some content goes here ...</p>
</div>

<div id="tTab2" class="content" style="display: none;">
    <p>... and there.</p>
</div>

Minimal tags filter

Single active filter tag

Rendered html

<script>
/// Map HTML elements to display kinds.
const elementToDisplay = (E) => {
    switch (E.nodeName) {
        case "LI":
            return "list-item";
        default:
            return "block";
    }
}

/// Display only elements with tag T.
const showTag = (T) => {
    Array.from(document.getElementsByClassName("content")).forEach(E => {
        E.style.display = "none";
    });

    Array.from(document.getElementsByClassName(T)).forEach(E => {
        E.style.display = elementToDisplay(E);
    });
};

/// Initialize buttons and callbacks.
window.onload = () => {
    // Handle to the filter placeholder.
    const filter = document.getElementById("filter");

    // Create buttons for each tag T.
    ["arm", "x86", "clear"].forEach(T => {
        const btn = document.createElement("button");
        btn.innerHTML = T;
        btn.onclick = T === "clear"
            ? (E) => {
                showTag("content");
                filter.innerHTML = "";
            }
            : (E) => {
                showTag(T);
                filter.innerHTML = `<p>filter: <mark>${T}</mark></p>`;
            };

        document.body.prepend(btn);
    });
}
</script>

<div id = "filter"></div>

<ul>
    <li class = "content arm">arm 1</li>
    <li class = "content arm">arm 2</li>
    <li class = "content arm">arm 3</li>
    <li class = "content x86">x86 1</li>
    <li class = "content x86">x86 2</li>
    <li class = "content x86 arm">x86 + arm</li>
</ul>

<div class = "content arm">arm</div>
<div class = "content arm x86">arm x86</div>
<div class = "content x86">x86</div>

Multiple active filter tags

Rendered html

<script>
/// Map HTML elements to display kinds.
const elementToDisplay = (E) => {
    switch (E.nodeName) {
        case "LI":
            return "list-item";
        default:
            return "block";
    }
}

/// Display only elements which have all TAGS.
const showTag = (TAGS) => {
    Array.from(document.getElementsByClassName("content")).forEach(E => {
        // Display the element, iff the element contains every tag T in TAGS.
        if (TAGS.every(T => Array.from(E.classList).includes(T))) {
            E.style.display = elementToDisplay(E);
        } else {
            E.style.display = "none";
        }
    });
};

/// Initialize buttons and callbacks.
window.onload = () => {
    // Handle to the filter placeholder.
    const filter_node = document.getElementById("filter");
    // Active filter tags.
    const filter = Array();

    // Create buttons for each tag T.
    ["arm", "x86", "clear"].forEach(T => {
        const btn = document.createElement("button");
        btn.innerHTML = T;
        btn.onclick = T === "clear"
            ? (E) => {
                // Clear active filter.
                while (filter.length) { filter.pop(); }

                showTag(["content"]);
                filter_node.innerHTML = "<p>filter:</p>";
            }
            : (E) => {
                // Toggle tag T in Active filter.
                if ((idx = filter.indexOf(T)) > -1) {
                    filter.splice(idx, 1);
                } else {
                    filter.push(T);
                }

                showTag(filter);
                out = filter.map(T => `<mark>${T}</mark>`).join(" + ");
                filter_node.innerHTML = `<p>filter: ${out}</p>`;
            };

        document.body.prepend(btn);
    });
}
</script>

<div id = "filter"><p>filter:</p></div>

<ul>
    <li class = "content arm">arm 1</li>
    <li class = "content arm">arm 2</li>
    <li class = "content arm">arm 3</li>
    <li class = "content x86">x86 1</li>
    <li class = "content x86">x86 2</li>
    <li class = "content x86 arm">x86 + arm</li>
</ul>

<div class = "content arm">arm</div>
<div class = "content arm x86">arm x86</div>
<div class = "content x86">x86</div>

Floating figures with caption

Rendered html

<style>
img {
    width: 100%;
    height: auto;
}
figure {
    width: 20%;
}
</style>

<!-- EXAMPLE 1 ---------------------------------------------------------------->

<figure style="float: left;">
    <img src="grad.png">
    <figcaption>Fig 1: wow such colors</figcaption>
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
malesuada bibendum arcu vitae elementum curabitur.
</i></p>

<figure style="float: right;">
    <img src="grad.png">
    <figcaption>Fig 2: wow such colors again</figcaption>
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis.
</i></p>

<!-- EXAMPLE 2 ---------------------------------------------------------------->

<hr style="clear: both">

<figure style="float: left;">
    <img src="grad.png">
</figure>

Floats can be next to each other on the same height.

<figure style="float: right;">
    <img src="grad.png">
</figure>

<!-- EXAMPLE 3 ---------------------------------------------------------------->

<hr style="clear: both">

<figure style="float: left;">
    <img src="grad.png">
</figure>

The css property <code>clear: {left, right, both};</code> controls how elements
should be handled relative to the previous floating element.

<figure style="float: right; clear: left;">
    <img src="grad.png">
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
etiam non quam lacus suspendisse faucibus interdum posuere.
</i></p>

<!-- EXAMPLE 4 ---------------------------------------------------------------->

<hr style="clear: both">

<div style="overflow: auto; border: 2px solid red;">
<figure style="float: left;">
    <img src="grad.png">
</figure>
<code>overflow: auto</code> gives an alternative to <code>clear</code> to
control placement of the floats. The red boarder visualizes the size of the
<code>&ltdiv&gt</code> block. One can remove the <code>overflow</code> property
and observe how the border changes.
</div>

<figure style="float: right;">
    <img src="grad.png">
</figure>