Foundation সেটআপ এবং ইনস্টলেশন

Foundation ফ্রেমওয়ার্ক সেটআপ এবং ইনস্টল করা খুবই সহজ। এটি কয়েকটি ভিন্ন পদ্ধতিতে ব্যবহার করা যায়, যার মধ্যে CDN, npm/yarn এবং CLI (Command Line Interface) পদ্ধতিগুলো সবচেয়ে বেশি ব্যবহৃত। নিচে প্রতিটি পদ্ধতির বিস্তারিত ধাপ দেওয়া হলো।

১. CDN ব্যবহার করে ইনস্টলেশন

CDN (Content Delivery Network) পদ্ধতি সহজ এবং দ্রুত। এটি সরাসরি HTML ফাইলে লিঙ্ক যুক্ত করে ব্যবহার করা যায়।

ধাপসমূহ:

1. HTML ফাইলে নিচের কোড যুক্ত করুন:

   <!-- Foundation CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
   <!-- Foundation JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
   <!-- jQuery (Foundation এর জন্য প্রয়োজন) -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. এটি যুক্ত করার পর Foundation-এর কম্পোনেন্ট এবং স্টাইলিং ব্যবহার করা যাবে।

২. npm বা Yarn ব্যবহার করে ইনস্টলেশন

Foundation npm বা Yarn এর মাধ্যমে ইন্সটল করে ব্যবহৃত হয়, যা ডেভেলপারদের জন্য কাস্টমাইজেশনে আরও বেশি সুবিধা দেয়।

ধাপসমূহ:

1. Node.js ইনস্টল করুন:
   Foundation ব্যবহার করতে হলে সিস্টেমে Node.js এবং npm ইনস্টল থাকতে হবে। Node.js ডাউনলোড করুন।

2. Foundation ইনস্টল করুন:
   নিচের কমান্ডটি রান করুন:

   npm install foundation-sites
   

   অথবা Yarn ব্যবহার করলে:

   yarn add foundation-sites
   

3. Foundation ব্যবহার করুন:
   ইনস্টলেশনের পর Foundation-এর CSS এবং JavaScript ফাইল আপনার প্রোজেক্টে ইমপোর্ট করুন:

   import 'foundation-sites/dist/css/foundation.min.css';
   import 'foundation-sites/dist/js/foundation.min.js';
   

4. প্রোজেক্টে কম্পোনেন্ট এবং স্টাইলিং ব্যবহার শুরু করুন।

৩. CLI (Command Line Interface) ব্যবহার করে সেটআপ

Foundation CLI একটি দ্রুত সেটআপ টুল, যা আপনার জন্য একটি সম্পূর্ণ প্রজেক্ট স্ট্রাকচার তৈরি করে।

ধাপসমূহ:

1. Foundation CLI ইনস্টল করুন:
   নিচের কমান্ডটি রান করুন:

   npm install -g foundation-cli
   

2. নতুন প্রোজেক্ট তৈরি করুন:
   Foundation প্রোজেক্ট তৈরি করতে নিচের কমান্ডটি রান করুন:

   foundation new
   

3. প্রোজেক্ট টাইপ নির্বাচন করুন:
   আপনি কি ধরনের প্রোজেক্ট বানাতে চান তা নির্বাচন করুন (উদাহরণ: Website বা Email)।

4. ডিরেক্টরিতে প্রবেশ করুন:
   তৈরি করা প্রোজেক্ট ফোল্ডারে প্রবেশ করুন:

   cd your-project-name
   

5. সার্ভার চালু করুন:
   Foundation সার্ভার চালু করতে:

   npm start
   

   এটি একটি লাইভ ডেভেলপমেন্ট এনভায়রনমেন্ট তৈরি করবে।

৪. ম্যানুয়াল ডাউনলোড

Foundation ফ্রেমওয়ার্কটি Foundation এর অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড করা যায়।

ধাপসমূহ:

1. ওয়েবসাইটে গিয়ে “Download Foundation” বাটনে ক্লিক করুন।
2. CSS এবং JavaScript ফাইল ডাউনলোড করুন।
3. আপনার প্রোজেক্টে ফাইলগুলো যুক্ত করুন।

4. HTML ফাইলে CSS এবং JavaScript ফাইলের লিঙ্ক দিন:

   <link rel="stylesheet" href="path/to/foundation.min.css">
   <script src="path/to/foundation.min.js"></script>
   

