60 lines
1.1 KiB
Markdown
60 lines
1.1 KiB
Markdown
# 🎨 Custom Bootstrap Theme Generator
|
|
|
|
A simple tool to generate custom Bootstrap styles using your own color palette and configuration. Perfect for quickly prototyping or creating consistent themes for your web projects.
|
|
|
|
## 🚀 Features
|
|
|
|
- Customize Bootstrap's SCSS variables (colors, fonts, spacing, etc.)
|
|
- Outputs a single CSS file ready to use
|
|
- Built with simplicity and flexibility in mind
|
|
|
|
## 📦 Installation
|
|
|
|
Clone the repository:
|
|
|
|
```bash
|
|
git clone https://github.com/yourusername/bootstrap-theme-generator.git
|
|
cd bootstrap-theme-generator
|
|
```
|
|
|
|
Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## ⚙️ Usage
|
|
|
|
You can edit the SCSS variables in the `./scss/custom.scss` file.
|
|
|
|
To build your custom Bootstrap CSS:
|
|
|
|
```bash
|
|
npm run sass
|
|
```
|
|
|
|
The output CSS will be in `./css/custom.css`.
|
|
|
|
To build a minified custom Bootstrap CSS:
|
|
|
|
```bash
|
|
npm run sass-minify
|
|
```
|
|
|
|
The output CSS will be in `./css/custom.min.css`.
|
|
|
|
### 🧪 Example
|
|
|
|
```scss
|
|
// ./scss/custom.scss
|
|
// ----------------------------
|
|
|
|
$primary: #e63946;
|
|
$secondary: #457b9d;
|
|
$success: #2a9d8f;
|
|
$font-family-base: 'Inter', sans-serif;
|
|
$border-radius: 0.5rem;
|
|
|
|
// ----------------------------
|
|
```
|