Pure.CSS এর Built-in Utility Classes

Pure.CSS একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা অনেক ধরনের Built-in Utility Classes প্রদান করে। এই utility classes গুলি সাধারণত ওয়েব ডেভেলপমেন্টে দ্রুত এবং কার্যকরীভাবে বিভিন্ন ধরনের স্টাইলিং প্রয়োগ করতে ব্যবহৃত হয়। এগুলির মাধ্যমে আপনি সহজেই টেক্সট, মার্জিন, প্যাডিং, বর্ডার, ফন্ট সাইজ, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।

Pure.CSS এর Utility Classes ব্যবহার করে আপনি খুব দ্রুত ওয়েব পেজের স্টাইলিং পরিবর্তন করতে পারেন এবং প্রয়োজন অনুযায়ী কাস্টম স্টাইল তৈরি করতে পারেন। নিচে কিছু জনপ্রিয় utility classes এবং তাদের ব্যবহার দেখানো হয়েছে।

1. Margin & Padding Utilities:

Margin এবং Padding হল ওয়েব ডিজাইনিং-এর অন্যতম গুরুত্বপূর্ণ অংশ। Pure.CSS এ মার্জিন এবং প্যাডিং পরিচালনা করার জন্য কয়েকটি বিল্ট-ইন ক্লাস রয়েছে।

Margin (মার্জিন) কাস্টমাইজ করা:

<!-- Margin-Top -->
<div class="pure-u-1 pure-u-lg-1-2 pure-u-lg-margin-top-20">Content</div>

এখানে, pure-u-lg-margin-top-20 ক্লাসটি বড় স্ক্রীনে (ডেস্কটপ) উপাদানের ওপর ২০px মার্জিন যোগ করবে।

Padding (প্যাডিং) কাস্টমাইজ করা:

<!-- Padding -->
<div class="pure-u-1 pure-u-md-padding-20">Content</div>

এখানে, pure-u-md-padding-20 ক্লাসটি মিডিয়াম স্ক্রীনে (ট্যাবলেট) উপাদানের চারপাশে ২০px প্যাডিং যোগ করবে।

2. Text Alignment Utilities:

Pure.CSS এর Text Alignment ক্লাসগুলো দিয়ে আপনি সহজেই টেক্সট কেন্দ্রিত, ডান বা বাম দিকে সজ্জিত করতে পারেন।

Text Centering (টেক্সট কেন্দ্রিত করা):

<p class="pure-text-center">This text is centered.</p>

এখানে, pure-text-center ক্লাসটি টেক্সটটিকে সেন্টারে রাখবে।

Text Alignment (টেক্সটের অবস্থান পরিবর্তন করা):

<p class="pure-text-left">This text is left aligned.</p>
<p class="pure-text-right">This text is right aligned.</p>

এখানে, pure-text-left এবং pure-text-right ক্লাসগুলির মাধ্যমে টেক্সটকে বাম বা ডান দিকে সাজানো হবে।

3. Display Utilities:

Display Utilities ব্যবহার করে আপনি ওয়েব উপাদানগুলিকে ব্লক, ইনলাইন বা হিডেন (অদৃশ্য) করে রাখতে পারেন।

Block Display (ব্লক ডিসপ্লে):

<div class="pure-u-1 pure-u-md-display-block">
  This element will be displayed as a block.
</div>

Inline Display (ইনলাইন ডিসপ্লে):

<div class="pure-u-1 pure-u-md-display-inline">
  This element will be displayed inline.
</div>

Hide Element (উপাদান লুকানো):

<div class="pure-u-1 pure-u-md-display-none">
  This element will be hidden on medium and larger screens.
</div>

এখানে, pure-u-md-display-none ক্লাসটি উপাদানটি মিডিয়াম এবং বড় স্ক্রীনে অদৃশ্য করে ফেলবে।

4. Flexbox Utilities:

