Materialize CSS একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা অনেক ধরনের helper classes (হেল্পার ক্লাস) সরবরাহ করে, যা ডিজাইনকে দ্রুত এবং সহজ করে তোলে। Margin, padding, flexbox সহ অন্যান্য ইউটিলিটি ক্লাস ব্যবহার করে আপনি সহজেই আপনার ওয়েব পেজের লেআউট ও স্টাইল কাস্টমাইজ করতে পারেন।
এখানে Materialize CSS-এর কিছু সাধারণ এবং গুরুত্বপূর্ণ হেল্পার ক্লাস আলোচনা করা হবে, যা আপনি আপনার ওয়েবসাইটে ডিজাইন এবং লেআউট পরিবর্তন করার জন্য ব্যবহার করতে পারেন।
১. Margin Helper Classes
Margin ক্লাস ব্যবহার করে আপনি একটি উপাদানের চারপাশে মার্জিন (মধ্যবর্তী ফাঁকা জায়গা) সেট করতে পারেন। Materialize CSS অনেক ধরনের মার্জিন ক্লাস সরবরাহ করে যা আপনার ডিজাইনকে নিখুঁতভাবে সাজাতে সহায়তা করে।
Margin এর জন্য হেল্পার ক্লাস:
m{size}: মার্জিনের সব দিকের জন্য একটি সাইজ সেট করে।mt{size}: শুধুমাত্র টপ (উপরে) মার্জিন।mr{size}: শুধুমাত্র রাইট (ডান) মার্জিন।mb{size}: শুধুমাত্র বটম (নিচে) মার্জিন।ml{size}: শুধুমাত্র লেফট (বাম) মার্জিন।mx{size}: হরিজেন্টাল মার্জিন (বাম ও ডান)।my{size}: ভার্টিকাল মার্জিন (উপর ও নিচে)।
{size} এর মান হতে পারে: 1, 2, 3, 4, 5, যেখানে 1 হলো সবচেয়ে কম মার্জিন এবং 5 হলো সবচেয়ে বেশি মার্জিন।
উদাহরণ:
<div class="m3">This div has a margin of 3 units on all sides.</div>
<div class="mt2 mb3">This div has 2 units margin on top and 3 units on bottom.</div>
<div class="mx4">This div has 4 units margin on left and right.</div>
এখানে:
- m3: টপ, বটম, বাম এবং ডান দিকের জন্য ৩ ইউনিট মার্জিন।
- mt2: শুধুমাত্র টপ (উপর) মার্জিন ২ ইউনিট।
- mb3: শুধুমাত্র বটম (নিচে) মার্জিন ৩ ইউনিট।
২. Padding Helper Classes
Padding ক্লাস ব্যবহার করে আপনি একটি উপাদানের ভিতরে স্পেসিং (ফাঁকা জায়গা) সেট করতে পারেন। এটি উপাদানের কনটেন্ট এবং বর্ডারের মধ্যে জায়গা তৈরি করে।
Padding এর জন্য হেল্পার ক্লাস:
p{size}: প্যাডিংয়ের সব দিকের জন্য একটি সাইজ সেট করে।pt{size}: শুধুমাত্র টপ (উপরে) প্যাডিং।pr{size}: শুধুমাত্র রাইট (ডান) প্যাডিং।pb{size}: শুধুমাত্র বটম (নিচে) প্যাডিং।pl{size}: শুধুমাত্র লেফট (বাম) প্যাডিং।px{size}: হরিজেন্টাল প্যাডিং (বাম ও ডান)।py{size}: ভার্টিকাল প্যাডিং (উপর ও নিচে)।
উদাহরণ:
<div class="p3">This div has padding of 3 units on all sides.</div>
<div class="pt2 pb4">This div has 2 units padding on top and 4 units on bottom.</div>
<div class="px5">This div has 5 units padding on left and right.</div>
এখানে:
- p3: টপ, বটম, বাম এবং ডান দিকের জন্য ৩ ইউনিট প্যাডিং।
- pt2: শুধুমাত্র টপ (উপর) প্যাডিং ২ ইউনিট।
- pb4: শুধুমাত্র বটম (নিচে) প্যাডিং ৪ ইউনিট।
৩. Height এবং Width Helper Classes
Materialize CSS-এ কিছু হেল্পার ক্লাস আছে যেগুলোর মাধ্যমে আপনি উপাদানের উচ্চতা এবং প্রস্থ কাস্টমাইজ করতে পারেন।
Width এবং Height এর জন্য হেল্পার ক্লাস:
w{size}: উপাদানের প্রস্থ সেট করে।h{size}: উপাদানের উচ্চতা সেট করে।full-width: পুরো প্রস্থ (100%)।full-height: পুরো উচ্চতা (100%)।
উদাহরণ:
<div class="w3">This div has width of 3 units.</div>
<div class="h4">This div has height of 4 units.</div>
<div class="full-width">This div takes full width.</div>
<div class="full-height">This div takes full height.</div>
এখানে:
- w3: ৩ ইউনিট প্রস্থ।
- h4: ৪ ইউনিট উচ্চতা।
- full-width: পূর্ণ প্রস্থ (100%)।
- full-height: পূর্ণ উচ্চতা (100%)।
৪. Text Alignment Helper Classes
Materialize CSS-এ text alignment সেট করার জন্য কিছু হেল্পার ক্লাস রয়েছে। এর মাধ্যমে আপনি সহজেই টেক্সটকে বাম, ডান বা কেন্দ্রীভূত করতে পারেন।
Text Alignment এর জন্য হেল্পার ক্লাস:
left-align: টেক্সটকে বাম দিকে অ্যালাইন করে।right-align: টেক্সটকে ডান দিকে অ্যালাইন করে।center-align: টেক্সটকে কেন্দ্রবিন্দুতে অ্যালাইন করে।
উদাহরণ:
<div class="left-align">This text is left-aligned.</div>
<div class="right-align">This text is right-aligned.</div>
<div class="center-align">This text is center-aligned.</div>
৫. Visibility Helper Classes
Materialize CSS আপনাকে বিভিন্ন উপাদানকে ভিজিবল বা ইনভিজিবল করতে সহায়তা করে।
Visibility এর জন্য হেল্পার ক্লাস:
hide: উপাদানটি গোপন (hidden) করবে।show: উপাদানটি দৃশ্যমান (visible) করবে।visible: উপাদানটি দৃশ্যমান করবে।
উদাহরণ:
<div class="hide">This div is hidden.</div>
<div class="show">This div is visible.</div>
উপসংহার
Materialize CSS এর হেল্পার ক্লাসগুলি ডিজাইন এবং লেআউট কাস্টমাইজ করতে অত্যন্ত কার্যকরী এবং সহজ উপায় প্রদান করে। Margin, Padding, Width, Height, Text Alignment, Visibility এবং অন্যান্য ইউটিলিটি ক্লাস ব্যবহার করে আপনি খুব দ্রুত এবং কার্যকরভাবে আপনার ওয়েবসাইটের উপাদানগুলি কাস্টমাইজ করতে পারেন। Materialize CSS এর এই হেল্পার ক্লাসগুলি আপনার ওয়েবসাইটের ডিজাইন এবং ইউজার এক্সপিরিয়েন্সকে উন্নত করতে সহায়তা করে।
Read more
