V1 থেকে V2 এ যাওয়ার গাইড

V2 আপডেট

সবকিছুই V2 তে আরও স্পষ্টভাবে ব্যাখ্যা করা হয়েছে

আমরা [Topic] কৌশল পদ্ধতি প্রবর্তন করেছি।

Client-First V2 -এর সবচেয়ে উল্লেখযোগ্য আপডেট হল, আমরা কীভাবে Client-First এর ধারণা ব্যাখ্যা করি। V1 এ বিষয়বস্তুর সংগঠন এবং কিছু বিষয়ের জন্য স্পষ্ট ব্যাখ্যার অভাব ছিল।

Client-First কে আমাদের আরও ভালভাবে বুঝতে সাহায্য করার জন্য, V2 একটি নতুন বিষয়বস্তু সংগঠন পদ্ধতি চালু করেছে। প্রতিটি বিষয়ের আরও সুনির্দিষ্ট ব্যাখ্যা রয়েছে।

আরও প্রয়োজনীয় বিষয়গুলি "কৌশল" হিসাবে সংগঠিত হয়েছে —

• Class নামকরণের নিয়ম
• ওয়েবসাইট এর মূল কাঠামো সাজানোর নিয়ম
• Typography সাজানোর নিয়ম
• ‍Spaci/client-first/bnng/ফাঁকা জায়গা ব্যবহারের নিয়ম
• ‍এবং আরো অনেক কিছু

ফোল্ডার / Folder

আমরা আমাদের Webflow প্রজেক্টের মধ্যে, কীভাবে class গুলিকে কল্পনা করি, তা ফোল্ডারগুলি পুনরায় সংজ্ঞায়িত করবে।

Client-First ফোল্ডার আমাদের একটি নমনীয় ফোল্ডার কাঠামোতে, class সংগঠিত করাতে দেবে।

একটি কাস্টম ফোল্ডার তৈরি করতে, underscore ব্যবহার করুন। শুধুমাত্র ড্যাশ(-) দ্বারা utility class সংগঠিত করুন।

ফোল্ডারগুলি শুধুমাত্র Client-First + Finsweet Extension এর সাথে কাজ করবে। ফোল্ডার / Folder -এ আরও জানুন।

Component গুলো আরও ভালভাবে সংজ্ঞায়িত করা হয়েছে

V2 -তে, আমরা যখন component গুলি ব্যবহার করি, তখন আমরা আরও সুনির্দিষ্ট হব — এবং underscores ব্যবহার করার সময় আরও নির্দিষ্ট !

V1 এর প্রাথমিক প্রকাশ
underscore in class name = component

V2 এর ফোল্ডার সহ প্রকাশ
underscore in class name = folder
[folder-name]_component = component

ক্লাসের নামে একটি underscore ব্যবহার করার অর্থ এই নয় যে, ফোল্ডারটি একটি component । আমরা এখন ফোল্ডারে element গুলির সংগঠন বা গ্রুপিংয়ের জন্য underscore ব্যবহার করি।

Component গুলির এখন একটি নির্দিষ্ট শ্রেণীবিভাগ আছে। যদি আমরা একটি element কে একটি component হিসাবে বিবেচনা করতে চাই, তবে আমরা element শনাক্তকারীর জন্য "component" শব্দটি ব্যবহার করি।

ফোল্ডার / Folder ব্যবহারের নিয়ম -এ আরও জানুন।

Class এর প্রকারগুলি আরও ভালভাবে সংজ্ঞায়িত করা হয়েছে

Custom class, utility class, global class, combo class গুলো Class নামকরণের নিয়ম -এ আরও ভালভাবে সংজ্ঞায়িত এবং ব্যাখ্যা করা হয়েছে।

class এর ধরনগুলিকে আরও ভালভাবে বোঝার মাধ্যমে, আমরা ওয়েবসাইট নির্মাণের সময় আরও ভাল সিদ্ধান্ত নিতে পারি।

page-padding এখন padding-global

