ফ্লেক্সবক্স এবং গ্রিডে ডিজাইনারের গাইড

এই রূপান্তরকারী বিন্যাস সরঞ্জামগুলি সম্পর্কে ডিজাইনারদের কী জানা উচিত।

সিএসএস ১৯৯ introduction সালে প্রবর্তনের পর থেকে দীর্ঘ পথ পেরিয়ে গেছে, তবে লেআউটটির জন্য আমরা যে সরঞ্জামগুলি উপলভ্য করেছি সেগুলি খুব বেশি পরিবর্তন হয়নি। সারণী বিন্যাসগুলি অবিশ্বাস্যরূপে অনমনীয় ছিল, ভাসমান-ভিত্তিক লেআউটগুলি মূলত একটি হ্যাক ছিল, অবস্থান-ভিত্তিক বিন্যাসগুলি অভিযোজনযোগ্য ছিল না এবং দক্ষতার উপায়ে কোনওরকম জটিলতার কোনও ব্যবস্থা করতে পারেনি। আমাকে ভুল করবেন না - এই পদ্ধতিগুলি আমাদের সত্যই অনেক দূরে পেয়েছিল তবে এগুলি জটিল বিন্যাসের উদ্দেশ্যে নয় are

লেআউটটির জন্য এই পুরানো পদ্ধতির সংক্ষিপ্তসারগুলি প্রতিক্রিয়াশীল ওয়েব ডিজাইনের সাথে আরও স্পষ্ট হয়ে উঠেছে, যাতে ওয়েবের তরলতাটি আলিঙ্গন করা মৌলিক।

ফ্লেক্সবক্স এবং গ্রিডের সাথে, শেষ পর্যন্ত আমাদের কাছে লেআউটগুলির জন্য বিশেষভাবে লক্ষ্যযুক্ত সরঞ্জামগুলি রয়েছে যা পূর্ববর্তী লেআউট পদ্ধতিগুলির সাথে আরও দক্ষ এবং হ্যাকগুলি অকার্যকর। তারা পুরানো সমস্যাগুলিতে নতুন সম্ভাবনাগুলিকে আনলক করে, এমন জিনিসগুলিকে সক্ষম করে যা আগে সম্ভব ছিল না এবং প্রতিক্রিয়াশীল ওয়েব ডিজাইনের সাহায্যে আমাদের আসল সমস্যাগুলি সমাধান করে।

flexbox

ফ্লেক্সবক্স, ওরফে সিএসএস নমনীয় বাক্সগুলি একটি নতুন বিন্যাস পদ্ধতি যা আমাদের প্রান্তিককরণ নিয়ন্ত্রণ দেয় যা অন্য কোনও সিএসএস পদ্ধতি উত্পাদন করতে পারে না। এটি 'মাইক্রো লেআউট'-এ অ্যাক্সেস করে: একটি ধারক মধ্যে আইটেমগুলির মধ্যে স্থান সারিবদ্ধ, অর্ডার এবং বিতরণ করার ক্ষমতা বা উপলব্ধ স্থানকে সর্বোত্তমভাবে পূরণ করার জন্য কোনও উপাদানের প্রস্থ বা উচ্চতা পরিবর্তন করার ক্ষমতা।

উন্নত মোড়ানো

প্রতিক্রিয়াশীল ওয়েব ডিজাইনে, ভিউপোর্টের প্রস্থের আকারগুলি পরিবর্তন করার সাথে সাথে উপলব্ধ প্রস্থের আকার পৃথক হয়। এটি অনিচ্ছাকৃত সামগ্রী মোড়ানোর দিকে নিয়ে যেতে পারে, বিশেষত যখন বিষয়বস্তুর জন্য নকশার চেয়ে দীর্ঘ হয় বা সামগ্রীটির ধারকটি খুব সংকীর্ণ হয়। আমরা সম্ভবত এর আগে সকলেই দেখেছি: নকশাটি 'আদর্শ' সামগ্রীর দৈর্ঘ্যের জন্য অ্যাকাউন্ট করে তবে এটি বাস্তবায়িত হওয়ার সাথে সাথে আসল সামগ্রী যুক্ত হওয়ার সাথে সাথে সামগ্রীটি পরবর্তী লাইনে আবৃত হয় কারণ সেখানে পর্যাপ্ত জায়গা বা অবিচ্ছিন্নতা ছিল না its ধারক। উভয়ই আদর্শ নয় এবং লেআউটগুলি ভেঙে দিতে পারে।

