Thực tiễn tốt nhất tùy chỉnh Bootstrap Twitter [đóng]

Tôi đang làm việc với Bootstrap 2.0.3 bằng LESS. Tôi muốn tùy chỉnh nó một cách rộng rãi, nhưng tôi muốn tránh thay đổi nguồn bất cứ khi nào có thể vì những thay đổi đối với các thư viện là thường xuyên. Tôi chưa quen với LESS vì vậy tôi không biết cách tổng hợp của nó hoạt động hoàn toàn. Một số thực tiễn tốt nhất để làm việc với các khung dựa trên LESS hoặc LESS là gì?

Giải pháp của tôi tương tự jstam, nhưng tôi tránh thay đổi các tệp nguồn khi có thể. Vì các thay đổi đối với bootstrap sẽ diễn ra thường xuyên, tôi muốn có thể kéo xuống nguồn mới nhất và thực hiện các thay đổi tối thiểu bằng cách giữ các sửa đổi của mình trong các tệp riêng biệt. Tất nhiên, nó không hoàn toàn bằng chứng đạn.

1. Sao chép bootstrap.less và biến.less vào thư mục cha. Đổi tên bootstrap.less thành theme.less hoặc bất cứ điều gì bạn muốn. Cấu trúc thư mục thư mục của bạn sẽ trông như thế này:

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

2. Cập nhật tất cả các tham chiếu trong theme.less để trỏ đến thư mục con bootstrap. Đảm bảo rằng biến.less của bạn được tham chiếu từ cha mẹ chứ không phải thư mục bootstrap như vậy:

   ...
   // 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. Thêm phần ghi đè CSS của bạn vào tệp theme.less ngay sau khi chúng được bao gồm.

   ...
   // 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. Liên kết đến theme.less thay vì bootstrap.less trong các trang HTML của bạn.

Bất cứ khi nào một phiên bản mới xuất hiện, những thay đổi của bạn sẽ được an toàn. Bạn cũng nên thực hiện một sự khác biệt giữa các tệp bootstrap tùy chỉnh của mình mỗi khi có phiên bản mới. Biến và nhập khẩu có thể thay đổi.

Đây là điều mà tôi đã đấu tranh là tốt. Một mặt tôi muốn tùy chỉnh cao tệp biến.less với màu sắc và cài đặt của riêng tôi. Mặt khác, tôi muốn thay đổi các tệp Bootstrap một chút có thể để giảm bớt quá trình nâng cấp.

Giải pháp của tôi (bây giờ) là tạo một tệp LESS addon và chèn nó vào bootstrap.lesstệp sau khi các biến và mixins đã được nhập. Vì vậy, một cái gì đó như thế này:

...

// 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";

...

Bằng cách này nếu tôi muốn đặt lại màu Bootstrap, phông chữ hoặc thêm các mixin bổ sung tôi có thể. Mã của tôi là riêng biệt nhưng sẽ được biên dịch trong phần còn lại của nhập Bootstrap. Nó không hoàn hảo, nhưng nó là một điểm dừng phù hợp với tôi.

Về phía tôi, tôi chỉ có một tệp có tên theme.lessnhập boostrap.lessvào và ngay bên dưới tôi ghi đè (ngay cả khi nó có vẻ xấu khi sử dụng LESS, nhưng tốt hơn, nó dễ duy trì hơn) giá trị biến tôi sẽ không cập nhật .

Điều này hoạt động tốt để có các giá trị tùy chỉnh cho các biến trong variables.less

Sau đó, tôi biên dịch theme.lesstệp của mình thay vì tắtbootstrap.less

Ví dụ theme.less:

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

A (IMHO) Cách tiếp cận tốt hơn là phải học từ Bootswatch dự án github gọi swatchmaker . Dự án này được thiết kế đặc biệt để xây dựng và quản lý hàng tá chủ đề Bootstrap trên trang web.

Các Makefiledự án được xây dựng swatchmaker.less(bạn có thể đổi tên nó thành một cái gì đó như customizations.less). Tập tin này chứa một loạt các nhập khẩu:

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

