Bulma একটি ফ্রেমওয়ার্ক হিসেবে অনেকগুলো পূর্বনির্ধারিত ক্লাস এবং স্টাইল প্রদান করে, কিন্তু আপনার যদি নিজস্ব ডিজাইন অথবা স্টাইল তৈরি করার প্রয়োজন হয়, তবে আপনি সহজেই Bulma এর সাথে Custom CSS যুক্ত করতে পারেন। এই প্রক্রিয়া আপনাকে Bulma এর ডিফল্ট স্টাইলের সাথে আপনার বিশেষ স্টাইল যোগ করার সুযোগ দেয়, যা আপনার ওয়েবসাইটের ডিজাইনকে আরও ইউনিক এবং ব্যক্তিগতভাবে কাস্টমাইজড করে তোলে।
১. Custom CSS ফাইল তৈরি করা
প্রথমেই আপনাকে একটি Custom CSS ফাইল তৈরি করতে হবে, যেখানে আপনি আপনার ডিজাইন কাস্টমাইজেশন ও স্টাইল লিখবেন।
উদাহরণ: styles.css
/* Custom styles */
.custom-button {
background-color: #3498db; /* Custom Background Color */
color: white; /* Text Color */
border-radius: 5px; /* Rounded corners */
padding: 10px 20px; /* Padding */
font-size: 16px; /* Font size */
}
.custom-text {
color: #2c3e50; /* Custom Text Color */
font-family: 'Arial', sans-serif; /* Font Family */
font-weight: bold; /* Font Weight */
}
এখানে আপনি একটি custom-button ক্লাস তৈরি করেছেন, যেটি Bulma এর .button ক্লাসের মতই ব্যবহার করা যাবে। একইভাবে, custom-text ক্লাসটি আপনার ওয়েবপেজের টেক্সটের জন্য কাস্টম স্টাইল প্রদান করবে।
২. HTML ফাইলে Custom CSS ফাইল লিংক করা
আপনি যখন Custom CSS ফাইল তৈরি করবেন, তখন সেটি HTML ফাইলের <head> ট্যাগে লিংক করতে হবে, যাতে আপনার ডিজাইন এবং স্টাইল সঠিকভাবে লোড হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma with Custom CSS</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="title custom-text">Hello, Bulma with Custom Styles!</h1>
<button class="button custom-button">Click Me</button>
</div>
</body>
</html>
এখানে আমরা styles.css ফাইলটি Bulma এর CSS এর পরে লিংক করেছি, কারণ CSS লোড হওয়ার আগে Bulma এর স্টাইলস আনা জরুরি। এতে Bulma এর স্টাইল প্রয়োগ হওয়ার পর আপনার কাস্টম CSS স্টাইলও সঠিকভাবে লোড হবে এবং এটি Bulma এর প্রি-বিল্ট ক্লাসের উপরে প্রভাব ফেলবে।
৩. Bulma ক্লাস কাস্টমাইজ করা
আপনি যদি Bulma এর স্টাইলগুলোর কিছু অংশ কাস্টমাইজ করতে চান, তবে তা করতে পারবেন। Bulma এর ডিফল্ট ক্লাসের উপর কাস্টম CSS যুক্ত করে আপনি ডিজাইন পরিবর্তন করতে পারেন।
উদাহরণ:
/* Customizing Bulma Button */
.button {
background-color: #e74c3c; /* Custom Red Color */
border-radius: 10px; /* Rounded corners */
padding: 15px 30px; /* More padding */
font-size: 18px; /* Larger font size */
}
এখানে .button ক্লাসের স্টাইল কাস্টমাইজ করা হয়েছে। Bulma এর প্রি-বিল্ট .button ক্লাসের রঙ, আকার এবং অন্যান্য স্টাইল বদলে দেওয়া হয়েছে। এর ফলে আপনি যে কোনো প্রি-বিল্ট Bulma ক্লাসের উপরে আপনার কাস্টম স্টাইল প্রয়োগ করতে পারেন।
৪. SCSS ব্যবহার করে কাস্টম CSS সংযুক্ত করা
যদি আপনি SCSS ব্যবহার করেন, তবে আপনি Bulma এর SCSS ফাইলের উপর কাস্টম SCSS ফাইল ইনপোর্ট করতে পারবেন। Bulma এর SCSS ব্যবহার করলে আপনি সহজেই ভেরিয়েবল এবং মিক্সিন পরিবর্তন করে ডিজাইন কাস্টমাইজ করতে পারবেন।
উদাহরণ:
- SCSS ফাইল তৈরি করুন (
styles.scss):
// Import Bulma SCSS
@import 'node_modules/bulma/bulma';
// Custom Styles
$primary: #e74c3c; /* Custom Primary Color */
.button {
background-color: $primary; /* Custom Background Color */
color: white; /* Text Color */
border-radius: 12px; /* Rounded corners */
}
- SCSS কম্পাইল করুন:
sass styles.scss styles.css
এটি Bulma এর SCSS ফাইল এবং আপনার কাস্টম SCSS ফাইল মিশিয়ে একটি CSS ফাইল তৈরি করবে। এরপর, সেই CSS ফাইলটি HTML ফাইলে লিংক করে আপনি Bulma এবং কাস্টম স্টাইল একত্রে ব্যবহার করতে পারবেন।
৫. CSS এর স্পেসিফিসিটি সম্পর্কে সচেতন থাকুন
Bulma এর পূর্বনির্ধারিত স্টাইলগুলো আপনাকে উপযুক্তভাবে কাজ করার সুযোগ দেয়, তবে আপনি যদি তার উপর কাস্টম স্টাইল প্রয়োগ করতে চান, তবে CSS স্পেসিফিসিটি (specificity) মনে রাখতে হবে। যদি আপনি Bulma এর কিছু ক্লাসকে কাস্টমাইজ করতে চান, তবে আপনাকে আরও শক্তিশালী CSS সিলেক্টর ব্যবহার করতে হতে পারে।
উদাহরণ:
/* Bulma এর button ক্লাস কাস্টমাইজ করতে উচ্চ স্পেসিফিসিটি */
html body .button {
background-color: #8e44ad; /* Purple Background */
}
এখানে, .button ক্লাসের স্টাইল পরিবর্তন করতে html body .button সিলেক্টর ব্যবহার করা হয়েছে, যা Bulma এর ডিফল্ট .button ক্লাসের উপর আরও প্রভাব ফেলবে।
সারাংশ
Bulma এর সাথে Custom CSS যুক্ত করা খুবই সহজ। আপনি সহজেই নতুন CSS ক্লাস তৈরি করতে পারেন, অথবা Bulma এর ডিফল্ট ক্লাস কাস্টমাইজ করতে পারেন। আপনি যদি SCSS ব্যবহার করেন, তবে আরও কাস্টমাইজেশন এবং নিয়ন্ত্রণ পাবেন। একসাথে Bulma এর স্টাইল এবং আপনার কাস্টম CSS ব্যবহার করার মাধ্যমে আপনি সুন্দর এবং ইউনিক ডিজাইন তৈরি করতে পারবেন, যা আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী উপযুক্ত।
Read more
