Genel Bakış
Salesforce, uygulama arayüzlerini standartlaştırmak ve kullanıcı deneyimini iyileştirmek için güçlü bir araç olan Lightning Design System (SLDS) sunar. CSS çerçevesi, simge setleri, ızgara sistemi ve kullanıma hazır bileşenleriyle SLDS, geliştiricilere çağdaş, erişilebilir ve markayla uyumlu arayüzler sunar. Bu blogda SLDS, avantajları ve pratik uygulamaları açıklanmaktadır.
Lightning Tasarım Sistemi: Nedir?
Salesforce'un resmi UI (Kullanıcı Arayüzü) çerçevesine Lightning Tasarım Sistemi denir. Tailwind veya Bootstrap gibi bilinen çerçeveler gibi, Salesforce ekosistemine özel olarak uygun öğeler içerir ve belirli tasarım ilkelerine uyar.
SLDS'nin öne çıkan özellikleri şunlardır:
Tutarlılık: Her Salesforce uygulamasının aynı görsel standartlara uymasını garanti eder.
Butonlar, modallar, tablolar ve simgeler dahil yüzlerce bileşen, Ready Components aracılığıyla kullanılabilir.
Mobil Uyumluluk: Duyarlı ızgara sistemi sayesinde her cihazda düzgün bir görüntüleme sağlanır.
Erişilebilirlik: Tasarımlarda WCAG erişilebilirlik yönergeleri izlenir.
SLDS Kullanım Örnekleri
1. Salesforce Lightning Uygulamaları
SLDS'nin ana uygulamaları Lightning Web Components (LWC) ve Lightning Components'tır. Geliştiriciler, SLDS sınıflarını HTML etiketlerine uygulayarak hızla profesyonel arayüzler oluşturabilirler.
Örneğin;
<lightning-button label="Save" class="slds-button slds-button_brand"></lightning-button>
Visualforce Sayfaları
Eski Visualforce sayfaları da SLDS'den yararlanabilir. apex:includeLightning/, SLDS CSS dosyasını projeye ekler.
Dış Kullanımlar
SLDS yalnızca Salesforce için değildir. Salesforce'un kurumsal görünümünü ve hissini sistemler genelinde korumak için müşteri portallarına veya özel uygulamalara da entegre edilebilir.
SLDS Kullanımı İçin Öneriler
Izgara Sistemi: .slds-grid sınıfı, uyarlanabilir ve iyi organize edilmiş sayfa düzenlerinin oluşturulmasını kolaylaştırır.
Simgeler: .slds-icon sınıfları, Salesforce'un zengin simge kütüphanesini eklemek için kullanılabilir.
Tema Renkleri: Salesforce marka renkleri SLDS tarafından desteklenir. Örneğin, slds-button_brand, mavi bir eylem düğmesi oluşturur.
Bileşen Kombinasyonları: Araç ipuçları, modallar ve düğmeler gibi bileşenleri birleştirmek kolaydır.
Bir kod örneği
<div class="slds-grid slds-gutters"> <div class="slds-col">Left Column</div> <div class="slds-col">Right Column</div></div>
SLDS Kullanımının Faydaları
Zaman tasarrufu: Hazır şablonlar sayesinde geliştiricilerin CSS yazarken sıfırdan başlamalarına gerek kalmaz.
Marka uyumu sayesinde tutarlı bir Salesforce kurumsal kimliği sağlanır.
Azaltılmış Hata Oranı: Salesforce, tarayıcılar arası uyumluluk ve erişilebilirlik sağlar.
Ölçeklenebilirlik: Hem büyük kurumsal uygulamalara hem de küçük bileşenlere uyar.
Sonuç olarak
Güçlü Salesforce Lightning Tasarım Sistemi (SLDS) çerçevesinin yardımıyla geliştiriciler, profesyonel, hızlı ve tutarlı kullanıcı arayüzleri oluşturabilirler. SLDS, geliştirme süreçlerini hızlandırmak ve kullanıcı deneyimini geliştirmek için kullanılabilir. Tüm Salesforce geliştiricilerinin projelerinde SLDS kullanmaları önerilir.
Referanslar
Salesforce Resmi Dokümantasyonu: Lightning Design System 2