আমাদের প্রজেক্টের সবচেয়ে গুরুত্বপূর্ণ padding মানকে এখন padding-global বলা হয়। এই নাম পরিবর্তনের ফলে আমাদের ফোল্ডার সিস্টেমের আরও ভাল সংগঠন হয়।

আমাদের ^padding class page- ফোল্ডারে রাখার পরিবর্তে, আমরা padding- ফোল্ডারে রাখি।

‍ওয়েবসাইট এর মূল কাঠামো সাজানোর নিয়ম -এ আরও জানুন।

section-[identifier] এখন section_[identifier]

Section class গুলি এখন ড্যাশের(-) পরিবর্তে underscore ব্যবহার করে।

আমাদের নতুন ফোল্ডার আপডেট নিশ্চিত করে যে, Utility class -ই একমাত্র class যা ড্যাশ ব্যবহার করে। Custom class গুলো underscore ব্যবহার করে। Section class গুলিকে "custom class" হিসাবে শ্রেণীবদ্ধ করা হয়, যার অর্থ তাদের class এর নামে একটি underscore প্রয়োজন ৷

underscore একটি custom class ফোল্ডার — section_ এর ভিতরে "section class" রাখে।

সকল section class সেকশন ফোল্ডারে থাকবে। ওয়েবসাইট এর মূল কাঠামো সাজানোর নিয়ম -এ আরও জানুন।

নতুন padding-section-[size] টি গ্লোবাল section padding স্থাপন করে

আমরা section জুড়ে গ্লোবাল স্পেসিং পরিচালনা করতে একটি নতুন utility class সিস্টেম যুক্ত করেছি। এই স্পেসিং সিস্টেম আপডেটের লক্ষ্য হল, section গুলির জন্য আমাদের কাছে থাকা স্পেসিং বিকল্পের সংখ্যা সীমিত করা + পুরো প্রজেক্ট জুড়ে তাদের একীভূত রাখা।

ওয়েবসাইট এর মূল কাঠামো সাজানোর নিয়ম -এ আরও জানুন।

নতুন padding-section-[size] class গুলো (3 classes) — copy to clipboard.

