Materialize এর ফ্লেক্সবক্স এবং হেল্পার ক্লাসেস

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা flexbox এবং helper classes এর মাধ্যমে ওয়েব ডিজাইনকে আরও সহজ এবং দ্রুত করতে সাহায্য করে। Flexbox সিস্টেম ব্যবহার করে আপনি লেআউট তৈরি করতে পারবেন, যা বিভিন্ন স্ক্রীন সাইজে উপাদানগুলি সুন্দরভাবে প্রদর্শন করে। এছাড়া, helper classes ব্যবহার করে আপনি ওয়েব পেজের উপাদানগুলির জন্য বিভিন্ন স্টাইল এবং কার্যকরী বৈশিষ্ট্য খুব সহজেই অ্যাপ্লাই করতে পারবেন।

এখানে Materialize CSS এর flexbox এবং helper classes এর ব্যবহার এবং তাদের কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।

Flexbox in Materialize

Flexbox (Flexible Box) হলো CSS এর একটি শক্তিশালী লেআউট মডেল, যা ওয়েব পেজের উপাদানগুলি সুন্দরভাবে সাজানোর জন্য ব্যবহৃত হয়। Materialize CSS ফ্রেমওয়ার্কে flexbox সিস্টেমটি সহজেই ব্যবহার করা যায়, যা ওয়েবসাইটে উপাদানগুলির গঠন আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে।

১. Flexbox Container তৈরি করা

Materialize CSS-এ আপনি flexbox ব্যবহার করতে পারেন। প্রথমে flex-container তৈরি করতে হবে, যেখানে ফ্লেক্স আইটেমগুলি রাখা হবে। উদাহরণ:

<div class="container">
  <div class="row">
    <div class="col s4">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s4">Column 3</div>
  </div>
</div>

এখানে:

• .row: একটি ফ্লেক্স কন্টেইনারের মতো কাজ করে।
• .col: এটি ফ্লেক্স আইটেমকে নির্দেশ করে।
• s4: এখানে, প্রতি কোলামের জন্য ৪টি গ্রিডের প্রস্থ নির্ধারণ করা হয়েছে (মোট ১২টি কলাম হতে পারে)।

২. Flexbox Alignment

Materialize CSS আপনাকে flexbox ব্যবহার করে উপাদানগুলির অবস্থান ঠিক করতে সহায়তা করে। এখানে কিছু সাধারণ alignment ক্লাসের উদাহরণ দেওয়া হলো:

• .align-items-center: এটি সমস্ত ফ্লেক্স আইটেমকে কন্টেইনারের কেন্দ্রের দিকে অবস্থান করবে।
• .align-items-start: এটি ফ্লেক্স আইটেমগুলোকে কন্টেইনারের শুরুর দিকে (বাম দিকে) স্থাপন করবে।
• .align-items-end: এটি ফ্লেক্স আইটেমগুলোকে কন্টেইনারের শেষে (ডান দিকে) স্থাপন করবে।

<div class="row align-items-center">
  <div class="col s4">Column 1</div>
  <div class="col s4">Column 2</div>
  <div class="col s4">Column 3</div>
</div>

এখানে, align-items-center ক্লাস ব্যবহার করে সব উপাদানগুলোকে কন্টেইনারের কেন্দ্রস্থলে অবস্থান করা হয়েছে।

৩. Flexbox Order

Flexbox এ, আপনি আইটেমগুলোর order কাস্টমাইজ করতে পারেন। এই ক্লাসের মাধ্যমে আপনি নির্দিষ্ট আইটেমের অবস্থান নিয়ন্ত্রণ করতে পারেন।

<div class="row">
  <div class="col s12 m6 l4 order-2">Column 1</div>
  <div class="col s12 m6 l4 order-1">Column 2</div>
  <div class="col s12 m6 l4 order-3">Column 3</div>
</div>

এখানে, order-1, order-2, এবং order-3 ক্লাসগুলি ব্যবহার করে আপনি আইটেমগুলোর প্রদর্শন সিকোয়েন্স নিয়ন্ত্রণ করেছেন। এতে আইটেমের প্রদর্শনের অর্ডার পরিবর্তিত হয়েছে।

