Foundation এর ফোল্ডার এবং ফাইল স্ট্রাকচার

Foundation ব্যবহার করার সময় এর ফাইল এবং ফোল্ডার স্ট্রাকচারটি বুঝতে পারা খুবই গুরুত্বপূর্ণ, বিশেষত যখন এটি npm বা CLI এর মাধ্যমে ইন্সটল করা হয়। Foundation ফ্রেমওয়ার্ক একটি সুসংগঠিত এবং মডুলার ফাইল স্ট্রাকচার প্রদান করে, যা সহজে কাস্টমাইজেশন এবং উন্নতমানের ওয়েব ডেভেলপমেন্টে সাহায্য করে।

সাধারণ ফোল্ডার এবং ফাইল স্ট্রাকচার

Foundation-এর সাধারণ স্ট্রাকচার নিম্নরূপ:

project-folder/
│
├── dist/                    # কম্পাইলড (compiled) CSS ও JavaScript ফাইল
├── node_modules/            # npm প্যাকেজ ফাইল
├── scss/                    # Sass ফাইল (কাস্টমাইজড Foundation স্টাইলের জন্য)
│   ├── foundation/          # Foundation-এর সমস্ত Sass ফাইল
│   ├── _settings.scss       # কাস্টমাইজেশনের জন্য মূল সেটিংস ফাইল
│   └── app.scss             # প্রোজেক্টের প্রধান Sass ফাইল
├── src/                     # সোর্স কোড (HTML, JS এবং অন্যান্য সম্পদ)
│   ├── assets/              # স্ট্যাটিক ফাইল যেমন ইমেজ, ফন্ট ইত্যাদি
│   └── index.html           # প্রধান HTML ফাইল
├── gulpfile.js              # Gulp টাস্ক রানার (যদি Gulp ব্যবহার করা হয়)
├── package.json             # npm ডিপেনডেন্সি এবং স্ক্রিপ্ট
└── README.md                # প্রোজেক্টের বিবরণ

মূল ফাইল এবং ফোল্ডারের ব্যাখ্যা

dist/ (Distributed Files)

• এখানে কম্পাইলড CSS এবং JavaScript ফাইল থাকে।
• এটি সরাসরি প্রোডাকশনে ব্যবহৃত হয়।
• ফাইলগুলো সাধারণত:
  • foundation.min.css
  • foundation.min.js

node_modules/

• Foundation এবং এর ডিপেনডেন্সি (যেমন: jQuery) ফাইলগুলো এখানে থাকে।
• এটি শুধুমাত্র npm বা Yarn ইনস্টলেশনের ক্ষেত্রে উপস্থিত থাকে।

scss/ (Sass Files)

• Foundation-এর মূল Sass ফাইল এবং কাস্টমাইজড স্টাইলিং ফাইল এখানে থাকে।
• গুরুত্বপূর্ণ ফাইলগুলো:
  • _settings.scss: কাস্টমাইজেশনের জন্য Foundation-এর ডিফল্ট সেটিংস।
  • foundation/: Foundation-এর সমস্ত কম্পোনেন্টের জন্য Sass কোড।
  • app.scss: প্রোজেক্টের মূল Sass ফাইল যেখানে কাস্টম স্টাইল যোগ করা হয়।

src/ (Source Files)

• এখানে প্রোজেক্টের সোর্স ফাইল যেমন HTML, CSS, JavaScript এবং স্ট্যাটিক অ্যাসেট (ইমেজ, ফন্ট) থাকে।
• সাধারণত এই ফোল্ডারটি ডেভেলপমেন্টের জন্য ব্যবহৃত হয়।

gulpfile.js (Gulp Configuration)

• Gulp টাস্ক রানার ফাইল, যা CSS কম্পাইল, JavaScript মিনিফাই এবং ফাইল অপটিমাইজেশনের কাজ করে।

package.json

• npm ডিপেনডেন্সি এবং প্রোজেক্ট স্ক্রিপ্টের বিবরণ থাকে।
• Foundation এবং অন্যান্য প্যাকেজ সম্পর্কে তথ্য সংরক্ষণ করে।

README.md

• প্রোজেক্টের বিবরণ এবং সেটআপ নির্দেশনা।

Foundation-এর scss ফোল্ডার বিস্তারিত

Foundation এর Sass ফাইল স্ট্রাকচার নিম্নরূপ:

scss/
├── foundation/
│   ├── components/         # বাটন, মেনু, ন্যাভ ইত্যাদির Sass ফাইল
│   ├── grid/               # গ্রিড সিস্টেম সম্পর্কিত ফাইল
│   ├── utilities/          # মিক্সিন এবং ফাংশন ফাইল
│   ├── forms/              # ফর্ম স্টাইলিং সম্পর্কিত ফাইল
│   └── typography/         # ফন্ট এবং টাইপোগ্রাফি স্টাইল
├── _settings.scss          # Foundation কাস্টমাইজেশনের জন্য মূল সেটিংস
└── app.scss                # প্রোজেক্টের প্রধান Sass ফাইল

_settings.scss

• এটি Foundation-এর ডিফল্ট কনফিগারেশন ফাইল।
• ফন্ট সাইজ, কালার, গ্রিড প্যাডিং ইত্যাদি পরিবর্তন করতে এটি কাস্টমাইজ করা হয়।

app.scss

• এখানে Foundation-এর সমস্ত Sass ফাইল ইমপোর্ট করা হয়।
• প্রোজেক্টের কাস্টম স্টাইলিং এখানে যোগ করা হয়।

কাস্টমাইজেশন প্রক্রিয়া

1. _settings.scss ফাইল কপি করে আপনার প্রোজেক্টের scss/ ফোল্ডারে রাখুন।
2. প্রোজেক্টের প্রয়োজন অনুযায়ী ভ্যারিয়েবল পরিবর্তন করুন।

3. app.scss ফাইলে প্রয়োজনীয় Foundation কম্পোনেন্ট ইমপোর্ট করুন:

   @import 'foundation/components/buttons';
   @import 'foundation/utilities/mixins';
   

4. scss ফাইলকে CSS-এ কম্পাইল করুন:

   sass scss/app.scss:css/app.css
   

Foundation-এর এই ফাইল এবং ফোল্ডার স্ট্রাকচার ডেভেলপারদের দ্রুত এবং সহজে কাজ করতে সাহায্য করে। এটি কাস্টমাইজেশনের জন্য যথেষ্ট ফ্লেক্সিবল এবং পেশাদার প্রোজেক্টের জন্য উপযুক্ত।