Eksiksiz ve duyarlı bir karşılaştırma incelemesi üzerinden Orange OUDS 1.4’ün gerçek anlamsal belirteçlerini, tema paketlerini ve yerel Offcanvas davranışını inceleyin.
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-action-selected
#f15e00
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-action-pressed
#f15e00
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-bg-primary
#fff
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-bg-secondary
#f4f4f4
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-always-black
#000
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
--bs-color-always-white
#fff
Orange 1.4 ön ayarındaki ilk/açık tema bildirimleri. Koyu görünüm, bu tabloyu doğrudan renkler olarak yeniden kullanmak yerine kendi değerlerini data-bs-theme üzerinden belirler.
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-size-display-large
2.5rem
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-size-heading-large
1.5rem
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-size-body-large
1rem
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-size-body-medium
0.875rem
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-size-body-small
0.75rem
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-line-height-body-large
1.5
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
--bs-font-line-height-body-medium
1.4285714286
Yayımlanmış yazı tipi ve tipografi bildirimleri. İçerik içindeki çalışmada, markaya özgü HelvNeueOrange yazı tipi dosyaları yerine açıkça belirtilmiş Arial yedek yazı tipi kullanılır.
Orange OUDS Web Tasarım Sistemi Orange OUDS Paket ve Tema Yapısı
Ortak ve Orange paketlerini birlikte yükleyin
OUDS Web 1.4.0, paylaşılan davranışı markaya özgü temadan ayırır. Örnekte @ouds/web-common ve @ouds/web-orange aynı sürümde yüklenir. Orange paketi derlenmiş CSS, ortak paket ise paketlenmiş tarayıcı JavaScript bileşenlerini sağlar. Kök belge her iki açık yolu da içe aktarır; böylece kılavuz, okuyucuyu yalnızca bir paket komutuyla ve stilsiz statik bir sayfayla baş başa bırakmaz.
@ouds/web-orange, Orange tema CSS bileşenlerini sağlar.
@ouds/web-common, paylaşılan JavaScript bileşenlerini sağlar.
Bu örnekte her iki paket de 1.4.0 sürümüne sabitlenmiştir.
OUDS'yi kendi bileşen sözleşmesi olarak ele alın
OUDS, Bootstrap temel alınarak geliştirilmiştir; ancak bu geçmiş, yukarı akıştaki her sınıfın doğrudan kullanılabileceği anlamına gelmez. Bu sürümde btn-brand, btn-default ve adlandırılmış diğer varyantlar kullanılır. Sağlanan karşılaştırmada bu gerçek sınıflar ve yerel Offcanvas data öznitelikleri kullanılmıştır. Geçiş sırasında yalnızca stil sayfasının URL'sini değiştirmek yerine hem işaretlemeyi hem de tema değerlerini karşılaştırın.
Orange OUDS Web Tasarım Sistemi Orange OUDS Anlamsal Renk ve Tipografi Rolleri
Yüklenmiş anlamsal değişkenleri kullanın
Özgün kartlarda color-bg-primary ve color-border-default kullanılır. Dar başlık vurgusu, açık tema bildirimlerinde #f15e00 değerine çözümlenen color-action-selected değişkenini kullanır. Koyu tema bu rolleri kökteki data-bs-theme üzerinden değiştirir. Bu nedenle kılavuz, açık tema değerlerini kapsamlarıyla birlikte kaydeder ve tek bir turuncu hex kodunu tüm tasarım sistemiymiş gibi sunmak yerine çalışma zamanının doğru görünümü seçmesine izin verir.
Tipografi konusunda açık olun
Paket, yazı tipi yığınında ilk sırada HelvNeueOrange'ı belirtir. Bu yerel olarak gömülü çalışmada kullanılmayan font-face bildirimleri çıkarılmış ve açıkça yedek yazı tipi olarak Arial kullanılmıştır. Tabloda yayımlanmış gerçek aile ve gövde metni rolleri yine açıklanır. Bileşen CSS yüklenmiş olması, markaya özgü yazı tipinin yüklendiğini kanıtlamaz; bu yazı tipini benimseyen bir projenin yazı tipi varlıklarını bilinçli biçimde yönetmesi gerekir.
Orange OUDS Web Tasarım Sistemi Orange OUDS Karşılaştırma Kartları ve İçerik
Karşılaştırmaya gerçek bir karar yapısı kazandırın
Üç kartta kurgusal veri sınırları, kısa kullanım açıklamaları ve inceleme eylemi yer alır. Her kart, yer tutucu satırların ekran görüntüsü yerine eksiksiz metin içerir. Bunlar özgün çalışma içeriğidir; güncel Orange ürünleri, fiyatları veya sözleşmeleri değildir. Bu tasarım çalışmasında fiyatlara yer vermemek, satın alınabilir bir teklif veya ödeme akışı olduğu izlenimini de önler.
Yinelenen kartların hizasını tutarlı kılın
Masaüstü düzeninde üç eşit ızgara sütunu ve esnek sütun düzenine sahip kartlar kullanılır; böylece inceleme eylemleri altta hizalanır. 720px genişlikte kartlar doğal yükseklikleriyle tek sütuna dönüşür. Yerel düğme sınıfları gerçek eylem durumlarını sağlar; çevresindeki ızgara, 24px iç boşluk ve içerik sıralaması ise sağlanan CSS içinde görülen özgün uygulama kararlarıdır.
Orange OUDS Web Tasarım Sistemi Orange OUDS Yerel Offcanvas Düzeni
Çekmeceyi tetikleyicisinden gelen verilerle doldurun
Her inceleme düğmesi aynı #details Offcanvas bileşenini gösterir ve küçük bir data-plan dizini taşır. show.bs.offcanvas olayı, ilgili özgün başlığı, açıklamayı ve özellik listesini çekmece açılmadan önce seçen relatedTarget değerini sunar. Liste, veriyi işaretlemeden ayrı tutmak için textContent ve gerçek liste öğeleri kullanılarak oluşturulur. Çekmece başlığı aria-labelledby üzerinden ilişkilendirilir.
Açma ve kapama davranışını yerel çalışma zamanına bırakın
Orange OUDS Web Tasarım Sistemi Orange OUDS Yerel Seçim ve Geri Alma
Gerçekleşen eylemi açıklayın
Bu yerel seçim yalnızca hangi kurgusal planın seçildiğini saklar ve seçimi kartların altında gösterir. İleti, sipariş verilmediğini açıkça belirtir. Yeni seçim öncekinin yerini alır; seçim temizlendiğinde ileti gizlenir ve odak ilk inceleme düğmesine döner. Hiçbir bilgi bir hesaba, sepete veya ödeme hizmetine gönderilmez.
Görünümü seçimden ayrı tutun
Açık/koyu tema eylemi, kök tema özniteliğini ve eylemin kendi etiketini değiştirir. Geçerli yerel seçimi ve üç kartın içeriğini korur. Tema test ederken bu ayrım önemlidir: görsel bir değişiklik kullanıcının geçerli karşılaştırmasını sessizce sıfırlamamalıdır. Çalışmada her iki görünümde de yerel CSS bileşenleri kullanılır; yalnızca dış düzen uygulama tarafından sağlanır.
Orange OUDS Web Tasarım Sistemi Orange OUDS Klavye ve Dar Ekran Davranışı
Kapatma ve inceleme eylemlerini adlandırın
Her kart eylemi planın adını içerir; yalnızca simge içeren yerel kapatma düğmesine ise açıkça Close details erişilebilirlik etiketi atanır. Odak yönetiminin yerel uygulamayla çalışabilmesi için çekmecede tabindex ve etiketli bir başlık bulunur. Testler Explore çekmecesini açar, Escape tuşuyla kapatır ve odağın başka bir karta geçmeden önce tetikleyiciye döndüğünü doğrular.
Çekmeceyi gerçek görüntü alanı içinde tutun
Uygulama çekmece genişliğini 440px olarak belirler; ancak yerel Offcanvas max-width kuralı dar görüntü alanlarında genişliğin sınırlar içinde kalmasını sağlar. Kartlar alt alta dizilir ve küçük boyutlarda dış iç boşluk azaltılır. Örnek; yalnızca başlangıç durumunda değil, bir plan seçilip görünüm değiştirildikten sonra 280px, 390px, tablet ve masaüstü genişliklerinde de denetlenmiştir.
Orange OUDS Web Tasarım Sistemi Orange OUDS Eksiksiz Statik Entegrasyon
Üç dosyadan oluşan örneğin tamamını kullanın
orange-index.html dosyasını index.html olarak kaydedin; orange.css ve orange-app.js dosyalarını da yanında tutun. Sabitlenmiş iki paketi yükleyip dizini sunun. HTML; yerel varlıkların her iki yolunu, tüm kart içeriğini, çekmece yapısını ve uygulama betiğini içerir. Bu tarayıcı düzenini yeniden oluşturmak için React sarmalayıcısı, eksik bir iskelet ya da uydurma bir SDK gerekmez.
Sağlanan üç dosyanın tümünü aynı dizine kaydedin.
Birbiriyle eşleşen iki OUDS paketini yükleyin.
Klasörü sunun ve her kartı inceleyin.
Escape tuşunu, odağın geri dönüşünü, yerel seçimin temizlenmesini ve her iki görünümü sınayın.
Kod ve varlıkları aynı sürümde tutun
Sürümleri değiştirirseniz düğme varyantlarını, data API ad alanını, olay adlarını ve tema değişkenlerini birlikte doğrulayın. Farklı sürümlerden alınan CSS ve betikler, bir etkileşim uyumsuzluğu ortaya çıkarana kadar doğru görünebilir. Sağlanan sürüm, sınanmış somut bir referanstır; gelecekteki herhangi bir paket birleşiminin aynı şekilde çalışacağını garanti etmez.
Orange OUDS Web Tasarım Sistemi Bileşen Örnekleri
orange-index.html
Eksiksiz işaretleme ve yerel CSS/JavaScript içe aktarımları.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
orange-index.html dosyasını index.html olarak kaydedin; diğer iki dosyanın adını değiştirmeyin.
orange-app.js
Yerel çekmece olaylarının işlenmesi ve yerel seçim/tema durumu.
JavaScript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
orange-index.html dosyasını index.html olarak kaydedin; diğer iki dosyanın adını değiştirmeyin.
04
Orange OUDS Web Tasarım Sistemi Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
http://localhost:8000/ adresini açın. Bu örnek derlenmiş yerel varlıkları kullanır ve Sass derlemesi gerektirmez.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Projeniz İçin Bir İstem
Ajan İstemi
Eşleşen common/Orange paketleri, gerçek btn-brand ve btn-default varyantları, yerel Offcanvas olayları ve API, açık/koyu tema belirteci çözümlemesi ve açıkça belirtilmiş Arial yedeğiyle eksiksiz OUDS Web 1.4 karşılaştırma çalışmasını uygulayın. Tüm paket içeriğini kurmaca, seçimi ise yalnızca yerel tutun.
05
Orange OUDS Web Tasarım Sistemi Kaynakları ve Kapsamı
Gerçek OUDS Web CSS ve Offcanvas çalışma zamanı; özgün OpenDesign kurmaca paketler ve yerel seçimle birlikte. Arial yedeği açıkça belirtilmiştir; herhangi bir ticari teklif veya sipariş temsil edilmez.
