Page

The whole shape of an app page in one call; the side column sits beside the content from 1024 px, under it below.

  • kit.page()
  • 1.1 KB of CSS · 35 rules
  • kit.css
  • kit-data.css
  • No script needed

Night owls

38 here

  • ana14:05anyone up for the surf race?

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.page({
      id: 'kit-demo-page',
      head: kit.head({ title: 'Night owls', sub: '38 here', level: 2, sticky: false }),
      body: kit.list([kit.row({ mark: kit.mark({ name: 'ana' }), title: 'ana', sub: 'anyone up for the surf race?', meta: '14:05' })], { flush: true }),
      side: kit.stats([[38, 'here now'], [412, 'members']])
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.page({
        id: 'kit-demo-page',
        head: OpenVibeKit.head({ title: 'Night owls', sub: '38 here', level: 2, sticky: false }),
        body: OpenVibeKit.list([OpenVibeKit.row({ mark: OpenVibeKit.mark({ name: 'ana' }), title: 'ana', sub: 'anyone up for the surf race?', meta: '14:05' })], { flush: true }),
        side: OpenVibeKit.stats([[38, 'here now'], [412, 'members']])
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 799 B
<main class="ovk-page" id="kit-demo-page"><header class="ovk-head ovk-head--static"><div class="ovk-head-row"><div class="ovk-head-id"><h2>Night owls</h2><p class="ovk-sub">38 here</p></div></div></header><div class="ovk-split"><div class="ovk-main"><ul class="ovk-list ovk-list--flush"><li class="ovk-row ovk-row--static"><span class="ovk-mark" style="--ovk-hue:244" aria-hidden="true">AN</span><span class="ovk-row-main"><span class="ovk-row-top"><strong>ana</strong><span class="ovk-row-meta">14:05</span></span><span class="ovk-row-sub"><span>anyone up for the surf race?</span></span></span></li></ul></div><aside class="ovk-side"><dl class="ovk-stats" aria-label="In numbers" tabindex="0"><div><dt>here now</dt><dd>38</dd></div><div><dt>members</dt><dd>412</dd></div></dl></aside></div></main>

What it weighs

Its own rules are 4.3 KB, 1.1 KB as sent: 6% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.