টুইটার বুটস্ট্র্যাপ কাস্টমাইজেশন সেরা অভ্যাসগুলি [বন্ধ]

Question

আমি বুটস্ট্র্যাপ 2.0.3 এর সাথে কম ব্যবহার করে কাজ করছি। আমি এটিকে ব্যাপকভাবে কাস্টমাইজ করতে চাই, তবে আমি যখনই গ্রন্থাগারগুলিতে পরিবর্তন ঘন ঘন সম্ভব হয় উত্সের পরিবর্তনগুলি এড়াতে চাই। আমি খুব কম নতুন তাই এর সংকলন কীভাবে সম্পূর্ণরূপে কাজ করে তা আমি জানি না। কম বা কম ভিত্তিক ফ্রেমওয়ার্কগুলির সাথে কাজ করার জন্য কয়েকটি সেরা অনুশীলনগুলি কী কী?

Comments

ভবিষ্যতের পক্ষ থেকে শুভেচ্ছা! বুটস্ট্র্যাপ কাস্টমাইজেশন "সেরা অনুশীলন" SASS ভিত্তিক 3.x এবং 4.x এ পরিবর্তিত হয়েছে: stackoverflow.com/a/50410667/171456

— জিম

Answer 1

আমার সমাধান একই রকম জেস্টামের মতো, তবে আমি যখন সম্ভব সম্ভব উত্স ফাইলগুলিতে পরিবর্তন এড়াতে চাই। বুটস্ট্র্যাপে পরিবর্তনগুলি ঘন ঘন আসবে তা প্রদত্ত, আমি সর্বশেষতম উত্সটি নীচে টেনে নিতে এবং পৃথক ফাইলে আমার পরিবর্তনগুলি রেখে ন্যূনতম পরিবর্তন করতে সক্ষম হতে চাই। অবশ্যই এটি পুরোপুরি বুলেট প্রুফ নয়।

1. বুটস্ট্রেপ.বিহীন এবং ভেরিয়েবল.বিহীন প্যারেন্ট ডিরেক্টরিতে অনুলিপি করুন। থিম.লেস বা আপনি যা খুশি তাই বুটস্ট্র্যাপের নামকরণ করুন। আপনার ডিরেক্টরি ডিরেক্টরি কাঠামো এর মতো দেখতে হবে:

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...

2. বুটস্ট্র্যাপ সাব-ডিরেক্টরিতে নির্দেশ না করে থিম.বিহীন সমস্ত রেফারেন্স আপডেট করুন। আপনার ভেরিয়েবল.লেস পিতামাতার কাছ থেকে রেফারেন্স হয়েছে এবং বুটস্ট্র্যাপ ডিরেক্টরিটি এর মতো নয়:

   ...
   // CSS Reset
   @import "bootstrap/reset.less";
   
   // Core variables and mixins
   @import "variables.less"; // Modify this for custom colors, font-sizes, etc
   @import "bootstrap/mixins.less";
   
   // Grid system and page structure
   @import "bootstrap/scaffolding.less";
   @import "bootstrap/grid.less";
   @import "bootstrap/layouts.less";

   ...

3. আপনার সিএসএস ওভাররাইডগুলি থিম.বিহীন ফাইলে যুক্ত করুন যেখানে সেগুলি অন্তর্ভুক্ত রয়েছে।

   ...
   // Components: Nav
   @import "bootstrap/navs.less";
   @import "bootstrap/navbar.less";
   
   // overrides
   .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
       border-radius: 0 0 0 0;
       padding: 10px;
   }
   
   .nav-tabs, .nav-pills {
       text-transform: uppercase;
   }
   
   .navbar .nav > li > a {
       text-shadow: none;
   }
   
   ...

4. আপনার HTML পৃষ্ঠাগুলিতে বুটস্ট্র্যাপ.লেসের পরিবর্তে থিম.লেস লিঙ্ক করুন।

যখনই কোনও নতুন সংস্করণ প্রকাশিত হবে, আপনার পরিবর্তনগুলি নিরাপদ হওয়া উচিত। যখনই কোনও নতুন সংস্করণ আসে তখন আপনার কাস্টম বুটস্ট্র্যাপ ফাইলগুলির মধ্যেও আলাদা করা উচিত। পরিবর্তনশীল এবং আমদানি পরিবর্তন হতে পারে।

Comments

# 3 এর নির্দিষ্ট কারণ আছে? আপনার সমস্ত কাস্টম সিএসএস প্রতিটি আমদানির পরে মিলিত না হয়ে সমস্ত আমদানির পরে নীচে উপস্থিত হয় তবে কী ঘটে?

— অ্যারোনএলএস

@ অ্যারোনলএস: এটিও কাজ করা উচিত। আমি মনে করি 3 নম্বর এটি সংগঠিত রাখার জন্য।

— জোনাটান লিটকে

@ জোলেরোডগার্স মিক্সস.হসলে কেন সরাসরি সম্পাদনা করা উচিত নয়?

— জো আইজ্যাকসন

বুটস্ট্র্যাপ.লেস-এর ভিতরে একটি ফাঁকা ভেরিয়েবল-কাস্টম.বিহীন ফাইল (@ ইমপোর্টের মাধ্যমে) অন্তর্ভুক্ত করার বিষয়ে আপনি কী ভাবেন? তারপরে প্রত্যেকে ডিফল্ট বুটস্ট্র্যাপ ভেরিয়েবলগুলি কাস্টমাইজ করতে সক্ষম হবে এবং এটি নিরাপদে আপডেট করবে। যাইহোক আমি মনে করি এই বৈশিষ্ট্যটি অবশ্যই বুটস্ট্র্যাপের অন্তর্ভুক্ত থাকতে হবে।

— অ্যাড্রোডিন্যাট

Answer 2

এটি এমন কিছু যা আমি পাশাপাশি সংগ্রাম করেছি। একদিকে আমি আমার নিজস্ব রঙ এবং সেটিংস সহ ভেরিয়েবল.বিহীন ফাইলটিকে অত্যন্ত কাস্টমাইজ করতে চাই। অন্যদিকে, আপগ্রেড প্রক্রিয়াটি সহজ করার জন্য আমি বুটস্ট্র্যাপ ফাইলগুলি যতটা সম্ভব সম্ভব পরিবর্তন করতে চাই।

আমার সমাধান (এখনের জন্য) একটি অ্যাডডন এলইএসইএস ফাইল তৈরি করা bootstrap.lessএবং ভেরিয়েবল এবং মিক্সিনগুলি আমদানি করার পরে ফাইলটিতে এটি প্রবেশ করানো । সুতরাং এর মতো কিছু:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

এইভাবে যদি আমি বুটস্ট্র্যাপের রঙগুলি, ফন্টগুলি পুনরায় সেট করতে চাই বা অতিরিক্ত মিক্সিনগুলি যুক্ত করতে পারি আমার কোডটি পৃথক হলেও বুটস্ট্র্যাপের বাকি আমদানির মধ্যেই সংকলিত হবে। এটি নিখুঁত নয়, তবে এটি একটি স্টপগ্যাপ যা আমার পক্ষে ভালভাবে কাজ করেছে।

Comments

ভাল সমাধান। কিছু পরিবর্তন নিয়ে আমি এটাই করেছি। আমার উত্তর দেখুন। একটি মন্তব্য করা খুব দীর্ঘ ছিল।

— জোয়েল রজার্স

আমি আপনার সমাধানটিও পছন্দ করি, জোয়েল। ফ্রেমওয়ার্কের কোড বনাম আপনার কোডের দুর্দান্ত বিভাজন।

— জাস্টম

যেহেতু মিশ্রিনগুলি ভেরিয়েবলগুলি উল্লেখ করে, আমার কি ভ্যারিয়েবল.লেস এবং মিক্সিনসলেস আমদানির মধ্যে অতিরিক্ত কাস্টম-ভেরিয়েবলের প্রয়োজন হবে? যাতে আমি @BaseFontSize এর মত ভেরিয়েবলগুলি পরিবর্তন করতে পারি। এমনকি এটি আবার একই নামের একটি ভেরিয়েবল ঘোষণা করে আমার উপর চাপ সৃষ্টি করবে কিনা তা জানার জন্য আমি পর্যাপ্ত পরিমাণে জানি না।

— অ্যারোনএলএস