Bạn có thể đổi tên swatchthư mục và bootswatch.lesstệp thành bất cứ thứ gì bạn thấy phù hợp.

Điều này có ý nghĩa vì bạn có thể nâng cấp Bootstrap mà không ảnh hưởng đến các tệp của riêng bạn. Trên thực tế, Makefilecũng chứa các lệnh để tìm nạp phiên bản Bootstrap mới nhất. Xem README trên trang dự án để biết thêm.

Như một phần thưởng, README cũng đề nghị bạn cài đặt watchrđá quý sẽ tự động xây dựng dự án khi một .lesstệp thay đổi.

Nếu (VÀ CHỈ NẾU) bạn có thời gian bạn có thể làm điều đó như tôi. Tôi giữ phiên bản sửa đổi của khung công tác và với mỗi bản cập nhật của khung tôi đọc tài liệu và kiểm tra nguồn để sửa đổi.

Giải pháp này nghe có vẻ ít lý tưởng hơn ở cái nhìn đầu tiên nhưng tôi có lý do để làm điều đó. Tôi không làm việc với một nhưng một sự pha trộn của nhiều khung, thực tiễn tốt nhất, đặt lại / biểu định kiểu chuẩn hóa, v.v. và tôi luôn chắc chắn rằng sẽ không có bản cập nhật nào thay đổi các dự án hiện tại theo bất kỳ cách nào tôi không thấy sắp tới.

Tôi đang làm việc và với khung tùy chỉnh của riêng tôi vì những lý do sau.

1. Tôi loại bỏ từng chút một tôi không cần phải giữ mô-đun nhỏ và nhỏ
2. Tôi sử dụng khuôn khổ của mình cho các công việc của khách hàng và muốn a) biết chính xác những gì tôi đang làm việc trong khi b) sở hữu mọi thứ tôi bán cho khách hàng. Tôi không chỉ đơn giản là sao chép và sử dụng các khung nhưng cố gắng hiểu và tạo lại chúng
3. Tôi sử dụng khung của mình kết hợp với CMS và không thể bỏ và quên một khung vào dự án / bắt đầu lại từ đầu

Tôi đã đi đến cùng một giải pháp như Joel:

Tùy chỉnh ít tập tin

Giống như được mô tả ở trên: Tôi tạo các bản sao cục bộ cho tất cả các tệp Ít hơn mà tôi đang tùy chỉnh: Chẳng hạn như: "biến-custom.less", "alert-custom.less", "nút-custom.less". Vì vậy, tôi có thể sử dụng một số tiêu chuẩn và có bổ sung của riêng tôi. Nhược điểm là: Khi Bootstrap sẽ được cập nhật, thật khó để di chuyển.

Nhưng có cái gì đó khác:

Kiểu ghi đè

Khi tìm kiếm các luồng công việc, tôi thường thấy mọi người gợi ý đơn giản là ghi đè lên các kiểu. Vì vậy, bạn nhập các tệp Ít tiêu chuẩn trước rồi thêm khai báo tùy chỉnh của bạn ở phía dưới. Ưu điểm ở đây là: Dễ dàng cập nhật lên phiên bản mới hơn. Nhược điểm là: Tệp CSS được biên dịch bao gồm tất cả các phần ghi đè. Một số bộ chọn CSS được xác định hai lần. Vì vậy, trình duyệt cần phải thực hiện một số nâng để tìm ra những gì để áp dụng thực sự. Điều đó không thực sự sạch sẽ.

Tôi tự hỏi tại sao tiền xử lý không đủ thông minh để giải quyết khai báo kép như vậy? Có bất kỳ luồng công việc tốt hơn tôi đang thiếu ở đây?

Chỉ cần thêm @import "../../styles.less";(hoặc bất cứ nơi nào biểu định kiểu của bạn) vào bootstrap.less ở phía dưới. Điều này cho phép bạn sử dụng các mixin Bootstrap như .gradienthoặc .border-radiusbên trong style.less của riêng bạn.