npm - bootsteam-theme - Versions diffs - 5.3.0 - Mend

bootsteam-theme 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/.gitattributes +66 -0
package/README.md +5 -0
package/dist/bootsteam-theme.css +12319 -0
package/dist/bootsteam-theme.min.css +5 -0
package/docs/alerts.html +118 -0
package/docs/badges.html +140 -0
package/docs/buttons.html +194 -0
package/docs/carousel.html +109 -0
package/docs/collapse.html +105 -0
package/docs/containers.html +307 -0
package/docs/css/bootsteam-theme.min.css +5 -0
package/docs/dialogs.html +154 -0
package/docs/forms.html +335 -0
package/docs/index.html +108 -0
package/docs/navs.html +250 -0
package/docs/offcanvas.html +92 -0
package/docs/plugins.html +99 -0
package/docs/scripts/scripts.js +70 -0
package/docs/scripts/themeHandler.js +57 -0
package/docs/spinners.html +145 -0
package/docs/tables.html +613 -0
package/docs/themes.html +166 -0
package/docs/toasts.html +119 -0
package/docs/typography.html +176 -0
package/docs-templates/alerts.html +76 -0
package/docs-templates/badges.html +98 -0
package/docs-templates/buttons.html +152 -0
package/docs-templates/carousel.html +67 -0
package/docs-templates/collapse.html +63 -0
package/docs-templates/containers.html +265 -0
package/docs-templates/dialogs.html +112 -0
package/docs-templates/forms.html +293 -0
package/docs-templates/index.html +66 -0
package/docs-templates/navs.html +208 -0
package/docs-templates/offcanvas.html +50 -0
package/docs-templates/partials/_footer.html +4 -0
package/docs-templates/partials/_head.html +7 -0
package/docs-templates/partials/_nav.html +29 -0
package/docs-templates/partials/_scripts.html +5 -0
package/docs-templates/plugins.html +57 -0
package/docs-templates/spinners.html +103 -0
package/docs-templates/tables.html +571 -0
package/docs-templates/themes.html +68 -0
package/docs-templates/toasts.html +77 -0
package/docs-templates/typography.html +134 -0
package/gulpfile.js +51 -0
package/package.json +17 -0
package/src/_alerts.scss +65 -0
package/src/_darkThemeOverrides.scss +74 -0
package/src/_fieldset.scss +27 -0
package/src/_forms.scss +134 -0
package/src/_tables.scss +77 -0
package/src/_twr-variables-dark.scss +23 -0
package/src/_twr-variables.scss +71 -0
package/src/bootsteam.scss +25 -0
package/src/plugins/_allPlugins.scss +2 -0
package/src/plugins/_slimSelect.scss +106 -0
package/src/plugins/_summernote.scss +45 -0