কোন পদ্ধতি বেছে নেবেন?

• CDN: সহজ এবং দ্রুত ওয়েবসাইট বানাতে।
• npm/Yarn: বড় এবং কাস্টমাইজড প্রোজেক্টের জন্য।
• CLI: সম্পূর্ণ প্রোজেক্ট স্ট্রাকচার তৈরি করতে।
• ম্যানুয়াল ডাউনলোড: নির্দিষ্ট ফাইল নিয়ে কাজ করার জন্য।

Foundation সেটআপ করার পদ্ধতি প্রকল্পের স্কেল এবং ডেভেলপমেন্ট এনভায়রনমেন্টের ওপর নির্ভর করে। উপযুক্ত পদ্ধতি বেছে নিয়ে কাজ শুরু করুন।

Foundation ফ্রেমওয়ার্ক ইনস্টল করার জন্য বিভিন্ন পদ্ধতি ব্যবহার করা যায়। এর মধ্যে সবচেয়ে প্রচলিত পদ্ধতিগুলো হলো CDN, npm, এবং Sass। প্রতিটি পদ্ধতির জন্য আলাদা ধাপ নিচে উল্লেখ করা হলো।

CDN ব্যবহার করে Foundation ইনস্টল

CDN পদ্ধতিতে Foundation ফাইলগুলো সরাসরি একটি অনলাইন সার্ভার থেকে লোড করা হয়। এটি দ্রুত এবং সহজ পদ্ধতি।

ধাপসমূহ:

1. HTML ফাইলে নিচের কোড যুক্ত করুন:

   <!-- Foundation CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
   <!-- Foundation JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
   <!-- jQuery (Foundation এর জন্য প্রয়োজন) -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. Foundation-এর CSS এবং JavaScript ব্যবহার করে কম্পোনেন্ট যুক্ত করুন।

সুবিধা:

• দ্রুত সেটআপ।
• অতিরিক্ত সফটওয়্যার বা ডাউনলোডের প্রয়োজন নেই।
• ছোট প্রোজেক্ট বা ডেমোর জন্য উপযুক্ত।

npm ব্যবহার করে Foundation ইনস্টল

npm (Node Package Manager) পদ্ধতিতে Foundation ফ্রেমওয়ার্ক আপনার প্রোজেক্টে ইন্সটল করা হয়। এটি বড় এবং কাস্টমাইজড প্রোজেক্টের জন্য আদর্শ।

ধাপসমূহ:

1. Node.js ইনস্টল করুন:
   Foundation ব্যবহার করতে হলে আপনার সিস্টেমে Node.js এবং npm ইনস্টল থাকতে হবে। Node.js ডাউনলোড করুন এবং ইনস্টল করুন।

2. Foundation ইনস্টল করুন:
   নিচের কমান্ডটি চালান:

   npm install foundation-sites
   

3. CSS এবং JavaScript ইমপোর্ট করুন:
   আপনার প্রোজেক্টে Foundation ব্যবহার করতে নিচের কোড যুক্ত করুন:

   // CSS
   import 'foundation-sites/dist/css/foundation.min.css';
   // JavaScript
   import 'foundation-sites/dist/js/foundation.min.js';
   

4. Foundation ব্যবহার শুরু করুন:
   HTML ফাইলে Foundation-এর কম্পোনেন্ট যুক্ত করে কাজ শুরু করুন।

সুবিধা:

• কাস্টমাইজড কাজের জন্য উপযুক্ত।
• ভার্সন ম্যানেজমেন্ট সহজ।
• বড় স্কেল প্রোজেক্টে কার্যকর।

Sass ব্যবহার করে Foundation ইনস্টল

Foundation এর Sass ভার্সন ব্যবহার করলে CSS কাস্টমাইজেশন সহজ হয়। এটি ডেভেলপারদের উন্নত ফিচার এবং ফ্লেক্সিবিলিটি দেয়।

ধাপসমূহ:

1. npm ইনস্টলেশন:
   Foundation-এর Sass ফাইল ইনস্টল করতে নিচের কমান্ডটি চালান:

   npm install foundation-sites
   

2. Sass ফাইল ইমপোর্ট করুন:
   আপনার Sass ফাইলের মধ্যে Foundation ইমপোর্ট করুন:

   // Foundation এর Core ফাইল ইমপোর্ট
   @import 'node_modules/foundation-sites/scss/foundation';
   