Helper Classes in Materialize

Helper classes হলো ছোট CSS ক্লাস যা উপাদানের স্টাইল বা আচরণ দ্রুত পরিবর্তন করার জন্য ব্যবহৃত হয়। Materialize CSS-এ অনেক ধরণের helper classes রয়েছে যা উপাদানের আচরণ এবং ডিজাইন পরিবর্তন করতে সহজ এবং দ্রুত সহায়তা করে।

১. Spacing Helper Classes

Materialize CSS-এ spacing helper classes ব্যবহার করে আপনি উপাদানের মধ্যে margin বা padding দ্রুত অ্যাপ্লাই করতে পারেন।

• .m1, .m2, .m3, ...: মার্জিনের জন্য ব্যবহার করা হয়। (1 থেকে 5 পর্যন্ত ক্লাস)
• .p1, .p2, .p3, ...: প্যাডিংয়ের জন্য ব্যবহার করা হয়। (1 থেকে 5 পর্যন্ত ক্লাস)

<div class="m2 p3">This div has a margin of 2 and padding of 3.</div>

এখানে, m2 এবং p3 ক্লাসগুলি মার্জিন এবং প্যাডিং প্রয়োগ করবে।

২. Text Alignment Helper Classes

Text alignment নিয়ন্ত্রণ করার জন্য Materialize CSS-এ কিছু বিশেষ helper classes রয়েছে।

• .center-align: এটি টেক্সটকে কেন্দ্রবিন্দুতে অবস্থান করবে।
• .right-align: এটি টেক্সটকে ডানদিকে অবস্থান করবে।
• .left-align: এটি টেক্সটকে বামদিকে অবস্থান করবে।

<div class="center-align">This text is centered.</div>
<div class="right-align">This text is aligned to the right.</div>

৩. Visibility Helper Classes

Materialize CSS-এ visibility পরিবর্তন করার জন্য helper classes ব্যবহার করা যায়। যেমন:

• .hide: এটি একটি উপাদানকে গোপন করবে।
• .show: এটি একটি উপাদানকে দৃশ্যমান করবে।

<div class="hide-on-small-only">This will be hidden on small screens</div>

এখানে, hide-on-small-only ক্লাসটি ছোট স্ক্রীনে এই উপাদানটি গোপন করবে।

৪. Color Helper Classes

Materialize CSS-এ color helper classes দিয়ে আপনি সহজেই উপাদানের রঙ কাস্টমাইজ করতে পারেন। যেমন:

• .red, .blue, .green, ...: এগুলি বিভিন্ন রঙের ক্লাস যা উপাদানে সরাসরি রঙ প্রয়োগ করবে।

<div class="red">This is a red box</div>
<div class="blue">This is a blue box</div>

এখানে, red এবং blue ক্লাসের মাধ্যমে উপাদানগুলির রঙ পরিবর্তন করা হয়েছে।

উপসংহার

Materialize CSS-এ Flexbox এবং Helper Classes ব্যবহারের মাধ্যমে ওয়েব ডিজাইন খুবই সহজ এবং দ্রুত করা যায়। Flexbox সিস্টেম আপনাকে উপাদানগুলির মধ্যে spacing, alignment, এবং order কাস্টমাইজ করতে সহায়তা করে, যা ওয়েব পেজে একটি সুন্দর এবং responsive লেআউট তৈরি করতে ব্যবহৃত হয়। অন্যদিকে, Helper Classes উপাদানগুলোর margin, padding, visibility, alignment এবং color দ্রুত কাস্টমাইজ করতে সাহায্য করে, যা ওয়েব ডেভেলপমেন্টকে অনেক সহজ করে তোলে। Materialize CSS এর এই বৈশিষ্ট্যগুলো ব্যবহার করে আপনি সহজেই একটি আধুনিক, ফাংশনাল এবং সুন্দর ওয়েবসাইট তৈরি করতে পারবেন।

