Pure.CSS একটি সিম্পল, লাইটওয়েট এবং পারফরম্যান্ট CSS ফ্রেমওয়ার্ক, যা Yahoo! দ্বারা তৈরি করা হয়েছে। এটি এমন ডিজাইন উপাদান এবং গ্রিড সিস্টেম প্রদান করে যা আপনাকে দ্রুত ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইট তৈরি করতে সাহায্য করে। Pure.CSS এর মূল উদ্দেশ্য হল মিনিমালিস্টিক ডিজাইন বজায় রেখে সহজ এবং কার্যকরভাবে ওয়েব পেজ তৈরি করা।
এখানে, Pure.CSS ভিত্তিক প্রথম প্রজেক্ট তৈরি করার জন্য ধাপে ধাপে গাইড দেয়া হচ্ছে।
প্রথম Pure.CSS ভিত্তিক প্রজেক্ট তৈরি করার ধাপসমূহ
ধাপ ১: Pure.CSS ফ্রেমওয়ার্ক ইনস্টল করা
Pure.CSS ব্যবহার করতে, আপনাকে প্রথমে এর CSS ফাইলটি আপনার প্রজেক্টে যোগ করতে হবে। আপনি এটিকে CDN বা ডাউনলোড করে ব্যবহার করতে পারেন।
CDN ব্যবহার:
Pure.CSS এর CDN লিংক ব্যবহার করে সরাসরি আপনার HTML ফাইলে লিঙ্ক করতে পারেন।
<!-- Pure.CSS CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
ডাউনলোড করে ব্যবহার:
আপনি Pure.CSS ডাউনলোডও করতে পারেন। Pure.CSS GitHub Repository থেকে এটি ডাউনলোড করুন এবং আপনার প্রজেক্টের মধ্যে যুক্ত করুন।
ধাপ ২: একটি HTML ফাইল তৈরি করুন
এখন একটি HTML ফাইল তৈরি করুন। এটি আপনার Pure.CSS ভিত্তিক প্রজেক্টের জন্য প্রধান ফাইল হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Pure.CSS Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<header class="pure-u-1">
<h1>Welcome to My First Pure.CSS Project!</h1>
</header>
<main class="pure-g">
<section class="pure-u-1 pure-u-md-1-2">
<h2>About Pure.CSS</h2>
<p>Pure.CSS is a minimal CSS framework that helps developers to quickly build lightweight and responsive websites.</p>
</section>
<section class="pure-u-1 pure-u-md-1-2">
<h2>Features</h2>
<ul>
<li>Lightweight</li>
<li>Modular</li>
<li>Responsive</li>
</ul>
</section>
</main>
<footer class="pure-u-1">
<p>Created by [Your Name]</p>
</footer>
</body>
</html>
ব্যাখ্যা:
- এখানে,
pure-u-1এবংpure-u-md-1-2হল Pure.CSS এর গ্রিড সিস্টেমের ক্লাস।pure-u-1পুরো উইডথ ব্যবহার করবে, এবংpure-u-md-1-2মিডিয়া কুয়েরি অনুসারে (মিডিয়াম ডিভাইসে) ৫০% উইডথে কন্টেন্ট দেখাবে। - Pure.CSS Grid System: এটি একটি ১২-কোলাম সিস্টেমে কাজ করে। আপনি সুতরাং যেকোনো অংশের জন্য
pure-u-1,pure-u-1-2,pure-u-1-3ইত্যাদি ক্লাস ব্যবহার করে গ্রিড বানাতে পারেন।
ধাপ ৩: Styling (স্টাইলিং) যুক্ত করা
আপনি Pure.CSS ব্যবহার করতে গিয়ে আরও কিছু কাস্টম স্টাইলও যোগ করতে চাইলে, আপনি <style> ট্যাগের মাধ্যমে স্টাইল দিতে পারেন।
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
text-align: center;
}
section {
padding: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 5px 0;
}
</style>
ধাপ ৪: ব্রাউজারে চেক করা
এখন, আপনার HTML ফাইলটি ব্রাউজারে ওপেন করে দেখুন। Pure.CSS গ্রিড এবং স্টাইলিং দ্বারা একটি সুন্দর এবং রেস্পন্সিভ লেআউট তৈরি হবে।
এখন আপনি Pure.CSS ভিত্তিক একটি মৌলিক প্রজেক্ট তৈরি করতে পেরেছেন। Pure.CSS এর সুবিধা হল এটি খুবই লাইটওয়েট এবং সহজে কাস্টমাইজ করা যায়। আপনি গ্রিড সিস্টেম, ইউআই উপাদান এবং অন্যান্য ডিজাইন কনসেপ্ট ব্যবহার করে আপনার প্রজেক্ট আরও উন্নত করতে পারেন। Pure.CSS-এর মাধ্যমে বড় প্রকল্পও সহজেই তৈরি করা যায়, কারণ এটি অনেকটা মডুলার স্টাইল শীট।
Read more
