Pure.CSS একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা Media Queries এবং Breakpoints কনফিগার করতে খুবই সহজ এবং কার্যকরী। Media Queries ওয়েব পেজের বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির লেআউট এবং ডিজাইন কনফিগার করতে ব্যবহৃত হয়। এটি একটি গুরুত্বপূর্ণ পদ্ধতি রেসপনসিভ ওয়েব ডিজাইন তৈরির জন্য, যার মাধ্যমে আপনি একাধিক ডিভাইস (মোবাইল, ট্যাবলেট, ডেস্কটপ) সাপোর্ট করতে পারেন।
Pure.CSS এবং Media Queries:
Pure.CSS-এ রেসপনসিভ ডিজাইন করার জন্য আপনাকে Media Queries ব্যবহার করতে হবে। Pure.CSS এর ডিফল্ট গ্রিড সিস্টেম এবং অন্যান্য উপাদানগুলি বিভিন্ন স্ক্রীনে সুইচিং করার জন্য সহজ এবং সোজা।
Media Queries এবং Breakpoints কনফিগার করা:
Pure.CSS ইতিমধ্যে কিছু প্রিসেট মিডিয়া কুয়েরি প্রদান করে, যেমন:
- Mobile: ছোট স্ক্রীন ডিভাইসের জন্য (যেমন স্মার্টফোন)
- Tablet: ট্যাবলেট স্ক্রীনের জন্য
- Desktop: ডেস্কটপ স্ক্রীনের জন্য
এই মিডিয়া কুয়েরিগুলি আপনাকে খুব সহজে রেসপনসিভ ওয়েবসাইট তৈরি করতে সাহায্য করবে।
1. Default Breakpoints in Pure.CSS:
Pure.CSS এর ডিফল্ট মিডিয়া কুয়েরি ব্রেকপয়েন্টগুলি হলো:
- Mobile (max-width: 600px): ছোট স্ক্রীন ডিভাইসের জন্য।
- Tablet (max-width: 768px): ট্যাবলেট স্ক্রীনের জন্য।
- Desktop (min-width: 768px): বড় স্ক্রীন ডিভাইসের জন্য।
আপনি এই ডিফল্ট ব্রেকপয়েন্টগুলি কাস্টমাইজ করতে পারেন।
2. Pure.CSS ব্যবহার করে Media Queries কনফিগার করা:
এখানে একটি উদাহরণ দেওয়া হলো যেখানে Pure.CSS এর Grid System এবং Media Queries ব্যবহার করা হয়েছে রেসপনসিভ লেআউট তৈরি করতে।
Example: Media Queries with 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 Design with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles for Responsive Layout */
.pure-g {
margin: 0;
padding: 0;
}
.pure-u-1 {
background-color: #4CAF50;
padding: 20px;
color: white;
text-align: center;
}
.pure-u-1-2 {
background-color: #8BC34A;
padding: 20px;
color: white;
text-align: center;
}
/* Media Queries for Responsive Design */
/* Mobile devices */
@media screen and (max-width: 600px) {
.pure-u-1 {
font-size: 16px;
}
.pure-u-1-2 {
font-size: 14px;
}
}
/* Tablets */
@media screen and (max-width: 768px) {
.pure-u-1-2 {
font-size: 18px;
}
}
/* Desktop devices */
@media screen and (min-width: 769px) {
.pure-u-1-2 {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">
<h1>Header - Full Width</h1>
<p>This is a full-width section</p>
</div>
<div class="pure-u-1-2">
<h2>Column 1 - Half Width</h2>
<p>This is a half-width section</p>
</div>
<div class="pure-u-1-2">
<h2>Column 2 - Half Width</h2>
<p>This is another half-width section</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid System:
.pure-gক্লাস গ্রিড কন্টেইনারের জন্য ব্যবহার করা হয়েছে।.pure-u-1এবং.pure-u-1-2ক্লাসগুলি গ্রিড আইটেমের জন্য ব্যবহার করা হয়েছে, যেখানে প্রথমটি সম্পূর্ণ প্রস্থ (100%) নেয় এবং দ্বিতীয়টি অর্ধেক প্রস্থ (50%) নিয়ে থাকে।
- Media Queries:
- Mobile Devices (max-width: 600px): এখানে, মোবাইল স্ক্রীনে কন্টেন্টের ফন্ট সাইজ ছোট করা হয়েছে।
- Tablets (max-width: 768px): ট্যাবলেট স্ক্রীনে কলামের ফন্ট সাইজ বড় করা হয়েছে।
- Desktop Devices (min-width: 769px): ডেস্কটপ স্ক্রীনে কলামের ফন্ট সাইজ আরও বড় করা হয়েছে।
3. Customizing Breakpoints for Your Own Needs:
Pure.CSS-এ মিডিয়া কুয়েরি ব্রেকপয়েন্টগুলি কাস্টমাইজ করতে, আপনি নতুন ব্রেকপয়েন্টগুলি সন্নিবেশিত করতে পারেন। উদাহরণস্বরূপ, আপনি চাইলে আরো ছোট স্ক্রীনের জন্য (যেমন 320px) একটি মিডিয়া কুয়েরি যোগ করতে পারেন:
/* Extra Small Devices (max-width: 320px) */
@media screen and (max-width: 320px) {
.pure-u-1 {
font-size: 12px;
}
}
4. Responsive Grid with Offsets (Optional):
আপনি যদি offsets ব্যবহার করতে চান, তাহলে pure-u-offset-1-2 বা অন্য কোন অফসেট ক্লাস ব্যবহার করে একটি গ্রিড আইটেমকে এক্সট্রা স্পেস দিতে পারেন।
<div class="pure-g">
<div class="pure-u-1-2 pure-u-offset-1-4">
<h2>Column with Offset</h2>
<p>This column is offset from the left</p>
</div>
</div>
এখানে, pure-u-offset-1-4 ক্লাসটি কলামটিকে বাকি গ্রিড থেকে এক চতুর্থাংশ সরিয়ে নেবে, যা কিছু ফাঁকা জায়গা তৈরি করবে।
Pure.CSS ব্যবহার করে Media Queries এবং Breakpoints কনফিগার করা খুবই সহজ এবং কার্যকরী। Pure.CSS এর ডিফল্ট গ্রিড সিস্টেম এবং মিডিয়া কুয়েরি সমর্থন আপনাকে রেসপনসিভ ডিজাইন তৈরি করতে সহায়তা করে, যা আপনার ওয়েবসাইটকে বিভিন্ন ডিভাইস এবং স্ক্রীনে সুন্দরভাবে কাজ করার সুযোগ দেয়। আপনি সহজেই কাস্টম মিডিয়া কুয়েরি এবং ব্রেকপয়েন্ট তৈরি করতে পারেন, যা আপনার প্রকল্পের জন্য উপযুক্ত।
Read more