Materialize CSS একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Flexbox সিস্টেম সমর্থন করে। Flexbox হলো একটি লেআউট মডেল যা এলিমেন্টগুলিকে আরও সহজভাবে এবং কার্যকরভাবে সজ্জিত করতে সহায়ক, বিশেষ করে যখন ডিসপ্লে এলিমেন্টগুলি স্থানান্তর, সাইজিং বা সারিবদ্ধ করার ক্ষেত্রে কমপ্লেক্স স্টাইল প্রয়োজন হয়। Materialize CSS ফ্রেমওয়ার্কে Flexbox সিস্টেম ব্যবহার করা সহজ, এবং এটি ওয়েব পেজের লেআউট তৈরি করার জন্য অত্যন্ত শক্তিশালী একটি টুল।

এখানে Materialize CSS এর Flexbox সিস্টেমের ব্যবহার এবং এর সুবিধাগুলি বিস্তারিতভাবে আলোচনা করা হলো।

Flexbox System কি?

Flexbox বা Flexible Box Layout একটি CSS লেআউট মডেল যা এলিমেন্টগুলির মধ্যে স্থান এবং আকার নিয়ন্ত্রণের জন্য ব্যবহৃত হয়। এটি এলিমেন্টগুলিকে বিভিন্ন দিক থেকে সহজে সজ্জিত করতে সাহায্য করে, বিশেষ করে vertical alignment এবং horizontal alignment এর ক্ষেত্রে।

Materialize CSS তে Flexbox সিস্টেমের মাধ্যমে আপনি কন্টেন্ট সোজাসাপ্টা, রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ লেআউট তৈরি করতে পারেন। Flexbox ক্লাসের মাধ্যমে আপনি সহজে flex containers এবং flex items তৈরি করতে পারেন।

Materialize CSS এর Flexbox System এর ব্যবহার

১. Flex Containers

Flexbox সিস্টেমে Flex Containers (ফ্লেক্স কন্টেইনার) হলো এমন এলিমেন্ট যা তার অভ্যন্তরীণ এলিমেন্টগুলোকে flex items (ফ্লেক্স আইটেম) হিসেবে পরিচালনা করে। Materialize CSS এ flex-container ক্লাস ব্যবহৃত হয় ফ্লেক্স কন্টেইনার তৈরি করতে।

উদাহরণ: Basic Flex Container

<div class="container">
  <div class="row">
    <div class="col s4">Column 1</div>
    <div class="col s4">Column 2</div>
    <div class="col s4">Column 3</div>
  </div>
</div>

এখানে:

• row ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে, যা ইনলাইন-ফ্লেক্স আইটেমগুলিকে column ক্লাসের মাধ্যমে সজ্জিত করে।

২. Flex Items

Flex items হলো এমন উপাদান যা ফ্লেক্স কন্টেইনারের মধ্যে থাকে এবং ফ্লেক্স কন্টেইনারের মধ্যে স্থান, আকার এবং অ্যালাইনমেন্টের নিয়ন্ত্রণ করা হয়।

উদাহরণ: Flexbox এর মাধ্যমে Alignment

<div class="container">
  <div class="row">
    <div class="col s4">Item 1</div>
    <div class="col s4 offset-s4">Item 2</div>
  </div>
</div>

এখানে:

• offset-s4 ক্লাসটি আইটেম ২ (Item 2) কে সোজা করে, যাতে এটি পরবর্তী আইটেম থেকে একধাপ সরে থাকে।

৩. Centering Items Using Flexbox

Flexbox সিস্টেমের মাধ্যমে আপনি খুব সহজে এলিমেন্টগুলোকে horizontal এবং vertical উভয়ভাবে সেন্টার করতে পারেন।

উদাহরণ: Centering Items (Horizontally and Vertically)

<div class="container">
  <div class="row">
    <div class="col s12 center-align">
      <h5>Centered Content</h5>
    </div>
  </div>
</div>

এখানে:

