Framework7 একটি শক্তিশালী ডিফল্ট থিম সরবরাহ করলেও, কাস্টম CSS ব্যবহার করে অ্যাপ্লিকেশনকে নির্দিষ্ট প্রয়োজন অনুযায়ী কাস্টমাইজ করা যায়। Framework7 এর HTML স্ট্রাকচার এবং CSS ক্লাসগুলোর সাহায্যে সহজেই অ্যাপ্লিকেশনের লুক ও ফিল পরিবর্তন করা সম্ভব।
Framework7 এ Custom CSS যোগ করার ধাপ
১. CSS ফাইল তৈরি করা
Framework7 প্রজেক্টের /src/css/ ডিরেক্টরিতে একটি কাস্টম CSS ফাইল তৈরি করুন। উদাহরণ:
/src/css/custom.css
২. Custom CSS ফাইলকে লিঙ্ক করা
Custom CSS ফাইলটি index.html এ Framework7 এর CSS ফাইলের পরে যুক্ত করুন। এটি Framework7 এর ডিফল্ট স্টাইল ওভাররাইড করার জন্য প্রয়োজন।
উদাহরণ:
<link rel="stylesheet" href="css/custom.css">
Custom CSS উদাহরণ
Navbar কাস্টমাইজ করা
Framework7 এর ডিফল্ট navbar স্টাইল পরিবর্তন করতে:
/* Navbar Background Color */
.navbar {
background-color: #4CAF50; /* গাঢ় সবুজ */
}
/* Navbar Title Color */
.navbar .title {
color: white;
font-size: 20px;
font-weight: bold;
}
বাটন স্টাইল কাস্টমাইজ করা
Framework7 এর ডিফল্ট button স্টাইল পরিবর্তন করতে:
/* Primary Button Customization */
.button {
background-color: #008CBA; /* নীল */
border-radius: 10px;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Button Hover Effect */
.button:hover {
background-color: #005f73;
}
পৃষ্ঠার ব্যাকগ্রাউন্ড এবং ফন্ট কাস্টমাইজ করা
Framework7 এ একটি পৃষ্ঠার ব্যাকগ্রাউন্ড এবং ফন্ট স্টাইল কাস্টমাইজ করতে:
/* Page Background */
.page {
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
color: #333;
}
/* Link Style */
a {
color: #1E90FF;
text-decoration: none;
}
a:hover {
color: #104E8B;
}
ট্যাবের স্টাইল পরিবর্তন
Framework7 এর tab স্টাইল পরিবর্তন করতে:
/* Active Tab Style */
.tab-link-active {
color: #4CAF50; /* সবুজ */
font-weight: bold;
border-bottom: 2px solid #4CAF50;
}
/* Tab Content Style */
.tab {
padding: 20px;
font-size: 16px;
}
Framework7 থিম পরিবর্তনের জন্য CSS ভেরিয়েবল ব্যবহার
Framework7 CSS এর জন্য অনেক প্রি-ডিফাইন্ড ভেরিয়েবল ব্যবহার করে, যা কাস্টমাইজেশন আরও সহজ করে তোলে। এই ভেরিয়েবলগুলো কাস্টমাইজ করতে, আপনার CSS প্রিপ্রসেসর (SASS/LESS) ব্যবহার করতে পারেন।
উদাহরণ (SASS ব্যবহার করে):
// Default theme variables override
$theme-color: #4CAF50; // Primary Color
$navbar-bg-color: #4CAF50; // Navbar Background
$button-bg-color: #008CBA; // Button Background
@import 'framework7/framework7-bundle';
Framework7 কাস্টমাইজ করার টিপস
- Specificity বজায় রাখুন: Framework7 এর ডিফল্ট CSS ওভাররাইড করতে
.classএবং#idসিলেক্টর সুনির্দিষ্টভাবে ব্যবহার করুন। - CSS Preprocessor ব্যবহার করুন: SASS বা LESS ব্যবহার করলে থিমের ভেরিয়েবল সহজেই ওভাররাইড করা যায়।
- Responsive Design: Framework7 এর গ্রিড সিস্টেম ব্যবহার করে CSS কাস্টমাইজেশন রেসপন্সিভ রাখুন।
- Browser Developer Tools: Chrome DevTools বা অন্য টুল দিয়ে Framework7 এর ডিফল্ট CSS ক্লাস এবং স্টাইল চিহ্নিত করুন।
উপসংহার
Framework7 এ Custom CSS ব্যবহার করে অ্যাপ্লিকেশন কাস্টমাইজেশন সহজ এবং কার্যকর। Navbar, Button, Tabs, এবং অন্যান্য UI কম্পোনেন্ট কাস্টমাইজ করতে CSS ব্যবহার করা যায়। কাস্টম ডিজাইন যোগ করার মাধ্যমে অ্যাপ্লিকেশনটি আপনার ব্র্যান্ডের সাথে মানানসই করা সম্ভব। Framework7 এর প্রি-ডিফাইন্ড CSS ভেরিয়েবল এবং স্টাইল ব্যবহার করলে কাস্টমাইজেশন আরও দ্রুত এবং সহজ হয়ে যায়।
Read more
