K-Scaffold

Appearance

Navigation ​

modalButton

One of the mixin to create modal window (i.e. pop-up). This makes a label that, when clicked, will trigger the display of same-named modal modalWindow.

  • name - string -

    The name of the modal window this button is for.

Example ​

pug
include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings
    
+modalWindow({name: "settings"})
    p Content of the settings modal window

include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings
    
+modalWindow({name: "settings"})
    p Content of the settings modal window

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
<label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
<div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
  <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
  <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
    <p>
      Content of the settings modal window
    </p>
  </div>
</div>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
<label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
<div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
  <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
  <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
    <p>
      Content of the settings modal window
    </p>
  </div>
</div>
</div>

modalContainer

One of the mixin to create modal window (i.e. pop-up). This reduces the scope of a modalWindow. By default, the window covers all of the character sheet. Inside a modal container, it covers at most the container.

Example ​

pug
include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings

+modalContainer
    +modalWindow({name: "settings"})
        p Content of the settings modal window

include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings

+modalContainer
    +modalWindow({name: "settings"})
        p Content of the settings modal window

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<div class="kmodal kmodal__container">
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
  <label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
  <div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
    <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
    <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
      <p>
        Content of the settings modal window
      </p>
    </div>
  </div>
</div>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<div class="kmodal kmodal__container">
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
  <label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
  <div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
    <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
    <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
      <p>
        Content of the settings modal window
      </p>
    </div>
  </div>
</div>
</div>

One of the mixin to create modal window (i.e. pop-up). This makes the window that will be displayed when the corrresponding modalButton is clicked.

  • name - string -

    The name of the modal window

  • checkboxObj - object -

    Object to pass to checkbox to make the hidden checkbox controlling the display of the model window

Example ​

pug
include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings
    
+modalWindow({name: "settings"})
    p Content of the settings modal window

include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+modalButton({name: "settings"})
    // Use a nice google-font (will need a suitable SCSS import)
    span.material-icons settings
    
+modalWindow({name: "settings"})
    p Content of the settings modal window

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
<label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
<div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
  <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
  <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
    <p>
      Content of the settings modal window
    </p>
  </div>
</div>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<label class="kmodal kmodal--settings kmodal__button kmodal--settings__button" for="kmodal-settings">
<!-- Use a nice google-font (will need a suitable SCSS import)-->
<span class="material-icons">
  settings
</span>
</label>
<input class="kmodal kmodal--settings kmodal__checkbox kmodal--settings__checkbox" id="kmodal-settings" name="attr_kmodal-settings" type="checkbox" title="@{kmodal-settings}"/>
<div class="kmodal kmodal__outer kmodal--settings kmodal--settings__outer">
<label class="kmodal kmodal__background kmodal--settings kmodal--settings__background" for="kmodal-settings"></label>
<div class="kmodal kmodal__inner kmodal--settings kmodal--settings__inner">
  <label class="kmodal kmodal__close kmodal--settings kmodal--settings__close" for="kmodal-settings"></label>
  <div class="kmodal kmodal__content kmodal--settings kmodal--settings__content">
    <p>
      Content of the settings modal window
    </p>
  </div>
</div>
</div>

tabs

A generic mixin to create tabs using jQuery. It uses a nested tab mixin to define tabs. Any content outside those mixin is put in the containing div, before the tabs. Attributes passed to the mixin are passed to the outer containing div.

  • name - string -

    The name of the tabs construct. Used in all elements so that you may vary the styling of different tabs

  • defaultActiveTab - string -

    The name of the tab that should be active by default.

  • persistent - boolean -

    Whether the tabs should be persistent and load their last state when the sheet is reloaded. True by default.

Example ​

pug
include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+tabs({name:"sheet-tabs",defaultActiveTab:'background'})(class="outer")
  span before the header
  +tab({name:'tab 1'})(class="tab-vertical")
    span Tab 1 content
  +tab({name:"background"})(class="tab_horizontal")
    span Tab background content
  +tab({name:"history", button:{class:"custom-button"}})(class="tab_horizontal")
    span Tab history content
  +tab({name:"inventory", container:"span"})(class="tab_horizontal")
    span Tab inventory content

// Tabs that are NOT persistent and have no default tab (aka all tab content will be hidden by default)
+tabs({name:"sheet-tabs-2",persistent:false})(class="outer")
  span before the header
  +tab({name:'tab 1'})(class="tab-vertical")
    span Tab 1 content
  +tab({name:"background"})(class="tab_horizontal")
    span Tab background content
  +tab({name:"history", button:{class:"custom-button"}})(class="tab_horizontal")
    span Tab history content
  +tab({name:"inventory", container:"span"})(class="tab_horizontal")
    span Tab inventory content

