ফ্লেক্সবক্স দিয়ে রেসপন্সিভ ওয়েবসাইট লেআউট বানান (স্টেপ-বাই-স্টেপ গাইড)

ফ্লেক্সবক্স একটি আপেক্ষিক নতুন ফ্রন্ট-এন্ড ফিচার যা ওয়েবসাইট লেআউট বানানো (এবং এটিকে রেসপন্সিভ করা!) অনেক অনেক সহজ করে দিয়েছে যা আগে ছিল।

গত দিনগুলোতে, একটি ওয়েবসাইট বানাতে আপনাকে ফ্লোট গ্রিড বা এমনকি টেবিল ব্যবহার করতে হতো যাতে আপনার লেআউট এর মতো দেখায়। এবং সেই পদ্ধতিগুলো রেসপন্সিভ ডিজাইনের জন্য সেরা নয়—ডেস্কটপ, ট্যাবলেট, এবং মোবাইল ডিভাইসে ওয়েবসাইট ভালো দেখায় তা নিশ্চিত করা।

আপনি যদি ওয়েব ডেভেলপমেন্ট ট্রেন্ডের সাথে আপডেট থাকতে চান, তবে আপনাকে অবশ্যই জানতে হবে ফ্লেক্সবক্স কীভাবে ব্যবহার করতে হয়।

কারণ ফ্লোট গ্রিড দ্রুত অতীতের বিষয় হয়ে যাচ্ছে।

এই স্টেপ-বাই-স্টেপ গাইড আপনাকে একটি সিম্পল রেসপন্সিভ ওয়েবসাইট লেআউট বানানোর প্রক্রিয়ার মধ্য দিয়ে নিয়ে যাবে।

এখানে আপনি কী কী 거쳐 যাবেন তার একটি দ্রুত ঝলক:

সিম্পল ওয়েবসাইট লেআউট বানানোর ধাপগুলো

1. মোবাইল, ট্যাবলেট, এবং ডেস্কটপে লেআউট কেমন দেখাবে সেটি স্কেচ করুন।
2. সেমান্টিক এইচটিএমএল এবং সিএসএস ব্যবহার করে বেসিক লেআউট কোডিং শুরু করুন।
3. সেকশন বাই সেকশন, লেআউটের বাকি অংশ বানান।
4. আপনার সিএসএসে, মোবাইল-ফাস্ট এপ্রোচ ফলো করুন, সবচেয়ে ছোট প্রস্থের জন্য স্টাইল তৈরি করুন, তারপর تدريজ বড় প্রস্থের জন্য।

আমি যেটে যেটে আমার চিন্তা প্রক্রিয়া ব্যাখ্যা করব, এবং যা আমি ভালো প্র্যাকটিস বুঝি সেটি শেয়ার করব।

ভালো লাগলো? চলুন শুরু করি!

ওয়েবসাইট লেআউটের ওয়ারফ্রেমিং

ওয়ারফ্রেম হলো আপনার ওয়েবসাইটের সকল সাংগঠনিক অংশের ডায়াগ্রাম। সেগুলো সুপার ডিটেইল্ড হতে পারে, почти ডিজাইনের মতো, অথবা বেসিক হতে পারে এবং শুধু মূল দিকগুলো ডকুমেন্ট করতে পারে।

আমাদের উদ্দেশ্যের জন্য, আমরা একটি খুব বেসিক ওয়ারফ্রেম ব্যবহার করব। আমরা ওয়েবসাইটটিকে এর কোর সেকশনে ভাগ করব এবং প্রতিটি সেকশন মোবাইল, ট্যাবলেট, এবং ডেস্কটপে কেমন দেখাবে সেটি ডिसাইড করব।

আমরা যে সেকশনগুলো বানাব সেগুলো হলো হেডার, হিরো, কন্টেন্ট সেকশন, সাইডবার, এবং ফুটার।

