Pure.CSS একটি হালকা এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা মোবাইল-প্রথম ডিজাইনের ধারণায় কাজ করে এবং রেসপন্সিভ ওয়েব ডিজাইন তৈরির জন্য বেশ সহজ। Breakpoints এবং কাস্টম Responsive Layouts তৈরি করা Pure.CSS-এ খুবই সহজ এবং এর গ্রিড সিস্টেম ও মিডিয়া কোয়েরি ব্যবহারের মাধ্যমে এটি অর্জন করা সম্ভব।
Pure.CSS এর Breakpoints এবং কাস্টম Responsive Layouts তৈরি
1. Pure.CSS Grid System এবং Breakpoints
Pure.CSS একটি ১২ কলামের গ্রিড সিস্টেম প্রদান করে, যা রেসপন্সিভ ডিজাইন তৈরিতে খুব কার্যকর। গ্রিড সিস্টেমটি ছোট এবং বড় স্ক্রীনের জন্য ওয়েব পেজের লেআউট পরিবর্তন করতে সাহায্য করে। Pure.CSS এ ব্রেকপয়েন্ট বা মিডিয়া কোয়েরির মাধ্যমে এই গ্রিড সিস্টেমটি ব্যবহার করা যায়, যার মাধ্যমে অ্যাপ্লিকেশনটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে ফিট হয়।
Pure.CSS এর ডিফল্ট গ্রিড সিস্টেমে তিনটি ব্রেকপয়েন্ট (বড় স্ক্রীন, ট্যাবলেট, মোবাইল) রয়েছে। এই ব্রেকপয়েন্টগুলো media queries দ্বারা কন্ট্রোল করা হয়।
2. Pure.CSS ব্রেকপয়েন্টস:
Pure.CSS এর ব্রেকপয়েন্টস সাধারণত তিনটি প্রধান সাইজে কাজ করে:
- small (
@media (max-width: 40em)): মোবাইল ডিভাইসের জন্য। - medium (
@media (min-width: 40em)): ট্যাবলেট ডিভাইসের জন্য। - large (
@media (min-width: 64em)): ডেস্কটপ ডিভাইসের জন্য।
এগুলি মোবাইল ফার্স্ট পদ্ধতি অনুসরণ করে, অর্থাৎ প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করা হয় এবং পরে বড় স্ক্রীনগুলোর জন্য ডিজাইন অ্যাডজাস্ট করা হয়।
3. কাস্টম Responsive Layouts তৈরি করা:
Pure.CSS এ কাস্টম রেসপন্সিভ লেআউট তৈরি করতে আপনি নিম্নলিখিত কৌশলগুলি অনুসরণ করতে পারেন:
(i) গ্রিড সিস্টেম ব্যবহার:
Pure.CSS এর ১২ কলামের গ্রিড সিস্টেম ব্যবহার করে সহজেই রেসপন্সিভ লেআউট তৈরি করা যায়। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3">
<div class="panel">Column 3</div>
</div>
</div>
<style>
.panel {
background-color: lightgray;
padding: 20px;
margin: 10px;
text-align: center;
font-size: 18px;
}
</style>
</body>
</html>
এখানে:
- pure-u-1: প্রতিটি কলাম পূর্ণ প্রস্থ নেবে।
- pure-u-sm-1-2: স্ক্রীনের সাইজ sm (মোবাইল) এর জন্য প্রতিটি কলাম অর্ধেক প্রস্থ নিবে।
- pure-u-md-1-3: স্ক্রীনের সাইজ md (ট্যাবলেট) এর জন্য প্রতিটি কলাম এক-তৃতীয়াংশ প্রস্থ নিবে।
এই কাস্টম গ্রিড সিস্টেমটি আপনার ওয়েবসাইটের লেআউটকে রেসপন্সিভ করে তুলবে, এবং এটা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো কাজ করবে।
(ii) কাস্টম মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট তৈরি:
Pure.CSS এর ডিফল্ট মিডিয়া কোয়েরি এবং ব্রেকপয়েন্ট সিস্টেমের সাথে আপনি কাস্টম ব্রেকপয়েন্ট তৈরি করতে পারেন, যাতে আপনার সাইট আরো কাস্টমাইজড এবং ফ্লেক্সিবল হয়।
উদাহরণস্বরূপ, যদি আপনি একটি নতুন ব্রেকপয়েন্ট তৈরি করতে চান, তাহলে আপনাকে একটি নতুন মিডিয়া কোয়েরি ব্যবহার করতে হবে। নিচে একটি কাস্টম মিডিয়া কোয়েরি তৈরি করার উদাহরণ দেওয়া হল:
@media (min-width: 768px) {
/* Tablet and larger devices */
.my-class {
background-color: lightblue;
}
}
@media (min-width: 1024px) {
/* Desktop devices */
.my-class {
background-color: lightgreen;
}
}
এখানে, min-width: 768px এবং min-width: 1024px মিডিয়া কোয়েরির মাধ্যমে আমরা ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য কাস্টম লেআউট তৈরি করেছি।
(iii) Flexbox ব্যবহার:
Pure.CSS এর গ্রিড সিস্টেমের পাশাপাশি আপনি Flexbox ব্যবহার করতে পারেন কাস্টম লেআউট তৈরি করার জন্য, যা অনেক বেশি ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য। Flexbox মাধ্যমে আপনি উপাদানগুলিকে আরও বেশি নিয়ন্ত্রণ করতে পারবেন।
Flexbox উদাহরণ:
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 1</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 2</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 3</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="panel">Item 4</div>
</div>
</div>
এখানে pure-u-1, pure-u-sm-1-2 এবং pure-u-md-1-4 ব্যবহার করে আপনার ওয়েব পেজে চারটি কলাম তৈরি হয়েছে, এবং এটি রেসপন্সিভভাবে কাজ করবে।
Pure.CSS খুবই হালকা এবং ব্যবহারযোগ্য একটি ফ্রেমওয়ার্ক, যা ব্রেকপয়েন্ট এবং কাস্টম রেসপন্সিভ লেআউট তৈরি করার জন্য বেশ কার্যকরী। এর গ্রিড সিস্টেম এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি আপনার ওয়েবসাইটের ডিজাইনকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত করতে পারেন। এই ফ্রেমওয়ার্কটি বিশেষভাবে দ্রুত লোড হওয়া ওয়েবসাইট তৈরির জন্য উপযুক্ত, এবং এটি সিম্পল, ফ্লেক্সিবল এবং কাস্টমাইজযোগ্য লেআউট ডিজাইন করতে সহায়তা করে।
