Skip to content

tkwebdesigner/bootstrap-purge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here’s a clean and professional README.md file for your Bootstrap + PurgeCSS + Webpack setup with Modal and Dropdown JS support:


# Bootstrap + PurgeCSS + Webpack Setup

A minimal boilerplate for building static websites using **Bootstrap 5**, **PurgeCSS**, and **Webpack** — with support for JavaScript components like **Modal** and **Dropdown** via ES modules.

---

## 🚀 Features

- Bootstrap via NPM (no CDN)
- PurgeCSS to remove unused CSS
- Webpack for JS bundling
- Modal and Dropdown imported directly via `bootstrap/js/dist`
- Clean and production-ready output

---

## 📁 Folder Structure

my-bootstrap-site/ │ ├── src/ │ ├── css/ │ │ └── style.css # Custom CSS with Bootstrap import │ ├── js/ │ │ └── main.js # JS entry point (Modal + Dropdown) │ └── index.html # HTML file │ ├── dist/ │ ├── style.min.css # Final CSS after build │ └── bundle.min.js # Final JS bundle │ ├── postcss.config.js ├── webpack.config.js ├── .babelrc └── package.json


---

## 📦 Installation

```bash
npm install

🛠️ Build Commands

# Build CSS and JS for production
npm run build

# Watch CSS changes
npm run watch:css

# Watch JS changes
npm run watch:js

🧩 Bootstrap Components Used

✅ Modal

import Modal from 'bootstrap/js/dist/modal';

const modalElement = document.getElementById('myModal');
const myModal = new Modal(modalElement);

document.getElementById('openModalBtn')?.addEventListener('click', () => {
  myModal.show();
});

✅ Dropdown

import Dropdown from 'bootstrap/js/dist/dropdown';

document.querySelectorAll('.dropdown-toggle').forEach((el) => {
  new Dropdown(el);
});

✂️ PurgeCSS Configuration

In postcss.config.js, we whitelist Bootstrap modal and dropdown classes:

safelist: {
  standard: [/^modal/, /^fade/, /^show/, /^btn/, /^dropdown/, /^data-bs/],
}

This ensures necessary Bootstrap classes are not removed in production.


📄 License

MIT


🙌 Credits

Created with ❤️ using:


---

Let me know if you want a downloadable ZIP of this whole setup or a GitHub repository template.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors