แนวทางปฏิบัติที่ดีที่สุดในการปรับแต่งการบูตแบบทวิตเตอร์ [ปิด]

ฉันทำงานกับ Bootstrap 2.0.3 โดยใช้ LESS ฉันต้องการปรับแต่งมันอย่างกว้างขวาง แต่ฉันต้องการหลีกเลี่ยงการเปลี่ยนแปลงแหล่งที่มาเมื่อใดก็ตามที่เป็นไปได้เนื่องจากการเปลี่ยนแปลงในไลบรารีเป็นประจำ ฉันใหม่สำหรับ LESS ดังนั้นฉันจึงไม่ทราบว่าการรวบรวมนั้นใช้งานได้อย่างไร อะไรคือแนวปฏิบัติที่ดีที่สุดสำหรับการทำงานกับกรอบ LESS หรือ LESS

โซลูชันของฉันคล้ายกับ jstam แต่ฉันหลีกเลี่ยงการเปลี่ยนแปลงไฟล์ต้นฉบับเมื่อเป็นไปได้ เนื่องจากการเปลี่ยนแปลงใน bootstrap จะเกิดขึ้นบ่อยครั้งฉันต้องการดึงแหล่งข้อมูลล่าสุดและทำการเปลี่ยนแปลงเพียงเล็กน้อยโดยทำการแก้ไขในไฟล์แยกต่างหาก แน่นอนมันไม่ได้เป็นหลักฐานแสดงหัวข้อย่อยอย่างสมบูรณ์

1. คัดลอก bootstrap.less และ variables.less ไปยังไดเร็กทอรีพาเรนต์ เปลี่ยนชื่อ bootstrap.less เป็น theme.less หรืออะไรก็ตามที่คุณต้องการ โครงสร้างไดเรกทอรีไดเรกทอรีของคุณควรมีลักษณะดังนี้:

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

2. อัพเดตการอ้างอิงทั้งหมดใน theme.less เพื่อชี้ไปที่ไดเร็กทอรีย่อย bootstrap ตรวจสอบให้แน่ใจว่า variables.less ของคุณถูกอ้างอิงจากพาเรนต์และไม่ใช่ไดเร็กทอรี bootstrap เช่นนั้น:

   ...
   // 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. เพิ่มการแทนที่ CSS ของคุณในไฟล์ theme.less ทันทีหลังจากที่ถูกรวมไว้

   ...
   // 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. ลิงก์ไปที่ theme.less แทน bootstrap.less ในหน้า HTML ของคุณ

เมื่อใดก็ตามที่มีรุ่นใหม่ออกมาการเปลี่ยนแปลงของคุณจะปลอดภัย คุณควรแตกต่างกันระหว่างไฟล์บูตสแตรปที่กำหนดเองของคุณทุกครั้งที่มีเวอร์ชั่นใหม่ออกมา ตัวแปรและการนำเข้าอาจเปลี่ยนแปลงได้

นี่คือสิ่งที่ฉันต่อสู้ด้วย ในอีกด้านหนึ่งฉันต้องการปรับแต่งไฟล์แปรปรวนอย่างมากด้วยสีและการตั้งค่าของฉันเอง ในทางกลับกันฉันต้องการเปลี่ยนไฟล์ Bootstrap ให้น้อยที่สุดเพื่อให้กระบวนการอัปเกรดง่ายขึ้น

วิธีแก้ปัญหาของฉัน (ตอนนี้) คือการสร้างไฟล์ addon LESS และแทรกลงใน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";

...

วิธีนี้ถ้าฉันต้องการรีเซ็ตสีบูตแบบอักษรหรือเพิ่มมิกซ์อินเพิ่มเติมที่ฉันสามารถทำได้ รหัสของฉันแยกต่างหากจะถูกรวบรวมภายในการนำเข้า Bootstrap ที่เหลือ มันไม่สมบูรณ์แบบ แต่มันเป็น stopgap ที่ทำงานได้ดีสำหรับฉัน

จากด้านข้างของฉันฉันเพิ่งมีไฟล์ชื่อที่theme.lessมีการนำเข้าboostrap.lessมาและด้านล่างฉันแทนที่ (แม้ว่ามันจะไม่ดีโดยใช้ LESS แต่ก็ง่ายกว่าที่จะรักษา) ค่าตัวแปรที่ฉันไม่ต้องการอัปเดต .

สิ่งนี้ทำงานได้ดีสำหรับการมีค่าที่กำหนดเองสำหรับตัวแปรใน variables.less

หลังจากนั้นฉันก็รวบรวมtheme.lessไฟล์แทนbootstrap.less

ตัวอย่างtheme.less:

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

ไกลดีกว่า (IMHO) วิธีการคือการใช้คิวจากBootswatchโครงการ GitHub เรียกswatchmaker โครงการนี้ได้รับการออกแบบมาโดยเฉพาะสำหรับการสร้างและจัดการธีม Bootstrap หลายสิบรายการบนเว็บไซต์

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ไฟล์เป็นสิ่งที่คุณเห็นว่าเหมาะสม

สิ่งนี้สมเหตุสมผลเนื่องจากคุณสามารถอัพเกรด Bootstrap โดยไม่กระทบกับไฟล์ของคุณเอง ในความเป็นจริงแล้วMakefileยังมีคำสั่งเพื่อดึง Bootstrap เวอร์ชันล่าสุด ดู README ในหน้าโครงการสำหรับข้อมูลเพิ่มเติม

เป็นโบนัส README ยังแนะนำให้คุณติดตั้งwatchrgem ซึ่งจะสร้างโครงการโดยอัตโนมัติเมื่อ.lessไฟล์มีการเปลี่ยนแปลง

ถ้า (และเฉพาะถ้า) คุณมีเวลาที่คุณสามารถทำได้เหมือนฉัน ฉันเก็บเฟรมเวิร์กเวอร์ชันที่ปรับปรุงแล้วของตัวเองและทุกครั้งที่มีการอัพเดตเฟรมเวิร์กฉันอ่านเอกสารและตรวจสอบแหล่งที่มาสำหรับการปรับเปลี่ยน

วิธีแก้ปัญหานี้อาจฟังดูน้อยกว่าในครั้งแรก แต่ฉันมีเหตุผลที่จะทำเช่นนั้น ฉันไม่ได้ทำงานกับสิ่งใดสิ่งหนึ่ง แต่เป็นการรวมเฟรมเวิร์กแนวทางปฏิบัติที่ดีที่สุดการตั้งค่าใหม่ / สไตล์ชีททั่วไปและฉันมั่นใจเสมอว่าจะไม่มีการปรับปรุงใด ๆ

ฉันทำงานและด้วยกรอบงานที่กำหนดเองของฉันเองด้วยเหตุผลดังต่อไปนี้

1. ฉันถอดออกทุก ๆ นิดหน่อยฉันไม่จำเป็นต้องเก็บของแบบโมดูลาร์และเล็ก
2. ฉันใช้กรอบงานของฉันสำหรับงานของลูกค้าและต้องการ) รู้ว่าฉันทำงานด้วยอะไรในขณะที่ข) เป็นเจ้าของทุกอย่างที่ฉันขายให้กับลูกค้า ฉันไม่เพียงแค่คัดลอกและใช้กรอบงาน แต่พยายามทำความเข้าใจและสร้างใหม่
3. ฉันใช้เฟรมเวิร์กร่วมกับ CMS และไม่สามารถวางและลืมเฟรมเวิร์กในโครงการ / เริ่มตั้งแต่เริ่มต้น

ฉันมาที่ทางออกเดียวกับ Joel:

ไฟล์หักที่กำหนดเอง

เช่นเดียวกับที่อธิบายไว้ข้างต้น: ฉันสร้างสำเนาโลคัลสำหรับไฟล์ Less ทั้งหมดที่ฉันกำหนดเอง: เช่น: "variables-custom.less", "alert-custom.less", "buttons-custom.less" ดังนั้นฉันสามารถใช้มาตรฐานและมีการเพิ่มเติมของตัวเอง ข้อเสียคือ: เมื่อ Bootstrap จะได้รับการอัปเดตมันเป็นการยากที่จะโยกย้าย

แต่มีอย่างอื่น:

รูปแบบการแทนที่

เมื่อมองไปรอบ ๆ เวิร์กโฟลว์ฉันมักจะเห็นคนแนะนำให้เพียงแค่แทนที่สไตล์ ดังนั้นคุณนำเข้าไฟล์ Less Less มาตรฐานก่อนจากนั้นจึงเพิ่มการประกาศที่กำหนดเองของคุณที่ด้านล่าง ข้อเสียคือ: อัปเดตเป็นเวอร์ชันใหม่ได้ง่ายขึ้น ข้อเสียคือ: ไฟล์ CSS ที่รวบรวมรวมถึงการแทนที่ทั้งหมด ตัวเลือก CSS บางตัวถูกกำหนดไว้สองครั้ง ดังนั้นเบราว์เซอร์จึงต้องทำการยกเพื่อค้นหาว่าจะใช้งานจริงอย่างไร ไม่สะอาดจริงๆ

ฉันสงสัยว่าทำไมตัวประมวลผลล่วงหน้าไม่ฉลาดพอที่จะแก้ปัญหาการประกาศสองครั้งดังกล่าวได้ มีขั้นตอนการทำงานที่ดีกว่านี้หรือไม่

เพียงเพิ่ม@import "../../styles.less";(หรือที่ใดก็ตามที่สไตล์ชีทของคุณอยู่) เพื่อ bootstrap.less ที่ด้านล่าง วิธีนี้ช่วยให้คุณใช้ Bootstrap มิกซ์อินเช่น.gradientหรือ.border-radiusภายในสไตล์ของคุณเอง