আমি এটি সবচেয়ে সহায়ক সমাধান হিসাবে খুঁজে পেয়েছি কারণ বুটস্ট্র্যাপের নতুন অনুলিপি অনুযায়ী, আমাদের কেবলমাত্র একটি লাইন যুক্ত করতে হবে bootstrap.less, আমাদের কাস্টমাইজড ফাইল ভিএস সম্ভাব্যভাবে অনেকগুলি লাইন পরিবর্তন করতে হবে যদি মূল কম ফাইলের নাম পরিবর্তন হয় ... ইত্যাদি এই সমাধানটি, গ্রান্ট ব্যবহার করে আমার মাইনযুক্ত জেএস পুনরায় কম্পাইল করে এবং হুডে সমস্ত ভাল! কোনও অনুকূল-বান্ধব !importantবিবৃতি ছাড়াই কাস্টমাইজেশনগুলি কাজ করছে !

— twknab

Answer 3

আমার দিক থেকে, আমার কেবলমাত্র একটি ফাইল রয়েছে যার theme.lessমধ্যে একটি আমদানি রয়েছে boostrap.lessএবং ঠিক নীচে আমি ওভাররাইড করি (এটি কম ব্যবহার করে খারাপ বলে মনে হয়, তবে ভাল, এটি বজায় রাখা আরও সহজ) আমি যে পরিবর্তনশীল মানটি আপডেট করতে চাই না ।

এটি ভেরিয়েবলের জন্য কাস্টম মান থাকার জন্য ভাল কাজ করে variables.less

এর পরে আমি আমার theme.lessফাইলটি পরিবর্তে বন্ধ করে দিইbootstrap.less

উদাহরণ theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

Comments

এই 1 টি উপায়) বুটস্ট্র্যাপ কোডের একটি অনুলিপি রয়েছে যা ইচ্ছামত আপডেট করা যেতে পারে এবং এখনও 2) আপনার নিজের কাস্টম সেটিংস চাপিয়ে দিতে সক্ষম হবে। ফোল্ডার কাঠামোর বিশদ জানতে স্ট্যাকওভারফ্লো.com/ প্রশ্নগুলি / 13809895/… দেখুন ।

— জেরোমি ফ্রেঞ্চ

আমি এই রাখার বিষয়টি নিশ্চিত করেছেন সামনে নিশ্চিত করার বুটস্ট্র্যাপ এটা অগ্রাহ্য করা হয় নি আমার নিজের কম কোড।

— অরামের Kocharyan

এটি আমার জন্য কাজ করে মহান। আমি থিম.লেসে কোয়ালাকে কেবল ইঙ্গিত করেছি এবং প্রতিবার সংরক্ষণ করার সময় এটি সংকলন করে।

— 17

যদি কেউ SASS সংস্করণ ব্যবহার করছে, ডিফল্ট

— প্রসংশাভ

Answer 4

একটি অনেক ভালো (এই প্রোগ্রামটিতে) পদ্ধতির থেকে সূত্র নিতে হয় Bootswatch GitHub নামক প্রকল্পের swatchmaker । এই প্রকল্পটি বিশেষ করে ওয়েবসাইটে ডজন খানেক বুটস্ট্র্যাপ থিম তৈরি এবং পরিচালনার জন্য তৈরি করা হয়েছে।

Makefileপ্রকল্পে তৈরী করে swatchmaker.less(আপনি ভালো কিছু করার জন্য এটা নাম পরিবর্তন করতে পারেন customizations.less)। এই ফাইলটিতে একগুচ্ছ আমদানি রয়েছে:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

আপনি যেটি উপযুক্ত মনে করেন তার swatchফোল্ডার এবং bootswatch.lessফাইলগুলির নাম পরিবর্তন করতে পারেন ।

আপনি নিজের ফাইলগুলিকে প্রভাবিত না করে বুটস্ট্র্যাপ আপগ্রেড করতে পারবেন বলে এটি উপলব্ধি করে। আসলে, Makefileবুটস্ট্র্যাপের সর্বশেষতম সংস্করণ আনতে কমান্ডগুলিও রয়েছে। আরও জন্য প্রকল্পের পৃষ্ঠায় README দেখুন।

বোনাস হিসাবে, README এছাড়াও প্রস্তাব দেয় যে আপনি watchrমণি ইনস্টল করুন যা কোনও .lessফাইল পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে প্রকল্পটি তৈরি করবে ।

Answer 5