• center-align ক্লাসটি ফ্লেক্স কন্টেইনারের মধ্যে আইটেমটিকে অনুভূমিকভাবে সেন্টার করে।
• Materialize CSS এ center-align ক্লাসটি এলিমেন্টকে উল্লম্বভাবে এবং অনুভূমিকভাবে সেন্টার করার জন্য ব্যবহৃত হয়।

৪. Flexbox Alignment Options

Flexbox সিস্টেমে justify-content, align-items, এবং align-self এর মতো প্রপার্টি ব্যবহার করে আইটেমগুলোর অবস্থান এবং বিন্যাস নিয়ন্ত্রণ করা যায়। Materialize CSS এর মাধ্যমে এগুলোর কাস্টমাইজেশন করা সম্ভব।

উদাহরণ: Justify Content (Horizontal Alignment)

<div class="row">
  <div class="col s4">Item 1</div>
  <div class="col s4">Item 2</div>
  <div class="col s4">Item 3</div>
</div>

এখানে:

• justify-content ফ্লেক্স কন্টেইনারের এলিমেন্টগুলোর মধ্যে সঠিক গ্যাপ বা স্থানের নিয়ন্ত্রণ করতে সহায়তা করে।

উদাহরণ: Align Items (Vertical Alignment)

<div class="row valign-wrapper">
  <div class="col s4">Item 1</div>
  <div class="col s4">Item 2</div>
  <div class="col s4">Item 3</div>
</div>

এখানে:

• valign-wrapper ক্লাসটি ব্যবহার করা হয়েছে যা আইটেমগুলিকে উল্লম্বভাবে সেন্টার করবে।

৫. Flexbox Responsiveness

Materialize CSS তে Flexbox এর মাধ্যমে রেসপন্সিভ ডিজাইন তৈরি করা খুবই সহজ। আপনি grid system এর মাধ্যমে বিভিন্ন স্ক্রীন সাইজের জন্য লেআউট কাস্টমাইজ করতে পারেন।

উদাহরণ: Responsive Flexbox Layout

<div class="row">
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 1</span>
        <p>Some content for the first card.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 2</span>
        <p>Some content for the second card.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 3</span>
        <p>Some content for the third card.</p>
      </div>
    </div>
  </div>
</div>

এখানে:

• col s12 m6 l4: এটি রেসপন্সিভ গ্রিড সিস্টেমে ব্যবহৃত হয়ে লেআউটের উপাদানগুলিকে বিভিন্ন ডিভাইসের জন্য কাস্টমাইজ করে (12-কলাম সিস্টেম)।
  • s12: মোবাইল ডিভাইসে পুরো সারি দখল করবে।
  • m6: ট্যাবলেটে ৬ কলাম দখল করবে।
  • l4: ডেস্কটপে ৪ কলাম দখল করবে।

উপসংহার

Materialize CSS এর Flexbox সিস্টেম ওয়েব ডিজাইন এবং ডেভেলপমেন্টে একটি অত্যন্ত শক্তিশালী টুল। এর মাধ্যমে আপনি সহজেই লেআউট তৈরি করতে পারেন যা রেসপন্সিভ, ফ্লেক্সিবল এবং ইন্টারঅ্যাকটিভ। Flexbox সিস্টেমের মাধ্যমে আপনি উপাদানগুলিকে সহজে সজ্জিত, সেন্টার, এবং অ্যালাইন করতে পারেন। Materialize CSS আপনাকে এর grid system এবং flex containers এর মাধ্যমে সজ্জিত, রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে, যা আপনার ওয়েবসাইটের লেআউটকে আরও উন্নত এবং দৃষ্টিনন্দন করে তোলে।

Flexbox (Flexible Box Layout) হল একটি লেআউট মডেল যা CSS3-এ প্রবর্তিত হয়েছে এবং এটি উপাদানগুলোর মধ্যে স্পেস ব্যবস্থাপনা, সাইজিং এবং এলাইনমেন্ট সহজতর করে। Materialize CSS ফ্রেমওয়ার্কটি Flexbox প্রযুক্তি ব্যবহার করে ওয়েবসাইটের লেআউট তৈরি করার প্রক্রিয়াকে আরও সহজ এবং কার্যকরী করে তোলে।

