Praktik Terbaik Kustomisasi Bootstrap Twitter [ditutup]


285

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?


Salam dari masa depan! Kustomisasi bootstrap "praktik terbaik" telah berubah di SASS berbasis 3.x dan 4.x: stackoverflow.com/a/50410667/171456
Zim

Jawaban:


180

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.


Apakah ada alasan khusus untuk # 3? Apa yang terjadi jika semua css kustom Anda muncul di bagian bawah setelah semua impor, alih-alih bercampur setelah setiap impor?
AaronLS

2
@ HarunLS: Itu harus bekerja juga. Saya pikir nomor 3 adalah untuk membuatnya tetap teratur.
Jonatan Littke

@ joelrodgers Mengapa mixins.less tidak dapat diedit langsung?
Joe Isaacson

Apa yang Anda pikirkan tentang menyertakan file variabel-custom.less kosong (melalui @import) di dalam bootstrap.less? Kemudian semua orang akan dapat menyesuaikan variabel Bootstrap default dan memperbaruinya dengan aman. Pokoknya saya pikir fitur ini benar-benar harus dimasukkan dalam Bootstrap.
adriendenat

36

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.


1
Solusi yang bagus Inilah yang saya lakukan dengan beberapa perubahan. Lihatlah jawaban saya. Terlalu lama untuk berkomentar.
Joel Rodgers

Saya suka solusi Anda juga, Joel. Pemisahan kode Anda dengan kode kerangka kerja yang bagus.
jstam

Karena variabel referensi mixins, apakah saya memerlukan tambahan custom-variable.less di antara variable.less dan impor mixins.less? Sehingga saya bisa memodifikasi variabel seperti @baseFontSize. Saya bahkan tidak cukup tahu untuk mengetahui apakah itu akan mencekik saya mendeklarasikan variabel dengan nama yang sama lagi.
AaronLS

Saya menemukan ini menjadi solusi yang paling membantu karena per salinan baru dari bootstrap, kita hanya perlu menambahkan satu baris lagi bootstrap.less, mengambil VS file kustom kami berpotensi mengubah banyak baris jika inti kurang mengubah nama file, dll ... Saya menggunakan solusi ini, kompilasi ulang JS saya yang diperkecil menggunakan grunt dan semuanya bagus di kap! Kustomisasi berfungsi tanpa !importantpernyataan tidak ramah !
twknab

25

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;  

1
Ini adalah cara untuk 1) memiliki salinan kode bootstrap yang dapat diperbarui sesuka hati 2) bisa memaksakan pengaturan kustom Anda sendiri. Lihat stackoverflow.com/questions/13809895/… untuk detail tentang struktur folder.
Jeromy French

Saya memastikan untuk meletakkan ini di depan kode saya sendiri yang lebih sedikit untuk memastikan bootstrap tidak menimpanya.
Aram Kocharyan

Ini bekerja baik untuk saya. Saya hanya menunjuk Koala di theme.less dan itu mengkompilasi setiap kali saya simpan.
ow3n

Jika seseorang menggunakan versi SASS, hati-hati ! Default
prasanthv

5

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.


4

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

Ya, saya mengerti, tetapi bagi saya banyak hal berubah begitu cepat sehingga semua teknologi web ini menjadi agak sulit untuk dilacak.
Joel Rodgers

1
Seperti disebutkan: pendekatan saya hanya untuk mereka yang mengawasi perkembangan saat ini dari banyak kerangka kerja. Saya melakukan itu karena saya harus tetap di atas pembangunan dan pendekatan yang berbeda untuk tantangan teknis. Saya pikir ini lebih cocok untuk pengembang kerangka kerja kemudian freelancer yang hanya "ingin menyelesaikan pekerjaan".
Semua Bit Sama Dengan

4

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?


1
Saya mengerti maksud Anda, tetapi Anda selalu dapat menjalankan utilitas pembersihan CSS online atau lokal. Berikut daftar mereka: stackoverflow.com/questions/135657/… Anda mungkin tidak ingin kompiler yang kurang berjalan dalam produk.
Joel Rodgers

Terima kasih atas jawabannya, tidak menyadari bahwa ada alat dust-me. keren, aku akan menggali lebih dalam. Sebenarnya saya menggunakan kompiler lokal yang lebih sedikit anyways (CodeKit). Tidak ingin mengkompilasi css dua kali.
Frank Lämmer

2

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.