Najlepsze praktyki dostosowywania Bootstrap na Twitterze [zamknięte]

285

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?

Joel Rodgers
źródło
Pozdrowienia z przyszłości! „Najlepsze praktyki” dotyczące dostosowywania Bootstrap zmieniły się w wersjach 3.x i 4.x opartych na SASS: stackoverflow.com/a/50410667/171456
Zim

Odpowiedzi:

180

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.

Joel Rodgers
źródło
Czy jest jakiś konkretny powód # 3? Co się stanie, jeśli wszystkie niestandardowe pliki css pojawią się na dole po wszystkich importach, zamiast mieszać się po każdym imporcie?
AaronLS
2
@AaronLS: To też powinno działać. Myślę, że numer 3 jest po to, aby utrzymać porządek.
Jonatan Littke
@joelrodgers Dlaczego mixins.less nie powinien być bezpośrednio edytowany?
Joe Isaacson,
Co sądzisz o dołączeniu pustego pliku zmienne-custom.less (przez @import) do bootstrap.less? Wtedy wszyscy będą mogli dostosować domyślne zmienne Bootstrap i bezpiecznie je zaktualizować. W każdym razie myślę, że ta funkcja musi być absolutnie włączona w Bootstrap.
adriendenat
36

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.

jstam
źródło
1
Dobre rozwiązanie. Właśnie to zrobiłem z kilkoma zmianami. Spójrz na moją odpowiedź. To było zbyt długie, aby dodać komentarz.
Joel Rodgers,
Podoba mi się również twoje rozwiązanie, Joel. Ładne oddzielenie kodu od kodu frameworka.
jstam
Ponieważ mixins odwołuje się do zmiennych, czy potrzebowałbym dodatkowego importu zmiennych niestandardowych między zmiennymi.less i mixins.less? Tak, że mogę modyfikować zmienne takie jak @baseFontSize. Nie wiem nawet wystarczająco, żeby wiedzieć, czy zadławi mnie to, że zadeklaruję zmienną o tej samej nazwie.
AaronLS
Uznałem, że jest to najbardziej pomocne rozwiązanie, ponieważ na nową kopię bootstrap musimy po prostu dodać jedną linię ponownie bootstrap.less, chwytając nasz dostosowany plik VS potencjalnie zmieniając wiele linii, jeśli zmieni się nazwa mniejszej liczby rdzeni itp. Użyłem to rozwiązanie skompilowało mój zminimalizowany JS za pomocą chrząknięcia i wszystko jest w porządku! Dostosowania działające bez nieprzyjaznych !importantinstrukcji!
twknab
25

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;  
sam
źródło
1
Jest to sposób na 1) posiadanie kopii kodu ładowania początkowego, który można dowolnie aktualizować, a jednocześnie 2) narzucanie własnych ustawień niestandardowych. Szczegółowe informacje na temat struktury folderów można znaleźć na stronie stackoverflow.com/questions/13809895/ ...
Jeromy French,
Upewniłem się, że umieściłem to przed własnym kodem, aby upewnić się, że bootstrap go nie przesłania.
Aram Kocharyan
To zadziałało dla mnie świetnie. Właśnie wskazałem Koala na theme.less i kompiluje się za każdym razem, gdy zapisuję.
ow3n
Jeśli ktoś używa wersji SASS, uważaj na ! Default
prasanthv
5

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.

aleemb
źródło
4

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
Wszystkie bity są równe
źródło
Tak, rozumiem, ale dla mnie rzeczy zmieniają się tak szybko, że cała ta technologia sieciowa staje się nieco przytłaczająca do śledzenia.
Joel Rodgers,
1
Jak wspomniano: moje podejście dotyczy tylko tych, którzy śledzą obecny rozwój wielu platform. Robię to, ponieważ muszę być na bieżąco z rozwojem i różnymi podejściami do wyzwań technicznych. Myślę, że jest to bardziej odpowiednie dla twórców frameworków niż freelancerów, którzy po prostu „chcą wykonać zadanie”.
Wszystkie bity są równe
4

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?

Frank Lämmer
źródło
1
Rozumiem, że masz rację, ale zawsze możesz uruchomić narzędzie do czyszczenia CSS online lub lokalnie. Oto ich lista: stackoverflow.com/questions/135657/ ... Prawdopodobnie nie chcesz mniej kompilatora działającego w produkcie.
Joel Rodgers,
dzięki za odpowiedź, nie wiedziałem, że istnieją narzędzia do usuwania kurzu. spoko, wkopię się w to. Właściwie i tak używam mniej kompilatora lokalnie (CodeKit). Nie chcę dwa razy kompilować css.
Frank Lämmer,
2

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.

dallen
źródło