Skip to content

Commit

Permalink
some minor docs update, more to follow
Browse files Browse the repository at this point in the history
  • Loading branch information
@thednp
thednp committed Oct 28, 2024
1 parent 42258db commit 19e8607
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 101 deletions.
97 changes: 43 additions & 54 deletions docs/index-dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@
<div class="item-bg bg-warning"></div>
<div class="container d-flex align-items-end h-100">
<div class="position-relative text-dark text-left mb-5">
<h1>A better way to Bootstrap 5</h1>
<p>The lighter and more compact set of JavaScript components for Bootstrap, sourced with modern ES6+ codebase and strong TypeScript definitions.<br>
At about half the size of the original and around <b>12kb gZipped</b>, this library does most of Bootstrap & Popper combined.</p>
<h1>A What Bootstrap?</h1>
<p>The lighter and more compact set of JavaScript components for Bootstrap, sourced with Typescript codebase.<br>
At less than half the size of the original and around <b>15kb gZipped</b>, this library does most of Bootstrap & Popper combined.</p>
<p>
<a class="btn btn-lg btn-primary me-1" href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a>
<a class="btn btn-lg btn-secondary" href="https://www.npmjs.com/package/bootstrap.native">NPM</a>
Expand Down Expand Up @@ -145,6 +145,7 @@ <h1>What's in it for me?</h1>
<li class="nav-item"><a class="nav-link" href="#componentTab">Tab</a></li>
<li class="nav-item"><a class="nav-link" href="#componentToast">Toast</a></li>
<li class="nav-item"><a class="nav-link" href="#componentTooltip">Tooltip</a></li>
<li class="nav-item"><a class="nav-link" href="#componentBase">Base Component</a></li>
</ul>
</div>
</div>
Expand All @@ -161,30 +162,6 @@ <h2>Read First</h2>
</section>
<div class="row">
<div class="col-md-9" data-bs-spy="scroll" data-bs-target="#side-nav">

<section id="componentBase">
<h2>BaseComponent</h2>
<section id="baseInfo">
<h3>Info</h3>
<p>Following the development of the original library, we implemented the same solution to remove most repetitive actions common
to all components; the <b>BaseComponent</b> provides basic functionality generally focused around determining the specific
<code>HTMLElement</code> target or setting instance options.</p>
<p>It also throws an error when no target <code>HTMLElement</code> is found and removes existing instances which is important
to prevent memory overflow or breaking the component functionality.</p>
</section>
<section id="baseMethods">
<h3>Base Properties And Methods</h3>
<p>The <b>BaseComponent</b> component exposes some getters for all components to use:</p>
<h4>instance.name</h4>
<p>Returns the name of the component used to initialize the current instance.</p>
<h4>instance.defaults</h4>
<p>Returns the component default options values.</p>
<h4>instance.version</h4>
<p>Returns the library version.</p>
<h4>instance.dispose()</h4>
<p>Removes the component from target element. Components generally extend this method with additional specific functionality.</p>
</section>
</section>
<section id="componentAlert">
<h2>Alert</h2>
<p>The <b>Alert</b> component covers the specific original events and public methods, but just like the original plugin, does not provide any
Expand Down Expand Up @@ -1125,7 +1102,6 @@ <h2 class="accordion-header" id="headingThree">
</section>
</section>


<section id="componentDropdown">
<h2>Dropdown</h2>
<p>The <b>Dropdown</b> component covers most of the functionality from the original plugin in terms of original events,
Expand Down Expand Up @@ -1421,16 +1397,6 @@ <h3>Dropdown Examples</h3>
<a class="dropdown-item" href="#">Third action</a>
</div>
</div>
<div class="btn-group dropdown">
<button id="spanMenu" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>span</span>
</button>
<div id="spanDropdown" class="dropdown-menu" style="top: 100%; margin: 5px 0px 0px;">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>
</div>

<p>The original plugin doesn't support nesting nor recommend using it, and due to the implementation of automatic repositioning
Expand All @@ -1453,7 +1419,6 @@ <h3>Dropdown Examples</h3>
</section>
</section>


<section id="componentModal">
<h2>Modal</h2>
<p>The <b>Modal</b> component comes with small changes to options, events and public methods when compared to
Expand Down Expand Up @@ -1894,7 +1859,6 @@ <h4 class="modal-title" id="myModalJSLabel">Static modal initialized via JavaScr
</section>
</section>


<section id="componentOffcanvas">
<h2>Offcanvas</h2>
<p>The <b>Offcanvas</b> component is our newest addition and comes packed with options, events and public methods.</p>
Expand Down Expand Up @@ -2082,7 +2046,7 @@ <h3>Offcanvas JavaScript API</h3>
<p>Any element initialized via DATA API or JavaScript, automatically grants access to the component's original events.</p>

<pre><code class="language-javascript">// GET THE EVENT TARGET
// when we are certain which modal ID to work with
// when we are certain which offcanvas ID to work with
var myOffcanvas = document.getElementById('offcanvasID');