সমস্যাটি নিশ্চিত হচ্ছে না যে উপলভ্য স্থানটি সর্বদা দৈর্ঘ্যতে পরিবর্তিত হতে পারে এমন সামগ্রীর জন্য যথেষ্ট পরিমাণে যথেষ্ট পরিমাণে থাকবে। Ditionতিহ্যগতভাবে, আমরা সামগ্রী মোড়ক নিয়ে সমস্যাগুলি হ্রাস করতে নির্দিষ্ট ব্রেকপয়েন্টগুলিতে লেআউট সামঞ্জস্য করতে সিএসএস মিডিয়া ক্যোয়ারী ব্যবহার করেছি। তবে মিডিয়া ক্যোয়ারীগুলি বিষয়বস্তুর দৈর্ঘ্য নিজেই বিবেচনা করে না - এগুলি একটি স্পষ্ট প্রস্থ বা উচ্চতার প্রতিক্রিয়া জানায়। এটি প্রায়শই স্পষ্ট ব্রেকপয়েন্টগুলিতে নির্দিষ্ট টুকরো সামগ্রীর নিয়ন্ত্রণের জন্য অতিরিক্ত পরিমাণে মিডিয়া কোয়েরিতে ফলাফল দেয়।

ফ্লেক্সবক্সের সাহায্যে উন্নত মোড়কের উদাহরণ

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

ভাসমানের মতো ditionতিহ্যবাহী পদ্ধতিগুলির ফলে লোকেশন লেবেলটি ছোট ভিউপোর্টে ডান-প্রান্তে থাকতে পারে, যা আদর্শের চেয়ে কম। আপনি একটি নির্দিষ্ট ব্রেকপয়েন্টে লেবেল বাম দিকে ভাসিয়ে এটি সংশোধন করতে পারেন। এই পদ্ধতির সমস্যাটি এখন আপনার সামগ্রীর স্টাইল পরিবর্তন করতে ব্রেক ব্রেকপয়েন্টের উপর নির্ভরশীল, যা দৈর্ঘ্যে পরিবর্তিত হতে পারে।

ব্যবধান ও প্রান্তিককরণ উন্নত

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

ফ্লেক্সবক্স অজানা প্রস্থ বা উচ্চতার একটি অঞ্চলের মধ্যে অজানা সংখ্যক আইটেমের মধ্যে স্থান বন্টন সক্ষম করে এবং এক্স বা ওয়াই অক্ষের উপর আইটেমগুলি সারিবদ্ধ করে সমাধান করে। এটি স্কেচ বা ইলাস্ট্রেটারের মতো নকশার সরঞ্জামগুলি কীভাবে ব্যবধান এবং প্রান্তিককরণ নিয়ন্ত্রণ করতে পারে, ওয়েবে আমাদের প্রত্যাশা নিয়ন্ত্রণ নিয়ন্ত্রণ সক্ষম করে like

ফ্লেক্সবক্সের সাথে উন্নত স্থান বিতরণের উদাহরণ

এই নিয়ন্ত্রণের একটি দুর্দান্ত উদাহরণ উপরে দেখা যায়: নেভিগেশন আইটেমগুলি সমানভাবে বিতরণ করা হয়, উল্লম্বভাবে কেন্দ্রীভূত হয় এবং প্রথম এবং শেষ আইটেমটি নেভিগেশন ধারকটির প্রান্তে ফ্লাশ হয়। আইটেমগুলিতে ইনলাইন ব্লক প্রয়োগ করা বা টেবিল বিন্যাসের উপর নির্ভর করা যেমন traditionalতিহ্যবাহী পদ্ধতিগুলি ব্যবহার করা অসম্ভব হত।

উত্স আদেশ

উত্স ক্রমটি সেই আদেশটিকে বোঝায় যেগুলিতে এইচটিএমএল উপস্থিত রয়েছে যেখানে তার ভিত্তিতে উপাদানগুলি পৃষ্ঠায় প্রদর্শিত হবে। ডিফল্টরূপে, উপাদানগুলি ডিফল্টরূপে উপরে থেকে নীচে এবং বাম থেকে ডানে প্রদর্শিত হবে - তাদের প্রস্থটি তাদের প্রদর্শনের সম্পত্তি দ্বারা নির্ধারিত হচ্ছে।

