ফ্লেক্সবক্স একটি অপেক্ষাকৃত নতুন ফ্রন্ট-এন্ড বৈশিষ্ট্য যা একটি ওয়েবসাইট লেআউট তৈরি করে (এবং এটিকে প্রতিক্রিয়াশীল করে তোলে!) আগের তুলনায় অনেক সহজ।
বিগত দিনগুলিতে, একটি ওয়েবসাইট তৈরি করার জন্য, আপনার লেআউটটিকে এটির মতো দেখতে আপনাকে ফ্লোট গ্রিড বা এমনকি টেবিলগুলি ব্যবহার করতে হবে। এবং এই পদ্ধতিগুলি প্রতিক্রিয়াশীল ডিজাইনের জন্য সর্বোত্তম নয়- নিশ্চিত করুন যে ওয়েবসাইটটি ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসগুলিতে ভাল দেখায়৷
আপনি যদি ওয়েব ডেভেলপমেন্ট ট্রেন্ডের সাথে বর্তমান থাকতে চান, তাহলে আপনি অবশ্যই জানতে চান কিভাবে flexbox ব্যবহার করতে হয়।
কারণ ফ্লোট গ্রিডগুলি দ্রুত অতীতের জিনিস হয়ে উঠছে৷
৷এই ধাপে ধাপে নির্দেশিকা আপনাকে একটি সহজ প্রতিক্রিয়াশীল ওয়েবসাইট লেআউট তৈরির প্রক্রিয়ার মধ্য দিয়ে নিয়ে যাবে।
এই টিউটোরিয়ালে আপনি কী আশা করতে পারেন তার একটি দ্রুত নজর এখানে:
একটি সহজ ওয়েবসাইট লেআউট তৈরি করার পদক্ষেপগুলি
- মোবাইল, ট্যাবলেট এবং ডেস্কটপে লেআউটটি কেমন দেখাবে তা স্কেচ করুন।
- সেম্যান্টিক HTML এবং CSS ব্যবহার করে মৌলিক লেআউট কোডিং শুরু করুন।
- বিভাগে ভাগে যাচ্ছেন, বাকি লেআউট তৈরি করুন।
- আপনার CSS-এ, একটি মোবাইল-প্রথম পদ্ধতি অনুসরণ করুন, ক্ষুদ্রতম প্রস্থের জন্য স্টাইল তৈরি করুন, তারপর ধীরে ধীরে বড় প্রস্থের জন্য।
আমি যাওয়ার সাথে সাথে আমি আমার চিন্তার প্রক্রিয়াগুলি ব্যাখ্যা করব এবং আমি যা ভাল অনুশীলন হিসাবে পেয়েছি তা শেয়ার করব৷
ভালো শুনাচ্ছে? চলুন শুরু করা যাক!
ওয়েবসাইট লেআউট ওয়্যারফ্রেমিং
ওয়্যারফ্রেমগুলি হল আপনার ওয়েবসাইটের সমস্ত সাংগঠনিক অংশের চিত্র। এগুলি খুব বিশদ হতে পারে, প্রায় ডিজাইনের মতো, অথবা এগুলি মৌলিক হতে পারে এবং শুধুমাত্র মূল দিকগুলিকে নথিভুক্ত করতে পারে৷
এখানে আমাদের উদ্দেশ্যে, আমরা একটি খুব মৌলিক ওয়্যারফ্রেম পেতে যাচ্ছি। আমরা ওয়েবসাইটটিকে এর মূল বিভাগে বিভক্ত করতে যাচ্ছি এবং সিদ্ধান্ত নেব যে প্রতিটি বিভাগ মোবাইল, ট্যাবলেট এবং ডেস্কটপে কেমন দেখাবে।
আমরা যে বিভাগগুলি তৈরি করব তাতে হেডার, হিরো, বিষয়বস্তু বিভাগ, সাইডবার এবং ফুটার রয়েছে৷
আমি আমার মৌলিক ওয়্যারফ্রেমগুলি তৈরি করতে মকফ্লো নামে একটি অনলাইন টুল ব্যবহার করি৷
এখানে মোবাইল লেআউট:
আপনি দেখতে পাচ্ছেন যে সমস্ত বিভাগ মূলত সাইডবার সহ একটি দীর্ঘ কলামে একে অপরের উপরে স্ট্যাক করে।
একটি মোবাইল ফোনের মতো একটি সংকীর্ণ ডিভাইসে দক্ষতার সাথে বিষয়বস্তু ফিট করার সবচেয়ে মৌলিক উপায় হল স্ট্যাকিং৷
নিয়মিত বিষয়বস্তুর পাশে সাইডবার তৈরি করার চেষ্টা করা খুব একটা অর্থপূর্ণ নয়, কারণ ফোনগুলি উভয়ই পাশাপাশি মাপতে যথেষ্ট চওড়া নয়৷
এখন প্রস্থে সরানো হচ্ছে- এখানে ট্যাবলেট লেআউট রয়েছে:
এখানে প্রধান পার্থক্য হল যেহেতু ট্যাবলেটগুলি ফোনের তুলনায় অনেক বেশি চওড়া, তাই আমরা এখন প্রধান বিষয়বস্তু বিভাগের পাশে সাইডবার ফিট করতে পারি। এবং সমস্ত বিভাগ ট্যাবলেটের সম্পূর্ণ প্রস্থ নেয়৷
৷এবং সবচেয়ে প্রশস্ত ডিভাইসের জন্য- এখানে ডেস্কটপ লেআউট রয়েছে:
ডেস্কটপের জন্য, আপনাকে আপনার ওয়েবসাইটটি খুব প্রশস্ত মনিটরে কীভাবে দেখাবে তা বিবেচনা করা শুরু করতে হবে। বিশেষ করে আজকাল আল্ট্রাওয়াইড স্ক্রিন জনপ্রিয়তা পাচ্ছে৷
৷যদি আমাদের ওয়েবসাইটের বিষয়বস্তু একটি বড় মনিটরে পূর্ণ-প্রস্থ প্রসারিত করা থাকে, তাহলে এটি বিষয়বস্তু পড়া এবং স্ক্যান করা কঠিন করে তুলবে।
কল্পনা করুন আপনার চোখকে বাম থেকে ডান দিকে সমস্ত পথ ভ্রমণ করতে বাধ্য করুন। এটি অনেক বেশি কাজ, এবং এটি আপনার ব্যবহারকারীদের দূরে সরিয়ে দেবে৷
৷ওয়েবসাইটটিকে এখনও প্রশস্ত স্ক্রিনে পঠনযোগ্য করার জন্য, আমরা একটি নির্দিষ্ট প্রস্থে বিষয়বস্তু বন্ধ করে দিয়েছি এবং এটিকে কেন্দ্রীভূত করেছি। এটি মনিটর যত বড়ই হোক না কেন এটি পড়তে অনেক সহজ এবং স্বজ্ঞাত করে তুলবে৷
৷এখন যেহেতু আমরা জানি ওয়েবসাইটটি কেমন দেখতে চাই, আমরা মজার অংশ শুরু করব- HTML এবং CSS-এ সবকিছু তৈরি করা!
মৌলিক কাঠামো এবং শৈলী নির্মাণ
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>আপনি দেখতে পারেন কিভাবে ওয়্যারফ্রেমের প্রতিটি উপাদানের এখন HTML এ একটি সংশ্লিষ্ট উপাদান রয়েছে। এবং আমি কেবল সাধারণ স্থানধারক পাঠ্য রেখেছি, কোন বাস্তব বিষয়বস্তু নেই।
প্রাথমিক CSS বৈশিষ্ট্য যোগ করা শুরু করুন
এখন আসুন কিছু সুপার বেসিক CSS-এ ডাম্প করি যাতে আমরা এই লেআউটটিকে সুন্দর দেখাতে শুরু করতে পারি!
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>সমস্ত উপাদানে lorem ipsum যোগ করার পরে, ওয়েবসাইটটিতে এটি দেখতে কেমন হবে তা এখানে:
ভালো লাগছে!
আপনি লক্ষ্য করবেন যে আমি প্রতিটি উপাদানে বিভিন্ন দৈর্ঘ্যের স্থানধারক পাঠ্য যোগ করেছি, চূড়ান্ত বিষয়বস্তু কেমন হবে তা মিরর করতে।
মোবাইলের জন্য CSS অপ্টিমাইজ করা
ঠিক আছে, আমরা মূলত মোবাইলের জন্য লেআউট তৈরি করে ফেলেছি!
একটি ওয়েবসাইটকে মোবাইলে সুন্দর দেখানোর জন্য আরও একটি টিপ হল চারপাশে একটি অভিন্ন প্যাডিং যুক্ত করা (এবং উপরের এবং নীচে, যদি আপনি চান)।
এটি ব্যবহারকারীর জন্য কিছুটা শ্বাস নেওয়ার জায়গা দেয়। যদি শূন্য প্যাডিং এবং শূন্য মার্জিন থাকে, তাহলে বিষয়বস্তু পর্দার প্রান্তের বিপরীতে থাকবে, যা সঙ্কুচিত হবে।
কন্টেন্ট পঠনযোগ্য রাখার জন্য আপনি খুব বেশি জায়গা যোগ করতে চান না। এই ক্ষেত্রে আমার কাছে 20px এর একটি গ্লোবাল প্যাডিং আছে, তবে আপনি 10px, 15px, বা আপনার যা মনে হয় সবচেয়ে ভালো লাগে সেটি যোগ করতে পারেন।
ট্যাবলেট ভিউয়ের জন্য স্টাইল যোগ করার দিকে এগিয়ে যাওয়া যাক।
ট্যাবলেটের জন্য একটি দুই-কলাম লেআউট তৈরি করা হচ্ছে
যদি আমরা ট্যাবলেট ওয়্যারফ্রেমের দিকে ফিরে যাই, আমরা দেখতে পাব যে এতে বিষয়বস্তু এবং সাইডবার উপাদান পাশাপাশি রয়েছে। অন্য সবকিছু মোবাইলের মতো উল্লম্বভাবে স্ট্যাক করা হয়।
আমাদের কিছু স্টাইল যোগ করতে হবে যাতে বিষয়বস্তু এবং সাইডবার দুটি কলামে ফর্ম্যাট করা হয়। আমরা এটির জন্য ফ্লেক্সবক্স ব্যবহার করব, সিএসএস গ্রিডের বিপরীতে।
প্রথমত, আমরা আমাদের এইচটিএমএল পরিবর্তন করতে যাচ্ছি এবং বিষয়বস্তু এবং সাইডবার উপাদানগুলিকে প্যারেন্ট <div>-এ মোড়ানো করতে যাচ্ছি। যে আমরা "ফ্লেক্স-কন্টেইনার" এর একটি ক্লাস দেব। (অতিরিক্ত মার্কআপের জন্য দাঁড়ানোর জন্য উপবৃত্তগুলি ব্যবহার করা যা এই মুহূর্তে সত্যিই গুরুত্বপূর্ণ নয়)
<div class="flex-container">
<!-- Content -->
<section class="content">
Content
...
</section>
<!-- Sidebar -->
<aside class="sidebar">
Sidebar
...
</aside>
</div>আমরা আমাদের CSS লেখার আগে, আমরা যখন দুই-কলাম লেআউটে থাকি তখন আমরা বিষয়বস্তু এবং সাইডবার কীভাবে আচরণ করতে চাই তা ঠিক করতে হবে। কয়েকটি ভিন্ন বিকল্প আছে, এবং আবার "সঠিক" উত্তরটি আপনার নিজের পরিস্থিতির উপর নির্ভরশীল৷
৷আমি যা চাই তা হল সাইডবার সর্বদা 300px প্রশস্ত হওয়া, এবং বিষয়বস্তু সেই জায়গার বাকি অংশ নিতে পারে।
এটি করার জন্য, আমরা CSS-এ আমাদের ফ্লেক্সবক্স শৈলী যোগ করব (অতিরিক্ত কোডের জায়গায় দাঁড়াতে উপবৃত্তাকার ব্যবহার করে):
@media screen and (min-width: 640px){
.flex-container {
display: flex;
}
}একটি মিডিয়া ক্যোয়ারী ব্যবহার করে, ডিভাইসের প্রস্থ 640px বা তার বেশি হলে আমরা flexbox চালু করব। এর অর্থ হল ফোনে ছোট প্রস্থে, এটি স্ট্যাক করা থাকবে। একবার এটি 640 চিহ্নে আঘাত করলে এটি ফ্লেক্সবক্স লেআউটে চলে যাবে।
.content {
flex: 1;
...
}
.sidebar {
flex: 0 1 300px;
...
}বিষয়বস্তু এবং সাইডবার উপাদানগুলির জন্য, আমরা ফ্লেক্স সম্পত্তি যোগ করেছি।
আমরা চাই বিষয়বস্তুর প্রস্থ ফ্লেক্সবক্স দ্বারা গণনা করা হোক, তাই আমরা এটিকে flex: 1 এ সেট করব , যা flex-grow: 1-এর সংক্ষিপ্ত বিবরণ , flex-shrink: 1 , এবং flex-basis: 0% .
এটি হল "ডিফল্ট" ফ্লেক্সবক্স সেটিং- যদি আপনি flex: 1 সব চাইল্ড এলিমেন্ট সেট করেন , তাদের প্রস্থ গণনা করা হবে এবং যতটা সম্ভব সমানভাবে বিতরণ করা হবে।
সাইডবারে, এর প্রস্থ 300px সেট করতে, আমরা flex: 0 1 300px ব্যবহার করব . CSS-Tricks-এর মতে, সেই শেষ প্রপার্টি, flex-basis, "বাকি স্থান বন্টন করার আগে একটি উপাদানের ডিফল্ট আকার নির্ধারণ করে।"
এটি নিশ্চিত করবে যে সাইডবার সর্বদা 300px হবে, এবং বাকি স্থানটি সামগ্রী বিভাগে বিতরণ করা হবে৷
এই হল এর ফলাফল!
এখন ডেস্কটপের জন্য আমাদের স্টাইল যোগ করা যাক।
ডেস্কটপের জন্য সামগ্রীর প্রস্থ ক্যাপ করুন
আমরা যদি ট্যাবলেট এবং ডেস্কটপ ওয়্যারফ্রেমের দিকে ফিরে তাকাই, তবে তারা দেখতে অনেকটা একই রকম। উভয়েরই সাইডবারের পাশে কন্টেন্ট আছে।
ডেস্কটপের প্রধান পার্থক্য, যেমনটি আগে উল্লেখ করা হয়েছে, প্রধান বিষয়বস্তুর জন্য সর্বোচ্চ-প্রস্থ সেট করা। এটি নিশ্চিত করবে যে ওয়েবসাইটটি এমনকি আল্ট্রাওয়াইড মনিটরেও পঠনযোগ্য৷
৷CSS-এ হেল্পার ক্লাস
যেহেতু আমাদের সম্ভবত একাধিক উপাদানের জন্য শৈলীর এই সেটের প্রয়োজন হবে, আসুন একটি সহায়ক শ্রেণী তৈরি করি যা সহজেই পুনরায় ব্যবহারযোগ্য হবে।
আমরা আমাদের CSS-এ এইভাবে আমাদের নতুন ক্লাস এবং সহগামী স্টাইল যোগ করব:
.wrapper {
margin: auto;
max-width: 75rem;
}এটি উপাদানটির সর্বাধিক-প্রস্থকে 1200px (rem ইউনিটে রূপান্তরিত) এ সেট করবে এবং এটিকে 1200px এর চেয়ে বড় প্রস্থের উপর কেন্দ্রীভূত করবে।
HTML-এ আমরা ফ্লেক্স-কন্টেইনার র্যাপারে র্যাপার ক্লাস যোগ করব, যেহেতু আমরা কন্টেন্ট এবং সাইডবার কন্টেইনারের প্রস্থ সীমিত করতে চাই।
মার্কআপটি তখন এরকম দেখাবে:
<div class="flex-container wrapper">
…
</div>এবং যদি আমরা একটি বৃহত্তর প্রস্থে ওয়েবসাইটটি পরীক্ষা করে দেখি, আমরা দেখতে পাব যে বিষয়বস্তু/সাইডবার র্যাপারের চারপাশে অতিরিক্ত স্থান রয়েছে, যেমনটি আমরা চেয়েছিলাম 😁
উপসংহারে
তাই আপনার কাছে এটি রয়েছে- আমরা একটি সাধারণ প্রতিক্রিয়াশীল লেআউট তৈরি করেছি যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে ভাল দেখায়!
আপনি যদি ওয়েবসাইটটি কার্যকর দেখতে চান, আপনি এখানে একটি ডেমো দেখতে পারেন।
এবং আপনি এখানে আমার GitHub থেকে এই প্রকল্পের জন্য সমস্ত কোড ডাউনলোড করতে পারেন।
*দ্রষ্টব্য:প্রকল্পটি Gulp এবং Sass ব্যবহার করে। আপনার যদি Gulp ইনস্টল করার জন্য সাহায্যের প্রয়োজন হয়, এখানে আমার সিম্পল গাল্প টিউটোরিয়াল দেখুন।
পড়ার জন্য ধন্যবাদ! নীচের মন্তব্যে এই টিউটোরিয়ালটি সম্পর্কে আপনি কী মনে করেন তা আমাকে জানান 😊