package/docs/themes.html ADDED Viewed

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Theme Switcher | Tower Bootstrap Theme</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Demo of custom Bootstrap theme">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
+    <link href="css/bootsteam-theme.min.css" rel="stylesheet" />
+    <script src="scripts/themeHandler.js" type="text/javascript"></script>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+        <div class="container">
+            <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbar-collapse-area">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item dropdown">
+                        <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+                            <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-end">
+                            <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
+                            GitHub
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="container mt-5 pt-2">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
+            <li class="breadcrumb-item active">Theme Switcher</li>
+        </ol>
+        <p>
+            More info on how Bootstrap's theme switching works can be found here:
+            <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/">https://getbootstrap.com/docs/5.3/customize/color-modes/</a>
+        </p>
+        <p>
+            This code is similar to the code provided on Bootstraps' website but is set up to work with classes instead of SVGs so you can use a font icon library.
+        </p>
+        <p>
+            First create a new JavaScript file with the following code. This should be separate from any bundling, if you are doing that.
+            This is because you want to include this code high up on the DOM to prevent the screen from flashing white when it loads.
+        </p>
+        <h5>ThemeHandler Javascript</h5>
+        <div class="card mb-3">
+            <div class="card-body bg-dark text-light">
+                <pre><code>// Update the theme ASAP to prevent the view flashing white
+updateTheme(localStorage.getItem('preferred-theme'));
+// Updates to the supplied theme
+function updateTheme(theme) {
+    if (theme === null || theme === 'auto') {
+        theme = getPreferedTheme();
+        updateThemeSelector('auto');
+    } else {
+        updateThemeSelector(theme);
+    }
+    document.documentElement.setAttribute('data-bs-theme', theme);
+}
+// Returns the prefers-color-scheme setting
+function getPreferedTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+// Updates the theme selector icon
+function updateThemeSelector(theme) {
+    document.querySelectorAll('[data-bs-theme-value]').forEach(function (selector) {
+        if (selector.getAttribute('data-bs-theme-value') === theme) {
+            selector.classList.add('active');
+            document.getElementById('current-theme').className = selector.firstElementChild.className
+        } else {
+            selector.classList.remove('active');
+        }
+    });
+}
+document.addEventListener('DOMContentLoaded', function () {
+    // Update the theme again after the page has loaded. This is mainly to update the theme picker icon.
+    updateTheme(localStorage.getItem('preferred-theme'));
+    // Add event listener to the theme switcher buttons
+    document.querySelectorAll('[data-bs-theme-value]').forEach(function (button) {
+        button.addEventListener('click', function () {
+            const theme = button.getAttribute('data-bs-theme-value');
+            if (theme === 'auto') {
+                localStorage.removeItem('preferred-theme');
+            } else {
+                localStorage.setItem('preferred-theme', theme);
+            }
+            updateTheme(theme);
+        });
+    });
+});
+// Add an event listener if prefers-color-scheme is updated.
+window.matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', ({ matches }) => {
+        const theme = localStorage.getItem('preferred-theme');
+        if (theme === null || theme === 'auto') {
+            updateTheme(getPreferedTheme());
+        }
+});</code></pre>
+            </div>
+        </div>
+        <p>
+            Add a script tag to the head of the page. It needs to included early on the DOM to prevent the page from flashing white if someone has defaulted to a dark theme.
+        </p>
+        <p>
+            Add the following to the navbar's menu. This example is using Material Design Icons,
+            <a href="https://pictogrammers.com/library/mdi" target="_blank" rel="noopener noreferrer">https://pictogrammers.com/library/mdi</a>
+        </p>
+        <h5>Navbar Theme Selector HTML</h5>
+        <div class="card mb-3">
+            <div class="card-body bg-dark text-light">
+                <pre><code>&lt;li class=&quot;nav-item dropdown&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;nav-link dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot;&gt;
+        &lt;span id=&quot;current-theme&quot;&gt;&lt;/span&gt; &lt;span class=&quot;d-md-none&quot;&gt;Switch Themes&lt;/span&gt;
+    &lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu&quot;&gt;
+        &lt;button type=&quot;button&quot; class=&quot;dropdown-item&quot; data-bs-theme-value=&quot;light&quot;&gt;&lt;span class=&quot;mdi mdi-weather-sunny&quot;&gt;&lt;/span&gt; Light&lt;/button&gt;
+        &lt;button type=&quot;button&quot; class=&quot;dropdown-item&quot; data-bs-theme-value=&quot;dark&quot;&gt;&lt;span class=&quot;mdi mdi-weather-night&quot;&gt;&lt;/span&gt; Dark&lt;/button&gt;
+        &lt;button type=&quot;button&quot; class=&quot;dropdown-item&quot; data-bs-theme-value=&quot;auto&quot;&gt;&lt;span class=&quot;mdi mdi-theme-light-dark&quot;&gt;&lt;/span&gt; Auto&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/li&gt;</code></pre>
+            </div>
+        </div>
+    </main>
+    <footer class="container">
+        <hr />
+        <p>TowerSoft</p>
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="scripts/scripts.js"></script>
+</body>
+</html>

package/docs/toasts.html ADDED Viewed

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Toasts | Tower Bootstrap Theme</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Demo of custom Bootstrap theme">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
+    <link href="css/bootsteam-theme.min.css" rel="stylesheet" />
+    <script src="scripts/themeHandler.js" type="text/javascript"></script>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+        <div class="container">
+            <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbar-collapse-area">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item dropdown">
+                        <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+                            <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-end">
+                            <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
+                            GitHub
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="container mt-5 pt-2">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
+            <li class="breadcrumb-item active">Toasts</li>
+        </ol>
+        <h2 class="display-4">Toasts</h2>
+        <hr />
+        <div class="row">
+            <div class="col-md-6 mb-4">
+                <div class="toast-container">
+                    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+                        <div class="toast-header">
+                            <strong class="me-auto">Default Toast</strong>
+                            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                        </div>
+                        <div class="toast-body">
+                            Hello, world! This is a toast message.
+                        </div>
+                    </div>
+                    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+                        <div class="toast-header bg-primary text-white">
+                            <strong class="me-auto">Primary Header Toast</strong>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
+                        </div>
+                        <div class="toast-body">
+                            Hello, world! This is a toast message.
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 mb-4">
+                <button type="button" class="btn btn-primary mb-2" onclick="toast('Default')">Toast Test</button>
+                <button type="button" class="btn btn-success mb-2" onclick="toast('bg-success', 'bg-success')">Toast Test</button>
+                <button type="button" class="btn btn-info mb-2" onclick="toast('bg-into', 'bg-info')">Toast Test</button>
+                <button type="button" class="btn btn-danger mb-2" onclick="toast('bg-danger', 'bg-danger')">Toast Test</button>
+            </div>
+        </div>
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+    </main>
+    <div id="toast-notifications" class="toast-container position-absolute p-3 bottom-0 end-0"></div>
+    <div id="toast-template" hidden>
+        <div class="toast fade hide" role="alert">
+            <div class="toast-header bg-primary text-white">
+                <strong class="me-auto">Toast</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+            </div>
+        </div>
+    </div>
+    <footer class="container">
+        <hr />
+        <p>TowerSoft</p>
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="scripts/scripts.js"></script>
+</body>
+</html>

