() translation by (you can also view the original English article)
অফ-ক্যানভাস প্যাটার্ন রেস্পন্সিভ নেভিগেশনের জন্য একটি ক্লাসিক পন্থা। যখন কোনও ওয়েবসাইটের "viewport" যথেষ্ট পরিমানে ছোট হয়, তখন বড় ন্যাভিগেশন ম্যানুটি লুকানো থাকে এবং কেবল ক্লিক করলেই তা দেখানো হয়ে থাকে।
আমরা আজকে অফ-ক্যানভাস ন্যাভিগেশন তৈরি করতে যাচ্ছি, এবং শুধুমাত্র CSS ব্যবহার করে আমরা এটা করবো (কোনও JavaScript এর দরকার নেই) এক্ষেত্রে গ্রীড ব্যবহার করে আমরা আমাদের পেইজ স্ট্রাকচার ঠিক করে নিবো। এখানে আছে সম্পূর্ণ পেইজ ডেমো যার উপর আমরা কাজ করছি।
মৌলিক পেইজের গঠন
চলুন তাহলে মৌলিক পেইজ তৈরি করার মাধ্যমে শুরু করা যাক; আমরা নিচের মত কিছু একটা তৈরি করতে যাচ্ছিঃ
এটা হচ্ছে মোটামুটিভাবে একটি রুপক আক্ষরিক পেইজের কাঠামো; আপনি দেখতে পাবেন যে সবকিছু ছোট viewport এর জন্য একক কলামে আছে, এরপর তার পাশেরটা বড় স্ক্রিণে দেখাচ্ছে। <nav> এলিমেন্টটি আরও স্বচ্ছভাবে বুঝানোর জন্য তাতে নীল রং দিয়ে হাইলাইট করা হয়েছে।
আমাদের প্রাথমিক মার্কআপটি এখানে দেখানো হলোঃ
1 |
<header role="banner"> |
2 |
<h1>Header</h1> |
3 |
</header>
|
4 |
|
5 |
<nav id="nav" role="navigation"> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="#">Item 1</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="#">Item 2</a> |
12 |
</li>
|
13 |
<li>
|
14 |
<a href="#">Item 3</a> |
15 |
</li>
|
16 |
</ul>
|
17 |
</nav>
|
18 |
|
19 |
<section role="main"> |
20 |
<article>
|
21 |
<h2>Article</h2> |
22 |
<p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p> |
23 |
<p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p> |
24 |
<p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p> |
25 |
</article>
|
26 |
</section>
|
27 |
|
28 |
<aside>
|
29 |
<h3>Aside</h3> |
30 |
</aside>
|
31 |
|
32 |
<footer>
|
33 |
<h3>Footer</h3> |
34 |
</footer>
|
এখন তাহলে চলুন কিছু ভিজুয়াল স্টাইল এবং কিছু গ্রীড রুলস যোগ করা যাক।
নতুন গ্রীড যোগ করুন
চলুন, তাহলে আমাদের সব গঠনগত এলিমেণ্টসগুলো একটি মূল এলিমেন্টের ভিতর মুড়িয়ে নেই–আর সেটা হচ্ছে গ্রীড কণ্টেইনার। আমি এখানে <div class="container"></div> ব্যবহার করছি।
এবার কিছু মৌলিক গ্রীড স্টাইল যোগ করিঃ
1 |
.container { |
2 |
display: grid; |
3 |
grid-template-columns: 1fr; |
4 |
grid-gap: 10px; |
5 |
}
|
এখানে আমরা যা বর্ণনা করছি তা হচ্ছে, কনটেইনারটি display: grid; হবে, এবং এটার একটি ভগ্ন ইউনিটসহ একক কলাম থাকবে (এই সময়ে এটার খুব বেশী প্রয়োজন নেই, কিন্তু আমরা এটাকে নিখুঁত করতে এটা যোগ করেছি) এবং সব গ্রীড আইটেমের মাঝখানে 10px শূন্যস্থান থাকবে।
বিষয়টা আরও একটু পরিস্কার করে তুলতে, এরপর আমরা বেশ কিছু ভিজুয়াল স্টাইল প্রয়োগ করবোঃ
1 |
.container > * { |
2 |
color: #353535; |
3 |
font-size: 1.2em; |
4 |
line-height: 1.5; |
5 |
padding: 20px; |
6 |
background: #d0cfc5; |
7 |
}
|
8 |
|
9 |
.container nav { |
10 |
background: #136fd2; |
11 |
}
|
12 |
|
13 |
nav ul { |
14 |
list-style: none; |
15 |
margin: 0; |
16 |
padding: 0; |
17 |
}
|
18 |
|
19 |
nav a { |
20 |
color: #d0cfc5 |
21 |
}
|
22 |
|
23 |
nav a:hover { |
24 |
text-decoration: none; |
25 |
}
|
এটিকে রেস্পন্সিভ করুন
চলুন একটি মিডিয়া কুয়েরি যোগ করি, তাই যখন "viewport" টি একটি নির্দিষ্ট আকারের হবে (ধরা যাক 600px) তখন লেআউটটিও পরিবর্তিত হবে।
1 |
@media only screen and (min-width: 600px) { |
2 |
|
3 |
/* grid */
|
4 |
.container { |
5 |
grid-template-columns: repeat(4, 1fr); |
6 |
}
|
7 |
|
8 |
/* specific item styles */
|
9 |
|
10 |
.container header, |
11 |
.container nav, |
12 |
.container footer { |
13 |
grid-column: span 4; |
14 |
}
|
15 |
.container section { |
16 |
grid-column: span 3; |
17 |
}
|
18 |
|
19 |
}
|
এখন, বড় স্ক্রিণে, গ্রিড ডিক্লারেশন পরিবর্তিত হয়ে হবে grid-template-columns: repeat(4, 1fr);। এটা আমাদেরকে একই প্রস্থের চারটি কলাম দিবে, তারপর, আমাদের প্রত্যেকটি গঠনগত উপাদানের জন্য আমরা কি পরিমাণ প্রসস্থতা চাই, তা নির্ধারণ করবো। header, nav, এবং footer সবগুলোই span 4( অর্থাৎ চার কলাম জুড়ে থাকবে) যখন section এলিমেন্টটি শুধুমাত্র তিন কলাম জুড়ে থাকবে, aside এর জন্য একটি কলাম আমরা ছেড়ে যাবো যা আপনাআপনিই পূরণ হবে।
অবশেষে, ন্যাভিগেশনের পথ পরিবর্তন করতে কিছু স্টাইল:
1 |
/* nav styles */
|
2 |
nav ul li { |
3 |
display: inline-block; |
4 |
padding: 0 20px 0 0; |
5 |
}
|
এখানে আমরা এ পর্যন্ত যা যা করেছি তার ফলাফল দেখানো হলোঃ
অফ-ক্যানভাসের ঝুঁকি নেয়া
CSS পজিশনিং কি করে গঠনগত উপাদানের সাথেও কাজ করতে পারে, এটা হচ্ছে তার একটি নিখুঁত উদাহরণ, এমনকি ডিক্লারেড গ্রীডের ভিতরও। আমরা আমাদের ন্যাভিগেশনটি (nav) ডকুমেন্ট ফ্লো থেকে সরিয়ে দিবো, এবং এটাকে off-canvas অবস্থানে নিয়ে আসতে যাচ্ছি। অন্যান্য গ্রীড আইটেমগুলো যার যার জায়গায় থাকবে, এটাই ভালো।
অন্য আরেকটি মিডিয়া কুয়েরি শুরু করি। আমাদের ইতিমধ্যেই min-width কুয়েরি আছে, কিন্তু এখন আমরা উপাদানগুলো max-width এর উপর ভিত্তি করে স্টাইল করতে চাই। যতক্ষন না আমাদের ভিউপোর্ট 600px পর্যন্ত পৌছাচ্ছে, ততক্ষন আমরা আমাদের ন্যাভিগেশনটিকে off-canvas এ রাখতে চাইঃ
1 |
@media only screen and (max-width: 599px) { |
2 |
|
3 |
#nav { |
4 |
position: fixed; /* or choose `absolute` depending on desired behavior*/ |
5 |
top: 0; |
6 |
bottom: 0; |
7 |
width: 300px; |
8 |
left: -340px; |
9 |
transition: left .3s ease-in-out; |
10 |
}
|
11 |
|
12 |
}
|
আমরা ন্যাভিগেশনটিকে একটি স্থির প্রস্থ দিতে যাচ্ছি, এবং এটাকে বাম পাশে এমনভাবে পজিশনিং করবো যাতে এটি সম্পূর্ণ ঢেকে যায়। আমরা পজিশন fixed ও ব্যবহার করবো, যদিও আপনি absolute ও ব্যবহার করতে পারেন, আপনি ন্যাভিগেশনটিকে উইন্ডোর সাথে সাথে স্ক্রল করাতে চান কি চান না তার উপর এটা নির্ভর করে।
আপনি একইসাথে transition রুলটি দেখতে পারেন, যা কিছু টগল কন্ট্রোল তৈরি করার পরই কার্যকর করা হবে।
কিভাবে টগল করবেন
আমাদের ন্যাভিগেশনটি অদৃশ্য করে দেয়ার পর, তা প্রয়োজন অনুযায়ী ফিরিয়ে আনার জন্য আমাদের বেশ কিছু কন্ট্রোল প্রয়োজন। চলুন তা বের করার জন্য একটি লিঙ্ক যোগ করা যাক, এবং বন্ধ করার জন্য আরও একটি লিঙ্ক যুক্ত করা যাক।
এবার এটাকে header -এ যুক্ত করিঃ
1 |
<a class="toggle open" href="#nav">open</a> |
এবং এটাকে nav এ যুক্ত করিঃ
1 |
<a class="toggle close" href="#">close</a> |
2 |
<!-- you might also want to use a “×” -->
|
আমাদের ন্যাভিগেশনের লিঙ্কটি বড় স্ক্রিনে প্রদর্শিত হউক তা আমরা চাই না, তাই এখন আমরা .toggle এলিমেণ্টটিকে min-width মিডিয়া কুয়েরির মধ্যে লুকিয়ে ফেলবো।
1 |
.toggle { |
2 |
display: none; |
3 |
}
|
:target সুডো কোড
উপরের লিঙ্ক গুলোর জন্য গুরুত্বপূর্ণ হচ্ছে একটি "fragment identifier" এর উপস্থিতি (এটা হচ্ছে href লিঙ্কের ভিতরের #nav)।নির্দিষ্ট উপাদানগুলো পেইজের মধ্যে সরাসরি চালিত করার জন্য এই শনাক্তকারী উপাদানগুলো বিভিন্ন ব্রাউজারের দ্বারা ব্যবহৃত হয়ে থাকে। এক্ষেত্রে, আমরা টার্গেট করবো এমন কিছু এলিমেণ্ট যা id “nav”এর সঙ্গে মিলে যায়, এবং যখন আমরা এটা টার্গেট করবো, একই সাথে আমরা এটা :target সুডো বা নকল ক্লাস দিয়ে স্টাইল করে নিবো। এখানে কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই!
নিন্মলিখিত কোডগুলো max-width মিডিয়া কুয়েরিতে যোগ করে নিনঃ
1 |
#nav:target { |
2 |
left: 0; |
3 |
}
|
এটুকুই! এটাই আমাদের টগল।
এখানে কাঙ্ক্ষিত রেজাল্টটি দেখানো হলোঃ
এটা কিভাবে কাজ করছে তা বোঝার জন্য, আপনি একই সাথে পূর্ণ পেইজ ডেমো টি দেখে নিতে পারেন।
পরিশিষ্ট
এবং আমরা সম্পন্ন করেছি! আমি ন্যূনতম স্টাইল বজায় রেখেছি এবং তাই এটা সেইভাবেই হয়েছে, কিন্তু চাইলে আপনি আবার শুরু থেকে তৈরি করতে পারেন এবং যেভাবে চান সেভাবে তৈরি করে নিতে পারেন।
আপনি চাইলে JavaScript টগলও তৈরি করে নিতে পারেন, এখানে :target এর পরিবর্তে, বাকি সব কিছুই আছে যা থেকে আপনি এটি কার্যকর করে নিতে পারেন।
আমি আশা করি আপনি এই ছোট গ্রীড অনুশীলনটি উপভোগ করেছেন, আরও বেশী টিউটোরিয়াল আসার অপেক্ষায় থাকুন!
উপকারী কিছু রিসোর্স
- Understanding CSS Grid Layout series on Tuts+
- Examining Responsive Navigation: Off Canvas Patterns by Steven Bradley
- Subscribe to csslayout.news
