1.0.2 Accessibility and init fixes

Interface behavior, one attribute at a time.

Themestrap is a library of 80+ jQuery components for Bootstrap 5. There's no bundler and no framework: include a script, add data-plugin-* to your markup, and each component starts itself as it scrolls into view.

Get started Browse components

git clone https://github.com/daemondevin/Themestrap.git

Live preview select.html

PluginSelect keeps the native select in the form, so posts and autofill still work.

From markup to working component

The page stays HTML. Themestrap adds behavior to elements that ask for it and leaves everything else alone.

Include the scripts

jQuery, the Themestrap core, the components you use, and the auto-init file last.

<script src="jquery.min.js"></script>
<script src="js/themestrap.js"></script>
<script src="js/components/themestrap.plugin.select.js"></script>
<script src="js/themestrap.init.js"></script>

Mark up the element

A data-plugin-* attribute names the component. Options go in data-plugin-options as JSON.

<div data-plugin-select>
  <select name="plan">
    <option value="">Choose a plan</option>
    <option value="starter">Starter</option>
    <option value="team">Team</option>
  </select>
</div>

Take control when you need it

Add .manual to start a component yourself, then reach its instance from a fresh selection.

$('#plan').themestrapPluginSelect({
  placeholder: 'Choose a plan'
});

const select = $('#plan').data('__pluginSelect');

$('#plan').on('ts.select.change', e => {
  console.log(e.detail.value);
});

Load as much as the page needs

Everything shares the window.themestrap namespace, so you can start with the whole bundle and trim later, or hand-pick from day one.

js/themestrap.js: The namespace and the helpers every component relies on, including getOptions and the viewport observers.; Required
js/themestrap.bundle.js: Every component class in one file. The quickest setup when page weight isn't a concern.; Everything
js/components/themestrap.plugin.*.js: One file per component. Each injects its own CSS the first time it builds, so there's no stylesheet to add.; Hand-picked
js/themestrap.loader.js + modules.js: Declare data-module on an element and the loader fetches that component and its vendor dependencies when the page needs them.; On demand
js/themestrap.init.js: Finds data-plugin-* elements and starts each component as it nears the viewport.; Auto-init

Every component has a guide

70 components documented with markup, options, events, keyboard behavior and the mistakes to avoid.

Built with Themestrap

Complete projects in the repository that put the components to work together, from marketing sites to a multiplayer dice game.

Starter template

Start with one component

Pick the one your page is missing, read its guide, and drop it in. Nothing else changes.

Read the docs View on GitHub

Interface behavior, one attribute at a time.

From markup to working component

Include the scripts

Mark up the element

Take control when you need it

Load as much as the page needs

Every component has a guide

Built with Themestrap

Launchpad

Procedure

Mailbox

cod[e]ditor

TSBlog

10,000

Start with one component