// ATTACH listeners
Expand All @@ -2096,7 +2060,7 @@ <h3>Offcanvas JavaScript API</h3>
// shown.bs.offcanvas event
myOffcanvas.addEventListener('shown.bs.offcanvas', function(event){
// do something when this event triggers
// event.target is the modal referenced in myOffcanvas
// event.target is the offcanvas referenced in myOffcanvas
// event.relatedTarget can be the triggering button or NULL
}, false);

Expand Down Expand Up @@ -2265,7 +2229,6 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with s
</div>
</section>
</section>


<section id="componentPopover">
<h2>Popover</h2>
Expand Down Expand Up @@ -2655,7 +2618,6 @@ <h3>Popover Examples</h3>
</section>
</section>


<section id="componentScrollspy">
<h2>Scrollspy</h2>
<p>The <b>ScrollSpy</b> component inherits some of the <a rel="noreferrer"
Expand Down Expand Up @@ -3895,18 +3857,38 @@ <h3>Tooltip Examples</h3>
</svg>
<img class="position-absolute absolute-img" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" />
</div>

<iframe src="./tooltip-iframe.html" style="border:none; min-height: 225px; width: 100%; ">
</iframe>
</section>
</section>

<section id="componentBase">
<h2>BaseComponent</h2>
<section id="baseInfo">
<h3>Info</h3>
<p>Following the development of the original library, we implemented the same solution to remove most repetitive actions common
to all components; the <b>BaseComponent</b> provides basic functionality generally focused around determining the specific
<code>HTMLElement</code> target or setting instance options.</p>
<p>It also throws an error when no target <code>HTMLElement</code> is found and removes existing instances which is important
to prevent memory overflow or breaking the component functionality.</p>
</section>
<section id="baseMethods">
<h3>Base Properties And Methods</h3>
<p>The <b>BaseComponent</b> component exposes some getters for all components to use:</p>
<h4>instance.name</h4>
<p>Returns the name of the component used to initialize the current instance.</p>
<h4>instance.defaults</h4>
<p>Returns the component default options values.</p>
<h4>instance.version</h4>
<p>Returns the library version.</p>
<h4>instance.dispose()</h4>
<p>Removes the component from target element. Components generally extend this method with additional specific functionality.</p>
</section>
</section>
</div>
<div class="col-md-3" id="side-nav">
<ul id="nav-scrollspy-v5" class="nav nav-stacked d-none d-md-flex flex-column">
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentBase">BaseComponent</a>
<ul class="nav">
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseInfo">Info</a></li>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseMethods">Methods</a></li>
</ul>
</li>
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentAlert">Alert</a>
<ul class="nav">
Expand Down Expand Up @@ -4036,6 +4018,13 @@ <h3>Tooltip Examples</h3>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipExamples">Examples</a></li>
</ul>
</li>
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentBase">BaseComponent</a>
<ul class="nav">
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseInfo">Info</a></li>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseMethods">Methods</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand All @@ -4053,9 +4042,9 @@ <h3>Tooltip Examples</h3>
import * as BSN from '~/index';
window.BSN = BSN;
</script>
<script defer src="./assets/js/scripts.js"></script>

<script src="https://cure53.de/purify.js"></script>
<script src="./assets/js/prism.js"></script>
<script defer src="https://cure53.de/purify.js"></script>
<script defer src="./assets/js/scripts.js"></script>
<script defer src="./assets/js/prism.js"></script>
</body>
</html>
74 changes: 35 additions & 39 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@
<div class="item-bg bg-warning"></div>
<div class="container d-flex align-items-end h-100">
<div class="position-relative text-dark text-left mb-5">
<h1>A better way to Bootstrap 5</h1>
<p>The lighter and more compact set of JavaScript components for Bootstrap, sourced with modern ES6+ codebase and strong TypeScript definitions.<br>
At about half the size of the original and around <b>12kb gZipped</b>, this library does most of Bootstrap & Popper combined.</p>
<h1>A What Bootstrap?</h1>
<p>The lighter and more compact set of JavaScript components for Bootstrap, sourced with Typescript codebase.<br>
At less than half the size of the original and around <b>15kb gZipped</b>, this library does most of Bootstrap & Popper combined.</p>
<p>
<a class="btn btn-lg btn-primary me-1" href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a>
<a class="btn btn-lg btn-secondary" href="https://www.npmjs.com/package/bootstrap.native">NPM</a>
Expand Down Expand Up @@ -145,6 +145,7 @@ <h1>What's in it for me?</h1>
<li class="nav-item"><a class="nav-link" href="#componentTab">Tab</a></li>
<li class="nav-item"><a class="nav-link" href="#componentToast">Toast</a></li>
<li class="nav-item"><a class="nav-link" href="#componentTooltip">Tooltip</a></li>
<li class="nav-item"><a class="nav-link" href="#componentBase">Base Component</a></li>
</ul>
</div>
</div>
Expand All @@ -161,30 +162,6 @@ <h2>Read First</h2>
</section>
<div class="row">
<div class="col-md-9" data-bs-spy="scroll" data-bs-target="#side-nav">