এখানে Materialize CSS এর মাধ্যমে Flexbox ব্যবহার করে কিভাবে সুন্দর এবং রেসপন্সিভ লেআউট তৈরি করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।

Flexbox এর মূল ধারণা

Flexbox একটি লেআউট মডেল যা আপনার HTML উপাদানগুলোকে একটি কন্টেইনারে সাজানোর জন্য সহজ উপায় প্রদান করে। এটি বিশেষত vertical alignment, horizontal alignment, এবং distributing space এর জন্য ব্যবহৃত হয়।

Flexbox এর দুটি মূল অংশ থাকে:

1. Flex Container: এটি সেই উপাদান যেটি তার ভেতরের উপাদানগুলোকে ফ্লেক্স আইটেম হিসেবে নিয়ে সাজায়।
2. Flex Items: এগুলো সেই উপাদান যা ফ্লেক্স কন্টেইনারের ভেতরে থাকে এবং ফ্লেক্স গুণাবলীর সাহায্যে সাইজ এবং স্থান ভাগাভাগি করে।

Materialize CSS এ Flexbox Layout তৈরি করা

Materialize CSS-এ Flexbox ব্যবহারের জন্য প্রয়োজনীয় কিছু ক্লাস সরবরাহ করা হয়েছে, যেগুলি আপনি সহজেই লেআউট তৈরি করতে ব্যবহার করতে পারেন। এই ক্লাসগুলো হলো flex, center-align, justify-center, align-center, ইত্যাদি।

১. Basic Flexbox Layout

এখানে একটি সোজা Flexbox লেআউট তৈরি করা হয়েছে:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Flexbox Layout</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Flexbox Container -->
  <div class="container">
    <div class="row">
      <div class="col s4">
        <div class="card-panel teal">Card 1</div>
      </div>
      <div class="col s4">
        <div class="card-panel teal">Card 2</div>
      </div>
      <div class="col s4">
        <div class="card-panel teal">Card 3</div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

এখানে:

• row: Flexbox কন্টেইনার। Materialize CSS-এ row ক্লাস ব্যবহৃত হয়, যা ফ্লেক্স আইটেমগুলোর জন্য একটি কন্টেইনার হিসেবে কাজ করে।
• col s4: ফ্লেক্স আইটেম হিসেবে তিনটি কলাম তৈরি করা হয়েছে, যেগুলি স্ক্রীনের ৪৩৩৩৩৩% জায়গা নেবে।

২. Centering Flex Items Vertically and Horizontally

Flexbox এর মাধ্যমে আপনি সহজেই উপাদানগুলিকে সেন্টার (অথবা একে অন্যের উপর উপযুক্তভাবে স্থাপন) করতে পারেন।

<div class="container">
  <div class="row" style="height: 400px;">
    <div class="col s12 flex-center">
      <div class="card-panel teal">Centered Content</div>
    </div>
  </div>
</div>

এখানে:

• flex-center: Flexbox ব্যবহারের মাধ্যমে কন্টেন্টটিকে horizontal এবং vertical দুইভাবে সেন্টার করা হয়েছে। Materialize CSS-এ flex-center ক্লাস ব্যবহার করে আপনি একযোগভাবে justify-center এবং align-center ইফেক্ট পেতে পারেন।

৩. Aligning Items with Flexbox

Flexbox দিয়ে সহজেই আপনি উপাদানগুলোকে সঠিকভাবে সারিবদ্ধ (align) করতে পারেন। যেমন:

• justify-center: উপাদানগুলোকে অনুভূমিকভাবে সেন্টার করা।
• align-center: উপাদানগুলোকে উল্লম্বভাবে সেন্টার করা।

<div class="container">
  <div class="row" style="height: 400px;">
    <div class="col s12 flex-align-center">
      <div class="card-panel teal">Centered Item Vertically</div>
    </div>
  </div>
</div>

এখানে:

• flex-align-center: উপাদানকে উল্লম্বভাবে সেন্টার করবে।

৪. Distributing Space Between Items

