Praktik Terbaik Kustomisasi Bootstrap Twitter [ditutup]

Saya bekerja dengan Bootstrap 2.0.3 menggunakan KURANG. Saya ingin menyesuaikannya secara luas, tetapi saya ingin menghindari membuat perubahan ke sumber bila memungkinkan karena perubahan ke perpustakaan sering terjadi. Saya baru mengenal KURANG jadi saya tidak tahu bagaimana kompilasi bekerja sepenuhnya. Apa saja praktik terbaik untuk bekerja dengan kerangka kerja KUR atau berbasis KURANG?

Solusi saya mirip dengan jstam, tapi saya menghindari membuat perubahan pada file sumber bila memungkinkan. Mengingat bahwa perubahan pada bootstrap akan sering, saya ingin dapat menarik sumber terbaru dan membuat perubahan minimal dengan menjaga modifikasi saya di file yang terpisah. Tentu saja, itu bukan bukti peluru.

1. Salin bootstrap.less dan variabel.less ke direktori induk. Ganti nama bootstrap.less menjadi theme.less atau apa pun yang Anda inginkan. Struktur direktori direktori Anda akan terlihat seperti ini:

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

2. Perbarui semua referensi di theme.less untuk menunjuk ke sub-direktori bootstrap. Pastikan variable.less Anda dirujuk dari induknya dan bukan direktori bootstrap seperti:

   ...
   // 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. Tambahkan override CSS Anda di file theme.less segera setelah dimasukkan.

   ...
   // 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. Tautkan ke theme.less alih-alih bootstrap.less di halaman HTML Anda.

Setiap kali versi baru keluar, perubahan Anda harus aman. Anda juga harus melakukan perbedaan antara file bootstrap khusus Anda setiap kali versi baru keluar. Variabel dan impor dapat berubah.

Ini adalah sesuatu yang telah saya perjuangkan juga. Di satu sisi saya ingin sangat menyesuaikan file variable.less dengan warna dan pengaturan saya sendiri. Di sisi lain, saya ingin mengubah file Bootstrap sesedikit mungkin untuk memudahkan proses upgrade.

Solusi saya (untuk saat ini) adalah membuat file addon KURANG dan memasukkannya ke bootstrap.lessfile setelah variabel dan mixin telah diimpor. Jadi sesuatu seperti ini:

...

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

...

Dengan cara ini jika saya ingin mengatur ulang warna Bootstrap, font atau menambahkan mixin yang saya bisa. Kode saya terpisah namun akan dikompilasi dalam sisa impor Bootstrap. Itu tidak sempurna, tapi ini adalah pengganti sementara yang bekerja dengan baik untuk saya.

Dari sisi saya, saya hanya memiliki file bernama theme.lessdengan impor boostrap.lessdi dalamnya, dan tepat di bawah saya menimpanya (bahkan jika itu tampaknya buruk menggunakan KURANG, tetapi juga, lebih mudah untuk mempertahankan) nilai variabel saya tidak ingin memperbarui .

Ini berfungsi baik untuk memiliki nilai khusus untuk variabel dalam variables.less

Setelah itu saya mengkompilasi theme.lessfile saya sebagai gantinyabootstrap.less

Contoh theme.less:

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

A (IMHO) pendekatan yang jauh lebih baik adalah untuk mengambil isyarat dari Bootswatch proyek github disebut swatchmaker . Proyek ini secara khusus dirancang untuk membangun dan mengelola puluhan tema Bootstrap di situs web.

The Makefilein the project builds swatchmaker.less(Anda bisa mengganti namanya menjadi seperti customizations.less). File ini mengandung banyak impor:

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

Anda dapat mengubah nama swatchfolder dan bootswatch.lessfile menjadi apa pun yang Anda anggap tepat.

Ini masuk akal karena Anda dapat memutakhirkan Bootstrap tanpa memengaruhi file Anda sendiri. Bahkan, ini Makefilejuga berisi perintah untuk mengambil versi terbaru dari Bootstrap. Lihat README di halaman proyek untuk lebih lanjut.

Sebagai bonus, README juga menyarankan agar Anda menginstal watchrpermata yang secara otomatis akan membangun proyek ketika .lessfile berubah.

Jika (DAN HANYA JIKA) Anda punya waktu Anda bisa melakukannya seperti saya. Saya menyimpan versi kerangka kerja saya yang dimodifikasi dan setiap pembaruan kerangka kerja saya membaca dokumen dan memeriksa sumbernya untuk modifikasi.

Solusi ini mungkin terdengar kurang ideal pada tampilan pertama tetapi saya punya alasan untuk melakukannya. Saya tidak bekerja dengan satu tetapi campuran banyak kerangka kerja, praktik terbaik, ulang / normalisasi style sheet dll. Dan saya selalu yakin bahwa tidak ada pembaruan yang akan pernah mengubah proyek yang ada dengan cara apa pun yang saya tidak melihat datang.

Saya sedang mengerjakan dan dengan kerangka kerja kustom saya sendiri untuk alasan berikut.

1. Saya menghapus setiap bit saya tidak perlu menyimpan barang modular dan kecil
2. Saya menggunakan kerangka kerja saya untuk pekerjaan klien dan ingin a) tahu persis apa yang saya kerjakan sementara b) memiliki semua yang saya jual kepada klien. Saya tidak hanya menyalin dan menggunakan kerangka kerja tetapi mencoba untuk memahami dan membuatnya kembali
3. Saya menggunakan kerangka kerja saya dalam kombinasi dengan CMS dan tidak bisa begitu saja menjatuhkan dan melupakan kerangka kerja ke proyek / mulai dari awal

Saya sampai pada solusi yang sama dengan Joel:

File Khusus Lebih Sedikit

Sama seperti yang dijelaskan di atas: Saya membuat salinan lokal untuk semua file Less yang saya sesuaikan: Seperti: "variabel-custom.less", "alert-custom.less", "buttons-custom.less". Jadi saya bisa menggunakan beberapa standar dan memiliki tambahan saya sendiri. The downside adalah: Ketika Bootstrap akan memperbarui itu benar-benar sulit untuk dimigrasi.

Tetapi ada hal lain:

Ganti Gaya

Ketika mencari-cari alur kerja saya sering melihat orang-orang menyarankan untuk sekadar mengganti gaya. Jadi, Anda mengimpor file Less standar terlebih dahulu dan kemudian menambahkan deklarasi khusus Anda di bagian bawah. Keuntungannya di sini adalah: Lebih mudah memperbarui ke versi yang lebih baru. Kelemahannya adalah: File CSS yang dikompilasi mencakup semua penggantian. Beberapa penyeleksi CSS didefinisikan dua kali. Jadi browser perlu melakukan beberapa pengangkatan untuk mengetahui apa yang harus diterapkan sebenarnya. Itu tidak terlalu bersih.

Saya bertanya-tanya mengapa preprosesor tidak cukup pintar untuk menyelesaikan deklarasi ganda seperti itu? Apakah ada alur kerja yang lebih baik yang saya lewatkan di sini?

Cukup tambahkan @import "../../styles.less";(atau di mana pun stylesheet Anda) ke bootstrap.less di bagian bawah. Ini memungkinkan Anda untuk menggunakan mixins Bootstrap seperti .gradientatau .border-radiusdi dalam styles Anda sendiri.