BismillahCSS Installation Guide

Welcome to BismillahCSS! This guide will help you install and set up BismillahCSS for your project. Whether you're using it via CDN, NPM, or custom builds, we’ve got you covered.

📌 1. Installation Methods

🔹 A. Using CDN (Quick Setup)

If you want a simple way to use BismillahCSS without installing anything, you can link it using a CDN. Just add the following <link> tag inside your HTML <head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My BismillahCSS Project</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bismillahcss@latest/dist/bismillah.min.css">
</head>
<body>
    <h1 class="bismillah-text-3xl bismillah-text-blue-500">Hello, BismillahCSS!</h1>
</body>
</html>

✅ Pros: Fast, No installation required

❌ Cons: Less customization

🔹 B. Using NPM (Recommended for Developers)

For better control and customization, install BismillahCSS via NPM/Yarn.

Step 1: Initialize Your Project (if not already done)

Run the following command to create a package.json file if you don’t have one:

npm init -y

Step 2: Install BismillahCSS

Now, install BismillahCSS:

npm install bismillahcss

Step 3: Import BismillahCSS in Your CSS File

Create a styles.css file and import BismillahCSS:

@import "bismillahcss/dist/bismillah.css";

Or import it directly in your JavaScript file:

import "bismillahcss/dist/bismillah.css";

Step 4: Use It in Your HTML

Now, use the utility classes in your HTML file:

<button class="bismillah-bg-blue-600 bismillah-text-white bismillah-py-2 bismillah-px-4 bismillah-rounded">
    Click Me
</button>

✅ Pros: Customizable, easy to update

❌ Cons: Requires Node.js

🔹 C. Using BismillahCSS with PostCSS (Advanced Customization)

If you want full control over BismillahCSS, you can integrate it with PostCSS.

Step 1: Install Required Packages

Run the following command:

npm install postcss postcss-cli autoprefixer bismillahcss

Step 2: Create a postcss.config.js File

Inside your project root, create a postcss.config.js file:

module.exports = {
    plugins: [
        require("bismillahcss"),
        require("autoprefixer")
    ]
};

Step 3: Build Your CSS

Run the following command to compile your CSS:

npx postcss styles.css -o output.css

Now, link output.css in your HTML file.

✅ Pros: Best for large projects

❌ Cons: Requires extra configuration

📌 2. Customization (Config File)

🔹 A. Create a Config File

Run the following command:

npx bismillahcss init

This will generate a bismillah.config.js file like this:

module.exports = {
    theme: {
        colors: {
            primary: "#4F46E5",
            secondary: "#10B981",
            danger: "#EF4444"
        },
        extend: {
            spacing: {
                '72': '18rem',
                '84': '21rem',
                '96': '24rem'
            }
        }
    },
    variants: {
        extend: {
            backgroundColor: ["hover", "focus"],
            textColor: ["hover", "focus"]
        }
    },
    plugins: []
};

Modify this file to add custom themes, colors, and utilities.

📌 3. Using BismillahCSS in Different Environments

BismillahCSS works everywhere, including:

🔹 A. Using with React.js

In a React.js project, install BismillahCSS using NPM:

npm install bismillahcss

Then, import it in index.js or App.js:

import "bismillahcss/dist/bismillah.css";

Now, use the classes in your JSX:

<button className="bismillah-bg-blue-500 bismillah-text-white bismillah-px-4 bismillah-py-2">
    React Button
</button>

🔹 B. Using with Next.js

For a Next.js project, install BismillahCSS:

npm install bismillahcss

Import it in _app.js:

import "bismillahcss/dist/bismillah.css";

Now, use the classes inside Next.js components.

🔹 C. Using with Vue.js

For a Vue.js project, install BismillahCSS:

npm install bismillahcss

Import it in main.js:

import "bismillahcss/dist/bismillah.css";

Use the classes inside Vue templates:

<template>
    <button class="bismillah-bg-green-500 bismillah-text-white bismillah-py-2 bismillah-px-4">
        Vue Button
    </button>
</template>

📌 4. BismillahCSS CDN vs. NPM vs. PostCSS (Comparison)

Method	Pros	Cons
CDN	Fast, No setup required	No customization
NPM	Customizable, Best for large projects	Requires Node.js
PostCSS	Full control, Best for production	Requires extra setup

📌 5. FAQs (Frequently Asked Questions)

❓ 1. How do I update BismillahCSS?

Run the following command to update:

npm update bismillahcss

❓ 2. Does BismillahCSS support dark mode?

Yes! Use bismillah-dark mode classes.

Example:

<div class="bismillah-dark bismillah-bg-gray-900 bismillah-text-white">
    Dark Mode Example
</div>

❓ 3. How do I add custom colors?

Modify bismillah.config.js like this:

module.exports = {
    theme: {
        extend: {
            colors: {
                mycustomcolor: "#FF5733"
            }
        }
    }
};

Now, use it:

<p class="bismillah-text-mycustomcolor">This is a custom color!</p>

❓ 4. Can I use BismillahCSS with Bootstrap or Tailwind?

Yes, but it’s recommended to use only one framework to avoid conflicts.

📌 6. Conclusion

Now you know how to install, customize, and use BismillahCSS! 🚀

🔹 Quick Setup: Use the CDN
🔹 Recommended: Use NPM for customization
🔹 Advanced: Use PostCSS for full control