Najlepsze praktyki dostosowywania Bootstrap na Twitterze [zamknięte]

Pracuję z Bootstrap 2.0.3 za pomocą LESS. Chcę go w znacznym stopniu dostosować, ale chcę unikać wprowadzania zmian w źródle, gdy tylko jest to możliwe, ponieważ zmiany w bibliotekach są częste. Jestem nowym użytkownikiem LESS, więc nie wiem, jak działa jego kompilacja. Jakie są najlepsze praktyki dotyczące pracy z ramami LESS lub LESS?

Moje rozwiązanie jest podobne do jstam, ale unikam wprowadzania zmian w plikach źródłowych, gdy jest to możliwe. Biorąc pod uwagę, że zmiany w bootstrapie będą częste, chcę mieć możliwość pobrania najnowszego źródła i wprowadzenia minimalnych zmian poprzez trzymanie moich modyfikacji w osobnych plikach. Oczywiście nie jest to całkowicie kuloodporny.

1. Skopiuj bootstrap.less i variable.less do katalogu nadrzędnego. Zmień nazwę bootstrap.less na theme.less lub cokolwiek chcesz. Struktura katalogu powinna wyglądać następująco:

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

2. Zaktualizuj wszystkie odwołania w pliku theme.less, aby wskazywały na podkatalog bootstrap. Upewnij się, że twoja zmienna.less jest przywoływana z nadrzędnego, a nie z katalogu bootstrap, tak jak poniżej:

   ...
   // 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. Dodaj zastąpienia CSS w pliku theme.less natychmiast po ich uwzględnieniu.

   ...
   // 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 do theme.less zamiast bootstrap.less na twoich stronach HTML.

Ilekroć pojawia się nowa wersja, zmiany powinny być bezpieczne. Powinieneś także zrobić różnicę między niestandardowymi plikami bootstrap, ilekroć pojawi się nowa wersja. Zmienne i import mogą ulec zmianie.

Z tym też miałem problem. Z jednej strony chcę bardzo dostosować plik zmiennych.less własnymi kolorami i ustawieniami. Z drugiej strony chcę trochę zmienić pliki Bootstrap, aby ułatwić proces aktualizacji.

Moim rozwiązaniem (na razie) jest utworzenie dodatkowego pliku LESS i wstawienie go do bootstrap.lesspliku po zaimportowaniu zmiennych i mixin. Więc coś takiego:

...

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

...

W ten sposób, jeśli chcę zresetować kolory, czcionki lub dodać dodatkowe mixiny, mogę. Mój kod jest osobny, ale zostanie skompilowany w pozostałej części importu Bootstrap. To nie jest idealne, ale to przerwa, która działała dla mnie dobrze.

Z mojej strony mam po prostu plik o nazwie theme.lessz importem boostrap.less, a tuż poniżej nadpisuję (nawet jeśli wydaje się to złe, używając MNIEJ, ale łatwiej jest utrzymać) wartość zmiennej, której nie chcę aktualizować .

Działa to dobrze w przypadku niestandardowych wartości zmiennych variables.less

Następnie kompiluję theme.lessplik zamiast tegobootstrap.less

Przykład theme.less:

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

O wiele lepszym podejściem (IMHO) jest czerpanie wskazówek z projektu github Bootswatch o nazwie swatchmaker . Ten projekt jest specjalnie dostosowany do budowania i zarządzania dziesiątkami motywów Bootstrap na stronie.

Kompilacje Makefilew projekcie swatchmaker.less(możesz zmienić nazwę na coś podobnego customizations.less). Ten plik zawiera kilka importów:

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

Możesz zmienić nazwę swatchfolderu i bootswatch.lessplików na cokolwiek, co uznasz za odpowiednie.

Ma to sens, ponieważ można uaktualnić Bootstrap bez wpływu na własne pliki. W rzeczywistości Makefilezawiera także polecenia do pobrania najnowszej wersji Bootstrap. Więcej informacji znajduje się w pliku README na stronie projektu.

Jako bonus, README sugeruje również zainstalowanie watchrklejnotu, który automatycznie zbuduje projekt po .lesszmianie pliku.

Jeśli (I TYLKO JEŚLI) masz czas, możesz to zrobić tak jak ja. Trzymam własną zmodyfikowaną wersję frameworku i przy każdej aktualizacji frameworku czytam dokumenty i sprawdzam źródła pod kątem modyfikacji.

To rozwiązanie może wydawać się mniej idealne na pierwszy rzut oka, ale mam ku temu powody. Nie pracuję z jednym, ale z mieszanką wielu frameworków, najlepszych praktyk, resetowania / arkuszy stylów normalizacyjnych itp. I zawsze jestem pewien, że żadna aktualizacja nigdy nie zmieni istniejących projektów w żaden sposób, którego nie widziałem.

Pracuję nad własną platformą niestandardową z następujących powodów.

1. Rozbieram się co najmniej, że nie muszę utrzymywać rzeczy modułowych i małych
2. Używam swojego frameworka do zadań klienta i chcę a) wiedzieć, z czym dokładnie pracuję, b) posiadając wszystko, co sprzedaję klientowi. Nie tylko kopiuję i używam ram, ale próbuję je zrozumieć i odtworzyć
3. Używam swojego frameworka w połączeniu z CMS i nie mogę po prostu upuścić i zapomnieć o frameworku w projekcie / zacząć od zera

Doszedłem do tego samego rozwiązania co Joel:

Niestandardowe mniej plików

Tak jak opisano powyżej: Tworzę lokalne kopie wszystkich mniejszych plików, które dostosowuję: Takich jak: „variable-custom.less”, „alerts-custom.less”, „buttons-custom.less”. Mogę więc użyć niektórych standardów i mieć własne dodatki. Minusem jest to, że kiedy Bootstrap zostanie zaktualizowany, migracja jest naprawdę trudna.

Ale jest coś jeszcze:

Zastąp style

Kiedy rozglądam się za przepływem pracy, często widzę ludzi sugerujących po prostu przesłonięcie stylów. Więc najpierw zaimportuj standardowe pliki Less, a następnie dodaj niestandardowe deklaracje na dole. Plusem tego jest to, że łatwiej jest zaktualizować do nowszej wersji. Minusem jest to, że skompilowany plik CSS zawiera wszystkie przesłonięcia. Niektóre selektory CSS są zdefiniowane dwukrotnie. Tak więc przeglądarka musi trochę poprawić, aby dowiedzieć się, co właściwie zastosować. To nie jest naprawdę czyste.

Zastanawiam się, dlaczego preprocesorzy nie są wystarczająco sprytni, aby rozwiązać takie podwójne deklaracje? Czy brakuje mi lepszego przepływu pracy?

Po prostu dodaj @import "../../styles.less";(lub gdziekolwiek twój arkusz stylów) do bootstrap.less na dole. Pozwala to na używanie miksów Bootstrap, takich jak .gradientlub .border-radiuswewnątrz własnych stylów. Bez.