Flexbox এর আরেকটি শক্তিশালী বৈশিষ্ট্য হল উপাদানগুলোর মধ্যে space distribution। Materialize CSS-এ এই কাজের জন্য space-between এবং space-evenly ক্লাস ব্যবহার করা যায়।

<div class="container">
  <div class="row">
    <div class="col s4 flex-space-between">
      <div class="card-panel teal">Card 1</div>
      <div class="card-panel teal">Card 2</div>
    </div>
  </div>
</div>

এখানে:

• flex-space-between: উপাদানগুলোর মধ্যে সমান জায়গা ভাগাভাগি করবে।

৫. Flexbox with Nested Layout

আপনি Flexbox এর মধ্যে nested layout তৈরি করতে পারেন। এতে আপনি একটি Flexbox কন্টেইনারের ভেতরে আরও Flexbox কন্টেইনার রাখতে পারেন।

<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card-panel teal">Card 1</div>
    </div>
    <div class="col s6">
      <div class="row">
        <div class="col s6">
          <div class="card-panel teal">Card 2</div>
        </div>
        <div class="col s6">
          <div class="card-panel teal">Card 3</div>
        </div>
      </div>
    </div>
  </div>
</div>

এখানে:

• Nested Flexbox: একটি Flexbox কন্টেইনারের মধ্যে অন্য একটি Flexbox কন্টেইনার তৈরি করা হয়েছে, যাতে আপনি আরও ইনটুইটিভ লেআউট তৈরি করতে পারেন।

উপসংহার

Materialize CSS-এ Flexbox ব্যবহারের মাধ্যমে আপনি ওয়েবসাইটে বা অ্যাপ্লিকেশনে অত্যন্ত কার্যকরী, আধুনিক এবং রেসপন্সিভ লেআউট তৈরি করতে পারেন। Flexbox প্রযুক্তি ওয়েব ডেভেলপমেন্টে ব্যবহৃত একটি অত্যন্ত শক্তিশালী টুল, যা উপাদানগুলোর মধ্যে স্থান ভাগাভাগি, সেন্টারিং এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরির ক্ষেত্রে সহায়তা করে। Materialize CSS এর মাধ্যমে এই লেআউট তৈরি করা সহজ এবং দ্রুত, এবং এটি ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও উন্নত করে।

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা responsive ওয়েব ডিজাইন তৈরি করার জন্য সহজ ও দ্রুত পদ্ধতি সরবরাহ করে। এর মধ্যে vertical এবং horizontal centering করার জন্য অনেক সহজ এবং কার্যকরী উপায় রয়েছে। এই সেন্ট্রিং পদ্ধতিগুলি সাধারণত উপাদানকে পেজের সঠিক অবস্থানে কেন্দ্রীভূত করতে ব্যবহার করা হয়। এখানে Materialize CSS-এ vertical এবং horizontal centering কিভাবে করা যায় তা বিস্তারিতভাবে আলোচনা করা হলো।

Horizontal Centering

Horizontal centering হলো একটি উপাদানকে তার প্যারেন্ট কনটেইনারের অনুভূমিকভাবে কেন্দ্রিত করা। Materialize CSS-এ এটি করা অত্যন্ত সহজ। নিচে বিভিন্ন পদ্ধতি দেওয়া হলো।

১. Block Element Horizontal Centering

যেকোনো block-level উপাদান যেমন div, p, h1 ইত্যাদি অনুভূমিকভাবে কেন্দ্রিত করতে আপনি center-align ক্লাস ব্যবহার করতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Centering</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <!-- Centered Block Element -->
  <div class="center-align">
    <h4>This Heading is Horizontally Centered</h4>
    <p>This paragraph is also horizontally centered.</p>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

এখানে:

• center-align ক্লাসটি উপাদানগুলিকে অনুভূমিকভাবে কেন্দ্রিত করে।

২. Inline Element Horizontal Centering

যেকোনো inline element (যেমন: <span>, <a>), আপনি display: block; margin: 0 auto; ব্যবহার করতে পারেন। Materialize CSS-এ এই পদ্ধতি সহজ এবং কার্যকর।