3. Settings ফাইল কাস্টমাইজ করুন:
   Foundation-এর settings.scss ফাইল কাস্টমাইজ করতে নিচের কমান্ড চালান:

   cp node_modules/foundation-sites/scss/settings/_settings.scss scss/
   

   তারপর ফাইলটি পরিবর্তন করুন।

4. Sass কম্পাইল করুন:
   আপনার Sass ফাইল CSS-এ কম্পাইল করতে নিচের কমান্ড ব্যবহার করুন:

   sass scss/style.scss:css/style.css
   

5. CSS ফাইল HTML-এ যুক্ত করুন:
   কম্পাইল করা CSS ফাইল HTML ফাইলে যুক্ত করুন:

   <link rel="stylesheet" href="css/style.css">
   

সুবিধা:

• CSS সম্পূর্ণরূপে কাস্টমাইজ করা যায়।
• বড় এবং জটিল প্রোজেক্টের জন্য কার্যকর।
• Sass ফিচার যেমন মিক্সিন, ভ্যারিয়েবল ইত্যাদি সহজেই ব্যবহার করা যায়।

কোন পদ্ধতি বেছে নেবেন?

আপনার প্রয়োজন এবং প্রোজেক্টের আকার অনুযায়ী উপযুক্ত পদ্ধতি বেছে নিয়ে কাজ শুরু করুন।

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

Foundation CLI (Command Line Interface) ব্যবহার করে Foundation ফ্রেমওয়ার্কের একটি নতুন প্রজেক্ট তৈরি করা খুবই সহজ। Foundation CLI একটি শক্তিশালী টুল, যা ডেভেলপারদের জন্য একটি কাস্টমাইজড প্রজেক্ট স্ট্রাকচার তৈরি করে, এবং এতে বিভিন্ন টেমপ্লেট ও কোড তৈরি করার জন্য সুবিধা থাকে।

Foundation CLI ব্যবহার করার মাধ্যমে আপনি Foundation ফ্রেমওয়ার্কের জন্য একটি সম্পূর্ণ সেটআপ পেতে পারেন, যা দ্রুত ওয়েবসাইট তৈরি করতে সাহায্য করে।

Foundation CLI ইনস্টলেশন

Foundation CLI ইনস্টল করতে npm (Node Package Manager) ব্যবহার করা হয়। নীচে এর ইনস্টলেশন প্রক্রিয়া দেওয়া হলো:

১. Node.js ইনস্টল করুন

প্রথমে আপনার কম্পিউটারে Node.js ইনস্টল থাকতে হবে। Node.js ইনস্টল করতে এখানে ক্লিক করুন.

২. Foundation CLI ইনস্টল করুন

Foundation CLI ইনস্টল করতে টার্মিনালে নিচের কমান্ডটি রান করুন:

npm install -g foundation-cli

এটি Foundation CLI ইনস্টল করবে এবং আপনাকে Command Line-এ Foundation এর কমান্ড ব্যবহার করতে সক্ষম করবে।

Foundation CLI দিয়ে প্রজেক্ট তৈরি

Foundation CLI ব্যবহার করে একটি নতুন প্রজেক্ট শুরু করার জন্য নিচের স্টেপগুলি অনুসরণ করুন:

১. নতুন প্রজেক্ট তৈরি করুন

Foundation CLI দিয়ে নতুন একটি প্রজেক্ট তৈরি করতে টার্মিনালে নিচের কমান্ডটি টাইপ করুন:

foundation new

এটি আপনাকে কিছু প্রশ্ন করবে যেমন:

• প্রজেক্ট টাইপ নির্বাচন: আপনি কি ধরনের প্রজেক্ট তৈরি করতে চান? (যেমন: ওয়েবসাইট, ইমেল, ওয়েব অ্যাপ)
• টেমপ্লেট নির্বাচন: আপনি কোন ধরনের টেমপ্লেট ব্যবহার করতে চান? (বেসিক টেমপ্লেট বা অন্যান্য কাস্টম টেমপ্লেট)
• নাম এবং গন্তব্য: আপনার প্রজেক্টের নাম এবং লোকেশন।

২. প্রজেক্ট কনফিগারেশন নির্বাচন

