A custom twig buidler for KSS node with an offscreen menu and search.

Usage no npm install needed!

<script type="module">
  import kssOffscreenTwig from 'https://cdn.skypack.dev/kss-offscreen-twig';


Builder for kss-node with offscreen menu using Twig

Requires KKS-node 3.0.x

This is a builder for kss-node living styleguide. It feature a toggle-able sidebar menu so you can choose to see the styleguide at full browser width. It also has a search function to easily find your component.

You can see the demo here.

How to apply this builder

  1. Install kss-node. Type npm install kss or npm install -g kss for global CLI.
  2. Install this template npm install kss-offscreen-twig@alpha
  3. Run kss-node command with --builder option, like below.
kss-node <sourcedir> --builder path/to/kss-offscreen-twig

This is a pre-release version of kss-offscreen-twig


  • No reliance on jQuery. Existing js rewritten in vanilla JS.
  • Removal of prettify, scrollspy, and fullscreen js.
  • Removal of Markup section (Developers must view source, or view twig files).
  • Mockups/Templates do not display examples.
  • All components can open in a new window, without any KSS chrome (hideAll).
  • Offscreen CSS transitions removed.
  • Component modifiers display as seperate examples, with less prominent KSS chrome.
  • Component modifier CSS classes are no longer visible.
  • Header no longer sticks.
  • Specify showMarkup, highlightSyntax, markupClass from config.
  • Fix position of menu toggle button.
  • Add sidebar backdrop for small screens when clicked closes menu.