Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক, যা দ্রুত এবং সহজে ওয়েব ডিজাইন তৈরি করতে সহায়ক। Card Layouts এবং Content Styling হল দুটি সাধারণ ওয়েব ডিজাইন উপাদান যা প্রায় সব ওয়েব অ্যাপ্লিকেশনে ব্যবহৃত হয়। Pure.CSS ব্যবহার করে, আপনি সহজে সুন্দর এবং রেসপন্সিভ কার্ড লেআউট এবং কনটেন্ট স্টাইলিং তৈরি করতে পারেন। এখানে Card Layouts এবং Content Styling তৈরি করার কিছু সহজ কৌশল আলোচনা করা হলো।
1. Card Layouts in Pure.CSS
Card Layouts হল ডিজাইনের এমন একটি স্টাইল যা তথ্য উপস্থাপনের জন্য ছোট-বড় ব্লক (কার্ড) ব্যবহার করে। Pure.CSS এর মাধ্যমে আপনি সহজেই সুশৃঙ্খল এবং রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন। Flexbox এবং Grid System ব্যবহার করে আপনি এই কার্ডগুলো সাজাতে পারেন।
Basic Card Layout Using 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 Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
margin: 10px;
}
.card img {
max-width: 100%;
border-radius: 5px;
}
.card h3 {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
.card p {
font-size: 16px;
color: #555;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 1</h3>
<p>This is some information about the card content. You can add details here.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 2</h3>
<p>This is another card with a different title and content.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 3</h3>
<p>This card has some unique content that fits the layout perfectly.</p>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image">
<h3>Card Title 4</h3>
<p>More information for this card that showcases a responsive layout.</p>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-g: এটি গ্রিড কন্টেইনার তৈরি করে, যা কার্ডগুলোকে সঠিকভাবে সাজাতে সহায়ক।pure-u-1,pure-u-sm-1-2,pure-u-md-1-4: এগুলি গ্রিড আইটেমের ক্লাস যা স্ক্রীন সাইজের ভিত্তিতে কার্ডগুলোর প্রস্থ কাস্টমাইজ করে। যেমন, মোবাইল স্ক্রীনে প্রতিটি কার্ড পূর্ণ প্রস্থ নিবে, আর মিডিয়াম এবং ডেস্কটপ স্ক্রীনে ৪টি কার্ড এক লাইনে আসবে।- Card Styling: কার্ডের জন্য border, padding, border-radius, এবং box-shadow ব্যবহার করে একটি সুন্দর, শ্যাডোসহ ডিজাইন তৈরি করা হয়েছে।
2. Content Styling in Pure.CSS
Content Styling হল টেক্সট এবং অন্যান্য কন্টেন্ট উপাদানকে সুন্দর এবং পড়তে সুবিধাজনকভাবে উপস্থাপন করা। Pure.CSS টেক্সট এবং কন্টেন্ট স্টাইলিংয়ের জন্য কিছু বেসিক স্টাইল প্রদান করে, তবে আপনি এটি কাস্টমাইজ করে আরও উন্নত ডিজাইন তৈরি করতে পারেন।
Basic Content Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Content Styling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.content {
padding: 20px;
background-color: #f4f4f4;
border-radius: 5px;
margin: 20px;
}
.content h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.content p {
font-size: 16px;
color: #555;
line-height: 1.6;
}
.content a {
color: #0078d4;
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content ul {
list-style-type: square;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="content">
<h2>Content Title</h2>
<p>This is a sample paragraph for content styling. The text is styled using Pure.CSS and some custom CSS properties.</p>
<a href="#">Read more</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
content: এটি কন্টেন্ট ব্লকের জন্য কাস্টম স্টাইল প্রয়োগ করে, যেমন প্যাডিং, ব্যাকগ্রাউন্ড কালার, এবং মার্জিন।h2: টাইটেল স্টাইল করার জন্য ফন্ট সাইজ এবং বোল্ড ব্যবহার করা হয়েছে।p: প্যারাগ্রাফ টেক্সটের জন্য ফন্ট সাইজ, কালার এবং লাইন হাইট কাস্টমাইজ করা হয়েছে, যাতে এটি আরও পড়তে সহজ হয়।a: লিঙ্কের জন্য স্টাইলিং এবং হোভার স্টাইল করা হয়েছে।
3. Responsive Card Layout
Pure.CSS-এ Grid এবং Flexbox সিস্টেম ব্যবহার করে আপনি রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন, যা ছোট স্ক্রীনে কার্ডগুলো একে একে স্ট্যাক হবে এবং বড় স্ক্রীনে এক লাইনে সাজানো থাকবে।
Responsive Card Layout Using Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Cards with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-g {
display: flex;
flex-wrap: wrap;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
margin: 10px;
flex: 1 0 48%; /* 2 cards per row */
}
@media (max-width: 768px) {
.card {
flex: 1 0 100%; /* Single card per row on small screens */
}
}
</style>
</head>
<body>
<div class="pure-g">
<div class="card">
<h3>Card 1</h3>
<p>This is the content of card 1.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the content of card 2.</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>This is the content of card 3.</p>
</div>
<div class="card">
<h3>Card 4</h3>
<p>This is the content of card 4.</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex: 1 0 48%: এই স্টাইলটি কার্ডগুলোকে ২টি কলামে ভাগ করবে (৪৮% প্রস্থে)। বড় স্ক্রীনে ২টি কার্ড এক লাইনে থাকবে।@media (max-width: 768px): ছোট স্ক্রীনে (768px বা তার নিচে), কার্ডগুলো একে একে পুরো প্রস্থে (১০০%) সজ্জিত হবে, যাতে এটি মোবাইল-ফ্রেন্ডলি হয়।
Pure.CSS আপনাকে card layouts এবং content styling তৈরি করতে সহজ এবং দ্রুত সমাধান প্রদান করে। Grid system এবং Flexbox ব্যবহার করে আপনি রেসপন্সিভ কার্ড লেআউট তৈরি করতে পারেন, এবং কাস্টম স্টাইলিংয়ের মাধ্যমে আপনার কন্টেন্টকে আকর্ষণীয় ও পড়তে সহজ করে তুলতে পারেন। Pure.CSS-এর সিম্পল ক্লাস এবং গ্রিড সিস্টেম ব্যবহার করে আপনি অনেক কম কোডে সাশ্রয়ী এবং সুন্দর ওয়েব ডিজাইন তৈরি করতে পারবেন।
Read more
