Pure.CSS দিয়ে Custom Utility Classes তৈরি করা একটি শক্তিশালী পদ্ধতি, যা আপনাকে আপনার ওয়েব পেজের জন্য কাস্টম স্টাইল দ্রুত এবং সহজে তৈরি করতে সাহায্য করবে। Utility classes এমন CSS ক্লাস যা একটি নির্দিষ্ট এবং ছোট কাজ সম্পাদন করে, যেমন মার্জিন, প্যাডিং, ফন্ট সাইজ, কালার, এবং অন্যান্য প্রপার্টি নিয়ন্ত্রণ করা। এই ক্লাসগুলো কোডকে আরও পরিষ্কার এবং রিইউজেবল করে তোলে।
Custom Utility Classes এর সুবিধা:
- Modularity: আপনার ওয়েব পেজের বিভিন্ন উপাদানের জন্য ছোট ছোট স্টাইল ক্লাস তৈরি করে আপনি পুনঃব্যবহারযোগ্য কোড লিখতে পারেন।
- Readability: কোডকে পরিষ্কার এবং সহজভাবে পড়া যায়।
- Maintainability: আপনি যখন CSS কোড পরিবর্তন করবেন, তখন শুধুমাত্র একটি ক্লাস পরিবর্তন করলেই পুরো পেজে এর প্রভাব পড়বে।
Pure.CSS এ Custom Utility Classes তৈরি করার উদাহরণ:
১. Simple Custom Utility Classes
আপনি Pure.CSS এর সাথে নিজের প্রয়োজন অনুযায়ী বিভিন্ন utility classes তৈরি করতে পারেন। যেমন, মার্জিন, প্যাডিং, ফন্ট সাইজ, এবং টেক্সট কালার নিয়ন্ত্রণ করার জন্য কিছু কাস্টম ক্লাস তৈরি করা যেতে পারে।
উদাহরণ: Simple Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Utility Classes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Utility Classes */
.m-10 {
margin: 10px;
}
.p-20 {
padding: 20px;
}
.bg-blue {
background-color: #007bff;
color: white;
}
.text-center {
text-align: center;
}
.text-lg {
font-size: 1.25rem;
}
</style>
</head>
<body>
<div class="m-10 p-20 bg-blue text-center text-lg">
<p>This is a div with custom utility classes</p>
</div>
<div class="m-10 p-20">
<p>This is a div with some margin and padding</p>
</div>
</body>
</html>
ব্যাখ্যা:
- .m-10: এটি একটি margin ক্লাস, যা এলিমেন্টের চারপাশে ১০px মার্জিন যোগ করবে।
- .p-20: এটি একটি padding ক্লাস, যা এলিমেন্টের ভিতরে ২০px প্যাডিং যোগ করবে।
- .bg-blue: এটি একটি background-color ক্লাস, যা এলিমেন্টের ব্যাকগ্রাউন্ডকে নীল (blue) করে দেবে এবং টেক্সটের রঙ সাদা (white) হবে।
- .text-center: এটি একটি text-align ক্লাস, যা টেক্সটকে সেন্টারে এলাইন করবে।
- .text-lg: এটি একটি font-size ক্লাস, যা টেক্সটের আকার বড় (1.25rem) করবে।
২. Custom Grid Layout Utilities
আপনি Grid System এবং Flexbox সিস্টেমের জন্য কাস্টম utility classes তৈরি করতে পারেন। এই ধরনের ক্লাসগুলো আপনাকে দ্রুত এবং সহজে লেআউট তৈরি করতে সাহায্য করবে।
উদাহরণ: Custom Grid Layout Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Grid Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Grid Utility Classes */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="col-1 bg-blue text-center">Item 1</div>
<div class="col-2 bg-blue text-center">Item 2</div>
<div class="col-1 bg-blue text-center">Item 3</div>
<div class="col-3 bg-blue text-center">Item 4</div>
</div>
</body>
</html>
ব্যাখ্যা:
- .grid-container: একটি কাস্টম গ্রিড কন্টেইনার যা grid-template-columns: repeat(3, 1fr) দিয়ে ৩টি কলাম তৈরি করে এবং gap: 20px দিয়ে কলামগুলোর মধ্যে ২০px গ্যাপ রাখে।
- .col-1: এটি একটি কাস্টম ক্লাস যা গ্রিডের একটি কলাম প্রস্থ ধারণ করে।
- .col-2: এটি একটি কাস্টম ক্লাস যা গ্রিডে দুটি কলাম প্রস্থ ধারণ করে।
- .col-3: এটি একটি কাস্টম ক্লাস যা গ্রিডে তিনটি কলাম প্রস্থ ধারণ করে।
এটি একটি সাধারণ grid layout তৈরি করবে, যেখানে আপনি কাস্টম ক্লাস ব্যবহার করে বিভিন্ন কলামের আকার নিয়ন্ত্রণ করতে পারবেন।
৩. Custom Flexbox Utility Classes
Pure.CSS-এ Flexbox ব্যবহারের জন্য আপনি কাস্টম utility classes তৈরি করতে পারেন, যা আপনার ডিজাইনের জন্য উপাদানগুলোকে সোজা বা সেন্টারে সাজাতে সাহায্য করবে।
উদাহরণ: Custom Flexbox Utility Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Flexbox Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Flexbox Utility Classes */
.flex-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
gap: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="pure-button">Item 1</div>
<div class="pure-button">Item 2</div>
<div class="pure-button">Item 3</div>
</div>
<div class="flex-center" style="height: 200px;">
<div class="pure-button">Centered Item</div>
</div>
<div class="flex-column">
<div class="pure-button">Item 1</div>
<div class="pure-button">Item 2</div>
<div class="pure-button">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- .flex-container: এটি একটি flex কন্টেইনার যা উপাদানগুলোকে এক লাইনে সোজা করে এবং তাদের মধ্যে gap: 20px স্পেস রাখে।
- .flex-center: এটি একটি flex কন্টেইনার, যা উপাদানগুলোকে সেন্টার করে (দুই দিকেই সেন্টার)।
- .flex-column: এটি একটি flex কন্টেইনার, যা উপাদানগুলোকে column আকারে সাজায় (একেকটি উপাদান নতুন লাইনে আসবে)।
৪. Custom Utility Classes এর মাধ্যমে প্যাডিং এবং মার্জিন নিয়ন্ত্রণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Utility Classes - Padding & Margin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom Utility Classes for Padding and Margin */
.m-10 {
margin: 10px;
}
.p-20 {
padding: 20px;
}
.m-auto {
margin: auto;
}
.p-auto {
padding: auto;
}
</style>
</head>
<body>
<div class="m-10 p-20">
<p>This element has margin of 10px and padding of 20px.</p>
</div>
<div class="m-auto p-20">
<p>This element is centered with auto margins.</p>
</div>
</body>
</html>
ব্যাখ্যা:
- .m-10: এটি একটি margin ক্লাস, যা এলিমেন্টের চারপাশে ১০px মার্জিন যোগ করবে।
- .p-20: এটি একটি padding ক্লাস, যা এলিমেন্টের ভিতরে ২০px প্যাডিং যোগ করবে।
- .m-auto: এটি একটি ক্লাস যা মার্জিনকে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করে, যা সাধারণত এলিমেন্টগুলোকে সেন্টারে আলাইন করতে ব্যবহার হয়।
Custom Utility Classes তৈরি করার মাধ্যমে আপনি আপনার ওয়েব ডিজাইনের জন্য একটি পুনঃব্যবহারযোগ্য, সিম্পল এবং দ্রুত স্টাইলিং ব্যবস্থা তৈরি করতে পারবেন। Pure.CSS এর সাহায্যে সহজেই আপনি মার্জিন, প্যাডিং, গ্রিড, ফ্লেক্সবক্স এবং অন্যান্য স্টাইল নিয়ন্ত্রণ করতে পারবেন। এই কাস্টম ক্লাসগুলো আপনার কোডকে আরও পরিষ্কার এবং ম্যানটেইনেবল করে তুলবে।
Read more
