Quick Start Guide

Get up and running with BismillahCSS in minutes. This guide will walk you through the essentials.

⚡ 5-Minute Setup

Step 1: Install via NPM

The fastest way to get started is using NPM. Make sure you have Node.js installed.

npm install bismillahcss

Step 2: Import in Your Project

In your main CSS file or JavaScript entry point, add:

import "bismillahcss/dist/bismillah.css";

Or in your HTML file:

<link rel="stylesheet" href="node_modules/bismillahcss/dist/bismillah.css">

Step 3: Start Using Utility Classes

You're ready to go! Start building with utility classes:

<div class="bismillah-flex bismillah-items-center bismillah-justify-center bismillah-h-screen">
  <button class="bismillah-bg-blue-500 bismillah-text-white bismillah-px-6 bismillah-py-3 bismillah-rounded-lg bismillah-font-semibold hover:bismillah-bg-blue-600 transition-colors">
    Get Started
  </button>
</div>

📦 Choose Your Method

✅ Recommended: NPM + React/Next.js

npm install bismillahcss

Best for modern web applications with build tools

🚀 Quick: CDN Link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bismillahcss@latest/dist/bismillah.min.css">

No installation required, perfect for quick prototypes

🎨 Advanced: PostCSS

npm install bismillahcss postcss autoprefixer

Full control and customization for production projects

🎯 Common Use Cases

Button Component

<button class="bismillah-bg-indigo-600 bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded-md bismillah-font-medium hover:bismillah-bg-indigo-700 transition-colors">
  Click me
</button>

Flex Layout

<div class="bismillah-flex bismillah-gap-4 bismillah-items-center bismillah-justify-between">
  <div class="bismillah-flex-1"></div>
  <div class="bismillah-flex-1"></div>
</div>

Grid Layout

<div class="bismillah-grid bismillah-grid-cols-3 bismillah-gap-4">
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Card 1</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Card 2</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4 bismillah-rounded">Card 3</div>
</div>

Responsive Design

<div class="bismillah-grid bismillah-grid-cols-1 md:bismillah-grid-cols-2 lg:bismillah-grid-cols-3 bismillah-gap-4">
  <div>Responsive item</div>
</div>

🔧 Basic Configuration

Create a bismillah.config.js file to customize BismillahCSS:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
        secondary: '#10B981'
      },
      spacing: {
        '128': '32rem'
      }
    }
  }
}

Then use your custom values in your HTML:

<div class="bismillah-bg-primary bismillah-p-128">
  Custom configured styles
</div>

⚙️ Responsive Breakpoints

BismillahCSS includes responsive prefixes for mobile-first development:

sm:Small screens (≥ 640px)

md:Medium screens (≥ 768px)

lg:Large screens (≥ 1024px)

xl:Extra large screens (≥ 1280px)

Example:

<div class="bismillah-text-sm md:bismillah-text-base lg:bismillah-text-lg">
  Responsive text size
</div>

🚀 Next Steps

Explore Utility Classes: Check out all available utility classes for layout, typography, colors, and more.
Read Core Concepts: Understand utility-first CSS, responsive design, and how to use pseudo-classes.
Customize Your Theme: Learn how to configure colors, fonts, and spacing for your project.
Build Components: Discover pre-built components or create your own using utility classes.

❓ Need Help?

If you encounter any issues or have questions, check out our documentation pages or community resources. Happy building! 🎉