A utility-first CSS framework designed for rapid, flexible, and customizable web development. BismillahCSS aims to streamline your design workflow with a focus on ease of use, simplicity, and performance.
- Utility-first design – Get the building blocks to craft beautiful designs quickly and efficiently.
- Custom utilities – Fully customizable utility classes for layout, typography, colors, shadows, and more.
- Advanced shadow system – Implement shadows with fine-grain control using multiple utilities.
- Button system – Predefined button styles for consistent UI components.
- Notification alert system – Easy-to-use alert system to notify users of important messages.
- Glassmorphism cards – Stylish and modern card components based on the glassmorphism design trend.
- Dark mode support – Built-in dark mode support for a seamless experience.
- Customizable – Easily override defaults to fit your unique design requirements.
npm install bismillahcssYou can also use BismillahCSS directly via CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bismillahcss/dist/bismillah.min.css">Start using BismillahCSS by linking the bismillah.min.css file in your HTML:
<head>
<link rel="stylesheet" href="path/to/bismillah.min.css">
</head>Use utility classes like bismillah-bg-blue, bismillah-text-center, bismillah-shadow-md, and more to style your elements quickly.
<button class="bismillah-btn bismillah-bg-blue bismillah-text-white bismillah-shadow-md">
Click Me!
</button>Detailed documentation of all utilities, components, and configurations is available in the docs folder.
- Buttons: Use
bismillah-btnfor styled buttons. - Cards: Glassmorphism cards like
bismillah-card. - Alerts: Easily implement notifications with
bismillah-alert.
BismillahCSS is highly configurable. Modify the default-config.js file to customize the framework's base styles, utilities, and more.
module.exports = {
colors: {
primary: '#1D4ED8',
secondary: '#F97316',
},
spacing: {
small: '8px',
medium: '16px',
large: '32px',
},
// Customize further...
};Tests for utilities and components are available in the tests folder to ensure all features work correctly. Run the tests with your preferred testing framework.
Contributions are always welcome! Feel free to open issues or pull requests to improve BismillahCSS. Here's how you can contribute:
- Fork the repository
- Create a new branch (
git checkout -b feature-name) - Commit your changes (
git commit -am 'Add feature') - Push to the branch (
git push origin feature-name) - Open a Pull Request
- Website: BismillahCSS Documentation
- License: MIT License
This project is licensed under the MIT License - see the LICENSE file for details.
Thank you for using BismillahCSS! 🙏
Let's build beautiful, responsive, and efficient websites together!