Pure.CSS হল একটি ছোট, দ্রুত এবং সহজ CSS ফ্রেমওয়ার্ক, যা বিশেষভাবে ওয়েব অ্যাপ্লিকেশন এবং ওয়েব পেজ ডিজাইনের জন্য তৈরি করা হয়েছে। এটি Yahoo! এর Yahoo! Labs দল দ্বারা তৈরি করা হয়েছে এবং এটি একটি modular ফ্রেমওয়ার্ক, যার ফলে ডেভেলপাররা তাদের প্রয়োজনীয় CSS কম্পোনেন্টগুলো নির্বাচন করে ব্যবহার করতে পারেন। Pure.CSS মূলত একটি "minimalistic" CSS ফ্রেমওয়ার্ক, যা ছোট এবং সহজ ব্যবহারযোগ্য, তবে অত্যন্ত কার্যকরী।
Pure.CSS এর বৈশিষ্ট্যসমূহ
- Modular Design: Pure.CSS একটি modular ফ্রেমওয়ার্ক, অর্থাৎ আপনি কেবলমাত্র আপনার প্রয়োজনীয় কম্পোনেন্ট ইনক্লুড করতে পারেন। আপনি যদি কেবল grids বা forms ব্যবহার করতে চান, তাহলে শুধু সেই সেগমেন্টটি ইনক্লুড করবেন, পুরো ফ্রেমওয়ার্কটিকে না। এতে আপনি যতো কম কোড লোড করবেন, অ্যাপ্লিকেশন ততো দ্রুত কাজ করবে।
- Small Size: Pure.CSS খুবই ছোট আকারের ফ্রেমওয়ার্ক (প্রায় 4KB), যা ওয়েব পেজ লোড স্পিড কমাতে সাহায্য করে। এটি সাধারণত অন্যান্য বৃহৎ CSS ফ্রেমওয়ার্কের তুলনায় অনেক ছোট এবং দ্রুত।
- Responsive Design: Pure.CSS ইনবিল্ট responsive grid সিস্টেমের সাথে আসে, যা মোবাইল এবং ডেস্কটপ ব্রাউজারের জন্য ডিজাইন কনটেন্টকে সঠিকভাবে উপস্থাপন করতে সক্ষম। এর গ্রিড সিস্টেম দিয়ে আপনি বিভিন্ন স্ক্রীন সাইজে ওয়েব পেজগুলি সুন্দরভাবে অডজাস্ট করতে পারবেন।
- No JavaScript Dependencies: Pure.CSS শুধুমাত্র CSS ফাইল এবং ক্লাস নিয়ে কাজ করে এবং এতে কোনো JavaScript এর প্রয়োজন হয় না। এর ফলে এটি ওয়েব পেজে হালকা এবং দ্রুত কাজ করে।
- Cross-Browser Compatibility: Pure.CSS সর্বশেষ ব্রাউজারগুলির জন্য ক্রস-ব্রাউজার সমর্থন প্রদান করে, যেমন Chrome, Firefox, Safari এবং Internet Explorer। এর ফলে আপনার ওয়েব পেজ সকল ব্রাউজারে সমানভাবে কাজ করবে।
- Easy Customization: Pure.CSS খুবই কাস্টমাইজেবল, আপনি নিজের প্রয়োজন অনুযায়ী ফ্রেমওয়ার্কের স্টাইলগুলি পরিবর্তন করতে পারেন। এটি less বা sass ফরম্যাটে স্টাইলশীট ব্যবহার করে কাস্টমাইজ করতে সহায়তা করে।
Pure.CSS এর কম্পোনেন্টস:
- Grid System: Pure.CSS একটি 12-কোলাম গ্রিড সিস্টেম প্রদান করে, যা অত্যন্ত সহজ এবং লাইটওয়েট। এটি সিএসএস মিডিয়া কুয়েরি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে অ্যাডজাস্ট করতে সক্ষম।
- Forms: Pure.CSS এর মধ্যে রয়েছে সহজ এবং স্টাইল করা ফর্ম কম্পোনেন্টস, যেমন ইনপুট ফিল্ড, বাটন, চেকবক্স ইত্যাদি। এগুলির জন্য আপনি কাস্টম স্টাইলিং অ্যাপ্লাই করতে পারেন।
- Tables: Pure.CSS টেবিলের জন্য সুন্দর এবং পরিচ্ছন্ন স্টাইল প্রদান করে। টেবিলগুলো দেখতে প্রফেশনাল এবং সুগম হয়।
- Buttons: এটি বিভিন্ন ধরনের বাটনের স্টাইলিং প্রদান করে যা সহজেই ব্যবহার করা যায় এবং কাস্টমাইজ করা যায়।
- Menus: Pure.CSS সিম্পল এবং দ্রুত ড্রপডাউন মেনু তৈরি করতে সাহায্য করে। আপনি ইমেজ বা আইকনও যোগ করতে পারেন।
- Typographies: Pure.CSS প্রাথমিকভাবে টাইপোগ্রাফি স্টাইলিং এর জন্য পিডিএফ, হেডিংস এবং প্যারাগ্রাফ স্টাইলিং সরবরাহ করে।
Pure.CSS ব্যবহার কেন করবেন?
- Lightweight: Pure.CSS অন্য CSS ফ্রেমওয়ার্কের তুলনায় অনেক ছোট, ফলে আপনার ওয়েব অ্যাপ্লিকেশনের লোড টাইম কমে যায় এবং কর্মক্ষমতা বৃদ্ধি পায়।
- Minimalistic: এটি একটি minimalistic এবং ব্যবহারকারী-বান্ধব ফ্রেমওয়ার্ক, যা অপ্রয়োজনীয় স্টাইলিং বা কনফিগারেশনের মধ্যে জটিলতা সৃষ্টি না করে শুধুমাত্র মৌলিক ফিচার প্রদান করে।
- Faster Development: এটি দ্রুত ওয়েব ডিজাইন তৈরির জন্য আদর্শ, বিশেষত যদি আপনি একটি দ্রুত ও কার্যকরী ওয়েব অ্যাপ্লিকেশন তৈরি করতে চান।
- Easy to Learn and Use: Pure.CSS এর ফিচার এবং ডকুমেন্টেশন খুবই সহজ এবং ডেভেলপারদের জন্য সহজেই ব্যবহারযোগ্য।
Pure.CSS এর উদাহরণ
একটি সাধারণ grid system ব্যবহার করার উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>This is 50% width of the container.</p>
</div>
<div class="pure-u-1-2">
<p>This is also 50% width of the container.</p>
</div>
</div>
</body>
</html>
এখানে:
pure-g: এটি গ্রিড কনটেইনারের জন্য ক্লাস।pure-u-1-2: এটি 50% প্রস্থের জন্য একটি কনটেইনারের কলাম।
Pure.CSS হল একটি হালকা, দ্রুত এবং সহজ CSS ফ্রেমওয়ার্ক, যা আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইট ডিজাইন করার জন্য একটি সরল এবং মডুলার সমাধান প্রদান করে। এর ছোট আকার, সহজ কাস্টমাইজেশন, এবং রেসপন্সিভ ডিজাইন বৈশিষ্ট্যের কারণে এটি একটি জনপ্রিয় নির্বাচন, বিশেষত ছোট বা মডারেট প্রজেক্টে যেখানে দ্রুত ডেভেলপমেন্ট এবং লোডিং স্পিড গুরুত্বপূর্ণ।
Content added By
Read more
