Pure.CSS ফ্রেমওয়ার্ক ব্যবহার করে Card Grids এবং Responsive Card Design তৈরি করা অত্যন্ত সহজ এবং কার্যকর। Cards হল UI উপাদান যা সাধারণত তথ্য বা কন্টেন্টকে একটি সুষম এবং স্পষ্ট উপস্থাপনার জন্য ব্যবহৃত হয়। রেসপন্সিভ ডিজাইনের মাধ্যমে আপনি ওয়েবসাইটের কন্টেন্ট বা উপাদানগুলো বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শন করতে পারেন। নিচে Pure.CSS ব্যবহার করে Card Grids এবং Responsive Card Design তৈরির প্রক্রিয়া দেওয়া হলো।
1. Card Grids with Pure.CSS
Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে আপনি খুব সহজে Card Grids তৈরি করতে পারেন। গ্রিড সিস্টেমের মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য কাস্টম সাইজে কার্ড সাজাতে পারবেন।
Card Grid Example 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>Pure.CSS Card Grid</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.card {
background-color: #ecf0f1;
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.card img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.card h3 {
color: #3498db;
margin-top: 15px;
}
.card p {
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 1">
<h3>Card 1</h3>
<p>This is a simple card.</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 2">
<h3>Card 2</h3>
<p>This is another card.</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 3">
<h3>Card 3</h3>
<p>This is a third card.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid System: এখানে
pure-g(গ্রিড কন্টেইনার) এবংpure-u-1-3(প্রতিটি কলাম 1/3 প্রস্থ) ব্যবহার করা হয়েছে। এইভাবে ৩টি কার্ড সুষমভাবে স্ক্রীনে প্রদর্শিত হবে। - Card Styling: প্রতিটি কার্ডে
background-color,padding,box-shadowএবংborder-radiusদিয়ে একটি পরিষ্কার এবং আধুনিক ডিজাইন তৈরি করা হয়েছে।
Responsiveness:
- Mobile view: মোবাইলে, প্রতিটি কার্ড পুরো প্রস্থ নেবে (
pure-u-1), যাতে তারা একটির নিচে আরেকটি প্রদর্শিত হয়। - Desktop view: মিডিয়াম স্ক্রীন এবং এর উপরে, প্রতিটি কার্ড 1/3 প্রস্থ নেবে (
pure-u-md-1-3), যাতে ৩টি কার্ড এক লাইনে প্রদর্শিত হয়।
2. Responsive Card Design
Responsive Card Design হল এমন একটি ডিজাইন কৌশল, যেখানে কার্ডের লেআউট বিভিন্ন স্ক্রীন সাইজের জন্য স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয়ে যায়। Pure.CSS গ্রিড এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি খুব সহজেই রেসপন্সিভ কার্ড ডিজাইন তৈরি করতে পারবেন।
Responsive Card Design Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Pure.CSS Card Design</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.card {
background-color: #f4f4f4;
padding: 20px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.card img {
width: 100%;
height: auto;
border-radius: 5px;
}
.card h3 {
color: #2980b9;
margin-top: 15px;
}
.card p {
color: #34495e;
}
/* Responsive design: 2-column grid for medium screens */
@media (min-width: 600px) {
.pure-g {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Responsive design: 3-column grid for large screens */
@media (min-width: 900px) {
.pure-g {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 1">
<h3>Card 1</h3>
<p>This is a responsive card.</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 2">
<h3>Card 2</h3>
<p>This card adjusts based on screen size.</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-3">
<div class="card">
<img src="https://via.placeholder.com/300" alt="Card 3">
<h3>Card 3</h3>
<p>Responsive design is powerful.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid with Media Queries: এখানে
pure-gএবংpure-u-1-2(২টি কলাম),pure-u-md-1-3(৩টি কলাম) ব্যবহার করা হয়েছে। মিডিয়া কোয়েরি ব্যবহার করে ৩টি ভিন্ন লেআউট তৈরি করা হয়েছে:- Mobile view: একক কলাম লেআউট (
pure-u-1-1), যেখানে প্রতিটি কার্ড পূর্ণ প্রস্থ নেবে। - Medium screens (Tablet): ২টি কলাম লেআউট (
grid-template-columns: repeat(2, 1fr)), যেখানে দুটি কার্ড এক লাইনে প্রদর্শিত হবে। - Large screens (Desktop): ৩টি কলাম লেআউট (
grid-template-columns: repeat(3, 1fr)), যেখানে তিনটি কার্ড এক লাইনে প্রদর্শিত হবে।
- Mobile view: একক কলাম লেআউট (
- Responsive Media Queries: এখানে তিনটি মিডিয়া কোয়েরি ব্যবহার করা হয়েছে:
- Small screens (মোবাইল): এক কলাম।
- Medium screens (ট্যাবলেট): দুই কলাম।
- Large screens (ডেস্কটপ): তিন কলাম।
3. Advantages of Responsive Card Design
- Scalability: বিভিন্ন স্ক্রীন সাইজের জন্য একাধিক লেআউট তৈরি করতে পারবেন।
- Consistency: একক কার্ড ডিজাইন ব্যবহার করে আপনি ওয়েব পেজের কন্টেন্টকে একরকম সাজাতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।
- Mobile-Friendly: মোবাইল-ফার্স্ট ডিজাইন নিশ্চিত করে যে ওয়েবসাইটটি মোবাইল ডিভাইসে সুন্দরভাবে কাজ করবে।
- Flexibility: বিভিন্ন মিডিয়া কোয়েরি এবং গ্রিড সিস্টেমের মাধ্যমে আপনি গ্রিডের কলাম সংখ্যা সহজেই পরিবর্তন করতে পারবেন।
Pure.CSS এর গ্রিড সিস্টেম এবং মিডিয়া কোয়েরি ব্যবহার করে আপনি খুব সহজেই Responsive Card Design তৈরি করতে পারেন। এটি আপনাকে আপনার ওয়েবসাইটের ডিজাইনকে মোবাইল এবং ডেস্কটপের জন্য সুন্দরভাবে উপস্থাপন করতে সহায়তা করে। এর মাধ্যমে আপনি যেকোনো স্ক্রীনে টেবিল, লিস্ট বা অন্যান্য কন্টেন্টের জন্য রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারবেন।
Read more
