@webqit/webqit.dev

<div class="snap-mandatory-container" partials-slot="index"> <header class="page-section flex-y-stretch flex-wrap" style="background-color: white;"> <div class="section-div-a col-4 lg--col-12 pd-0 flex-column flex-x-separate" style="border-right: 2px solid gainsboro;">  <div class="pd-10 pd-x3 overflow-x-hidden"> <div class="app-bar flex-x-separate"> <a href="/" class="brand-container flex-y-center"> <img alt="@web-native-js/chtml logo" scoped:id="logo" src="http://unpkg2.com:9000/@web-native-js/oohtml/docs/logo.png" style="display: block; width: 65px; color: transparent; background: none;" /> <div class="pd-10"> <div class="txt-lg b">Web-Native</div> <div class="i">...tag tagline</div> </div> </a> <div class="menu-control pos-rel wt-60 ht-60 flex-center cursor-pointer" play-icon-type="bootstrap"> <play-icon name="filter-right" class="pos-rel"></play-icon> </div> </div> </div>  <p style="font-weight: bold; color: slateblue; font-style: italic; padding-left: 20px; margin-left: 40px; border-left: 5px solid skyblue;"> </p>  <div class="pd-10 pd-x3"> <ul is="play-seq-ul" scoped:id="outline_menu" template="layout/outline" class="outline list-style-none"></ul> </div> <div class="pd-10 pd-x3 pd-btm-x6 lg--pd-x3 lg--pd-btm-x10" style="background-image: url(/img/bg/Dots.svg);"> <a href="/#" class="flex-y-center pd-10"> <div class="wt-60 ht-60 flex-center mg-rt-10 mg-rt-x2 radius-full jelly-peel ring-shadow"> <play-icon name="play-fill" size="sm"></play-icon> </div> <div> <div class="txt-lg b">learn more</div> <div class="i">web-native</div> </div> </a> </div>  </div> <div class="section-div-b col-grows lg--col-12 pos-rel lg--d-none flex-center pd-0" style="min-height: 100vh;"> <ul class="flex-y-center flex-x-end list-style-none" style="position: absolute; top: 0px; right: 0px; padding: 25px; color: slateblue;"> <li class="mg-rt-10 mg-rt-x2"><a href="#"> <play-icon name="search" size="sm"></play-icon> </a></li> <li class="mg-rt-10 mg-rt-x2"><a href="mailto://oxharris.dev@gmail.com"> <play-icon name="chat-left-quote" size="sm"></play-icon> </a></li> <li class="mg-rt-10 mg-rt-x2"><a href="https://github.com/web-native" target="_blank"> <play-icon name="github" size="sm" play-icon-type=""></play-icon> </a></li> </ul> <div namespace class="circus wt-100 wt-x6 ht-100 ht-x6 radius-full flex-center"> <a scoped:id="link" class="display-link flex-y-self-end wt-60 ht-60 flex-center radius-full jelly-peel ring-shadow z-index-10" href="#"> <play-icon name="arrow-down" size="sm"></play-icon> </a> <script type="scoped"> if (app.outline.now.active) { var active = app.outline.state.active.first(); $(this).css('background-image', 'url(' + active.graphic + ')'); $(this.namespace.link).attr('href', '/#' + active.title); $(this.namespace.link).css(active.darkTheme); } </script> </div> </div> </header> <div class="pos-rel ht-0 flex-y-center pointer-events-none z-index-10"> <div class="col-4 lg--col-12 flex-x-end lg--overflow-x-hidden"> <div class="flex-y-stretch pos-rel wt-100 wt-x3 ht-100 ht-x3 xl--wt-x2 xl--ht-x2 lg--wt-x3 lg--ht-x3 sm--wt-x2 sm--ht-x2 transition-all transition-fast"> <div class="wt-full radius-full" style="position: relative; right: -50%; background-image: url(/img/bg/code.fw.png); background-position: left top; border: 6px solid silver; z-index: 2"></div> </div> </div> </div> <main class="pos-rel"> <section namespace id="tooling" class="page-section flex-y-stretch flex-wrap"> <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10"> <div class="mg-btm-10 mg-btm-x10 xl--mg-btm-x5 lg--d-none"></div> <div class="section-div-header lg--pos-rel flex-y-center"> <div class="section-icon flex-center mg-rt-10"> <play-icon name="puzzle"></play-icon> </div> <h2 class="txt-xxl">Tooling</h2> </div> <div class="section-div-content lg--flex-y-center sm--d-block"> <p class="txt-xxl lg--col-5"> <span>Leverage some magic to write less code!</span> <span>...explore a growing collection of opensource work!</span> </p> <div class="lg--col-7 txt-align-cntr"> <img src="/img/bg/netlify.png" /> </div> </div> </div> <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0"> <div class="mg-btm-10 mg-btm-x10 xl--mg-btm-x5 lg--d-none"></div> <div class="section-div-header flex-x-separate flex-y-center"> <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot> <a href="/tooling" class="section-more flex-y-center"> <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon> </a> </div> <div scoped:id="tabpanels" template="layout/tabbing/tooling" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div> </div> <script type="scoped"> if (!app || !app.tooling.items) return; this.namespace.tabs.bind(app.tooling); $(this.namespace.tabpanels).itemize(app.tooling.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'}); </script> </section> <section namespace id="cloud" class="page-section flex-y-stretch flex-wrap"> <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10"> <div class="section-div-header lg--pos-rel flex-y-center"> <div class="section-icon flex-center mg-rt-10"> <play-icon name="award"></play-icon> </div> <h2 class="txt-xxl">Cloud</h2> </div> <div class="section-div-content lg--flex-y-center sm--d-block"> <p class="txt-xxl lg--col-5"> <span>Fasttrack how you build, ship, and scale!</span> <span>...enjoy the WebQit advantage in the cloud!</span> </p> <div class="lg--col-7 txt-align-cntr"> <img src="/img/new/rock.fw.png" style="min-width: 80%;" /> </div> </div> </div> <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0"> <div class="section-div-header flex-x-separate flex-y-center"> <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot> <a href="/cloud" class="section-more flex-y-center"> <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon> </a> </div> <div scoped:id="tabpanels" template="layout/tabbing/cloud" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div> </div> <script type="scoped"> if (!app || !app.cloud.items) return; this.namespace.tabs.bind(app.cloud); $(this.namespace.tabpanels).itemize(app.cloud.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'}); </script> </section> <section namespace id="community" class="page-section flex-y-stretch flex-wrap"> <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10"> <div class="section-div-header lg--pos-rel flex-y-center"> <div class="section-icon flex-center mg-rt-10"> <play-icon name="arrows-move"></play-icon> </div> <h2 class="txt-xxl">Community</h2> </div> <div class="section-div-content lg--flex-y-center sm--d-block"> <p class="txt-xxl lg--col-5"> <span>The web is all of us - join in shaping it!</span> <span>...or discover new heights for your career!</span> </p> <div class="lg--col-7 txt-align-cntr"> <img src="/img/globe@2x-kgv9ll4o7r-havl08h54l.png" style="min-width: 90%;" /> </div> </div> </div> <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0"> <div class="section-div-header flex-x-separate flex-y-center"> <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot> <a href="/community" class="section-more flex-y-center"> <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon> </a> </div> <div scoped:id="tabpanels" template="layout/tabbing/community" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div> </div> <script type="scoped"> if (!app || !app.community.items) return; this.namespace.tabs.bind(app.community); $(this.namespace.tabpanels).itemize(app.community.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'}); </script> </section> </main> <footer class="flex-y-stretch flex-wrap" style="min-height: 300px; background-color: white;"> </footer>  <template name="layout"> <template name="outline"> <li is="play-seq-li" namespace class="flex-y-start pd-10 mg-btm-10 mg-btm-x2 radius-4 cursor-pointer" style="opacity: 0;"> <div class="icon pd-6 pd-x2 mg-rt-10 mg-rt-x2"> <play-icon scoped:id="icon" name="code-slash"></play-icon> </div> <div class="col-grows flex-y-center"> <div class="col-grows"> <div class="txt-xxl" scoped:id="title"></div> <div class="txt-lg mg-top-4" scoped:id="desc"></div> </div> <span class="pointer transition-all transition-fast"> <play-icon name="chevron-right" size="sm"></play-icon> </span> </div> <script type="scoped"> $(this).on('click', () => { active = true; }); if (!title) return; $(this.namespace.icon).attr('name', icon); $(this.namespace.title).html(title); $(this.namespace.desc).html(desc); $(this).class('active', active); </script> </li> </template> <template name="tabbing"> <div partials-slot="tabs" namespace class="col-grows"> <ul scoped:id="main" template="layout/tabbing" class="section-nav flex-y-stretch list-style-none"> <li scoped:id="overflow" namespace class="overflow-control d-none" tabindex="0"> <play-icon name="three-dots" size="sm" class="ht-full flex-y-center"></play-icon> <div class="overflow ht-0 flex-x-center"> <ul scoped:id="items" template="layout/tabbing" class="section-nav-overflow pos-abs pd-top-8 pd-btm-8 radius-8 drop-shadow animation-x-fast anim-fly-top-small list-style-none"></ul> </div> </li> </ul> <script type="scoped"> var main = this.namespace.main; var overflowControl = this.namespace.overflow; var overflow = overflowControl.namespace.items; if (items) { $(main).itemize(items, (el, e, d, k) => { d.overflowCollapsed = false; el[e](d); if (k === parseInt((items.length - 1) / 2)) { el.after(overflowControl); } }, (el, e, d, k, overflowCount) => { d.overflowCollapsed = e === 'collapse'; $(overflowControl).class('d-none', overflowCount === 0); }, {itemPartialsName: 'tab', collapsionPoint: 'center-end'}); $(overflow).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'overflow-tab'}); } </script> </div> <li partials-slot="tab" namespace> <script type="scoped"> $(this).on('click', () => { active = true; }); if (!name) return; $(this).html(name); $(this).class('d-none', overflowCollapsed); $(this).class('active', active); </script> </li> <li partials-slot="overflow-tab" namespace> <script type="scoped"> $(this).on('click', () => { active = true; }); if (!name) return; $(this).html(name); $(this).class('d-none', !overflowCollapsed); $(this).class('active', active); </script> </li> <template name="tooling"> <div partials-slot="panel" namespace class="col-grows flex-y-separate"> <ul class="highlights grid-3 list-style-none" scoped:id="highlights" template="layout/tabbing/tooling"></ul> <ul class="overflow list-style-none" scoped:id="overflow" template="layout/overflow/tooling"></ul> <script type="scoped"> if (items) { $(this).class('d-none', !active); $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'}); } if (overflow) { $(this.namespace.overflow).itemize(overflow, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'}); } </script> </div> <li partials-slot="item" namespace class="item flex-y-separate flex-wrap txt-lg animation-x-fast anim-scale-in-small"> <div> <play-icon scoped:id="icon" name="square"></play-icon> <h3 scoped:id="title" style="margin-top: 15px; margin-bottom: 15px;"></h3> <p scoped:id="desc"></p> </div> <ul class="flex-x-separate flex-y-center wt-full pd-top-10 pd-top-x2 list-style-none"> <li><a scoped:id="page" class="flex-y-center" href=""> <play-icon name="arrow-return-right" size="sm"></play-icon> <span class="mg-lft-10">Learn more</span> </a></li> <li><a scoped:id="github" href="" target="_blank"> <play-icon name="github" size="sm" play-icon-type=""></play-icon> </a></li> </ul> <script type="scoped"> if (!title) return; $(this.namespace.icon).attr('name', icon); $(this.namespace.title).html(title); $(this.namespace.desc).html(desc); $(this.namespace.page).attr('href', page); $(this.namespace.github).attr('href', 'https:/github.com/' + github); </script> </li> </template> <template name="cloud"> <div partials-slot="panel" namespace class="col-grows flex-y-separate"> <div class="about col-12 pd-10 flex-y-center"> <div class="wt-60 wt-x2 pd-10 flex-center"> <play-icon scoped:id="icon" size="xl"></play-icon> </div> <div class="pd-10 txt-xl"> <h3 scoped:id="title" class="title"></h3> <div class="txt-smaller">Coming Soon!</div> </div> </div> <ul class="highlights list-style-none" scoped:id="highlights" template="layout/tabbing/cloud"></ul> <script type="scoped"> if (items) { $(this).class('d-none', !active); $(this.namespace.icon).attr('name', icon); $(this.namespace.title).html(title); $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'}); } </script> </div> <li partials-slot="item" namespace class="item fl-ex-y-start animation-x-fast anim-scale-in-small"> <img scoped:id="icon" style="max-width: 50px; margin-bottom: 25px;" /> <div class="co-l-6" style="border-top: 3px whitesmoke;"> <h3 scoped:id="title" class="txt-xl mg-btm-4"></h3> <div scoped:id="desc" class="txt-lg"></div> </div> <div class="col-grows"> </div> <script type="scoped"> if (!title) return; $(this.namespace.icon).attr('src', icon); $(this.namespace.desc).html(desc); $(this.namespace.page).attr('href', page); </script> </li> </template> <template name="community"> <div partials-slot="panel" namespace class="col-grows flex-y-separate"> <div class="about col-12 pd-10 flex-y-center"> <div class="wt-60 wt-x2 pd-10 flex-center"> <play-icon scoped:id="icon" size="xl"></play-icon> </div> <div class="pd-10 txt-xl"> <h3 scoped:id="title" class="title"></h3> <div class="txt-smaller">Coming Soon!</div> </div> </div> <ul class="highlights grid-3 list-style-none"scoped:id="highlights" template="layout/tabbing/community"></ul> <script type="scoped"> if (items) { $(this).class('d-none', !active); $(this.namespace.icon).attr('name', icon); $(this.namespace.title).html(title); $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'}); } </script> </div> <li partials-slot="item" namespace class="item fl-ex-y-start animation-x-fast anim-scale-in-small"> <img scoped:id="icon" style="max-width: 50px; margin-bottom: 25px;" /> <div class="co-l-6" style="border-top: 3px whitesmoke;"> <h3 scoped:id="title" class="txt-xl mg-btm-4"></h3> <div scoped:id="desc" class="txt-lg"></div> </div> <div class="col-grows"> </div> <script type="scoped"> if (!title) return; $(this.namespace.icon).attr('src', icon); $(this.namespace.title).html(title); $(this.namespace.desc).html(desc); $(this.namespace.page).attr('href', page); </script> </li> </template> </template> </template> </div> <template name="tooling">  <div class="snap-mandatory-container" partials-slot="index"> <link rel="stylesheet" type="text/css" href="/css/github-markdown.css" /> <link rel="stylesheet" type="text/css" href="/css/tooling.css" /> <div class="flex-y-stretch flex-wrap"> <div class="col-3 lg--col-12" style="background-color: lavender;">  <div class="pd-10 pd-x3 overflow-x-hidden"> <div class="app-bar flex-x-separate"> <a href="/" class="brand-container flex-y-center"> <img alt="@web-native-js/chtml logo" scoped:id="logo" src="http://unpkg2.com:9000/@web-native-js/oohtml/docs/logo.png" style="display: block; width: 65px; color: transparent; background: none;" /> <div class="pd-10"> <div class="txt-lg b">Web-Native</div> <div class="i">...tag tagline</div> </div> </a> <div class="menu-control pos-rel wt-60 ht-60 flex-center cursor-pointer" play-icon-type="bootstrap"> <play-icon name="filter-right" class="pos-rel"></play-icon> </div> </div> </div>  <div class="pd-10 pd-x3"> <ul is="play-seq-ul" scoped:id="outline_menu" template="main/outline" class="outline list-style-none"></ul> </div> </div> <main class="col-grows lg--col-12 flex-y-start flex-wrap markdown-body"> <div class="readme-container col-grows lg--col-12"> <div style="min-height: 100vh;"> <partials-slot name="readme" scoped:id="main">DOCS not found!</partials-slot> </div> <br /><br /> <footer style="position: sticky; bottom: 0px;"> <br /> <ul scoped:id="nav" class="footer-nav flex-x-separate flex-y-center"> <li><a href="" scoped:id="prev">prev &leftarrow;</a></li> <li scoped:id="index"></li> <li><a href="" scoped:id="next">&rightarrow; next</a></li> </ul> </footer> </div> <div class="col-2 lg--col-12"></div> </main> </div>  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/github.min.css"> </div> </template>