Twitter Bootstrap Özelleştirme En İyi Uygulamaları [kapalı]

LESS kullanarak Bootstrap 2.0.3 ile çalışıyorum. Bunu kapsamlı bir şekilde özelleştirmek istiyorum, ancak kütüphanelerde değişiklikler sık ​​olduğu için mümkün olduğunca kaynakta değişiklik yapmaktan kaçınmak istiyorum. LESS'te yeniyim, bu yüzden derlemesinin nasıl çalıştığını bilmiyorum. LESS veya LESS tabanlı çerçevelerle çalışmak için en iyi uygulamalar nelerdir?

Benim çözüm benzer jstam's, ama mümkün olduğunca kaynak dosyalarında değişiklik yapmaktan kaçının. Bootstrap'taki değişikliklerin sık olacağı göz önüne alındığında, en son kaynağı aşağı çekmek ve değişikliklerimi ayrı dosyalarda tutarak minimum değişiklikler yapmak istiyorum. Tabii ki, tamamen kurşun geçirmez değil.

1. Bootstrap.less ve variable.less öğelerini üst dizine kopyalayın. Bootstrap.less öğesini theme.less veya istediğiniz herhangi bir adla yeniden adlandırın. Dizin dizini yapınız şöyle görünmelidir:

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

2. Bootstrap alt dizinine işaret etmek için theme.less içindeki tüm referansları güncelleyin. Değişkenlerinizden önyükleme dizininden değil üst öğeden kaynaklandığından emin olun:

   ...
   // 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 geçersiz kılmalarınızı, dahil olduklarından hemen sonra theme.less dosyasına ekleyin.

   ...
   // 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 sayfalarınızda bootstrap.less yerine theme.less dosyasına bağlantı.

Yeni bir sürüm çıktığında, değişikliklerinizin güvenli olması gerekir. Ayrıca, yeni bir sürüm çıktığında özel bootstrap dosyalarınız arasında bir fark yapmanız gerekir. Değişkenler ve ithalat değişebilir.

Bu da mücadele ettiğim bir şey. Bir yandan, kendi renklerim ve ayarlarim ile variable.less dosyasını son derece özelleştirmek istiyorum. Öte yandan, yükseltme işlemini kolaylaştırmak için Bootstrap dosyalarını biraz değiştirmek istiyorum.

Benim çözümüm (şimdilik) bir addon LESS dosyası oluşturmak bootstrap.lessve değişkenler ve mixins içe aktarıldıktan sonra dosyaya eklemek . Yani böyle bir şey:

...

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

...

Bu şekilde Bootstrap renklerini, yazı tiplerini sıfırlamak veya ek mixins eklemek istersem. Kodum ayrı, ancak Bootstrap içe aktarma işlemlerinin geri kalanında derlenecek. Mükemmel değil, ama benim için iyi çalışan bir stopgap.

Benim açımdan, theme.lessiçinde bir içe aktarma ile adlandırılmış bir dosya var boostrap.lessve hemen altında (LESS kullanarak kötü gibi görünse bile, ama iyi, korumak daha kolay) güncellemek istemediğim değişken değeri .

Bu, değişkenler için özel değerlere sahip olmak için iyi çalışır variables.less

Ondan sonra dosyamı theme.lessderliyorumbootstrap.less

Örnek theme.less:

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

Çok daha iyi (IMHO) bir yaklaşım, Swatchmaker adlı Bootswatch github projesinden ipucu almaktır . Bu proje, web sitesinde düzinelerce Bootstrap teması oluşturmak ve yönetmek için özel olarak hazırlanmıştır.

MakefileProjede inşa swatchmaker.less(eğer böyle bir şey için yeniden adlandırabilirsiniz customizations.less). Bu dosya bir sürü içe aktarma içeriyor:

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

swatchKlasörü ve bootswatch.lessdosyaları uygun bulduğunuz şekilde yeniden adlandırabilirsiniz .

Bu, Bootstrap'i kendi dosyalarınızı etkilemeden yükseltebileceğiniz için mantıklıdır. Aslında, aynı Makefilezamanda Bootstrap'ın en son sürümünü almak için komutlar içerir. Daha fazla bilgi için proje sayfasındaki README'ye bakın.

Bir bonus olarak, README ayrıca watchrbir .lessdosya değiştiğinde projeyi otomatik olarak oluşturacak olan cevheri yüklemenizi önerir .

(VE SADECE EĞER) eğer benim gibi yapabilirsin. Çerçevelerin kendi değiştirilmiş sürümlerimi saklıyorum ve çerçevenin her güncellemesinde belgeleri okudum ve değişiklikler için kaynağı kontrol ediyorum.

Bu çözüm ilk bakışta daha az ideal gelebilir, ancak bunu yapmak için nedenlerim var. Biri ile değil, birçok çerçevenin, en iyi uygulamaların, sıfırlamaların / normalizasyon stil sayfalarının vb.

Aşağıdaki nedenlerden dolayı kendi özel çerçevem ​​üzerinde çalışıyorum.

1. Her şeyi modüler ve küçük tutmam gerekmiyor
2. Çerçevemi müşteri işleri için kullanıyorum ve a) tam olarak neyle çalıştığımı bilmek istiyorum b) müşteriye sattığım her şeye sahip olmak. Sadece çerçeveleri kopyalayıp kullanmıyorum, onları anlamaya ve yeniden yaratmaya çalışıyorum
3. Çerçevemi bir CMS ile birlikte kullanıyorum ve bir çerçeveyi bir projeye bırakıp unutamam / sıfırdan başlayamıyorum

Joel ile aynı çözüme geldim:

Özel Daha Az Dosya

Tıpkı yukarıda anlatıldığı gibi: Tüm özelleştirme için daha az dosya için yerel kopyalar oluşturuyorum: Örneğin: "variable-custom.less", "alerts-custom.less", "buttons-custom.less". Bu yüzden bazı standartları kullanabilirim ve kendi eklemelerim olabilir. Dezavantajı: Bootstrap güncelleştirildiğinde, taşınması gerçekten zor.

Ama başka bir şey daha var:

Stilleri Geçersiz Kıl

İş akışlarına bakarken çoğu zaman stilleri geçersiz kılmayı öneren insanları görüyorum. Bu nedenle, önce standart Daha Az dosyayı içe aktarın ve ardından özel bildirimlerinizi en altına ekleyin. Burada tersi: Daha yeni bir sürüme güncellemek daha kolay. Dezavantajı: Derlenmiş CSS dosyası tüm geçersiz kılmaları içerir. Bazı CSS seçicileri iki kez tanımlanır. Bu nedenle, tarayıcının aslında ne uygulayacağınızı öğrenmek için biraz kaldırma yapması gerekir. Gerçekten temiz değil.

Ön işlemcilerin neden bu tür çift beyanları çözecek kadar zeki olmadıklarını merak ediyorum? Burada eksik olduğum daha iyi bir iş akışı var mı?

@import "../../styles.less";Altta bootstrap.less öğesine (veya stil sayfanızın olduğu her yerde) eklemeniz yeterlidir. Bu, Bootstrap karışımlarını kendi stilleriniz gibi .gradientveya .border-radiusiçinde kullanmanızı sağlar .