ZURB ফাউন্ডেশন: একটি প্রতিক্রিয়াশীল ফ্রন্ট এন্ডের জন্য ইউজার ইন্টারফেস CSS ফ্রেমওয়ার্ক

2010 সালে ডিজাইন এজেন্সি ZURB একটি CSS ফ্রেমওয়ার্ক তৈরি করেছিল যার লক্ষ্যে একটি পরিষেবা শুরু করা হয়েছিল প্রোটোটাইপ তৈরির সুবিধা e উন্নয়নের সময় সংক্ষিপ্ত করুন. এটি করার জন্য, সেরা স্নিপেট, নিদর্শন এবং টেমপ্লেটগুলিকে ফাউন্ডেশনে একত্রিত করার জন্য বেছে নেওয়া হয়েছিল, ফ্রেমওয়ার্ক যা 2011 সালে একটি ওপেন সোর্স প্রকল্প হিসাবে প্রকাশিত হয়েছিল এবং যা তারপর থেকে জনসাধারণের জন্য বিনামূল্যে হতে চলেছে৷

ফাউন্ডেশন হল একটি প্রতিক্রিয়াশীল ফ্রন্ট এন্ড ফ্রেমওয়ার্ক, যাতে UI কনফিগারেশনের জন্য দক্ষ HTML এবং CSS উপাদান থাকে (ব্যবহারকারী ইন্টারফেস), বিভিন্ন স্নিপেট এবং টেমপ্লেট কিন্তু এছাড়াও অসংখ্য ঐচ্ছিক জাভাস্ক্রিপ্ট এক্সটেনশন। ওয়েব ফ্রেমওয়ার্ক আছে একটি মডিউল গঠন এবং বিভিন্ন ডিভাইস থেকে অ্যাক্সেসযোগ্য প্রকল্পগুলি কনফিগার করার জন্য ডিজাইন করা হয়েছে; সঙ্গে বিতরণ করা হয় এমআইটি লাইসেন্স এবং উভয় থেকে ডাউনলোড করা যাবে অফিসিয়াল হোমপেজ হতে GitHub. ফাউন্ডেশন সংস্করণ 4.0 থেকে কাজের ভিত্তি প্রযোজ্য "মোবাইল ফার্স্ট", তাই তারপর থেকে আমরা কার্যক্ষমতা অপ্টিমাইজ করতে এবং কাঠামোর মধ্যে ফাইলের আকার হালকা করতে বেশ কয়েকটি নতুন মডিউলের সাহায্যে কাজ করছি। ফাউন্ডেশনের স্ট্যান্ডার্ড সংস্করণ ছাড়াও, ZURB ইমেল নিউজলেটারগুলির বিকাশের জন্য অন্যান্য রূপগুলিও প্রকাশ করেছে (ইমেইল জন্য ফাউন্ডেশন) এবং এক পৃষ্ঠার সাইট (অ্যাপসের জন্য ভিত্তি).

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

ফাউন্ডেশন 6.0 এর জন্য আপনার কাছে আরও একটি পছন্দ আছে 40টি উপাদান নিম্নলিখিত সাতটি সেক্টরের অন্তর্গত:

• গ্রিড: প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য নির্ধারক উপাদান হল গ্রিডের নমনীয় বিন্যাস, যার প্রস্থ 1200 পিক্সেলের মান-অনুযায়ী। আপনি এই মডিউলটিও অনির্বাচন করতে পারেন, তবে সিস্টেমটি একটি ওয়েব প্রকল্প ডিজাইন করার ভিত্তি তৈরি করে যা বিভিন্ন ডিভাইস থেকে অ্যাক্সেসযোগ্য এবং বিভিন্ন রেজোলিউশন স্কেলে সামঞ্জস্যপূর্ণ। এটি ছাড়াও, সংস্করণ 6.0 থেকে শুরু করে "ফ্লেক্স গ্রিড" মডিউলটি বেছে নেওয়ার সম্ভাবনাও রয়েছে, যা CSS ফ্লেক্সবক্স মডেলের (যেমন একটি অনুভূমিক বা উল্লম্ব) ভিত্তিতে কাজ করে উপাদানগুলির আরও নমনীয় অবস্থানের অনুমতি দেয় বস্তুর সংগঠন)।

