Filament temaları için kuyruk rüzgarı yerine farklı bir CSS çerçevesi kullanabilir miyim

Basit cevap, filamanın esas olarak Tailwind CSS ile çalışmak için tasarlanması ve bileşenleri, temaları ve UI, Tailwind'in yardımcı sınıflarına ve kurallarına dayanmasıdır. Bu sıkı bağlantı, başka bir CSS çerçevesi için kuyruk rüzgarının değiştirilmesinin resmi olarak desteklenmediği veya basit olmadığı anlamına gelir. Bununla birlikte, bazı çaba ve özelleştirmelerle, diğer CSS çerçevelerini filament ile kullanılmak üzere uyarlamak mümkündür, ancak bu özel tema oluşturma, varsayılan stilleri geçersiz kılmayı ve muhtemelen bazı UI parçalarını sıfırdan yeniden inşa etmeyi içerir.

***

Filament'in Tailwind CSS'ye bağımlılığı

Filament, varsayılan ve çekirdek stil çerçevesi olarak Tailwind CSS'yi kullanır. Tüm tasarım sistemi ve bileşenleri, Tailwind'in düzen, boşluk, renkler, tipografi, yanıt verme, etkileşim ve tema için yardımcı sınıflarından yararlanır. Varsayılan yönetici kullanıcı arayüzü kuyruk rüzgarı ile oluşturulmuştur ve birçok filament eklentisi ve uzantısı da CSS Foundation olarak kuyruk rüzgarı varsayar.

Tailwind CSS, ilk bir hizmet yaklaşımı kullandığından, filament temaları geleneksel CSS yazmak veya küresel olarak tanımlanmış sınıflara güvenmek yerine kuyruk rüzgarı yardımcı programları eklemeyi ve özelleştirmeyi içerir. Bu, son derece esnek ve özelleştirilebilir bir kullanıcı arayüzü ile sonuçlanır, ancak filaman bileşenlerinin kuyruk rüzgarı yardımcı programlarının mevcut olmasını beklediği anlamına gelir.

***

Filamentli diğer CSS çerçevelerini kullanmak: Zorluklar ve yaklaşımlar

Tailwind CSS'yi Bootstrap, Bulma, Foundation veya Materyalize gibi başka bir CSS çerçevesiyle değiştirmeye çalışmak, yüzleşir:

-Sınıf Adları ve Yardımcı Programlar: Diğer çerçevelerin farklı sınıf adları ve CSS metodolojileri vardır (örneğin, bootstrap `.btn`,` .Container` gibi anlamsal sınıf adlarını kullanırken, Tailwind `BG-Blue-500`,` p-4` gibi yardımcı sınıflar kullanır). Filament bileşenleri Tailwind'in sınıf adlarını kapsamlı bir şekilde kullanır, bu nedenle CSS'yi değiştirmek bileşen sınıflarını yeniden yazmayı veya yeni çerçevede benzer stiller oluşturmayı gerektirir.

- Duyarlılık ve Izgara Sistemleri: Tailwind, mobil bir mobil ızgara sistemine dayanan kendi duyarlı tasarım yardımcı programlarını kullanır. Diğer çerçeveler, Tailwind'in yaklaşımıyla temiz bir şekilde eşleşmeyebilecek farklı ızgara ve kırılma noktası tanımlarına sahiptir.

- Özel bileşenler ve etkileşimler: Birçok filament kullanıcı arayüzü bileşenleri kuyruk rüzgarı tabanlı geçişleri, animasyonları ve durumları entegre eder. Bunların JavaScript veya diğer CSS çerçevelerinin yetenekleri kullanılarak çoğaltılması gerekebilir.

-Oluşturma işlemi: Filament'in oluşturma işlemi genellikle Tailwind'in tam zamanında (JIT) derleyicisini yalnızca gerekli CSS sınıflarını oluşturmak için yapılandırmayı içerir. Başka bir çerçeve kullanmak, CSS Build boru hattını ayarlamak veya değiştirmek anlamına gelir.