<a class="btn center-align" href="#">Click Me</a>

এখানে:

• btn center-align ক্লাস ব্যবহার করে বাটনটি অনুভূমিকভাবে কেন্দ্রিত হবে।

Vertical Centering

Vertical centering হল একটি উপাদানকে তার প্যারেন্ট কনটেইনারের উল্লম্বভাবে কেন্দ্রিত করা। Materialize CSS-এ vertical centering করার জন্য কয়েকটি উপায় রয়েছে, যা খুব সহজে ব্যবহার করা যায়।

১. Flexbox ব্যবহার করে Vertical Centering

Flexbox ব্যবহার করে উপাদানকে উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রিত করা সম্ভব। Materialize CSS-এ display: flex এবং align-items: center ব্যবহার করে সহজেই vertical centering করা যায়।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Centering</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .centered {
      height: 100vh; /* Full height of the viewport */
      display: flex;
      justify-content: center; /* Horizontal centering */
      align-items: center; /* Vertical centering */
    }
  </style>
</head>
<body>

  <div class="centered">
    <h4>This Content is Vertically and Horizontally Centered</h4>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

এখানে:

• height: 100vh: প্যারেন্ট কনটেইনারের উচ্চতা ১০০% ভিউপোর্টের উচ্চতার সমান।
• display: flex: উপাদানগুলির মধ্যে ফ্লেক্সবক্স ব্যবহৃত হচ্ছে।
• justify-content: center: অনুভূমিকভাবে কেন্দ্রিত করবে।
• align-items: center: উল্লম্বভাবে কেন্দ্রিত করবে।

২. Using valign for Vertical Centering

Materialize CSS-এ valign ক্লাসের মাধ্যমে আপনি কনটেন্টকে সেন্টার করতে পারেন, তবে এটি শুধুমাত্র <td>, <tr>, বা <th> ট্যাগের জন্য কার্যকরী।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Centering with valign</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <table>
    <tr>
      <td class="valign-wrapper" style="height: 200px;">This content is vertically centered</td>
    </tr>
  </table>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

এখানে:

• valign-wrapper ক্লাসটি vertical centering কার্যকরী করবে।

৩. Using card and card-content for Vertical Centering

Materialize CSS-এ card এবং card-content উপাদানগুলির সাথে সহজেই vertical centering করা যায়।

<div class="card" style="height: 300px;">
  <div class="card-content valign-wrapper" style="height: 100%;">
    <span class="card-title">Vertically Centered Text</span>
  </div>
</div>

এখানে:

• valign-wrapper ক্লাসটি card-content এর মধ্যে উল্লম্বভাবে কনটেন্টকে কেন্দ্রিত করবে।

Combining Horizontal and Vertical Centering

কখনও কখনও আপনাকে একসাথে horizontal এবং vertical centering করতে হতে পারে। এক্ষেত্রে flexbox অথবা Materialize CSS এর বিভিন্ন ক্লাস ব্যবহার করে সহজে এই কাজটি করা যেতে পারে।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centering Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .centered-container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>

  <div class="centered-container">
    <h4>This content is both horizontally and vertically centered</h4>
  </div>

  <!-- Materialize JS Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

এখানে:

• justify-content: center এবং align-items: center ফ্লেক্সবক্সের মাধ্যমে কনটেন্টকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করবে।

উপসংহার

Materialize CSS-এ horizontal এবং vertical centering খুবই সহজ এবং দ্রুত করা যায়। আপনি flexbox, valign-wrapper এবং center-align এর মতো বিভিন্ন পদ্ধতি ব্যবহার করে আপনার উপাদানগুলিকে সেন্টার করতে পারেন। এগুলি একসাথে ব্যবহার করে আপনি সুন্দর এবং সুশৃঙ্খল ডিজাইন তৈরি করতে পারবেন, যা ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স উন্নত করবে।

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 এর এই হেল্পার ক্লাসগুলি আপনার ওয়েবসাইটের ডিজাইন এবং ইউজার এক্সপিরিয়েন্সকে উন্নত করতে সহায়তা করে।