Pure.CSS দিয়ে একটি Responsive Grid তৈরি করা খুবই সহজ, কারণ এটি একটি সহজ এবং লাইটওয়েট CSS ফ্রেমওয়ার্ক যা গ্রিড লেআউট সিস্টেম প্রদান করে। Pure.CSS এর গ্রিড সিস্টেম Flexbox এবং CSS Grid সাপোর্ট করে, তবে এর মধ্যে Pure Grid সিস্টেম ব্যবহার করা হয়, যা দ্রুত এবং সহজে রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে সহায়তা করে।
Pure.CSS Responsive Grid তৈরি করার জন্য পদক্ষেপ:
- Pure.CSS ইনক্লুড করা: প্রথমে আপনাকে Pure.CSS ফ্রেমওয়ার্ক ইনক্লুড করতে হবে। আপনি CDN বা লোকাল ফাইল ব্যবহার করতে পারেন। এখানে CDN ব্যবহারের উদাহরণ দেওয়া হলো:
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
- Grid Layout তৈরি করা: Pure.CSS এর গ্রিড সিস্টেমের জন্য
pure-gক্লাস ব্যবহার করা হয়। এর মধ্যেpure-u-*ক্লাস ব্যবহার করে কোলাম তৈরি করা হয়।
Responsive Grid উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles */
.pure-u-1-2 {
background-color: #f4f4f4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
.pure-u-1-3 {
background-color: #d4d4d4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
.pure-u-1-4 {
background-color: #b4b4b4;
padding: 20px;
margin: 5px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<!-- Column 1: 50% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-2">Column 1</div>
<!-- Column 2: 50% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-2">Column 2</div>
</div>
<div class="pure-g">
<!-- Column 1: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 1</div>
<!-- Column 2: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 2</div>
<!-- Column 3: 33% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-3">Column 3</div>
</div>
<div class="pure-g">
<!-- Column 1: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 1</div>
<!-- Column 2: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 2</div>
<!-- Column 3: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 3</div>
<!-- Column 4: 25% width for medium screen and larger -->
<div class="pure-u-1 pure-u-md-1-4">Column 4</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS Grid সিস্টেম:
pure-g: এটি গ্রিড কন্টেইনারের ক্লাস যা গ্রিডের মধ্যে বিভিন্ন উপাদানকে সাজানোর জন্য ব্যবহৃত হয়।pure-u-1,pure-u-md-1-2,pure-u-md-1-3,pure-u-md-1-4: এই ক্লাসগুলি বিভিন্ন স্ক্রীনে (বিশেষ করে মিডিয়াম স্ক্রীন এবং তার উপরের স্ক্রীন) উপাদানগুলির সাইজ এবং কলাম স্পেসিফাই করতে ব্যবহৃত হয়।pure-u-1: পুরো (100%) প্রস্থ দেবে (অর্থাৎ এক কলামে সম্পূর্ণ জায়গা দেবে)।pure-u-md-1-2: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 50% প্রস্থ নিবে।pure-u-md-1-3: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 33% প্রস্থ নিবে।pure-u-md-1-4: মিডিয়াম এবং বড় স্ক্রীনে কলামটি 25% প্রস্থ নিবে।
- Responsive Design: Pure.CSS এর গ্রিড সিস্টেম মোবাইল-ফার্স্ট এবং রেসপনসিভ। অর্থাৎ, যখন স্ক্রীনের আকার ছোট হবে (যেমন মোবাইল), তখন প্রতিটি কলাম পূর্ণ প্রস্থে (100%) প্রদর্শিত হবে, এবং বড় স্ক্রীনে (যেমন ডেস্কটপ) এটি সঠিকভাবে বিভাগিত হবে (50%, 33%, বা 25%)।
- Custom Styles:
.pure-u-1-2,.pure-u-1-3,.pure-u-1-4: এখানে আমি CSS ব্যবহার করে প্রতিটি কলামের প্যাডিং, ব্যাকগ্রাউন্ড এবং টেক্সট অ্যালাইনমেন্ট কনফিগার করেছি যাতে এটি আরও সুন্দরভাবে প্রদর্শিত হয়।
Pure.CSS এর গ্রিড সিস্টেমের সুবিধা:
- Responsive: মোবাইল থেকে ডেস্কটপ পর্যন্ত স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে কলামগুলি অ্যাডজাস্ট হবে।
- Lightweight: Pure.CSS অত্যন্ত লাইটওয়েট ফ্রেমওয়ার্ক, যা ডেভেলপারদের কোডের অপ্রয়োজনীয় ভারী অংশ থেকে মুক্ত রাখে।
- Flexible: আপনি চাইলে কোনো একক কলাম বা একাধিক কলাম ব্যবহার করতে পারেন, এবং এটি অন্যান্য CSS ফ্রেমওয়ার্কের মতো স্টাইলিংয়ের জন্য অতিরিক্ত কনফিগারেশন ছাড়াই কাজ করে।
Pure.CSS দিয়ে রেসপনসিভ গ্রিড তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। এটি একটি লাইটওয়েট এবং মিনিমাল CSS ফ্রেমওয়ার্ক যা আপনাকে ছোট এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Pure.CSS Grid সিস্টেম আপনার ওয়েব পেজের বিভিন্ন স্ক্রীনে সঠিকভাবে উপাদানগুলি সাজাতে সহায়ক এবং এটির মাধ্যমে আপনি কার্যকরী এবং রেসপনসিভ ওয়েব পেজ তৈরি করতে পারবেন।
Content added By
Read more