আপনার প্রয়োজন অনুসারে Foundation CLI বিভিন্ন কনফিগারেশন অপশন প্রস্তাব করবে। আপনি সেগুলি নির্বাচন করে আপনার প্রজেক্ট তৈরি করতে পারেন। কিছু সাধারণ অপশন:

• Type of Project: ওয়েবসাইট, ইমেল, বা ওয়েব অ্যাপ।
• Pre-configured Build System: Gulp, Webpack, বা ব্রাউজার লিস্ট ব্যবহার করবেন কি না।

৩. ডিপেনডেন্সি ইন্সটলেশন

প্রজেক্ট তৈরি হয়ে গেলে, টার্মিনালে cd <project-folder> কমান্ড দিয়ে আপনার প্রজেক্ট ফোল্ডারে চলে যান এবং সমস্ত ডিপেনডেন্সি ইন্সটল করতে নিচের কমান্ডটি রান করুন:

npm install

এটি আপনার প্রজেক্টের জন্য প্রয়োজনীয় সমস্ত প্যাকেজ ইনস্টল করবে।

৪. ডেভেলপমেন্ট সার্ভার চালু করুন

Foundation CLI দিয়ে ডেভেলপমেন্ট সার্ভার চালু করতে নিচের কমান্ডটি ব্যবহার করুন:

npm start

এটি একটি লোকাল সার্ভার চালু করবে এবং আপনার ব্রাউজারে http://localhost:3000 এ আপনার প্রজেক্টটি দেখতে পাবেন।

Foundation CLI-এ ব্যবহৃত গুরুত্বপূর্ণ কমান্ড

• foundation new: একটি নতুন Foundation প্রজেক্ট তৈরি করতে ব্যবহৃত হয়।
• npm start: ডেভেলপমেন্ট সার্ভার চালু করে এবং লোকাল পরিবেশে প্রজেক্ট দেখতে সাহায্য করে।
• npm run build: প্রোডাকশনের জন্য ফাইলগুলো কম্পাইল এবং মিনিফাই করতে ব্যবহৃত হয়।
• npm run watch: ফাইল পরিবর্তন হলে স্বয়ংক্রিয়ভাবে কম্পাইল এবং রিফ্রেশ করতে ব্যবহৃত হয়।

Foundation CLI একটি শক্তিশালী টুল, যা Foundation ফ্রেমওয়ার্ক ব্যবহার করে দ্রুত ওয়েবসাইট বা ওয়েব অ্যাপ তৈরি করতে সহায়তা করে। এটি ডেভেলপারদের একটি কাস্টমাইজড এবং অপটিমাইজড পরিবেশ প্রদান করে, যেখানে তারা সহজেই Foundation এর সমস্ত ফিচার ব্যবহার করতে পারে। CLI ব্যবহার করে প্রজেক্ট সেটআপ করা খুবই সহজ এবং এটি আপনার ডেভেলপমেন্ট প্রক্রিয়া দ্রুততর করে তোলে।

Foundation ফ্রেমওয়ার্কে ডিফল্ট কনফিগারেশন ফাইলটি হলো _settings.scss। এই ফাইলটি সিস্টেমের বিভিন্ন বৈশিষ্ট্য যেমন, গ্রিড সিস্টেম, টিপোগ্রাফি, কালার স্কিম, এবং অন্যান্য মৌলিক কনফিগারেশন সেটিংস কাস্টমাইজ করতে ব্যবহৃত হয়। এটি ফাউন্ডেশন ফ্রেমওয়ার্কের সর্বাধিক গুরুত্বপূর্ণ কনফিগারেশন ফাইল, যা ব্যবহারকারীদের ওয়েবসাইট ডিজাইন এবং ফাংশনালিটি তাদের প্রয়োজন অনুযায়ী সাজানোর সুযোগ দেয়।

_settings.scss ফাইলের প্রধান কনফিগারেশন

১. Grid System

Foundation এর গ্রিড সিস্টেমকে কাস্টমাইজ করার জন্য _settings.scss ফাইলে কিছু ভ্যারিয়েবল রয়েছে:

• $grid-columns: মোট কলামের সংখ্যা।

  $grid-columns: 12;
  

• $grid-gutter-width: গ্রিডের মধ্যে ব্যবধান বা গাটার।

  $grid-gutter-width: 1.5rem;
  

২. Typography (টিপোগ্রাফি)

এটি টাইপোগ্রাফি এবং ফন্টের সেটিংস কাস্টমাইজ করার জন্য ব্যবহৃত হয়:

• $font-family-base: বেস ফন্ট ফ্যামিলি (যেমন, Arial, Helvetica, বা অন্যান্য কাস্টম ফন্ট)

  $font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  

• $font-size-base: বেস ফন্ট সাইজ

  $font-size-base: 1rem;
  

• $line-height-base: বেস লাইন হাইট

  $line-height-base: 1.5;
  

৩. Colors (কালার)

Foundation এর বিভিন্ন কম্পোনেন্টের জন্য ডিফল্ট কালার কাস্টমাইজ করার জন্য:

• $primary-color: প্রধান কালার (যেমন: ব্লু, রেড)

  $primary-color: #0078d4;
  

• $secondary-color: সেকেন্ডারি কালার

  $secondary-color: #ff3b30;
  

• $link-color: লিংক কালার

  $link-color: $primary-color;
  

৪. Spacing (স্পেসিং)

এটি প্যাডিং, মার্জিন এবং অন্যান্য স্পেসিং উপাদান কাস্টমাইজ করার জন্য:

• $space-unit: স্পেসিং ইউনিট

  $space-unit: 1rem;
  

• $space-xs, $space-sm, $space-md, $space-lg: বিভিন্ন আকারের প্যাডিং বা মার্জিনের জন্য আলাদা ভ্যারিয়েবল।

  $space-xs: .5rem;
  $space-sm: 1rem;
  $space-md: 2rem;
  $space-lg: 3rem;
  

৫. Breakpoints (ব্রেকপয়েন্টস)

Foundation ফ্রেমওয়ার্কের জন্য বিভিন্ন স্ক্রীন সাইজ বা ডিভাইস অনুযায়ী কনটেন্ট কাস্টমাইজ করতে Breakpoints ব্যবহার করা হয়। এই কনফিগারেশনের মাধ্যমে, আপনি কিভাবে ওয়েব পেজ বিভিন্ন ডিভাইসে রেসপনড করবে তা নিয়ন্ত্রণ করতে পারেন:

• $small, $medium, $large: ব্রেকপয়েন্ট সেটিংস

  $small: 30em;
  $medium: 48em;
  $large: 64em;
  

৬. Buttons (বাটন)

বাটনের স্টাইল কাস্টমাইজ করার জন্য বিভিন্ন সেটিংস:

• $button-primary-color: প্রধান বাটনের কালার

  $button-primary-color: $primary-color;
  

• $button-radius: বাটনের রেডিয়াস

  $button-radius: .25rem;
  

৭. Forms (ফর্ম)

ফর্ম উপাদান কাস্টমাইজেশনের জন্য:

• $form-input-border-color: ফর্ম ইনপুট ফিল্ডের বর্ডার কালার

  $form-input-border-color: #ccc;
  

• $form-input-focus-color: ইনপুট ফিল্ডে ফোকাস হলে কালার পরিবর্তন

  $form-input-focus-color: $primary-color;
  

_settings.scss ফাইল কাস্টমাইজ করার পদ্ধতি

1. কাস্টম সেটিংস তৈরি করুন:
   Foundation ইনস্টল করার পর _settings.scss ফাইলটি কপি করে আপনার প্রোজেক্টের scss/ ফোল্ডারে রাখুন।

2. ভ্যারিয়েবল পরিবর্তন করুন:
   _settings.scss ফাইলটি খুলুন এবং এখানে থাকা ভ্যারিয়েবলগুলোর মান আপনার প্রয়োজন অনুসারে পরিবর্তন করুন। যেমন:

   $grid-columns: 16; // গ্রিড কলাম সংখ্যা পরিবর্তন
   $primary-color: #FF5733; // প্রধান কালার পরিবর্তন
   

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

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

   তারপর Sass কম্পাইল করতে:

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

Foundation এর ডিফল্ট কনফিগারেশন ফাইল _settings.scss ফ্রেমওয়ার্কের সকল গুরুত্বপূর্ণ বৈশিষ্ট্য কাস্টমাইজ করার জন্য একটি সেন্ট্রালাইজড জায়গা প্রদান করে। এই ফাইলটি পরিবর্তন করে আপনি আপনার প্রোজেক্টের ডিজাইন, লেআউট এবং অন্যান্য স্টাইলিং সহজেই কাস্টমাইজ করতে পারবেন।