আপনার নকশাটি বিভিন্ন ভিউপোর্ট প্রস্থের সাথে কীভাবে খাপ খাইয়ে নেবে তা ভেবে যখন নথির প্রাকৃতিক উত্স ক্রমটি আপনাকে গাইড করতে পারে তবে আইটেমগুলিকে পুনর্বিন্যাসের জন্য এটি পরিবর্তন করতে কখনই দরকারী। ফ্লেক্সবক্সের আগে এটি করার একমাত্র উপায় হ'ল উপাদানটি লুকিয়ে রাখা এবং অন্য দেখানো, ফলস্বরূপ ডুপ্লিকেট এইচটিএমএল তৈরি করা বা সম্পূর্ণ অবস্থানের উপর নির্ভর করা, যা সর্বদা কাজ করে না যখন সামগ্রী আকারে পৃথক হতে পারে। ফ্লেক্সবক্সের সাহায্যে আপনি অন্তর্নিহিত এইচটিএমএল কাঠামোটি সংশোধন করার প্রয়োজন ছাড়াই ফ্লেক্স আইটেমগুলির ক্রমটি সংশোধন করতে পারেন।

ফ্লেক্সবক্সের সাথে আইটেম অর্ডার করার উদাহরণ

উপরের উদাহরণটি ফ্লেক্সবক্সে অর্ডার প্রদর্শন করে: আমরা ফুটারের বাম দিকে লোগোটি প্রদর্শন করি যা শিরোলেখের সাথে সামঞ্জস্যপূর্ণ। ছোট ভিউপোর্টে, আমরা লোগোর আগে অবস্থানগুলি প্রদর্শন করি। এই পুনঃক্রমটি অর্থবোধ করে কারণ অবস্থানগুলি এই প্রসঙ্গে আরও গুরুত্বপূর্ণ।

গ্রিড বিন্যাস

সিএসএস গ্রিড লেআউটটি একটি দ্বি-মাত্রিক লেআউট সিস্টেম যা ওয়েবের জন্য বিশেষভাবে তৈরি। এটি আমাদের পৃষ্ঠাগুলিকে এমন অঞ্চলে বিভক্ত করার ক্ষমতা দেয় যা প্রতিটিকে আকার, অবস্থান এবং স্তর হিসাবে আরও সংজ্ঞায়িত করা যায়, যার ফলে অবিশ্বাস্যভাবে শক্তিশালী নেটিভ কাঠামো তৈরি হয়।

কাজের জন্য উপযুক্ত

সিএসএসের উদ্দেশ্য বিন্যাস সরঞ্জামের জন্য সত্যিকারের ফিট কখনই নেই, তাই আমরা কীভাবে আমাদের কাজে গ্রিড প্রয়োগ করতে পারি তা নিয়ে আমাদের বেশ উদ্ভাবক হতে হয়েছিল। গ্রিড ফ্রেমওয়ার্কগুলি এই প্রয়োজনীয়তাটি পূরণ করার জন্য উত্থিত হয়েছে, তবে তাদের নিজস্ব সমস্যাগুলি প্রবর্তন না করেই। অনেক জনপ্রিয় গ্রিড ফ্রেমওয়ার্কগুলিকে মার্কআপে লেআউট সংজ্ঞা প্রয়োজন যা কোড ব্লাট, রক্ষণাবেক্ষণের সমস্যাগুলি এবং ডকুমেন্টের কাঠামো এবং উপস্থাপনার বিভাজনকে ঝাপসা করে।

গ্রিড সহ, আমাদের আর গ্রিড কাঠামোর প্রয়োজন নেই - এটি সিএসএসে বেকড একটি দেশীয় কাঠামো। এটি আমাদের ওয়েবের ডিফল্ট তরলতা গ্রহণ করার সময়, স্বজ্ঞাত উপায়ে সিএসএসে লেআউটকে সংজ্ঞায়িত করতে সহায়তা করে। এই নতুন লেআউট সরঞ্জামটির ক্ষমতা অবিরাম এবং এটি জাভাস্ক্রিপ্টের আগমনের আগে কেবল সম্ভব লেআউটগুলি সম্পাদন করতে সক্ষম করে।

গ্রিড লেআউট উদাহরণ

নেক্সট-জেনারেশন ওয়েব লেআউটগুলি

