Pure.CSS একটি ছোট, দ্রুত এবং লাইটওয়েট CSS ফ্রেমওয়ার্ক যা রেসপন্সিভ ডিজাইন তৈরি করতে সহজ করে তোলে। Pure.CSS ব্যবহার করে ওয়েব অ্যাপ্লিকেশন বা সাইটের রেসপন্সিভিটি নিশ্চিত করা সম্ভব এবং এর জন্য কিছু গুরুত্বপূর্ণ best practices রয়েছে। এগুলি অনুসরণ করে আপনি আপনার Pure.CSS অ্যাপ্লিকেশনটিকে মোবাইল-ফার্স্ট, ফ্লেক্সিবল, এবং স্ক্রীন সাইজের সাথে উপযোগী তৈরি করতে পারবেন।
1. Mobile-First Design
Pure.CSS একটি mobile-first ফ্রেমওয়ার্ক নয়, তবে আপনি যখন Pure.CSS ব্যবহার করেন, তখন mobile-first design নীতিমালা অনুসরণ করা একটি ভালো পদ্ধতি। এতে, আপনি প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করবেন এবং তারপর বড় স্ক্রীনের জন্য মিডিয়া কোয়ারি তৈরি করবেন।
Mobile-First Approach Example:
Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে মোবাইল ফার্স্ট লেআউট তৈরি করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Layout</title>
<style>
/* Mobile First Design */
.container {
padding: 10px;
}
.column {
width: 100%; /* Full width on mobile */
padding: 10px;
}
/* Larger Screen Sizes */
@media (min-width: 600px) {
.column {
width: 48%; /* 2 columns on larger screens */
margin: 1%;
}
}
@media (min-width: 900px) {
.column {
width: 32%; /* 3 columns on even larger screens */
}
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Mobile-first: প্রথমে মোবাইল ডিভাইসে এক কলাম (full width) রাখা হয়েছে।
@media (min-width: 600px): 600px এর পর দুই কলাম তৈরি হবে।@media (min-width: 900px): 900px এর পর তিনটি কলাম থাকবে।
2. Use the Grid System
Pure.CSS এর Grid System রেসপন্সিভ ওয়েব ডিজাইনের জন্য খুবই উপযোগী। এটি ১২ কলামের গ্রিড সিস্টেম ব্যবহার করে, যা আপনার ডিজাইনকে আরও ফ্লেক্সিবল এবং রেসপন্সিভ বানাতে সাহায্য করে।
Grid System Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Grid</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-1 pure-u-md-1-2">Column 1</div>
<div class="pure-u-1-1 pure-u-md-1-2">Column 2</div>
</div>
</body>
</html>
ব্যাখ্যা:
pure-g: এটি গ্রিড কন্টেইনারের ক্লাস, যা গ্রিডের মধ্যে ব্যবধান রাখে।pure-u-1-1: মোবাইল স্ক্রীনে পুরো প্রস্থ (100%) নিবে।pure-u-md-1-2: মিডিয়াম স্ক্রীনে কলাম দুটি ৫০% প্রস্থ নিবে (মোট ২ কলাম)।
এভাবে, গ্রিড সিস্টেম ব্যবহার করে সহজেই রেসপন্সিভ লেআউট তৈরি করা সম্ভব।
3. Fluid Layouts
Fluid layouts এমন লেআউট যেখানে প্রস্থ percentage-based হয়। Pure.CSS ব্যবহার করে, আপনি একটি ফ্লুইড লেআউট তৈরি করতে পারেন যা বিভিন্ন স্ক্রীনে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে।
Fluid Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Fluid Layout</title>
<style>
.container {
width: 80%; /* Fluid width */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fluid Layout Example</h1>
</header>
<section>
<p>This layout will adjust based on the screen width.</p>
</section>
</div>
</body>
</html>
ব্যাখ্যা:
width: 80%: কন্টেন্টের প্রস্থ স্ক্রীনের ৮০% হবে। এতে স্ক্রীন সাইজের পরিবর্তনের সাথে কন্টেন্টের প্রস্থও পরিবর্তিত হবে, যা fluid layout তৈরি করে।
4. Media Queries
Pure.CSS সিএসএস মিডিয়া কোয়ারি সমর্থন করে, যা আপনাকে বিভিন্ন ডিভাইসের জন্য বিভিন্ন স্টাইল প্রয়োগ করতে সাহায্য করে। আপনি বিভিন্ন স্ক্রীন সাইজের জন্য স্টাইল পরিবর্তন করতে মিডিয়া কোয়ারি ব্যবহার করতে পারেন।
Media Queries Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Media Queries</title>
<style>
body {
background-color: lightblue;
}
/* For screens wider than 600px */
@media (min-width: 600px) {
body {
background-color: lightgreen;
}
}
/* For screens wider than 1000px */
@media (min-width: 1000px) {
body {
background-color: lightcoral;
}
}
</style>
</head>
<body>
<h1>Responsive Design with Media Queries</h1>
<p>The background color changes based on the screen width.</p>
</body>
</html>
ব্যাখ্যা:
- Default style: স্ক্রীনের সাইজ ৬০০px এর নিচে থাকলে ব্যাকগ্রাউন্ড লাইটব্লু থাকবে।
@media (min-width: 600px): ৬০০px এর পর ব্যাকগ্রাউন্ড লাইটগ্রীন হয়ে যাবে।@media (min-width: 1000px): ১০০০px এর পর ব্যাকগ্রাউন্ড লাইটকরাল হয়ে যাবে।
5. Use pure-table-responsive for Tables
টেবিলগুলোও রেসপন্সিভ হতে পারে। Pure.CSS তে pure-table-responsive ক্লাস ব্যবহার করে আপনি টেবিলের জন্য একটি রেসপন্সিভ ডিজাইন তৈরি করতে পারেন, যেখানে ছোট স্ক্রীনে টেবিল স্ক্রল হবে।
Responsive Table Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Table</title>
</head>
<body>
<div class="pure-table-responsive">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
pure-table-responsive: এই ক্লাসটি টেবিলটিকে স্ক্রিন সাইজ ছোট হওয়ার সাথে সাথে রেসপন্সিভ করে। মোবাইল ডিভাইসে এটি স্ক্রল হবে।
Pure.CSS ব্যবহার করে রেসপন্সিভ ওয়েব ডিজাইন তৈরি করা সহজ এবং দ্রুত। আপনি mobile-first ডিজাইন, grid system, media queries, fluid layouts, এবং responsive tables ব্যবহার করে একটি সিম্পল কিন্তু কার্যকরী রেসপন্সিভ ওয়েবসাইট তৈরি করতে পারেন। Pure.CSS আপনাকে দ্রুত এবং দক্ষতার সাথে আপনার ডিজাইনকে বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করতে সহায়তা করবে।
Read more