<section id="componentBase">
<h2>BaseComponent</h2>
<section id="baseInfo">
<h3>Info</h3>
<p>Following the development of the original library, we implemented the same solution to remove most repetitive actions common
to all components; the <b>BaseComponent</b> provides basic functionality generally focused around determining the specific
<code>HTMLElement</code> target or setting instance options.</p>
<p>It also throws an error when no target <code>HTMLElement</code> is found and removes existing instances which is important
to prevent memory overflow or breaking the component functionality.</p>
</section>
<section id="baseMethods">
<h3>Base Properties And Methods</h3>
<p>The <b>BaseComponent</b> component exposes some getters for all components to use:</p>
<h4>instance.name</h4>
<p>Returns the name of the component used to initialize the current instance.</p>
<h4>instance.defaults</h4>
<p>Returns the component default options values.</p>
<h4>instance.version</h4>
<p>Returns the library version.</p>
<h4>instance.dispose()</h4>
<p>Removes the component from target element. Components generally extend this method with additional specific functionality.</p>
</section>
</section>
<section id="componentAlert">
<h2>Alert</h2>
<p>The <b>Alert</b> component covers the specific original events and public methods, but just like the original plugin, does not provide any
Expand Down Expand Up @@ -1125,7 +1102,6 @@ <h2 class="accordion-header" id="headingThree">
</section>
</section>


<section id="componentDropdown">
<h2>Dropdown</h2>
<p>The <b>Dropdown</b> component covers most of the functionality from the original plugin in terms of original events,
Expand Down Expand Up @@ -1443,7 +1419,6 @@ <h3>Dropdown Examples</h3>
</section>
</section>


<section id="componentModal">
<h2>Modal</h2>
<p>The <b>Modal</b> component comes with small changes to options, events and public methods when compared to
Expand Down Expand Up @@ -1884,7 +1859,6 @@ <h4 class="modal-title" id="myModalJSLabel">Static modal initialized via JavaScr
</section>
</section>


<section id="componentOffcanvas">
<h2>Offcanvas</h2>
<p>The <b>Offcanvas</b> component is our newest addition and comes packed with options, events and public methods.</p>
Expand Down Expand Up @@ -2255,7 +2229,6 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with s
</div>
</section>
</section>


<section id="componentPopover">
<h2>Popover</h2>
Expand Down Expand Up @@ -2645,7 +2618,6 @@ <h3>Popover Examples</h3>
</section>
</section>


<section id="componentScrollspy">
<h2>Scrollspy</h2>
<p>The <b>ScrollSpy</b> component inherits some of the <a rel="noreferrer"
Expand Down Expand Up @@ -3890,16 +3862,33 @@ <h3>Tooltip Examples</h3>
</iframe>
</section>
</section>

<section id="componentBase">
<h2>BaseComponent</h2>
<section id="baseInfo">
<h3>Info</h3>
<p>Following the development of the original library, we implemented the same solution to remove most repetitive actions common
to all components; the <b>BaseComponent</b> provides basic functionality generally focused around determining the specific
<code>HTMLElement</code> target or setting instance options.</p>
<p>It also throws an error when no target <code>HTMLElement</code> is found and removes existing instances which is important
to prevent memory overflow or breaking the component functionality.</p>
</section>
<section id="baseMethods">
<h3>Base Properties And Methods</h3>
<p>The <b>BaseComponent</b> component exposes some getters for all components to use:</p>
<h4>instance.name</h4>
<p>Returns the name of the component used to initialize the current instance.</p>
<h4>instance.defaults</h4>
<p>Returns the component default options values.</p>
<h4>instance.version</h4>
<p>Returns the library version.</p>
<h4>instance.dispose()</h4>
<p>Removes the component from target element. Components generally extend this method with additional specific functionality.</p>
</section>
</section>
</div>
<div class="col-md-3" id="side-nav">
<ul id="nav-scrollspy-v5" class="nav nav-stacked d-none d-md-flex flex-column">
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentBase">BaseComponent</a>
<ul class="nav">
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseInfo">Info</a></li>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseMethods">Methods</a></li>
</ul>
</li>
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentAlert">Alert</a>
<ul class="nav">
Expand Down Expand Up @@ -4029,6 +4018,13 @@ <h3>Tooltip Examples</h3>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipExamples">Examples</a></li>
</ul>
</li>
<li class="nav-item">
<a rel="nofollow" class="nav-link" href="#componentBase">BaseComponent</a>
<ul class="nav">
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseInfo">Info</a></li>
<li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseMethods">Methods</a></li>
</ul>
</li>
</ul>
</div>
</div>
Expand Down
Loading

0 comments on commit 19e8607

Please sign in to comment.