include k-scaffold
// Tabs that are persistent (default) and have the background tab as the default tab
+tabs({name:"sheet-tabs",defaultActiveTab:'background'})(class="outer")
  span before the header
  +tab({name:'tab 1'})(class="tab-vertical")
    span Tab 1 content
  +tab({name:"background"})(class="tab_horizontal")
    span Tab background content
  +tab({name:"history", button:{class:"custom-button"}})(class="tab_horizontal")
    span Tab history content
  +tab({name:"inventory", container:"span"})(class="tab_horizontal")
    span Tab inventory content

// Tabs that are NOT persistent and have no default tab (aka all tab content will be hidden by default)
+tabs({name:"sheet-tabs-2",persistent:false})(class="outer")
  span before the header
  +tab({name:'tab 1'})(class="tab-vertical")
    span Tab 1 content
  +tab({name:"background"})(class="tab_horizontal")
    span Tab background content
  +tab({name:"history", button:{class:"custom-button"}})(class="tab_horizontal")
    span Tab history content
  +tab({name:"inventory", container:"span"})(class="tab_horizontal")
    span Tab inventory content

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<!-- sectionName:sheet-tabs -->
<input name="attr_sheet_tabs_tab" value="nav-tabs-sheet-tabs--background" type="hidden" title="@{sheet_tabs_tab}"/>
<div class="tabs tabs--sheet-tabs outer">
  <nav class="tabs__header tabs--sheet-tabs__header">
    <span>
      before the header
    </span>
    <ul class="tabs__nav-list">
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--tab-1" name="act_nav-tabs-sheet-tabs--tab-1" data-container-button="sheet-tabs" data-button="tab-1" data-i18n="tabs-sheet-tabs-tab-1" type="action" data-container-tab="sheet-tabs" data-tab="tab-1"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--background" name="act_nav-tabs-sheet-tabs--background" data-container-button="sheet-tabs" data-button="background" data-i18n="tabs-sheet-tabs-background" type="action" data-container-tab="sheet-tabs" data-tab="background"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--history  custom-button" name="act_nav-tabs-sheet-tabs--history" data-container-button="sheet-tabs" data-button="history" data-i18n="tabs-sheet-tabs-history" type="action" data-container-tab="sheet-tabs" data-tab="history"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--inventory" name="act_nav-tabs-sheet-tabs--inventory" data-container-button="sheet-tabs" data-button="inventory" data-i18n="tabs-sheet-tabs-inventory" type="action" data-container-tab="sheet-tabs" data-tab="inventory"></button>
      </li>
    </ul>
  </nav>
  <div class="tabs__body tabs--sheet-tabs__body">
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--tab-1 tab-vertical" data-container-tab="sheet-tabs" data-tab="tab-1">
      <span>
        Tab 1 content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--background tab_horizontal" data-container-tab="sheet-tabs" data-tab="background">
      <span>
        Tab background content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--history tab_horizontal" data-container-tab="sheet-tabs" data-tab="history">
      <span>
        Tab history content
      </span>
    </div>
    <span class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--inventory tab_horizontal" data-container-tab="sheet-tabs" data-tab="inventory">
      <span>
        Tab inventory content
      </span>
    </span>
  </div>
</div>
<!-- Tabs that are NOT persistent and have no default tab (aka all tab content will be hidden by default)-->
<div class="tabs tabs--sheet-tabs-2 outer">
  <nav class="tabs__header tabs--sheet-tabs-2__header">
    <span>
      before the header
    </span>
    <ul class="tabs__nav-list">
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--tab-1" name="act_nav-tabs-sheet-tabs-2--tab-1" data-container-button="sheet-tabs-2" data-button="tab-1" data-i18n="tabs-sheet-tabs-2-tab-1" type="action" data-container-tab="sheet-tabs-2" data-tab="tab-1"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--background" name="act_nav-tabs-sheet-tabs-2--background" data-container-button="sheet-tabs-2" data-button="background" data-i18n="tabs-sheet-tabs-2-background" type="action" data-container-tab="sheet-tabs-2" data-tab="background"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--history  custom-button" name="act_nav-tabs-sheet-tabs-2--history" data-container-button="sheet-tabs-2" data-button="history" data-i18n="tabs-sheet-tabs-2-history" type="action" data-container-tab="sheet-tabs-2" data-tab="history"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--inventory" name="act_nav-tabs-sheet-tabs-2--inventory" data-container-button="sheet-tabs-2" data-button="inventory" data-i18n="tabs-sheet-tabs-2-inventory" type="action" data-container-tab="sheet-tabs-2" data-tab="inventory"></button>
      </li>
    </ul>
  </nav>
  <div class="tabs__body tabs--sheet-tabs-2__body">
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--tab-1 tab-vertical" data-container-tab="sheet-tabs-2" data-tab="tab-1">
      <span>
        Tab 1 content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--background tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="background">
      <span>
        Tab background content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--history tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="history">
      <span>
        Tab history content
      </span>
    </div>
    <span class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--inventory tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="inventory">
      <span>
        Tab inventory content
      </span>
    </span>
  </div>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<!-- Tabs that are persistent (default) and have the background tab as the default tab-->