• সাধারণ: সাধারণ মডিউলগুলির মধ্যে (যা আনুষ্ঠানিকভাবে গ্রিডও এর অংশ) প্রথম এবং সর্বাগ্রে ক্লাস রয়েছে ভাসা e দৃষ্টিপাত, ধন্যবাদ যা আপনি করতে পারেন defiএকক উপাদানের অবস্থান এবং দৃশ্যমানতা সম্পর্কিত আচরণের নিয়মগুলি সংজ্ঞায়িত করুন; উপরন্তু, এই এলাকায় আপনি ফর্ম তৈরি করার জন্য একটি উপাদান, সেইসাথে লেখা এবং পাঠ্যের জন্য মৌলিক বিন্যাস ধারণকারী প্রিন্টিং হাউস মডিউল পাবেন।

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

• ন্যাভিগেশন: সামনের প্রান্তের কনফিগারেশনে, নেভিগেশন উপাদানগুলি অবশ্যই অনুপস্থিত থাকতে পারে না, তাই এমনকি ZURB ফাউন্ডেশনের সাথে আপনার প্রকল্পটি চালানোর জন্য আপনার কাছে অনেক ধরণের মডিউল রয়েছে যার সাথে সেট করতে হবে মেনু বার এবং মেনু (ড্রপ-ডাউন, ড্রপ-ডাউন তালিকা, ড্রিলডাউন), নেভিগেশন পাথ (ব্রেডক্রাম্ব) যোগ করুন বা পৃষ্ঠাগুলিতে নম্বর যোগ করুন।

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

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

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

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

আপনি যদি CSS দ্বারা অফার করা সুযোগগুলির সাথে সন্তুষ্ট হন এবং তারপরে ডাউনলোড করা CSS ফাইলে শৈলীগুলি ট্রান্সক্রাইব করুন, আপনি অবশ্যই সঠিক সিদ্ধান্ত নিয়েছেন। যাইহোক, ফাউন্ডেশন ফ্রেমওয়ার্কের আরও একটি বিশেষ বৈশিষ্ট্য রয়েছে: CSS কোডের ভিত্তি Sass স্টাইল শীট ভাষায় লেখা হয় (সিনট্যাক্টিক্যালি অসাধারণ স্টাইলশীট), যা CSS এর জন্য একটি তথাকথিত প্রিপ্রসেসর। Sass আপনার জন্য স্টাইল শীটে কাজ করা সম্ভব করে তোলে .scss যা পরবর্তীকালে জনপ্রিয় .css ফাইলগুলিতে কম্পাইল বা প্রতিলিপি করা যেতে পারে এবং যা ব্রাউজার দ্বারা পড়া এবং ব্যাখ্যা করা হয়।

আপনি ZURB ফ্রেমওয়ার্কের Sass বৈকল্পিক ব্যবহার করলে, আপনি নিম্নলিখিত সুবিধাগুলি উপভোগ করবেন:

• সরলীকৃত বাক্য গঠন (Sass বা CSS), যা স্টাইল শীট লেখা সহজ করে তোলে

• সম্ভাবনা defiশেষ বাণী মডেল (মিক্সিনস) পুনরাবৃত্ত বিন্যাসগুলিকে কেন্দ্রীয়ভাবে সংরক্ষণ করতে এবং ইচ্ছামত তাদের সংহত করতে

• বিভিন্ন শৈলী শীট সহজ সমন্বয় HTTP অনুরোধ কমাতে

• ব্যবহার ভেরিয়েবল এবং ফাংশন কেন্দ্রীয়ভাবে রং, দূরত্ব, ফন্ট ইত্যাদি বিনিময় করতে

• কোড সহজভাবে গঠন করা যেতে পারে ধন্যবাদ পাখির ক্রমানুসারে, আপনাকে কোডের অনেক স্ট্রিং ছাড়াই ক্লিনার কাজ করার অনুমতি দেয়