Flexbox ব্যবহার করে উপাদানগুলির অবস্থান এবং সাইজ নিয়ন্ত্রণ করতে পারেন। Pure.CSS-এ Flexbox কনটেইনার এবং আইটেমগুলির জন্য কিছু বিল্ট-ইন ক্লাস রয়েছে।

Flex Container (ফ্লেক্স কন্টেইনার):

<div class="pure-g">
  <div class="pure-u-1-3">Content 1</div>
  <div class="pure-u-1-3">Content 2</div>
  <div class="pure-u-1-3">Content 3</div>
</div>

এখানে, pure-g ক্লাসটি ফ্লেক্স কন্টেইনার তৈরি করবে এবং pure-u-1-3 ক্লাসটি তিনটি উপাদানকে ১/৩ অংশে বিভক্ত করবে।

Flex Alignment (ফ্লেক্স অ্যালাইনমেন্ট):

<div class="pure-g pure-u-md-align-center">
  <div class="pure-u-1-3">Content 1</div>
  <div class="pure-u-1-3">Content 2</div>
  <div class="pure-u-1-3">Content 3</div>
</div>

এখানে, pure-u-md-align-center ক্লাসটি উপাদানগুলোকে মাঝখানে কেন্দ্রিত করবে।

5. Font Size and Weight Utilities:

Font Size এবং Font Weight নিয়ন্ত্রণ করতে Pure.CSS এর ক্লাস ব্যবহার করা হয়।

Font Size (ফন্ট সাইজ) কাস্টমাইজ করা:

<p class="pure-font-size-20">This is a 20px font size.</p>

এখানে, pure-font-size-20 ক্লাসটি টেক্সটের সাইজ ২০px করে দিবে।

Font Weight (ফন্ট ওয়েট) কাস্টমাইজ করা:

<p class="pure-font-weight-bold">This text is bold.</p>

এখানে, pure-font-weight-bold ক্লাসটি টেক্সটটিকে বোল্ড করে দিবে।

6. Margin and Padding for Specific Sides:

যদি আপনি শুধুমাত্র কোনো একটি দিকে মার্জিন বা প্যাডিং দিতে চান, তাহলে Pure.CSS এর কিছু বিশেষ ক্লাস ব্যবহার করতে পারেন।

Top Margin:

<p class="pure-u-1 pure-u-md-margin-top-20">This text has a top margin of 20px on medium and larger screens.</p>

Bottom Padding:

<p class="pure-u-1 pure-u-md-padding-bottom-20">This text has a bottom padding of 20px on medium and larger screens.</p>

7. Background Color Utilities:

Pure.CSS এ ব্যাকগ্রাউন্ড কালারের জন্য কিছু বিল্ট-ইন ক্লাস রয়েছে যা ব্যবহার করে আপনি সহজেই উপাদানের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন।

Background Color:

<div class="pure-u-1 pure-u-md-background-green">
  This element has a green background on medium and larger screens.
</div>

এখানে, pure-u-md-background-green ক্লাসটি মিডিয়াম এবং বড় স্ক্রীনে ব্যাকগ্রাউন্ড রঙ সবুজ করে দিবে।

Pure.CSS এর Built-in Utility Classes ব্যবহার করে আপনি দ্রুত ওয়েব ডিজাইনে প্রয়োজনীয় পরিবর্তন এবং কাস্টমাইজেশন করতে পারেন। এই ইউটিলিটি ক্লাসগুলির মাধ্যমে আপনি সহজেই মার্জিন, প্যাডিং, ডিসপ্লে, ফন্ট সাইজ, অ্যালাইনমেন্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। Pure.CSS এর ক্লাসগুলো responsive এবং mobile-first ডিজাইন তৈরিতে অত্যন্ত কার্যকরী, এবং এটি আপনার ওয়েব ডিজাইনকে আরও দ্রুত এবং কার্যকরভাবে তৈরি করতে সহায়তা করবে।