নতুন heading-style-[h#] একীভূত Heading style গুলো বজায় রাখে

যখন একটি Heading ট্যাগের style গুলিকে একটি ভিন্ন Heading ট্যাগ হিসাবে প্রদর্শনের প্রয়োজন হয়, তখন আমরা আমাদের heading-style-[h#] class ব্যবহার করতে পারি।

উদাহরণস্বরূপ, যদি আমাদের SEO -র উদ্দেশ্যে একটি ^H2 প্রয়োজন হয়, কিন্তু text টির ^H3 এর style অনুসরণ করা উচিত, তবে আমরা সঠিক semantic HTML ট্যাগ বজায় রেখে এর style পরিবর্তন করতে ^H2 -এ heading-style-h3 প্রয়োগ করতে পারি।

‍Typography সাজানোর নিয়ম -এ আরও জানুন।

নতুন heading-style-[h#] class গুলো (6 classes) — copy to clipboard.

নতুন display-inlineflex utility class গুলো

CSS property ^{display: inline-flex} প্রয়োগ করা, Webflow -তে সমর্থিত নয়।

ব্যবহারের ক্ষেত্র: সাধারণত CSS property ^{display: flex} ব্যবহার করা আমাদের প্রজেক্টে গুরুত্বপূর্ণ। তবে,  ^{display: flex} এর কারণে মূলত 100% স্পেস ধারণ করতে হয়। এটি বাটনের জন্য ফ্লেক্সবক্স ব্যবহার করা কঠিন করে তোলে। ^{display: inline-flex} element গুলিকে "inline" হিসাবে আচরণ করার অনুমতি দেয়, যখন তাদের ভিতরে Flex ক্ষমতা বজায় রাখে।

Utility class ব্যবহারের নিয়ম -এ আরও জানুন।

নতুন display-inlineflex class গুলো (1 class) — copy to clipboard.

অপসারিত show-  utility class গুলো

অপসারিত show- utility class গুলো। Show class গুলি বিভিন্ন "responsive" স্তরে ^{display: block} প্রয়োগ করতো।

আমরা দেখেছি যে, show- class গুলি খুব সীমিত ছিল, শুধুমাত্র অল্প পরিমাণে ব্যবহারের ক্ষেত্রে কাজ করে এবং অবাঞ্ছিত responsive সমস্যার দিকে নিয়ে যেতে পারে।

‍Element গুলিতে "show" ক্লাস প্রয়োগ করার পরিবর্তে, আমরা সরাসরি custom class এ ^display property গুলো প্রয়োগ করতে পারি।

উপরন্তু, আমরা একটি combo class এ যেকোনো ^display property গুলো প্রয়োগ করতে পারি। উদাহরণস্বরূপ, modal_component is-visible-tablet.

Spacing এর জন্য নতুন কৌশল

V2 প্রসারিত করে যেভাবে আমরা পুরো প্রজেক্ট জুড়ে space element এ utility class এবং custom class ব্যবহার করতে পারি। আমরা spacing বাস্তবায়নের জন্য নতুন পদ্ধতি যোগ করেছি।

Utility class system এর সাথে Spacing

• Spacing wrappers (V1)
• Spacing blocks (V2 তে নতুন)

Custom class গুলোর সাথে Spacing

• On the element (V1)
• CSS Grid on the parent (V2 তে নতুন)

গ্লোবাল Style গুলোর embed এ উন্নত custom CSS

Global Styles embed page -এ অন্তর্ভুক্ত প্রতিটি CSS snippet এর একটি সম্পূর্ণ ওভারভিউ রয়েছে।

V2 তে সম্পূর্ণ নতুন page গুলো

V2 নতুন content page গুলি V1 -এ অন্তর্ভুক্ত নয় এমন বিষয়গুলির জন্য যোগ করে ৷

• ভূমিকা Client-First এর সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলির রূপরেখা দেয়।
• Learning path আমাদের Client-First শেখার জন্য 7-দিনের পথ দেখায়।
• ডকুমেন্টেশন - page টি সম্পূর্ণরূপে Client-First শিখতে আমাদের অনুপ্রাণিত করতে সাহায্য করে।
• ফোল্ডার / Folder ও ফোল্ডার / Folder ব্যবহারের নিয়ম আমাদের নতুন class ভিজ্যুয়ালাইজেশন পদ্ধতিতে একটি সম্পূর্ণ ব্যাখ্যা দেয়।
• Semantic HTML ট্যাগ কিভাবে সঠিকভাবে HTML তৈরি করতে হয় তা আমাদের আরও ভালভাবে বুঝতে সাহায্য করে।
• CSS Specificity আমাদের ব্যাখ্যা দেয়, যখন আপনি element এবং component গুলো copy এবং paste করেন, তখন কেন margin এবং padding class কাজ করে না।
• Global Styles embed আমাদের Client-First ক্লোনযোগ্য -তে যোগ করা কাস্টম CSS-এর উদ্দেশ্য বুঝতে সাহায্য করে।
• Sales strategy আমাদের আরও প্রজেক্ট জেতার জন্য আমাদের বিক্রয় প্রক্রিয়ায় Client-First ব্যবহার করার পদ্ধতি দেয়।
• Convert past projects আমাদের অতীতের প্রজেক্ট গুলিকে Client-First এ রূপান্তর করার বিষয়ে তথ্য দেয়।

Client-first থেকে Client-First

Finsweet সম্প্রতি একটি নতুন লোগো প্রকাশ করেছে। এই লোগোটি ছোট হাতের "f" কে বড় হাতের "F" এ প্রতিস্থাপন করে।

আমরা Client-First এর জন্য একই ধারা অনুসরণ করব।

Client-first V1 একটি ছোট হাতের "f" বৈশিষ্ট্যযুক্ত। V2 তে, আমরা পুরো ব্র্যান্ড জুড়ে বড় হাতের F কে আনুষ্ঠানিক করে তুলি। এই আপডেটটি Client-first থেকে Client-First এ পরিবর্তন করে।

Finsweet এর f থেকে F -এ যেতে আগ্রহী? এখানে আমাদের লাইভ স্ট্রিম দেখুন।