Materialize CSS ফ্রেমওয়ার্কটি সহজেই ওয়েব প্রজেক্টে যুক্ত করা যায়। একে ব্যবহার করতে আপনার মেশিনে কোনো ফাইল ডাউনলোড করার প্রয়োজন নেই। এর পরিবর্তে, আপনি CDN (Content Delivery Network) ব্যবহার করে Materialize ইনস্টল করতে পারেন, যা আপনার ওয়েব পেজের লোডিং স্পিড বাড়াতে সাহায্য করে এবং আরও দ্রুত ফাইল এক্সেস নিশ্চিত করে।
এখানে CDN ব্যবহার করে Materialize ইনস্টল করার স্টেপ-বাই-স্টেপ গাইড দেওয়া হলো।
Materialize CDN এর মাধ্যমে ইনস্টলেশন
Materialize CSS ফাইল লিঙ্ক করা: প্রথমে আপনার HTML ফাইলের
<head>সেকশনে Materialize এর CSS ফাইল লিঙ্ক করতে হবে। নিচের কোডটি আপনার HTML ফাইলে যুক্ত করুন:<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">Materialize JavaScript ফাইল লিঙ্ক করা: এরপর, আপনাকে Materialize এর JavaScript ফাইলও যুক্ত করতে হবে। এটি করার জন্য,
<body>সেকশনের শেষে নিচের কোডটি যুক্ত করুন:<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>এখানে jQuery সাপোর্ট করা প্রয়োজন, কারণ Materialize অনেক জায়গায় jQuery ব্যবহার করে।
এখন আপনার পেজে Materialize ব্যবহার করুন: Materialize এর CSS এবং JavaScript ফাইল লিঙ্ক করার পর, আপনি সহজেই Materialize এর প্রস্তুত উপাদান এবং ফিচার ব্যবহার করতে পারবেন। যেমন:
<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>এই কোডটি একটি সুন্দর Materialize স্টাইল করা button তৈরি করবে।
উদাহরণ HTML কোড
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে Materialize CDN ব্যবহার করে একটি সিম্পল ওয়েব পেজ তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Example</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Materialize Button Example -->
<div class="container">
<h1>Welcome to Materialize</h1>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</div>
<!-- jQuery and Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
উপসংহার
Materialize CSS ব্যবহার করতে CDN একটি সহজ এবং দ্রুত পদ্ধতি। এতে কোনো ডাউনলোড বা ফাইল সংরক্ষণ করার প্রয়োজন নেই, এবং এটি আপনার ওয়েব পেজের লোড স্পিডও উন্নত করে। উপরোক্ত কোডটি ব্যবহার করে আপনি সহজেই Materialize ফ্রেমওয়ার্ক আপনার ওয়েবসাইটে অন্তর্ভুক্ত করতে পারবেন এবং প্রি-স্টাইলড উপাদানগুলো ব্যবহার করে একটি সুন্দর ডিজাইন তৈরি করতে পারবেন।
Read more