যদি (এবং শুধুমাত্র যদি হয়) আপনার কাছে সময় থাকে তবে আমার মতো এটি করতে পারেন। আমি ফ্রেমওয়ার্কের নিজস্ব পরিবর্তিত সংস্করণ রাখি এবং ফ্রেমওয়ার্কের প্রতিটি আপডেটের সাথে আমি ডকগুলি পড়ি এবং সংশোধনগুলির উত্সটি পরীক্ষা করি।

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

আমি নিম্নলিখিত কারণে আমার নিজস্ব কাস্টম কাঠামো নিয়ে এবং এর সাথে কাজ করছি।

1. আমি প্রতিটি সামান্য বিছানা ছাড়ি আমার স্টাফগুলিকে মডুলার এবং ছোট রাখার দরকার নেই
2. আমি ক্লায়েন্ট জবগুলির জন্য আমার কাঠামো ব্যবহার করি এবং ক) আমি জানতে চাই যে আমি ঠিক কী নিয়ে কাজ করছি যখন খ) ক্লায়েন্টের কাছে আমার বিক্রি সমস্ত কিছু আছে। আমি কেবল ফ্রেমওয়ার্কগুলি অনুলিপি এবং ব্যবহার করি না তবে সেগুলি বোঝার এবং পুনরায় তৈরি করার চেষ্টা করি
3. আমি আমার কাঠামোটি একটি সিএমএসের সাথে সমন্বিতভাবে ব্যবহার করি এবং প্রজেক্টে / ফ্রেম থেকে শুরু করে কোনও কাঠামো ফেলে এবং ভুলতে পারি না

Comments

হ্যাঁ, আমি বুঝতে পারি, তবে আমার কাছে বিষয়গুলি এত দ্রুত পরিবর্তিত হচ্ছে যে এই সমস্ত ওয়েব প্রযুক্তিটি ট্র্যাক রাখতে কিছুটা অভিভূত হয়ে উঠছে।

— জোয়েল রজার্স

যেমনটি উল্লেখ করা হয়েছে: আমার দৃষ্টিভঙ্গি কেবল তাদের পক্ষে যারা একাধিক ফ্রেমওয়ার্কের বর্তমান বিকাশের উপর ট্যাব রাখেন। আমি এটি করি কারণ আমাকে উন্নয়নের শীর্ষে থাকতে হবে এবং প্রযুক্তিগত চ্যালেঞ্জগুলির জন্য বিভিন্ন পদ্ধতির। আমি মনে করি এটি ফ্রেমওয়ার্ক বিকাশকারীদের জন্য আরও ভাল উপযুক্ত তবে ফ্রিল্যান্সাররা কেবল "কাজটি করতে চান"।

— সমস্ত বিট সমান

Answer 6

আমি জোয়েলের মতো একই সমাধানে এসেছি:

কাস্টম কম ফাইল

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

কিন্তু অন্য কিছু আছে:

স্টাইলগুলি ওভাররাইড করুন

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

আমি ভাবছি যে প্রিপ্রসেসরগুলি কেন এত দ্বিগুণ ঘোষণার সমাধান করতে যথেষ্ট চালাক নয়? আমি এখানে নিখুঁত কোন আরও ভাল কাজ আছে?

Comments

আমি দেখতে পেলাম তবে আপনি সর্বদা অনলাইনে বা স্থানীয়ভাবে একটি সিএসএস পরিষ্কারের ইউটিলিটি চালাতে পারেন। এখানে তাদের একটি তালিকা রয়েছে: stackoverflow.com/questions/135657/… আপনি সম্ভবত কোনওভাবেই কম কমপ্লায়ার চালাতে চান না।

— জোয়েল রজার্স

জবাবের জন্য THX, ধুলো-আমাকে সরঞ্জাম আছে তা অবগত ছিল না। শীতল, আমি এটি খনন করব। আসলে আমি স্থানীয়ভাবে যাইহোক (কোডকিট) কম সংকলক ব্যবহার করি। দুবার সিএসএস সংকলন করতে চাই না।

— ফ্রাঙ্ক ল্যামার

Answer 7

শুধু যোগ @import "../../styles.less";(অথবা যেখানেই থাকুন না কেন আপনার স্টাইলশীট হয়) bootstrap.less নীচে। এটি আপনাকে নিজের স্টাইলসবিহীন .gradientবা এর মতো বুটস্ট্র্যাপের মিশ্রণগুলি ব্যবহার করতে দেয় .border-radius।