আমি আমার বেসিক ওয়ারফ্রেম তৈরি করার জন্য MockFlow নামে একটি অনলাইন টুল ব্যবহার করি।

এখানে মোবাইল লেআউট:

আপনি দেখতে পাচ্ছেন যে সব সেকশন মূলত একদूसরের উপরে স্ট্যাক করেছে একটি লম্বা কলামে, সাইডবার সহ।

স্ট্যাকিং হলো একটি সংকীর্ণ ডিভাইস যেমন মোবাইল ফোনে কন্টেন্ট দক্ষতার সাথে ফিট করার সবচেয়ে বেসিক উপায়।

সাইডবারকে রেগুলার কন্টেন্টের পাশে রাখতে অর্থ নেই, কারণ ফোনগুলো দুটোকে সাইড বাই সাইড ফিট করার জন্য পর্যাপ্ত চওড়া নয়।

প্রস্থে একটু বড়—Aquí ট্যাবলেট লেআউট:

এখানে মূল পার্থক্য হলো যেহেতু ট্যাবলেট ফোনের চেয়ে অনেক চওড়া, আমরা এখন সাইডবারকে মেইন কন্টেন্ট সেকশনের পাশে ফিট করতে পারি। এবং সকল সেকশন ট্যাবলেটের পুরো প্রস্থ নেয়।

এবং সবচেয়ে চওড়া ডিভাইসের জন্য—এখানে ডেস্কটপ লেআউট:

ডেস্কটপের জন্য, আপনাকে ভাবতে হবে আপনার ওয়েবসাইট খুব চওড়া মনিটরে কেমন দেখাবে। বিশেষ করে আজকাল আল্ট্রাওয়াইড স্ক্রিনের জনপ্রিয়তা বাড়ছে।

যদি আমরা ওয়েবসাইট কন্টেন্টকে ফুল-উইডথে বড় মনিটরে ছড়িয়ে দিই, তবে কন্টেন্ট পড়া এবং স্ক্যান করা কঠিন হবে।

কল্পনা করুন আপনার চোখ বাম দিক থেকে ডান দিক পর্যন্ত সارا পথ যেতে বাধ্য। এটা খুব বেশি কাজ, এবং এটি আপনার ব্যবহারকারীদের ভगा দেবে।

ওয়েবসাইটকে চওড়া স্ক্রিনেও পঠনযোগ্য রাখতে, আমরা কন্টেন্টকে একটি নির্দিষ্ট প্রস্থে ক্যাপ করেছি, এবং সেন্টার করেছি। এটি যেকোনো বড় মনিটরে পড়া অনেক সহজ ও সাবধান করে তোলে।

এখন আমরা জানি ওয়েবসাইটটি কেমন দেখাবে, আমরা মজার অংশে যাব—-HTML এবং সিএসএসে সব কিছু বিল্ড আপ করা!

বেসিক স্ট্রাকচার এবং স্টাইল তৈরি

HTML এলিমেন্ট দিয়ে লেআউট ম্যাপ আউট করুন

আমরা যে ওয়ারফ্রেম তৈরি করেছি সেটি থেকে কাজ শুরু করে, আমরা ওয়ারফ্রেমে যেসব সেকশন ছিল সেগুলোর জন্য একটি HTML এলিমেন্ট তৈরি করব।

এখানে <body>-তে আমরা যে মার্কআপ দিয়ে শুরু করছি:

<!-- Main Content --> <main> Main <!-- Header --> <header> Header </header> <!-- Hero --> <section> Hero </section> <!-- Content --> <section> Content </section> <!-- Sidebar --> <aside> Sidebar </aside> <!-- Footer --> <footer> Footer </footer> </main>

আপনি দেখতে পাচ্ছেন কীভাবে ওয়ারফ্রেমের প্রতিটি এলিমেন্টের এখন একটি entsprechende HTML এলিমেন্ট আছে। এবং আমি শুধু সিম্পল প্লেসহোল্ডার টেক্সট রেখেছি, কোনো রিয়েল কন্টেন্ট নেই।

