Pure.CSS একটি লাইটওয়েট এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা দ্রুত এবং সুষম ডিজাইন তৈরি করতে সহায়ক। এটি একটি modular CSS framework, যা বিভিন্ন কম্পোনেন্ট এবং লেআউট প্রদান করে, তবে অতিরিক্ত স্টাইল বা জাভাস্ক্রিপ্ট যুক্ত না করে।
Pure.CSS CDN ব্যবহার করে ইনস্টল করা:
Pure.CSS এর সুবিধাগুলির মধ্যে একটি হল এর সহজ সন্নিবেশযোগ্যতা, বিশেষ করে যখন আপনি CDN (Content Delivery Network) ব্যবহার করেন। Pure.CSS কে আপনার প্রজেক্টে CDN এর মাধ্যমে খুব সহজেই যুক্ত করা যায়।
স্টেপ 1: Pure.CSS CDN লিংক যুক্ত করা
আপনার HTML ফাইলে নিচের <link> ট্যাগটি <head> সেকশনে যুক্ত করুন:
<!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 to Pure.CSS CDN -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-u-1-2">
<h1>Hello, Pure.CSS!</h1>
<p>This is a basic example of using Pure.CSS with a CDN.</p>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে CDN লিংক
https://unpkg.com/purecss@2.0.6/build/pure-min.cssব্যবহার করা হয়েছে, যা Pure.CSS এর সর্বশেষ সংস্করণটি সরবরাহ করবে। আপনি এখানে ব্যবহার করা সংস্করণটি পরিবর্তন করে অন্য সংস্করণও ব্যবহার করতে পারেন। - এটি আপনার HTML ফাইলে সরাসরি Pure.CSS স্টাইলশিট যুক্ত করবে, যা কোনো লোকাল ইনস্টলেশন ছাড়াই কাজ করবে।
স্টেপ 2: Pure.CSS ব্যবহার করা
এখন আপনি 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 Example</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<h1>Welcome to Pure.CSS</h1>
<p>This is a simple layout using Pure.CSS grid system.</p>
</div>
<div class="pure-u-1-2">
<button class="pure-button pure-button-primary">Click Me</button>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Grid System:
pure-gএবংpure-u-1-2ব্যবহার করে একটি বেসিক গ্রিড তৈরি করা হয়েছে। এটি দুইটি কলাম তৈরি করবে, একটি পাঠ্য এবং আরেকটি বাটনের জন্য। - Button:
pure-button pure-button-primaryক্লাস ব্যবহার করে একটি স্টাইল করা বাটন তৈরি করা হয়েছে।
স্টেপ 3: অন্যান্য Pure.CSS কম্পোনেন্ট ব্যবহার করা
Pure.CSS বিভিন্ন কম্পোনেন্ট যেমন ন্যাভিগেশন বার, টেবিল, ফর্ম, বাটন ইত্যাদি প্রদান করে। আপনি এগুলি ব্যবহার করে আপনার ওয়েব পেজের ডিজাইন আরও উন্নত করতে পারেন।
Pure.CSS Navigation Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Navigation</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Pure</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি সিম্পল horizontal navigation bar তৈরি করা হয়েছে যা Pure.CSS এর
pure-menuক্লাস ব্যবহার করে।
Pure.CSS CDN লিংক পরিবর্তন:
আপনি যদি unpkg এর পরিবর্তে অন্য CDN ব্যবহার করতে চান, তবে আপনি নিচের লিংকটি ব্যবহার করতে পারেন:
- CDNJS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
- jsDelivr:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.6/build/pure-min.css">
Pure.CSS একটি খুব হালকা এবং কাস্টমাইজযোগ্য CSS ফ্রেমওয়ার্ক যা ছোট এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে উপযুক্ত। CDN এর মাধ্যমে Pure.CSS ইন্সটল করা খুবই সহজ এবং এটি আপনার প্রোজেক্টে দ্রুত ব্যবহার করা সম্ভব। আপনি ফাইলটি সরাসরি unpkg, cdnjs, বা jsDelivr থেকে লিংক করে আপনার ওয়েব পেজে যুক্ত করতে পারেন এবং সহজেই একটি সুন্দর ও সিম্পল ডিজাইন তৈরি করতে পারেন।
Read more