package/docs/typography.html ADDED Viewed

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Typography | Tower Bootstrap Theme</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Demo of custom Bootstrap theme">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
+    <link href="css/bootsteam-theme.min.css" rel="stylesheet" />
+    <script src="scripts/themeHandler.js" type="text/javascript"></script>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+        <div class="container">
+            <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbar-collapse-area">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item dropdown">
+                        <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+                            <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-end">
+                            <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
+                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
+                            GitHub
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="container mt-5 pt-2">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
+            <li class="breadcrumb-item active">Typography</li>
+        </ol>
+        <h2 class="display-5">Typography</h2>
+        <hr />
+        <div class="row">
+            <div class="col-12 col-sm-4">
+                <h1>Heading 1</h1>
+                <h2>Heading 2</h2>
+                <h3>Heading 3</h3>
+                <h4>Heading 4</h4>
+                <h5>Heading 5</h5>
+                <h6>Heading 6</h6>
+                <h3>
+                    Heading
+                    <small class="text-muted">with muted text</small>
+                </h3>
+                <p class="lead">Lead Paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            </div>
+            <div class="col-12 col-sm-4">
+                <h4>Inline text elements</h4>
+                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+                <p><del>This line of text is meant to be treated as deleted text.</del></p>
+                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+                <p><u>This line of text will render as underlined</u></p>
+                <p><small>This line of text is meant to be treated as fine print.</small></p>
+                <p><strong>This line rendered as bold text.</strong></p>
+                <p class="fw-semibold">fw-semibold - Custom class for font-weight: 600</p>
+                <p><em>This line rendered as italicized text.</em></p>
+            </div>
+            <div class="col-12 col-sm-4">
+                <h4>Emphasis classes</h4>
+                <p class="text-primary">text-primary - Lorem ipsum dolor sit amet</p>
+                <p class="text-secondary">text-secondary - Lorem ipsum dolor sit amet</p>
+                <p class="text-success">text-success - Lorem ipsum dolor sit amet</p>
+                <p class="text-info">text-info - Lorem ipsum dolor sit amet</p>
+                <p class="text-warning">text-warning - Lorem ipsum dolor sit amet</p>
+                <p class="text-danger">text-danger - Lorem ipsum dolor sit amet</p>
+                <p class="text-light">text-light - Lorem ipsum dolor sit amet</p>
+                <p class="text-dark">text-dark - Lorem ipsum dolor sit amet</p>
+                <p class="text-muted">text-muted - Lorem ipsum dolor sit amet</p>
+                <p class="text-faded">text-faded - Custom class that uses opacity instead of changing the font color</p>
+            </div>
+            <div class="col-12 col-sm-4">
+                <h4>Display Headings</h4>
+                <div class="display-1">Display 1</div>
+                <div class="display-2">Display 2</div>
+                <div class="display-3">Display 3</div>
+                <div class="display-4">Display 4</div>
+                <div class="display-5">Display 5</div>
+                <div class="display-6">Display 6</div>
+                <em class="mt-2 d-block small">display-5 and display-6 are custom classes and are not normally in Bootstrap</em>
+            </div>
+            <div class="col-12 col-sm-4">
+                <h4>Lead</h4>
+                <p class="lead">
+                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+                </p>
+            </div>
+            <div class="col-12 col-sm-4">
+                <h4>Blockquote</h4>
+                <figure>
+                    <blockquote class="blockquote">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                    </blockquote>
+                    <figcaption class="blockquote-footer">
+                        Someone famous in <cite title="Source Title">Source Title</cite>
+                    </figcaption>
+                </figure>
+            </div>
+        </div>
+        <hr />
+        <h4>Fieldset</h4>
+        <fieldset>
+            <legend>Legend</legend>
+            <p>Content</p>
+            <div>More Content</div>
+        </fieldset>
+        <hr />
+        <h4>Code Elements</h4>
+        <h5>Inline Code</h5>
+        <p>
+            For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+        </p>
+        <h5>User Input</h5>
+        <p>
+            To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+            To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+        </p>
+        <h5>pre</h5>
+        <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
+        <h5>Variables</h5>
+        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+        <h5>Sample Output</h5>
+        <samp>This text is meant to be treated as sample output from a computer program.</samp>
+        <br />
+        <br />
+    </main>
+    <footer class="container">
+        <hr />
+        <p>TowerSoft</p>
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="scripts/scripts.js"></script>
+</body>
+</html>