<!-- sectionName:sheet-tabs -->
<input name="attr_sheet_tabs_tab" value="nav-tabs-sheet-tabs--background" type="hidden" title="@{sheet_tabs_tab}"/>
<div class="tabs tabs--sheet-tabs outer">
  <nav class="tabs__header tabs--sheet-tabs__header">
    <span>
      before the header
    </span>
    <ul class="tabs__nav-list">
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--tab-1" name="act_nav-tabs-sheet-tabs--tab-1" data-container-button="sheet-tabs" data-button="tab-1" data-i18n="tabs-sheet-tabs-tab-1" type="action" data-container-tab="sheet-tabs" data-tab="tab-1"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--background" name="act_nav-tabs-sheet-tabs--background" data-container-button="sheet-tabs" data-button="background" data-i18n="tabs-sheet-tabs-background" type="action" data-container-tab="sheet-tabs" data-tab="background"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--history  custom-button" name="act_nav-tabs-sheet-tabs--history" data-container-button="sheet-tabs" data-button="history" data-i18n="tabs-sheet-tabs-history" type="action" data-container-tab="sheet-tabs" data-tab="history"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs__button tabs--sheet-tabs__button--inventory" name="act_nav-tabs-sheet-tabs--inventory" data-container-button="sheet-tabs" data-button="inventory" data-i18n="tabs-sheet-tabs-inventory" type="action" data-container-tab="sheet-tabs" data-tab="inventory"></button>
      </li>
    </ul>
  </nav>
  <div class="tabs__body tabs--sheet-tabs__body">
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--tab-1 tab-vertical" data-container-tab="sheet-tabs" data-tab="tab-1">
      <span>
        Tab 1 content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--background tab_horizontal" data-container-tab="sheet-tabs" data-tab="background">
      <span>
        Tab background content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--history tab_horizontal" data-container-tab="sheet-tabs" data-tab="history">
      <span>
        Tab history content
      </span>
    </div>
    <span class="tabs__container tabs--sheet-tabs__container tabs--sheet-tabs__container--inventory tab_horizontal" data-container-tab="sheet-tabs" data-tab="inventory">
      <span>
        Tab inventory content
      </span>
    </span>
  </div>
</div>
<!-- Tabs that are NOT persistent and have no default tab (aka all tab content will be hidden by default)-->
<div class="tabs tabs--sheet-tabs-2 outer">
  <nav class="tabs__header tabs--sheet-tabs-2__header">
    <span>
      before the header
    </span>
    <ul class="tabs__nav-list">
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--tab-1" name="act_nav-tabs-sheet-tabs-2--tab-1" data-container-button="sheet-tabs-2" data-button="tab-1" data-i18n="tabs-sheet-tabs-2-tab-1" type="action" data-container-tab="sheet-tabs-2" data-tab="tab-1"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--background" name="act_nav-tabs-sheet-tabs-2--background" data-container-button="sheet-tabs-2" data-button="background" data-i18n="tabs-sheet-tabs-2-background" type="action" data-container-tab="sheet-tabs-2" data-tab="background"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--history  custom-button" name="act_nav-tabs-sheet-tabs-2--history" data-container-button="sheet-tabs-2" data-button="history" data-i18n="tabs-sheet-tabs-2-history" type="action" data-container-tab="sheet-tabs-2" data-tab="history"></button>
      </li>
      <li class="tabs__nav-item">
        <button class="tabs__button tabs--sheet-tabs-2__button tabs--sheet-tabs-2__button--inventory" name="act_nav-tabs-sheet-tabs-2--inventory" data-container-button="sheet-tabs-2" data-button="inventory" data-i18n="tabs-sheet-tabs-2-inventory" type="action" data-container-tab="sheet-tabs-2" data-tab="inventory"></button>
      </li>
    </ul>
  </nav>
  <div class="tabs__body tabs--sheet-tabs-2__body">
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--tab-1 tab-vertical" data-container-tab="sheet-tabs-2" data-tab="tab-1">
      <span>
        Tab 1 content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--background tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="background">
      <span>
        Tab background content
      </span>
    </div>
    <div class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--history tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="history">
      <span>
        Tab history content
      </span>
    </div>
    <span class="tabs__container tabs--sheet-tabs-2__container tabs--sheet-tabs-2__container--inventory tab_horizontal" data-container-tab="sheet-tabs-2" data-tab="inventory">
      <span>
        Tab inventory content
      </span>
    </span>
  </div>
</div>

Released under the MIT License

Copyright ©2023 Scott Casey