Czy mogę użyć innej struktury CSS zamiast Tailwind do motywów filamentu

Prosta odpowiedź brzmi, że Filament jest zaprojektowany przede wszystkim do pracy z CSS z Tailwind, a jego komponenty, tematy i interfejs użytkownika w dużej mierze polegają na klasach użyteczności i konwencjach Tailwind. To ścisłe sprzężenie oznacza, że ​​przełączanie wiatru na kolejne ramy CSS nie jest oficjalnie obsługiwane ani proste. Jednak w przypadku pewnych wysiłków i dostosowań możliwe jest dostosowanie innych ram CSS do użytku z Filamentem, ale obejmuje to niestandardowe budowanie motywów, nadrzędne domyślne style i prawdopodobnie odbudowę niektórych części interfejsu użytkownika od zera.

***

Zależność filamentu od CSS Tailwind

Filament wykorzystuje CSS Tailwind jako domyślny i podstawowy ramy stylizacji. Cały system projektowy i komponenty wykorzystują klasę użyteczności tylnej wiatru do układu, odstępów, kolorów, typografii, reakcji, interaktywności i tematyki. Domyślny interfejs administratora jest zbudowany z wiatrem tylnym, a wiele wtyczek i rozszerzeń filamentu przyjmuje również Tailwind jako fundament CSS.

Ponieważ CSS Tailwind wykorzystuje podejście do użyteczności, tematy filamentu obejmują dodawanie i dostosowywanie narzędzi z tylnym wiatrem zamiast pisania tradycyjnych CSS lub polegania na klasach zdefiniowanych na całym świecie. Powoduje to wysoce elastyczny i konfigurowalny interfejs użytkownika, ale oznacza również, że komponenty filamentu oczekują, że narzędzia z ogni będą obecne prawidłowe renderowanie.

***

Korzystanie z innych ram CSS z Filamentem: Wyzwania i podejścia

Próba zastąpienia CSS Tailwind inną ramą CSS, taką jak Bootstrap, Bulma, Foundation lub Materagilize, Kilka wyzwań:

-Nazwy klas i narzędzia: Inne frameworki mają różne nazwy klas i metodologie CSS (np. Bootstrap używa nazwy klas semantycznych, takich jak `.BTN`,` .Container`, podczas gdy Tailwind używa klas użyteczności, takich jak „BG-Blue-500`,` P-4`). Komponenty filamentu używają nazwy klas Tailwind, więc zamiana CSS wymaga przepisywania klas komponentów lub tworzenia analogicznych stylów w nowej frameworku.

- Systemy reaktywności i siatki: Tailwind wykorzystuje własne responsywne narzędzia projektowe oparte na systemie sieci mobilnej. Inne frameworki mają różne definicje siatki i punktu przerwania, które mogą nie mapować czysto na podejście Tailwind.

- Komponenty niestandardowe i interakcje: Wiele komponentów interfejsu użytkownika filamentu integruje przejścia, animacje i stany oparte na tylnych wiatrach. Może to wymagać powtórzenia przy użyciu możliwości JavaScript lub innych funkcji Frameworks CSS.

-Proces kompilacji: Proces kompilacji Filament zwykle obejmuje konfigurowanie kompilatora Just-in-Time (JIT) Tailwind w celu wygenerowania tylko niezbędnych klas CSS. Korzystanie z innej struktury oznacza dostosowanie lub wymianę rurociągu kompilacji CSS.

Pomimo tych przeszkód mogą rozważyć zaawansowani użytkownicy, którzy chcą korzystać z różnych ram:

- Budowanie niestandardowego motywu filamentu: Możesz zastąpić domyślne widoki Filament i komponenty ostrzy, aby korzystać z wybranych klas CSS, stosując klasy CSS Framework zamiast Tailwind. Wymaga to głębokiej znajomości zarówno wewnętrznych filamentów, jak i wybranych ram CSS.

- Korzystanie z rozszerzeń kompatybilnych z Tailwind: Niektóre frameworki CSS lub biblioteki UI budują się na lub są kompatybilne z Tail-Wind (na przykład Daisyui), które mogą dodawać wstępne komponenty i łatwiejsze tematy na tylnej części CSS bez w pełni zastąpienia go.

- Zastępując CSS Tailwind na waniliowy CSS lub niestandardowe framework narzędzi: Może to działać, ale oznacza samodzielne budowanie wielu stylów.

***

Alternatywy dla Tailwind CSS dla filamentu stylistycznego

Jeśli chcesz użyć innej ramy CSS dla filamentu, oto krótki przegląd niektórych popularnych alternatyw i ich porównania dla tego przypadku:

-Bootstrap: Najczęściej używany framework CSS, oferujący stylizację opartą na komponentach z predefiniowanymi klasami przycisków, formularzy, siatków itp. Bootstrap jest cięższy niż wiatr i nie na użyteczność. Integracja bootstrap z Filamentem wymagałaby przepisywania wszystkich klas wiatru Tailind w szablonach filamentu z klasami bootstrap i prawdopodobnie przepisywanie interaktywnych zachowań z JavaScript Bootstrap.

- Bulma: nowoczesna, lekka struktura CSS oparta na FlexBox. Jest modułowy i używa semantycznych nazwy klas, a nie klasy użyteczności. Podobnie jak Bootstrap, użycie Bulma z Filamentem wymaga niestandardowego zastąpienia motywu i ponownego uruchomienia narzędzi z wiatrem na równoważnikach Bulma.

- Fundacja: Kolejne kompleksowe ramy CSS wspierające układy i responsywne układy. Jego krzywa uczenia się i złożoność integracji są podobne do bootstrap i bulmy.

- Materialize lub materialny interfejs użytkownika: ramy CSS na podstawie projektowania materiałów Google. Oferują wstępnie budowane komponenty interfejsu użytkownika, które konsekwentnie z zasadami projektowania materialnego. Korzystanie z nich zamiast ogni, oznacza odbudowę interfejsu użytkownika filamentu w celu dopasowania wytycznych materialnych i dostosowywania komponentów z klasami i skryptami specyficznymi dla materiału.

- Daisyui: Nie zamiennik, ale wtyczka dla CSS Tailwind, która zapewnia klasy komponentów w celu uproszczenia stylizacji. Może to zmniejszyć obciążenie CSS, zachowując jednocześnie tylna ramy, korzystne dla użytkowników filamentu, którzy chcą szybszej stylizacji bez rezygnacji z wiatrem Taild.

***

Kroki techniczne w celu użycia innej ramy CSS z Filamentem

Jeśli zdecydujesz się kontynuować kolejną strukturę CSS, oto ogólne kroki techniczne:

1. Wyłącz lub usuń CSS z powłoką z rurociągu aktywów włókien, aby zapobiec starciom.

2. Dodaj wybraną framework CSS do swojego projektu Laravel za pośrednictwem NPM, CDN lub bezpośredniego włączenia pliku.

3. Zastąpienie widoków i komponentów filamentu: Publikuj widoki filamentu za pomocą „PHP Artisan Vendor: Publish`, a następnie edytuj szablony ostrzy, aby zastąpić klasę Ognistów Informatory twoich frameworków.

4. Odbuduj niestandardowe komponenty: Jeśli filament opiera się na klasach wiatru Tailind dla interaktywnych komponentów, przepisz te interaktywne części za pomocą JavaScript lub narzędzi JavaScript w ramach CSS.

5. Dostosuj konfigurację: w razie potrzeby zaktualizuj pliki konfiguracyjne filamentu, aby dostosować się do ścieżek zasobów CSS i JS.

6. Dokładnie przetestuj interfejs użytkownika: responsywna konstrukcja, dostępność i kompatybilność przeglądarki muszą być zatwierdzone, ponieważ wzór projektu nowego struktury może się różnić.

***

Korzyści i wady korzystania z innych ram z Filamentem

Korzyści:

- Możesz wykorzystać istniejące systemy wiedzy i projektowania zaznajomione ze swoim zespołem.
- Ponowne wykorzystanie ram CSS używanych w innych częściach aplikacji do spójności.
- Prawdopodobnie użyj frameworków z bardziej gotowymi komponentami interfejsu użytkownika, jeśli są preferowane.

Wady:

- wymaga znacznego wysiłku, ponieważ domyślnie podejmuje się filamentu dla CSS o Tailwind.
- Traci ścisłe korzyści integracji, takie jak generowanie JIT CSS, łatwość tematyki i elastyczność użyteczności.
- Potencjalnie powoduje cięższe CSS i dłuższy czas ładowania.
- Może komplikować aktualizację i utrzymanie filamentu i jego tematów.

***

Streszczenie

System tematyki i komponenty interfejsu użytkownika są głęboko zintegrowane z CSS Tailwind, dzięki czemu Tailwind jest domyślnym i zalecanym ramą CSS dla stylistycznych motywów filamentu. Chociaż technicznie możliwe jest korzystanie z innych ram CSS, takich jak Bootstrap, Bulma, Foundation lub Materagizacja poprzez tworzenie niestandardowych tematów i nadrzędne widoki, wymaga znacznej pracy dostosowywania i dobrego zrozumienia zarówno Filament, jak i Alternatywnych ram.

Dla wielu programistów, zamiast całkowicie zastępować tylne wiatrze, używając rozszerzeń lub wtyczek takich jak Daisyui, które opierają się na Tailwind CSS, oferuje proste tematyce z wstępnie zbudowanymi komponentami bez utraty zalet Tailwind.

Podsumowując, chociaż możesz użyć różnych ram CSS z Filamentem poprzez obszerne dostosowywanie, Tailwind CSS pozostaje głównym i najprostszym wyborem do rozwoju motywów filamentu ze względu na głęboką integrację, elastyczność na użyteczności i optymalizację wydajności dostosowaną do systemu projektowego Filament. Jeśli korzystanie z innej ramy jest niezbędne, przygotuj się na znaczące niestandardowe wysiłki rozwojowe w celu dostosowania komponentów i stylów interfejsu użytkownika Filament do paradygmatów tego ram.