package/docs-templates/alerts.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    @@include('./partials/_head.html', {
+        "title": "Alerts | Tower Bootstrap Theme"
+    })
+</head>
+<body>
+    @@include('./partials/_nav.html')
+    <main class="container mt-5 pt-2">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
+            <li class="breadcrumb-item active">Alerts</li>
+        </ol>
+        <h2 class="display-4">Alerts</h2>
+        <hr />
+        <div class="row">
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-primary alert-dismissible fade show" role="alert">
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                    <div>This is a primary alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-secondary" role="alert">
+                    <div>This is a secondary alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-success" role="alert">
+                    <div>This is a success alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-danger" role="alert">
+                    <div>This is a danger alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-warning" role="alert">
+                    <div>This is a warning alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-info" role="alert">
+                    <div>This is a info alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-light" role="alert">
+                    <div>This is a light alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6">
+                <div class="alert alert-dark" role="alert">
+                    <div>This is a dark alert</div>
+                    <a href="#">Test Link</a>
+                </div>
+            </div>
+        </div>
+    </main>
+    @@include('./partials/_footer.html')
+    @@include('./partials/_scripts.html')
+</body>
+</html>

package/docs-templates/badges.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    @@include('./partials/_head.html', {
+        "title": "Badges | Tower Bootstrap Theme"
+    })
+</head>
+<body>
+    @@include('./partials/_nav.html')
+    <main class="container mt-5 pt-2">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
+            <li class="breadcrumb-item active">Badges and Progress Bars</li>
+        </ol>
+        <h2 class="display-4">Badges</h2>
+        <hr />
+        <p>
+            <button type="button" class="btn btn-primary">
+                Notifications <span class="badge bg-secondary">4</span>
+            </button>
+        </p>
+        <p>
+            <span class="badge text-bg-primary">Primary</span>
+            <span class="badge text-bg-secondary">Secondary</span>
+            <span class="badge text-bg-success">Success</span>
+            <span class="badge text-bg-danger">Danger</span>
+            <span class="badge text-bg-warning text-dark">Warning</span>
+            <span class="badge text-bg-info">Info</span>
+            <span class="badge text-bg-light text-dark">Light</span>
+            <span class="badge text-bg-dark">Dark</span>
+        </p>
+        <p>
+            <span class="badge rounded-pill bg-primary">Primary</span>
+            <span class="badge rounded-pill bg-secondary">Secondary</span>
+            <span class="badge rounded-pill bg-success">Success</span>
+            <span class="badge rounded-pill bg-danger">Danger</span>
+            <span class="badge rounded-pill bg-warning text-dark">Warning</span>
+            <span class="badge rounded-pill bg-info">Info</span>
+            <span class="badge rounded-pill bg-light text-dark">Light</span>
+            <span class="badge rounded-pill bg-dark">Dark</span>
+        </p>
+        <br />
+        <h2 class="display-4">Progress Bars</h2>
+        <hr />
+        <div class="mb-4">
+            <h5>Standard</h5>
+            <div class="progress mb-2">
+                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+        </div>
+        <div class="mb-4">
+            <h5>Striped</h5>
+            <div class="progress mb-2">
+                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <div class="progress mb-2">
+                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+        </div>
+        <div class="mb-4">
+            <h5>Animated Stripes</h5>
+            <div class="progress">
+                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+            </div>
+        </div>
+    </main>
+    @@include('./partials/_footer.html')
+    @@include('./partials/_scripts.html')
+</body>
+</html>