Sass কম্পাইলারটি মূলত রুবিতে লেখা। যাইহোক, যদি আপনি এই প্রোগ্রামিং ভাষা ব্যবহার না করেন, তাহলে আপনাকে Sass-এর জন্য এটি ইনস্টল করতে বাধ্য করা হবে না কারণ LibSass-এর সাথে আপনার কাছে C-তে একটি বিকল্প লেখা থাকবে। LibSass ব্যবহার করা সমস্ত অপারেটিং সিস্টেমের সাথে কাজ করে এবং সহজেই Node.js-এ ইনস্টল করা যায়। কর্মপ্রবাহ, অর্থাৎ, Sass-এর কোডে পরিবর্তন করা এবং স্বয়ংক্রিয়ভাবে সেগুলিকে CSS-এ অনুবাদ করা।

সংস্করণ 5 থেকে ফাউন্ডেশন 6.0-তে রূপান্তরের সাথে, ZURB আবারও পুরো কাঠামোর ফাইলের আকার হ্রাস করেছে: এর 60 KB CSS এবং 84 KB জাভাস্ক্রিপ্ট সহ, ফাউন্ডেশন একটি হিসাবে খ্যাতি উপভোগ করে সবচেয়ে সুবিন্যস্ত উন্নয়ন প্ল্যাটফর্ম এক এবং পড়ুন যে আছে. উপরে উল্লিখিত মডুলার কাঠামো এবং কাস্টমাইজেশনের একটি নির্দিষ্ট স্বাধীনতার জন্য ধন্যবাদ, আপনি এমনকি ফ্রেমওয়ার্কের আকার আরও কমাতে সক্ষম। নমনীয় গ্রিড এবং বিভিন্ন সঙ্গে সমন্বয় বৈশিষ্ট্যাবলীজায়গা (উদাহরণস্বরূপ একটি কার্যকর কীবোর্ড নেভিগেশনের স্থানান্তরের জন্য) ZURB দ্বারা বাস্তবায়িত, বিভিন্ন প্ল্যাটফর্ম এবং ডিভাইসে সামঞ্জস্যপূর্ণ একটি ওয়েব প্রকল্প বাস্তবায়নের জন্য অপরিহার্য শর্তগুলি সম্পূর্ণরূপে সন্তুষ্ট বলে বিবেচিত হতে পারে। ARIA বৈশিষ্ট্যগুলি সর্বোত্তমভাবে নথিভুক্ত করা হয় এবং যেখানে আপনি আপনার ওয়েবসাইটের অ্যাক্সেসযোগ্যতা উল্লেখযোগ্যভাবে অপ্টিমাইজ করতে চান সেখানে উপলব্ধ।

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

ZURB ফাউন্ডেশন ডেভেলপারদের সাথে প্রথম প্রোটোটাইপ থেকে রেডি-টু-ব্যবহারের ওয়েবসাইট পর্যন্ত এবং সর্বোপরি এটির নিজস্ব বৈশিষ্ট্য দক্ষতা. আপনি যদি দেখেন যে কিছু উপাদান অপ্রয়োজনীয়, আপনার কাছে অন্যান্য উপাদানের কার্যকারিতা প্রভাবিত না করে সেগুলি অনির্বাচন করার বিকল্প রয়েছে। উপসংহারে, CSS ফ্রেমওয়ার্ক একটি বিশেষভাবে সরু কোড দ্বারা চিহ্নিত করা হয় যা ZURB "মোবাইল ফার্স্ট" দ্বারা নির্বাচিত লেইটমোটিফকে হাইলাইট করে। এক্সাথে অত্যন্ত নমনীয় গ্রিড সিস্টেম, যা আপনি ঐচ্ছিকভাবে Sass এর সাথে মানিয়ে নিতে পারেন, কাঠামোটি বিকাশের জন্য আদর্শ প্রতিক্রিয়াশীল সামনে শেষ যেগুলির ডেটা লোডিং এবং দুর্দান্ত অ্যাক্সেসিবিলিটি এবং সেইসাথে বিভিন্ন স্ক্রিনের আকারে মানিয়ে নেওয়ার ক্ষেত্রে উচ্চ গতির সুবিধা রয়েছে৷

আপনি কাস্টমাইজড এবং সম্ভবত আরও জটিল ওয়েব প্রজেক্ট তৈরির জন্য ZURB ফ্রেমওয়ার্ক ব্যবহার করতে পারেন, তবে এটি যথেষ্ট পরিমাণে শক্তির সাথে সংযুক্ত এবং স্নিপেটগুলির একটি ভাল বোঝার প্রয়োজন।