Bu engellere rağmen, farklı bir çerçeve kullanmak isteyen gelişmiş kullanıcılar şunları göz önünde bulundurabilir.

- Özel bir filament teması oluşturma: Filament'in varsayılan görünümlerini ve bıçak bileşenlerini, seçtiğiniz CSS sınıflarını kullanmak için Tailwind yerine CSS çerçevesinin sınıflarını uygulayarak geçersiz kılabilirsiniz. Bu, hem filament iç kısımları hem de seçtiğiniz CSS çerçevesi hakkında derin bilgi gerektirir.

- Tailwind uyumlu uzantıları kullanma: Bazı CSS çerçeveleri veya UI kütüphaneleri, önceden oluşturulmuş bileşenler ekleyebilen ve tam olarak değiştirilmeden kuyruk rüzgarı CSS'nin üstünde daha kolay tema ekleyebilen kuyruk rüzgarı (örneğin Daisyui) üzerinde oluşur.

- Tailwind CSS'nin vanilya CSS veya özel yardımcı program ile değiştirilmesi: Tam bir CSS çerçevesi yerine, bazı geliştiriciler Tailwind'in yaklaşımından esinlenen minimal bir CSS yardımcı kütüphanesi oluşturur. Bu işe yarayabilir, ancak birçok stil kendiniz oluşturmak anlamına gelir.

***

Styling Filament için Tailwind CSS alternatifleri

Filament için farklı bir CSS çerçevesi kullanmak istiyorsanız, bazı popüler alternatifler ve bu kullanım durumu için nasıl karşılaştırıldıklarına dair kısa bir bakış:

-Bootstrap: Düğmeler, formlar, ızgaralar vb. İçin önceden tanımlanmış sınıflarla bileşen tabanlı stil sunan en yaygın kullanılan CSS çerçevesi. Bootstrap'ın filament ile entegre edilmesi, filament şablonlarındaki tüm kuyruk rüzgar sınıflarının bootstrap sınıflarıyla yeniden yazılmasını ve muhtemelen Bootstrap'ın JavaScript ile etkileşimli davranışları yeniden yazmasını gerektirecektir.

- Bulma: Flexbox'a dayalı modern, hafif bir CSS çerçevesi. Modülerdir ve yardımcı ilk sınıflar yerine semantik sınıf adlarını kullanır. Bootstrap'a benzer şekilde, Filamentli Bulma kullanmak, Bulma eşdeğerlerine özel bir tema geçersiz kılma ve kuyruk rüzgarı yardımcı programları gerektirir.

- Vakıf: Izgara ve duyarlı düzenleri destekleyen bir başka kapsamlı CSS çerçevesi. Öğrenme eğrisi ve entegrasyon karmaşıklığı Bootstrap ve Bulma'ya benzer.

- Google'ın malzeme tasarımına dayalı olarak kullanıcı arayüzü veya malzeme kullanıcı arayüzü: CSS çerçeveleri. Malzeme tasarım prensipleriyle tutarlı bir şekilde şekillendirilmiş önceden inşa edilmiş UI bileşenleri sunarlar. Tailwind yerine bunları kullanmak, Filament'in kullanıcı arayüzünü materyal yönergelerine uyacak şekilde yeniden inşa etmek ve bileşenleri malzemeye özgü sınıflar ve komut dosyaları ile uyarlamak anlamına gelir.

- Daisyui: Bir yedek değil, Styling'i basitleştirmek için bileşen sınıfları sağlayan Tailwind CSS için bir eklenti. Tailwind olarak, kuyruk rüzgarından vazgeçmeden daha hızlı stil isteyen filaman kullanıcıları için faydalı olan temel çerçeve olarak kuyruk rüzgarını tutarken CSS iş yükünüzü azaltabilir.

***

Filamentli farklı bir CSS çerçevesi kullanmak için teknik adımlar