যখন এটি বিন্যাসে আসে, আমরা বেশ কিছুক্ষণের জন্য ঝাঁকুনিতে আটকে থাকি। সিএসএসে প্রতিষ্ঠিত নিদর্শন এবং পূর্ববর্তী লেআউট সরঞ্জামগুলির সীমাবদ্ধতা অতীতে আমাদের লেআউটের সমজাতীয়তার পথে নিয়ে গেছে। এটি সনাক্ত করতে আপনাকে ওয়েবে আর যেতে হবে না: শিরোনাম, প্রধান সামগ্রী, সাইডবার, পাদচরণ।

প্রতিক্রিয়াশীল ওয়েব ডিজাইনের আগমন পৃষ্ঠার বিন্যাসের জন্য কিছু নতুন ধারণা শুরু করেছে এবং এর সাথে কিছু ভাল নিদর্শন উদ্ভূত হতে শুরু করেছে: সাইডবারটি খনন করুন, নকশাটি সরল করুন এবং সামগ্রীটিতে ফোকাস করুন। তবে আমরা এমন প্যাটার্নগুলি উত্থানও দেখতে পাচ্ছি যা এতো সর্বব্যাপী হয়ে উঠেছে যে আমরা "সমস্ত ওয়েবসাইট একরকম দেখায়" এই উদ্দীপনাটি শুনছি।

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

সাবধানতার একটি শব্দ

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে সমস্ত ব্রাউজারগুলি ফ্লেক্সবক্স এবং গ্রিড বৈশিষ্ট্যগুলিকে সমর্থন করে না। আমাদের প্রজেক্টগুলি প্রতিটি প্রকল্পের জন্য কে আমাদের বিবেচনা করা উচিত এবং এটি নির্ধারণ করতে হবে না যে সংখ্যাগরিষ্ঠ ব্যবহারকারীরা এই আরও উন্নত বৈশিষ্ট্যগুলি থেকে উপকৃত হবেন কিনা, এবং অসমর্থিত ব্রাউজারগুলির জন্য বুদ্ধিমান ফলব্যাক সরবরাহ করবেন। উত্তেজক ব্রাউজারগুলিতে ব্যবহারকারীদের আপনার ইউআই এর একটি সরলিকৃত সংস্করণ সরবরাহ করা এবং নতুন ব্রাউজারগুলিতে ব্যবহারকারীদের জন্য এটি বাড়ানো পুরোপুরি গ্রহণযোগ্য।

আরো আছে. আরো বেশি.

আমরা কেবল ফ্লেক্সবক্স এবং গ্রিড কী করতে পারে তার পৃষ্ঠটি স্ক্র্যাচ করেছি। ভাগ্যক্রমে, প্রচুর দুর্দান্ত ডকুমেন্টেশন উপলব্ধ রয়েছে যা এই নতুন লেআউট সরঞ্জামগুলির ক্ষমতাকে স্পর্শ করে। আমার পছন্দের কয়েকটি এখানে:

flexbox

গ্রিড

সিএসএসে লেআউট করার ক্ষেত্রে ওয়েবে যে কেউ তৈরি করছেন তা বেদনাদায়কভাবে বিভিন্ন সীমাবদ্ধতা সম্পর্কে অবগত আছেন। প্রায়শই এটির জন্য ডিজাইনের সাথে আপস করা দরকার যাতে এটি বিকাশের প্রত্যাশার মতো কাজ করে বা আরও খারাপ, জাভাস্ক্রিপ্টের উপর নির্ভর করে আমাদের প্রয়োজনীয় আচরণটি বাস্তবায়নের জন্য।

ফ্লেক্সবক্স এবং গ্রিড বিন্যাসের আগমন ওয়েবে লেআউটের একটি নতুন যুগের ইঙ্গিত দেয়। অতীতের অভ্যাস, ত্রুটি এবং হ্যাকের দ্বারা সীমাবদ্ধ না হওয়ার জন্য যখন বিন্যাসের বিষয়টি আসে তখন আমাদের অবশ্যই নতুন মানসিকতা অবলম্বন করতে হবে। আসুন এই নতুন সরঞ্জামগুলিকে আলিঙ্গন করি এবং ওয়েবে বিন্যাসের মাধ্যমে কী সম্ভব তার জন্য আমাদের অনুসন্ধানকে নবায়ন করি।