Usage & CDN

Include boodoo in your project using easy-to-use CDN links for quick prototyping, or reference the compiled bundles locally.

CSS only

The quickest way to get started is to drop the compiled and minified CSS into your page. Just one file gets you the global styles, grid, all components, and utilities.

<link href="https://boodoo.dihadiwala.com/dist/css/boodoo.min.css" rel="stylesheet">

You can also load just the grid, reboot, or utilities separately for the leanest possible page:

<!-- Grid only -->
<link href="https://boodoo.dihadiwala.com/dist/css/boodoo-grid.min.css" rel="stylesheet">

<!-- Utilities only -->
<link href="https://boodoo.dihadiwala.com/dist/css/boodoo-utilities.min.css" rel="stylesheet">

JavaScript

Many boodoo components require the JavaScript bundle to function. Add it right before the closing </body> tag:

<script src="https://boodoo.dihadiwala.com/dist/js/boodoo.js"></script>

If you only need a subset, import individual components from the ESM build:

<script type="module">
  import { Modal, Toast, Dropdown } from 'https://boodoo.dihadiwala.com/dist/js/boodoo.esm.js';
  // components are auto-initialized from their data-* attributes
</script>

Local bundle

Prefer hosting yourself? Copy the contents of dist/ from the download into a folder and reference them relatively:

<link rel="stylesheet" href="css/boodoo.min.css">
<script src="js/boodoo.js"></script>

JavaScript modules

Our JavaScript is split into modules. The UMD-format bundle assigns a global boodoo object with every component, so you can call them programmatically:

<script>
  boodoo.toast('Hello from boodoo!', { title: 'Welcome' });
  new boodoo.Modal(document.getElementById('myModal')).show();
</script>