Bulma একটি প্রি-ডিফাইনড CSS ফ্রেমওয়ার্ক যা বিভিন্ন স্টাইল ক্লাস যেমন রঙ, ফন্ট, সাইজ ইত্যাদি সরবরাহ করে। তবে, যখন আপনার প্রয়োজন হয় কাস্টম ডিজাইন তৈরি করার, তখন আপনি Bulma এর মাধ্যমে আপনার পছন্দমতো কাস্টম রঙ এবং কাস্টম ফন্ট যুক্ত করতে পারেন। Bulma আপনাকে সহজে এই কাস্টমাইজেশন করার সুযোগ দেয়, যাতে আপনি আপনার প্রজেক্টের থিম এবং ব্র্যান্ডিংয়ের সাথে সঙ্গতি রেখে ডিজাইন তৈরি করতে পারেন।
১. কাস্টম Colors যুক্ত করা
Bulma ডিফল্টভাবে কিছু প্রি-ডিফাইনড রঙ সরবরাহ করে, যেমন is-primary, is-info, is-success, is-danger, ইত্যাদি। তবে আপনি চাইলে নিজের কাস্টম রঙও যোগ করতে পারেন। CSS ব্যবহার করে কাস্টম রঙ তৈরি করা খুব সহজ।
কাস্টম রঙের ব্যবহার
আপনি সাধারণ CSS ফাইল বা SCSS ফাইলের মাধ্যমে Bulma এর ডিজাইনে কাস্টম রঙ যোগ করতে পারেন। এখানে দুইটি পদ্ধতি দেখানো হলো।
১.১ CSS দিয়ে কাস্টম রঙ যোগ করা
আপনি সরাসরি CSS দিয়ে নতুন রঙ তৈরি করতে পারেন এবং সেই রঙের ক্লাস ব্যবহার করতে পারেন।
/* custom-styles.css */
.custom-primary {
background-color: #3498db; /* Blue */
color: white;
}
.custom-success {
background-color: #2ecc71; /* Green */
color: white;
}
.custom-warning {
background-color: #f39c12; /* Yellow */
color: white;
}
এবং HTML ফাইলে এই ক্লাসগুলির ব্যবহার:
<div class="notification custom-primary">
This is a custom primary notification.
</div>
<div class="notification custom-success">
This is a custom success notification.
</div>
<div class="notification custom-warning">
This is a custom warning notification.
</div>
১.২ SCSS দিয়ে কাস্টম রঙ যোগ করা
Bulma SCSS ফ্রেমওয়ার্ক হিসেবে তৈরি করা, তাই আপনি চাইলে SCSS ভেরিয়েবল ব্যবহার করে কাস্টম রঙ সেট করতে পারেন। যদি আপনার প্রকল্প SCSS সমর্থন করে, তবে আপনি সরাসরি Bulma এর ডিফল্ট ভেরিয়েবলগুলিকে ওভাররাইড করতে পারেন।
/* custom-styles.scss */
$primary: #3498db; /* Blue */
$success: #2ecc71; /* Green */
$warning: #f39c12; /* Yellow */
@import 'bulma';
এখানে:
$primary: ডিফল্ট প্রাইমারি রঙ পরিবর্তন করা হয়েছে।$success: ডিফল্ট সফলতা (success) রঙ পরিবর্তন করা হয়েছে।$warning: সতর্কতা (warning) রঙ পরিবর্তন করা হয়েছে।
এভাবে, SCSS ব্যবহার করে আপনি Bulma এর সমস্ত স্টাইল ভেরিয়েবল কাস্টমাইজ করতে পারবেন।
২. কাস্টম Fonts যুক্ত করা
Bulma ফ্রেমওয়ার্কে Font কাস্টমাইজেশন করার জন্য, আপনি সহজেই CSS বা SCSS ফাইলের মাধ্যমে আপনার পছন্দমতো ফন্ট যুক্ত করতে পারেন। আপনি Google Fonts বা অন্য কোনো ফন্ট সাইট থেকে ফন্ট যুক্ত করতে পারেন।
কাস্টম ফন্ট যোগ করার পদ্ধতি
২.১ Google Fonts দিয়ে কাস্টম ফন্ট যোগ করা
Google Fonts থেকে ফন্ট নির্বাচন করার জন্য প্রথমে তাদের সাইট থেকে ফন্টটি ইমপোর্ট করতে হবে এবং পরে CSS দিয়ে সেটি ব্যবহার করতে হবে।
- প্রথমে Google Fonts থেকে ফন্ট নির্বাচন করুন। যেমন, Roboto ফন্টটি:
<!-- HTML ফাইলের <head> সেকশনে -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- এরপর, CSS বা SCSS ফাইলে আপনি সেই ফন্টটি ব্যবহার করতে পারেন:
/* custom-styles.css */
body {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* Bold */
}
২.২ কাস্টম ফন্ট SCSS দিয়ে যুক্ত করা
আপনি SCSS ফাইলে $font-family ভেরিয়েবল ব্যবহার করে কাস্টম ফন্ট যোগ করতে পারেন।
/* custom-styles.scss */
$font-family: 'Roboto', sans-serif;
@import 'bulma';
এখানে:
$font-family: Bulma এর ডিফল্ট ফন্ট পরিবর্তন করা হয়েছে।
এভাবে, আপনি সহজেই Bulma তে কাস্টম ফন্ট যুক্ত করতে পারবেন।
৩. কাস্টম Colors এবং Fonts এর সংমিশ্রণ
যদি আপনি একত্রে কাস্টম রঙ এবং কাস্টম ফন্ট ব্যবহার করতে চান, তবে এটি খুব সহজ। নিচে একটি উদাহরণ দেওয়া হলো যেখানে আমরা কাস্টম রঙ এবং কাস্টম ফন্ট একসাথে ব্যবহার করব।
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="notification custom-primary">
<p class="title has-text-centered">Custom Notification</p>
This is a custom notification with custom colors and fonts.
</div>
</body>
/* custom-styles.css */
body {
font-family: 'Roboto', sans-serif;
}
.custom-primary {
background-color: #3498db; /* Blue */
color: white;
font-family: 'Roboto', sans-serif;
}
এখানে:
font-family:Robotoফন্ট ব্যবহার করা হয়েছে।custom-primary: কাস্টম রঙ হিসাবে ব্লু ব্যবহার করা হয়েছে।
সারাংশ
Bulma তে কাস্টম রঙ এবং কাস্টম ফন্ট যোগ করা খুবই সহজ। আপনি CSS বা SCSS ব্যবহার করে আপনার প্রজেক্টের জন্য প্রয়োজনীয় রঙ এবং ফন্ট কাস্টমাইজ করতে পারেন। Google Fonts ব্যবহার করে নতুন ফন্ট যুক্ত করা যায় এবং Bulma এর ডিফল্ট রঙ ভেরিয়েবলগুলিকে ওভাররাইড করে কাস্টম রঙ তৈরি করা যায়। এই কাস্টমাইজেশন দ্বারা আপনি আপনার ওয়েবসাইটের থিম এবং ব্র্যান্ডিং এর সাথে সঙ্গতি রেখে ডিজাইন তৈরি করতে পারবেন।