Başka bir CSS çerçevesine devam etmeyi seçerseniz, genel teknik adımlar şunlardır:

1. Çatışmaları önlemek için Filament Varlık Boru Hattı'ndan kuyruk rüzgarı CSS'yi devre dışı bırakın veya kaldırın.

2. CSS çerçevesini NPM, CDN veya doğrudan dosya dahil etme yoluyla Laravel projenize ekleyin.

3. Filament görünümlerini ve bileşenlerini geçersiz kılma: `php zanaatkâr satıcısı: yayın 'kullanarak filament görünümlerini yayınlayın, ardından kuyruk rüzgarı sınıflarını çerçevenizin sınıflarıyla değiştirmek için bıçak şablonlarını düzenleyin.

4. Özel bileşenleri yeniden oluşturun: Filament, etkileşimli bileşenler için kuyruk rüzgar sınıflarına güveniyorsa, bu etkileşimli parçaları JavaScript veya CSS çerçevenizin JavaScript yardımcı programlarını kullanarak yeniden yazın.

5. Yapılandırmayı Ayarlayın: CSS ve JS Varlık Yollarını karşılamak için gerekirse Filament Yapılandırma Dosyalarını Güncelleyin.

6. Test kullanıcı arayüzü iyice: Duyarlı tasarım, erişilebilirlik ve tarayıcı uyumluluğu, yeni çerçevenin tasarım modeli farklı olabileceğinden doğrulanmalıdır.

***

Filamentli diğer çerçeveleri kullanmanın faydaları ve dezavantajları

Faydalar:

- Ekibinize aşina olan mevcut bilgi ve tasarım sistemlerinden yararlanabilirsiniz.
- Tutarlılık için başvurunuzun diğer bölümlerinde kullanılan CSS çerçevelerini yeniden kullanın.
- tercih edilirse muhtemelen daha hazır kullanıcı arayüzü bileşenlerine sahip çerçeveler kullanın.

Dezavantajlar:

- Varsayılan olarak Tailwind CSS için filament yapıldığından önemli çaba gerektirir.
- JIT CSS üretimi, tema kolaylığı ve ilk esneklik gibi sıkı entegrasyon avantajlarını kaybeder.
- Potansiyel olarak daha ağır CSS ve daha uzun yükleme süreleri ile sonuçlanır.
- filamanın ve temalarının güncellenmesini ve bakımını zorlaştırabilir.

***

Özet

Filament'in tema sistemi ve UI bileşenleri, Tailwind CSS ile derinden entegre edilmiştir, bu da kuyruk rüzgarını filament temalarını şekillendirmek için varsayılan ve önerilen CSS çerçevesi haline getirir. Bootstrap, Bulma, Foundation veya özel temalar oluşturarak ve geçersiz kılma gibi diğer CSS çerçevelerini kullanmak teknik olarak mümkün olsa da, önemli özelleştirme çalışması ve hem filament hem de alternatif çerçevenin iyi anlaşılmasını gerektirir.

Birçok geliştirici için, Tailwind'i tamamen değiştirmek yerine, Daisyui gibi Tailwind CSS üzerine inşa eden uzantılar veya eklentiler kullanarak, Tailwind'in avantajlarını kaybetmeden önceden oluşturulmuş bileşenlerle orta zemin 'basit bir tema sunar.

Sonuç olarak, kapsamlı özelleştirme ile filamentli farklı bir CSS çerçevesi kullanabilirsiniz, Tailwind CSS, derin entegrasyonu, ilk esnekliği ve Filament'in tasarım sistemi için tasarlanmış performans optimizasyonu nedeniyle filaman teması geliştirme için birincil ve en basit seçim olmaya devam etmektedir. Başka bir çerçeve kullanmak zorunluysa, Filament'in UI bileşenlerini ve stillerini bu çerçevenin paradigmalarına uyarlamak için önemli özel geliştirme çabalarına hazırlanın.