Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা খুব সহজেই ওয়েব পেজের ফর্ম লেআউট তৈরি করতে সাহায্য করে। ফর্মগুলির জন্য গ্রিড-বেসড লেআউট ব্যবহার করলে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির মধ্যে সঠিকভাবে স্থান ভাগ করা যায় এবং ডিজাইন আরও রেসপন্সিভ হয়। Pure.CSS-এর গ্রিড সিস্টেমটি এরকম গ্রিড-ভিত্তিক ফর্ম তৈরি করতে সহায়ক।
Form Layouts in Pure.CSS
Pure.CSS ফ্রেমওয়ার্কের সাহায্যে, আপনি খুব সহজেই ফর্ম লেআউট তৈরি করতে পারবেন, যেখানে বিভিন্ন ইনপুট ফিল্ড, বাটন এবং লেবেল সঠিকভাবে সাজানো থাকবে। Pure.CSS একটি সহজ এবং সোজা পদ্ধতিতে বিভিন্ন ফর্ম এলিমেন্ট স্টাইল করে, যেমন input fields, labels, buttons, select fields ইত্যাদি।
1. Basic Form Layout in Pure.CSS
Pure.CSS এর pure-form ক্লাসের মাধ্যমে আপনি একটি স্টাইলিশ এবং ক্লিন ফর্ম তৈরি করতে পারেন। এর মধ্যে বিভিন্ন বেসিক ফর্ম এলিমেন্ট স্টাইল করা থাকে, যেমন ইনপুট ফিল্ড, টেক্সট এরিয়া, সিলেক্ট ফিল্ড এবং সাবমিট বাটন।
উদাহরণ: Basic Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Form Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form">
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Your Name" class="pure-input-1-2">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Your Email" class="pure-input-1-2">
<label for="message">Message:</label>
<textarea id="message" placeholder="Your Message" class="pure-input-1-2"></textarea>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-form: এটি একটি প্রি-ডিফাইনড ক্লাস যা ফর্মের জন্য বেসিক স্টাইলিং প্রয়োগ করে।pure-input-1-2: এটি ইনপুট ফিল্ড এবং টেক্সট এরিয়ার জন্য এক্সপ্যান্সিভ ক্লাস, যা তাদের সঠিক প্রস্থে প্রয়োগ করে। 1-2 মানে, ইনপুট ফিল্ডটি 50% প্রস্থের হবে।pure-button: এটি বাটনের জন্য একটি ডিফল্ট স্টাইল প্রদান করে।
2. Grid-Based Form Layouts in Pure.CSS
Grid-Based Forms গ্রিড লেআউট ব্যবহার করে ফর্মের এলিমেন্টগুলির মধ্যে সঠিকভাবে স্থান ভাগ করে, যা রেসপন্সিভ ডিজাইন তৈরিতে সাহায্য করে। Pure.CSS এ Grid System ব্যবহার করে, আপনি ফর্মে বিভিন্ন ইনপুট ফিল্ড এবং অন্যান্য এলিমেন্টের জন্য সঠিক অবস্থান সেট করতে পারেন।
Pure.CSS-এ Grid ব্যবহারের জন্য pure-g এবং pure-u-* ক্লাস ব্যবহার করা হয়। এখানে pure-g হল গ্রিড কন্টেইনার এবং pure-u-* হল গ্রিড আইটেম (এলিমেন্ট) যা কলাম তৈরি করে।
উদাহরণ: Grid-Based Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form pure-g">
<fieldset class="pure-u-1">
<legend>Contact Information</legend>
<div class="pure-u-1 pure-u-md-1-2">
<label for="name">Name:</label>
<input type="text" id="name" class="pure-input-1-1" placeholder="Enter your name">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="email">Email:</label>
<input type="email" id="email" class="pure-input-1-1" placeholder="Enter your email">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="phone">Phone:</label>
<input type="tel" id="phone" class="pure-input-1-1" placeholder="Enter your phone number">
</div>
<div class="pure-u-1">
<label for="message">Message:</label>
<textarea id="message" class="pure-input-1-1" placeholder="Your message"></textarea>
</div>
<div class="pure-u-1">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-g: এই ক্লাসটি গ্রিড কন্টেইনার তৈরি করে, যেখানে সব ফর্ম এলিমেন্টগুলি রাখা হবে।pure-u-1: এই ক্লাসটি পূর্ণ প্রস্থের উপাদান তৈরি করে।pure-u-md-1-2: এটি গ্রিডের জন্য মিডিয়াম স্ক্রীন সাইজে 50% প্রস্থ উপাদান তৈরি করবে, অর্থাৎ ২টি ইনপুট ফিল্ড পাশে পাশে চলে আসবে।pure-input-1-1: এটি ইনপুট ফিল্ডগুলিকে পুরো প্রস্থে (100%) তৈরি করবে।
3. Responsive Grid-Based Form
Pure.CSS-এর গ্রিড সিস্টেম রেসপন্সিভ, যার ফলে এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত। আপনি pure-u-* ক্লাসের মাধ্যমে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির প্রস্থ পরিবর্তন করতে পারেন।
উদাহরণ: Responsive Grid Form
<!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 Grid Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form pure-g">
<fieldset class="pure-u-1">
<legend>Registration Form</legend>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" class="pure-input-1-1" placeholder="Enter your first name">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" class="pure-input-1-1" placeholder="Enter your last name">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="email">Email:</label>
<input type="email" id="email" class="pure-input-1-1" placeholder="Enter your email">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="phone">Phone:</label>
<input type="tel" id="phone" class="pure-input-1-1" placeholder="Enter your phone number">
</div>
<div class="pure-u-1">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-u-sm-1-2: ছোট স্ক্রীনে (যেমন মোবাইল) ইনপুট ফিল্ডটি পূর্ণ প্রস্থে থাকবে।pure-u-md-1-4: বড় স্ক্রীনে (যেমন ডেস্কটপ) ইনপুট ফিল্ডটি ২৫% প্রস্থে থাকবে এবং মোট ৪টি ইনপুট ফিল্ড এক লাইনে সাজানো হবে।
Pure.CSS ফ্রেমওয়ার্কের সাহায্যে Grid-Based Forms এবং Form Layouts তৈরি করা সহজ এবং দ্রুত হয়। Grid সিস্টেম ব্যবহার করে, আপনি রেসপন্সিভ ফর্ম ডিজাইন করতে পারেন যা মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত। pure-u-* ক্লাসের মাধ্যমে আপনি ফর্ম উপাদানগুলির প্রস্থ এবং সজ্জা কাস্টমাইজ করতে পারবেন। Pure.CSS আপনাকে একটি স্টাইলিশ, এক্সটেনসিবল এবং রেসপন্সিভ ফর্ম লেআউট তৈরি করতে সাহায্য করে।
Read more
