Best practice per la personalizzazione di Bootstrap di Twitter [chiuso]

Sto lavorando con Bootstrap 2.0.3 usando LESS. Voglio personalizzarlo ampiamente, ma voglio evitare di apportare modifiche alla fonte ogni volta che è possibile poiché le modifiche alle librerie sono frequenti. Sono nuovo di MENO, quindi non so come funzioni interamente la sua compilation. Quali sono alcune best practice per lavorare con framework basati su LESS o LESS?

La mia soluzione è simile a quella di jstam, ma quando possibile evito di apportare modifiche ai file di origine. Dato che le modifiche a bootstrap saranno frequenti, voglio essere in grado di eliminare l'ultima fonte e apportare modifiche minime mantenendo le mie modifiche in file separati. Certo, non è completamente a prova di proiettile.

1. Copia bootstrap.less e variabili.less nella directory principale. Rinomina bootstrap.less in theme.less o come preferisci. La struttura della directory della directory dovrebbe apparire così:

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

2. Aggiorna tutti i riferimenti in theme.less per puntare alla sottodirectory bootstrap. Assicurati che il tuo variabili.less sia referenziato dal genitore e non dalla directory bootstrap in questo modo:

   ...
   // 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. Aggiungi le tue sostituzioni CSS nel file theme.less immediatamente dopo il punto in cui sono incluse.

   ...
   // 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. Link a theme.less invece di bootstrap.less nelle tue pagine HTML.

Ogni volta che esce una nuova versione, le modifiche dovrebbero essere sicure. Dovresti anche fare una differenza tra i tuoi file bootstrap personalizzati ogni volta che esce una nuova versione. Le variabili e le importazioni possono cambiare.

Anche questa è una cosa con cui ho lottato. Da un lato, desidero personalizzare in modo ottimale il file variabili.less con i miei colori e le mie impostazioni. D'altra parte, voglio cambiare il file Bootstrap il meno possibile per facilitare il processo di aggiornamento.

La mia soluzione (per ora) è quella di creare un file LESS aggiuntivo e inserirlo nel bootstrap.lessfile dopo l'importazione delle variabili e dei mixin. Quindi qualcosa del genere:

...

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

...

In questo modo, se voglio ripristinare i colori, i caratteri di Bootstrap o aggiungere altri mixin che posso. Il mio codice è separato ma verrà compilato nel resto delle importazioni Bootstrap. Non è perfetto, ma è un punto fermo che ha funzionato bene per me.

Da parte mia, ho solo un file chiamato theme.lesscon un'importazione boostrap.lessin esso e appena sotto sovrascrivo (anche se sembra essere male usando LESS, ma bene, è più facile da mantenere) il valore della variabile che non voglio aggiornare .

Questo funziona bene per avere valori personalizzati per le variabili in variables.less

Dopodiché compilo theme.lessinvece il mio filebootstrap.less

Esempio theme.less:

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

Un approccio di gran lunga migliore (IMHO) è quello di prendere spunto dalla Bootswatch progetto github chiamato swatchmaker . Questo progetto è specificamente progettato per la creazione e la gestione di decine di temi Bootstrap sul sito Web.

Il Makefilenel progetto costruisce swatchmaker.less(puoi rinominarlo in qualcosa del genere customizations.less). Questo file contiene un sacco di importazioni:

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

È possibile rinominare la swatchcartella ebootswatch.less file come preferisci.

Ciò ha senso poiché puoi aggiornare Bootstrap senza influire sui tuoi file. In effetti, ilMakefile contiene anche i comandi per recuperare l'ultima versione di Bootstrap. Vedi il README sulla pagina del progetto per ulteriori informazioni.

Come bonus, README suggerisce anche di installare la watchrgemma che costruirà automaticamente il progetto quando un .lessfile cambia.

Se (E SOLO SE) hai tempo, puoi farlo come faccio io. Conservo la mia versione modificata del / i framework / i e con ogni aggiornamento del framework leggo i documenti e controllo l'origine per eventuali modifiche.

Questa soluzione potrebbe sembrare meno ideale al primo sguardo, ma ho i miei motivi per farlo. Non lavoro con uno ma un insieme di molti framework, best practice, fogli di stile di reset / normalizzazione ecc. E sono sempre sicuro che nessun aggiornamento cambierà mai i progetti esistenti in alcun modo che non vedevo arrivare.

Sto lavorando e con il mio framework personalizzato per i seguenti motivi.

1. Mi spoglio ogni piccola parte che non mi serve per mantenere le cose modulari e piccole
2. Uso il mio framework per i lavori dei clienti e voglio a) sapere con cosa lavoro esattamente mentre b) possedere tutto ciò che vendo al cliente. Non copio e uso semplicemente i framework ma cerco di capirli e ricrearli
3. Uso il mio framework in combinazione con un CMS e non posso semplicemente abbandonare e dimenticare un framework in un progetto / iniziare da zero

Sono arrivato alla stessa soluzione di Joel:

Meno file personalizzati

Proprio come descritto sopra: creo copie locali per tutti i file Less che sto personalizzando: Ad esempio: "variabili-custom.less", "avvisi-custom.less", "buttons-custom.less". Quindi posso usare alcuni standard e avere le mie aggiunte. Il rovescio della medaglia è: quando Bootstrap verrà aggiornato è davvero difficile migrare.

Ma c'è qualcos'altro:

Sostituisci stili

Quando mi guardo intorno per i flussi di lavoro, vedo spesso persone che suggeriscono semplicemente di ignorare gli stili. Quindi importate prima i file Less standard e poi aggiungete le vostre dichiarazioni personalizzate in fondo. Il vantaggio qui è: è più facile aggiornare a una versione più recente. L'aspetto negativo è: il file CSS compilato include tutte le sostituzioni. Alcuni selettori CSS sono definiti due volte. Quindi il browser deve fare un po 'di sollevamento per scoprire cosa applicare effettivamente. Non è molto pulito.

Mi chiedo perché i preprocessori non siano abbastanza intelligenti da risolvere tali doppie dichiarazioni? C'è qualche miglior flusso di lavoro che mi manca qui?

Aggiungi @import "../../styles.less";(o dovunque sia il tuo foglio di stile) a bootstrap.less in fondo. Ciò ti consente di utilizzare i mixin Bootstrap come .gradiento .border-radiusall'interno dei tuoi stili.