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 ফাইল কাস্টমাইজ করার পদ্ধতি
- কাস্টম সেটিংস তৈরি করুন:
Foundation ইনস্টল করার পর_settings.scssফাইলটি কপি করে আপনার প্রোজেক্টেরscss/ফোল্ডারে রাখুন। ভ্যারিয়েবল পরিবর্তন করুন:
_settings.scssফাইলটি খুলুন এবং এখানে থাকা ভ্যারিয়েবলগুলোর মান আপনার প্রয়োজন অনুসারে পরিবর্তন করুন। যেমন:$grid-columns: 16; // গ্রিড কলাম সংখ্যা পরিবর্তন $primary-color: #FF5733; // প্রধান কালার পরিবর্তনSass ফাইল কম্পাইল করুন:
app.scssফাইলের মধ্যে প্রয়োজনীয় Foundation ফাইলগুলি ইমপোর্ট করুন:@import 'foundation/components/buttons'; @import 'foundation/utilities/mixins';তারপর Sass কম্পাইল করতে:
sass scss/app.scss:css/app.css
Foundation এর ডিফল্ট কনফিগারেশন ফাইল _settings.scss ফ্রেমওয়ার্কের সকল গুরুত্বপূর্ণ বৈশিষ্ট্য কাস্টমাইজ করার জন্য একটি সেন্ট্রালাইজড জায়গা প্রদান করে। এই ফাইলটি পরিবর্তন করে আপনি আপনার প্রোজেক্টের ডিজাইন, লেআউট এবং অন্যান্য স্টাইলিং সহজেই কাস্টমাইজ করতে পারবেন।
Read more