বেসিক সিএসএস প্রোপার্টি যোগ করুন

এখন চলুন কিছু সুপার বেসিক সিএসএস ডাম্প করি যাতে আমরা এই লেআউটকে ভালো দেখাতে শুরু করতে পারি!

main, header, section, aside, footer { margin: 0; padding: 20px; border: 1px solid #000000; color: #ffffff; } main { background: #000000; } .header { background: #03a9f4; } .hero { background: #d22b1f; } .content { background: #129a22; } .sidebar { border: 1px solid #000000; background: #673ab7; } .footer { border: 1px solid #000000; background: #616161; }

নাঙ্কে কিছু খুব জেনারেল স্টাইল দেখানো হয়নি, যেমন বক্স-সাইজিং: বর্ডার-বক্স এবং ফন্ট স্টাইল। কিন্তু এই আর্টিকেলের উদ্দেশ্যে, এগুলোই একমাত্র স্টাইল जिनके আপনাকে চিন্তা করতে হবে।

আমি আমার এলিমেন্টগুলোর চারদিকে বর্ডার যোগ করা পছন্দ করি যাতে প্রতিটি এলিমেন্ট কোথায় আছে এবং যেকোনো আশ্চর্য ইস্যু ট্রাবলশুট করা সহজ হয়। এবং আমি ওয়ারফ্রেম মকআপের সাথে মিলিয়ে ব্যাকগ্রাউন্ড কালারও যোগ করেছি।

যদি আমরা ব্রাউজারে HTML ফাইলটি খুলি, তবে আমরা যা দেখব সেটি!

আপনি ইতিমধ্যে লক্ষ্য করতে পেরে যেতে পারেন, কিন্তু ওয়েবসাইটটি মোবাইল ওয়ারফ্রেমের সাথে প্রায় একই দেখাচ্ছে। ডিফল্টরূপে সব কিছু একদूसরের উপরে স্ট্যাক করা থাকে।

কিছু প্লেসহোল্ডার কন্টেন্ট যোগ করুন

আপনার HTML এলিমেন্টগুলো তৈরি করার পর, কিছু প্লেসহোল্ডার কন্টেন্ট যোগ করাও ভালো আইডিয়া। এটি ওয়েবসাইটকে ফাইনিশড অবস্থার মতো দেখাবে।

আপনাকে খুব ফ্যান্সি হতে হবে না—আমরা শুধু লোরেম ইপসাম ফিলার টেক্সট কপি-পেস্ট করব প্রতিটি এলিমেন্টে। উদাহরণস্বরূপ, হিরো এলিমেন্টে কী আছে:

<section class="hero"> Hero <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius. </p> </section>

সব এলিমেন্টে লোরেম ইপসাম যোগ করার পর, ওয়েবসাইটে এটা কেমন দেখাবে:

দেখতে ভালো লাগছে!

আপনি লক্ষ্য করবেন যে আমি প্রতিটি এলিমেন্টে ভিন্ন দৈর্ঘ্যের প্লেসহোল্ডার টেক্সট যোগ করেছি, যাতে ফাইনাল কন্টেন্ট কেমন দেখাবে সেটি রিফলেক্ট করে।

মোবাইলের জন্য সিএসএস অপ্টিমাইজ করা

ঠিক আছে, মোবাইলের জন্য লেআউট বানানোর কাজে আমরা মূলত শেষ!

মোবাইলে ওয়েবসাইট ভালো দেখানোর জন্য একটি টিপস হলো পাশে একটি ইউনিফর্ম প্যাডিং যোগ করা (এবং চাইলে উপরে এবং নিচেও)।

এটি ব্যবহারকারীর জন্য একটু শ্বাস নেওয়ার জায়গা দেয়। যদি জিরো প্যাডিং এবং জিরো মার্জিন থাকত, তবে কন্টেন্ট স্ক্রিনের এজের সাথে আটকে যেত, যা ক্লস্ট্রোফোবিক লাগবে।

আপনি খুব বেশি স্পেস যোগ করবেন না, কন্টেন্ট পঠনযোগ্য রাখতে। এই কেসে আমার গ্লোবাল প্যাডিং ২০পিক্সেল, কিন্তু আপনি ১০পিক্সেল, ১৫পিক্সেল, বা যা আপনাকে ভালো লাগে সেটি যোগ করতে পারেন।

চলুন ট্যাবলেট ভিউর জন্য স্টাইল যোগ করার দিকে যাই।

ট্যাবলেটের জন্য টু-কলাম লেআউট তৈরি

আমরা যদি ট্যাবলেট ওয়ারফ্রেমে ফিরে যাই, তবে দেখব যে কন্টেন্ট এবং সাইডবার এলিমেন্টগুলো সাইড বাই সাইড। বাকি সব মোবাইল মতো ভертিক্যালি স্ট্যাক করা।

আমাদের কিছু স্টাইল যোগ করতে হবে যাতে কন্টেন্ট এবং সাইডবার দুটি কলামে ফরম্যাট হয়। আমরা এর জন্য ফ্লেক্সবক্স ব্যবহার করব, সিএসএস গ্রিডের পরিবর্তে।

প্রথমে, আমরা আমাদের HTML পরিবর্তন করব এবং কন্টেন্ট এবং সাইডবার এলিমেন্টগুলোক একটি প্যারেন্ট <div> で মোড়ানো যেটিকে আমরা "flex-container" ক্লাস দিব। (অতিরিক্ত মার্কআপের জন্য ellipse ব্যবহার করা হলো যা এখন ততটা গুরুত্বপূর্ণ নয়)

<div class="flex-container"> <!-- Content --> <section class="content"> Content ... </section> <!-- Sidebar --> <aside class="sidebar"> Sidebar ... </aside> </div>

আমাদের সিএসএস লিখার আগে, আমাদের ডিসাইড করতে হবে কন্টেন্ট এবং সাইডবার টু-কলাম লেআউটে কীভাবে behave করবে। কিছু অপশন আছে, এবং আবার "সঠিক" উত্তর আপনার নিজের পরিস্থিতির ওপর নির্ভর করে।

আমি চাই সাইডবারটি সবসময় ৩০০পিক্সেল চওড়া হবে, এবং কন্টেন্ট বাকি স্পেস নেবে।

এটি করার জন্য, আমরা আমাদের ফ্লেক্সবক্স স্টাইল সিএসএসে যোগ করব (আরও ellipse ব্যবহার করা হলো):

@media screen and (min-width: 640px){ .flex-container { display: flex; } }

একটি মিডিয়া কোয়ারী ব্যবহার করে, আমরা ফ্লেক্সবক্স অন করব যখন ডিভাইস প্রস্থ ৬৪০পিক্সেল এবং তার উপরে। অর্থাৎ ছোট প্রস্থে ফোনে, সেটি স্ট্যাকড থাকবে। একবার ৬৪০ পৌঁছালে সেটি ফ্লেক্সবক্স লেআউটে স্যুইচ করবে।

.content { flex: 1; ... } .sidebar { flex: 0 1 300px; ... }

কন্টেন্ট এবং সাইডবার এলিমেন্টের জন্য, আমরা flex প্রোপার্টি যোগ করেছি।

আমরা চাই কন্টেন্ট প্রস্থ ফ্লেক্সবক্স দ্বারা ক্যালকুলেটেড হবে, তাই আমরা সেটিকে flex: 1 সেট করব, যা হলো flex-grow: 1, flex-shrink: 1, এবং flex-basis: 0% এর শর্টহ্যান্ড।

এটি "ডিফল্ট" ফ্লেক্সবক্স সেটিং—যদি আপনি সকল চাইল্ড এলিমেন্টকে flex: 1 সেট করেন, তবে তাদের প্রস্থ ক্যালকুলেট হয়ে সম্ভাব্য সমানভাবে বিতরণ হবে।

সাইডবারে, এর প্রস্থ ৩০০পিক্সেল সেট করতে, আমরা flex: 0 1 300px ব্যবহার করব। সিএসএস-ট্রিক্স অনুযায়ী, শেষ প্রোপার্টি, flex-basis, "এলিমেন্টের ডিফল্ট সাইজ ডিফাইন করে বাকি স্পেস বিতরণের আগে।"

এটি নিশ্চিত করবে যে সাইডবার সবসময় ৩০০পিক্সেল, এবং বাকি স্পেস কন্টেন্ট সেকশনে যাবে।

এটার ফলাফল!

এখন আমরা ডেস্কটপের জন্য স্টাইল যোগ করব।

ডেস্কটপের জন্য কন্টেন্ট প্রস্থ সীমাবদ্ধ করা

আমরা যদি ট্যাবলেট এবং ডেস্কটপ ওয়ারফ্রেমে ফিরে যাই, তবে সেগুলো প্রায় একই দেখে। দুটোই কন্টেন্ট সাইডবারের পাশে থাকে।

ডেস্কটপের জন্য মূল পার্থক্য, যেমন আগে বললাম, হলো মেইন কন্টেন্টের জন্য একটি max-width সেট করা। এটি নিশ্চিত করবে যে ওয়েবসাইট আল্ট্রাওয়াইড মনিটরে ও পঠনযোগ্য থাকে।

সিএসএসে হেল্পার ক্লাস

যেহেতু এই স্টাইল সেট আমাদের একাধিক এলিমেন্টের জন্য দরকার হবে, চলুন একটি হেল্পার ক্লাস তৈরি করি যা সহজে রি-ইউজযোগ্য হবে।

আমরা আমাদের নতুন ক্লাস এবং এর স্টাইল সিএসএসে এইভাবে যোগ করব:

.wrapper { margin: auto; max-width: 75rem; }

এটি এলিমেন্টের max-width ১২০০পিক্সেল (rem यूनিটে কনভার্টেড) সেট করবে, এবং ১২০০পিক্সেল চেয়ে বড় প্রস্থে সেটিকে সেন্টার করবে।

HTML-এ আমরা wrapper ক্লাসটি flex-container wrapper-এ যোগ করব, যেহেতু আমরা কন্টেন্ট এবং সাইডবার কন্টেইনারের প্রস্থ সীমাবদ্ধ করতে চাই।

মার্কআপটি তখন এইরকম দেখাবে:

<div class="flex-container wrapper"> … </div>

এবং যদি আমরা বড় প্রস্থে ওয়েবসাইট চেক করি, তবে আমরা দেখব কন্টেন্ট/সাইডবার wrapper-এর চারপাশে এক্সট্রা স্পেস আছে, ঠিক যেমন আমরা চেয়েছিলাম 😁

উপসংহার

তাহলে এটা रहा—আমরা একটি সিম্পল রেসপন্সিভ লেআউট বানালাম যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপে ভালো দেখে!

আপনি যদি ওয়েবসাইটটি একশনে দেখতে চান, তবে আপনি এখানে একটি ডেমো চেক আউট করতে পারেন।

এবং আপনি এই প্রজেক্টের সকল কোড আমার গিটহাব থেকে ডাউনলোড করতে পারেন।

*নোট: প্রজেক্টটি Gulp এবং Sass ব্যবহার করে। আপনি যদি Gulp ইনস্টল করতে সাহায্য দরকার হয়, তবে আমার সিম্পল Gulp টিউটোরিয়াল এখানে চেক আউট করুন।

পড়ার জন্য ধন্যবাদ! এই টিউটোরিয়াল সম্পর্কে আপনার মতামত কমেন্টে জানান 😊