# Rivet Tasarım Sistemi ## Rivet Tasarım Sistemi Arayüz Önizlemesi Kısa ziyaret bilgisi panellerini fareyle veya klavyeyle değiştirin; temel etkinlik ayrıntıları görünür kalır. ## Rivet Tasarım Sistemi Tasarım Başvurusu Rivet 2.9.1 sürümünde yayımlanmış CSS ve resmî token/yardımcı sınıf belgeleri. rem dönüşümlerinde kök boyutu 16px kabul edilir; yerel örnek Arial/Georgia yazı tiplerini kullanır ve kendi dış genişliğini 64rem olarak belirler. ### Tipografi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rvt-font-sans | BentonSans, system sans-serif fallbacks | Kurumsal yazı tipi; önizlemede açıkça Arial kullanılır. | | --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | Serif rolü; gerektiğinde önizlemede Georgia kullanılır. | | rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | 16px kök boyutundaki sayısal yardımcı sınıflar. | | rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | Daha büyük ölçekler; metin öğelerine uygulayın. | | rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | Birim içermeyen satır yüksekliği seçenekleri. | | --rvt-font-regular / medium / bold | 400 / 500 / 700 | Orta kalınlık desteği yazı tipine bağlıdır. | ### Boşluk ve şekil | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | Küçük ve bileşen düzeyindeki boşluklar. | | --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | Daha büyük düzen aralıkları. | | --rvt-spacing-3-xl / 4-xl | 128 / 192px | Büyük başlık boşluğu; panel dolgusu değildir. | | --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | Standart kök boyutunda 2 / 4 / 8px. | | --rvt-width-4-xl | 48rem (768px) | Genişlik tokenı, aynı soneki taşıyan boşluk tokenından farklıdır. | ### Palet | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rvt-color-black-500 | #243142 | Birincil koyu başvuru rengi. | | --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | Açık arka plan ve ayırıcı başvuru renkleri. | | --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | Koyu kırmızı ailesi başvuru renkleri. | | --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | Mavi ailesi başvuru renkleri. | | --rvt-color-green-500 | #056e41 | Yeşil ailesi; tek başına başarı anlamı taşımaz. | ### Ekran genişliği eşikleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --rvt-breakpoint-sm | 30em / 480px | -sm-up yardımcı sınıfları. | | --rvt-breakpoint-md | 46.25em / 740px | -md-up yardımcı sınıfları. | | --rvt-breakpoint-lg | 67.5em / 1080px | -lg-up yardımcı sınıfları. | | --rvt-breakpoint-xl | 78.75em / 1260px | -xl-up yardımcı sınıfları. | | --rvt-breakpoint-xxl | 87.5em / 1400px | -xxl-up yardımcı sınıfları. | ## Rivet Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## Üniversite görevleri için Rivet Tasarım Sistemi ### Giriş noktası HTML olan bir bileşen sistemi > Rivet, Indiana University arayüzleri için CSS, JavaScript, yardımcı sınıflar ve sayfa düzenleri sunar. Çalışma örneği, 2.9.1 tarayıcı paketini doğrudan kullanır; React veya bileşen derleyicisi gerektirmez. Amacı, gösterge paneli görünümüne bürünmüş bir başvuru formu oluşturmak değil, ikincil ziyaret bilgileri içeren küçük bir atölye ayrıntı sayfası sunmaktır. Kurumsal kimlik ile örnek içerik birbirinden ayrıdır. Bu sayfa IU imzasını yeniden oluşturmaz, ziyaretçi kaydı yapıldığını iddia etmez veya gerçek bir tesisi doğrulamaz. Üniversite hizmetini canlıya alırken üniversitenin onaylı marka kullanım ve içerik sahipliği süreçlerini izleyin. Kod lisansı, kurgusal etkinlik bilgilerini resmî bilgiye dönüştürmez. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Tipografi ölçeği ve yazı tipi rolleri ### Metinlerde kesin boyut sınıflarını kullanın Rivet sans-serif yazı tipi ailesi BentonSans ile, serif ailesi ise GeorgiaPro ile başlar. Yerel örnekte bilerek Arial ve Georgia yedek yazı tipleri kullanılır ve uzaktaki yazı tiplerine istek gönderilmez. Canlı uygulamada bu önizlemedeki yazı tipi dosyalarını kopyalamak yerine kurumsal yazı tiplerinin kullanım izinlerini ve sunumunu netleştirin. Sayısal ölçek, yuvarlatılmış bir Majör Saniye ilerleyişini izler. Örnek başlıkta rvt-ts-32, panel başlığında rvt-ts-23 kullanılır; derlenmiş boyutları sırasıyla 2rem ve 1.4375rem'dir. Temel metin boyutu 1rem'dir. 1.5 satır yüksekliği için rvt-lh-base, 1.2 için rvt-lh-tight ve 1.65 için rvt-lh-loose kullanın. Bu sınıfları metin öğelerine uygulayın; böylece bir kapsayıcı içindeki kontroller istemeden büyük başlık boyutunu devralmaz. | Bu örnekteki rolü | Sınıf | 16px kök boyutundaki değer | | --- | --- | --- | | Başlık | rvt-ts-32 | 32px | | Panel başlığı | rvt-ts-23 | 23px | | Gövde metni | rvt-ts-16 | 16px | | Küçük etiket | rvt-ts-14 | 14px | Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Renk ve yüzey tercihleri ### Kızıl, tek renk seçeneği değildir Referans paletinde crimson-500 (#990000) ile blue-500 (#006298) birbirinden ayrılır. Örnekte üst kenar çizgisinde ölçülü biçimde kızıl, etkileşimli öğelerin biçimlendirilmesinde ise yerel Rivet kontrolleri kullanılır. Metin rengi black-500 (#243142), yardımcı bilgi yüzeyi black-000 (#f8f9fa), ayırıcılar ise black-100 (#e2e7e9) rengindedir. Bunlar ekran görüntüsünden çıkarılmış değerler değil, paletin gerçek girdileridir. Bir renk adı, her renk eşleşmesinin kontrast gereksinimlerini karşıladığını garanti etmez. Yerel sekme odak göstergesini ve seçili durumunu, görünür içerik ve aria-selected değeriyle birlikte koruyun. Etkin paneli yalnızca etiketini kızıl renge dönüştürerek belirtmeyin. Örnekte kurgusal etkinliğe ilişkin uyarı, sekme değiştiricinin üzerinde okunaklı bir metin olarak yer alır. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Aralıklar, genişlikler ve köşeler ### Bilinçli olarak büyük adımlar içeren adlandırılmış bir ölçek Rivet aralık ölçeği, dörder piksellik ardışık artışlardan oluşmaz. 16px kök boyutunda xxs 4px'ten xs 8px'e, sm 16px'e, md 24px'e, lg 32px'e, xl 40px'e, xxl 64px'e, 3-xl 128px'e ve 4-xl 192px'e ilerler. Örnekte mobil sayfa iç boşluğu için sm, panel çevresindeki düzenli aralıklar için md, ana dikey ayrımlar içinse lg kullanılır. Örnekteki 64rem maksimum okuma alanı, uygulamaya özgü bir tercihtir; Rivet kapsayıcı belirteci olduğu iddia edilmez. Bu alanın içinde 4-xl genişlik belirteci 48rem/768px, spacing-4-xl ise 12rem/192px değerindedir. Aynı sonekin kullanılması, boyut değerlerinin de aynı olduğu anlamına gelmez. Radius-sm .125rem, md .25rem, lg ise .5rem'dir; tüm bileşenleri tek bir büyük, yuvarlatılmış kart görünümüne dönüştürmeyin. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Sekmeler: yapı ve durum ### Veri değerlerini eşleştirin, ardından başlatın Bir sekme kümesi; bir rvt-tabs sarmalayıcısı, anlamlı bir aria-label değerine sahip rvt-tabs__tablist, düğme tetikleyicileri ve kardeş rvt-tabs__panel öğelerinden oluşur. data-rvt-tab ve data-rvt-tab-panel değerleri her eşleşme için aynı olmalıdır. Başlangıçta seçili olanı belirten data-rvt-tab-init, düğmeye değil panele eklenir. Rivet kimlikleri otomatik oluşturabilir; ancak açıkça belirtilen eşleşmeler bu örneği incelemeyi kolaylaştırır. Rivet.init(), sekme rollerini, seçim durumunu, panel ilişkilerini ve klavye davranışını ekler. Gizli durumu bağımsız biçimde değiştiren ikinci bir tıklama işleyicisi yazmayın; birbiriyle yarışan iki durum yöneticisi, seçili sekme ile görünür panelin eşleşmemesine yol açabilir. Aşağıdaki eksiksiz işaretleme kısa ve özgün içerik barındırır; kurulumdaki stil sayfası ile betik etiketleri arasına yerleştirilebilir. ```

A practical introduction to archives

Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.

Arrive at the learning studio

In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.

Choose a comfortable way to participate

The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.

``` Kod referansı Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Sekmelerin dışında tutulması gerekenler ### Ziyaret için gerekli bilgileri koruyun Etkinlik başlığı, tarih, süre ve örneğin kurgusal olduğuna ilişkin uyarı sekmelerin dışında kalır. İçeriğin gerçek bir rezervasyon hakkında olup olmadığını öğrenmek için ziyaretçinin gizli bir paneli açması gerekmemelidir. Her panelde kısa bir başlık ve paragraf bulunur; üç sekme etiketi de dar ekranda tek satırda kalacak kadar kısadır. İlgili içerikler ayrı ayrı okunabiliyorsa sekmeler uygundur. Birden fazla program ücretini veya iki eğitim planını karşılaştırmak için sekmeler elverişli değildir; çünkü geçiş yapıldığında karşılaştırmanın bir tarafı gizlenir. Bu iş için tablo veya açık bir liste daha uygun bir düzen sunar. - Birbirinden bağımsız olarak yararlı açıklamalar için Genel Bakış, Ulaşım ve Erişilebilirlik sekmelerini kullanın. - Son tarihleri, iptal bildirimlerini ve ana eylemi sekme panellerinin dışında görünür tutun. - Okuyucunun kategoriler arasındaki değerleri eşzamanlı olarak incelemesi gerekiyorsa karşılaştırma tablosu kullanın. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Duyarlı tasarım ve klavye kullanımı ### Mobil öncelikli beş eşik Rivet kırılma noktaları 30em, 46.25em, 67.5em, 78.75em ve 87.5em'dir. Her zamanki 16px başlangıç yazı tipi boyutuyla bunlar 480, 740, 1080, 1260 ve 1400px'e karşılık gelir. Orta eşik, başka bir kaynaktan alınmış 768px kuralı değil, 740px'tir. Duyarlı yardımcı sınıflara kırılma noktası ve -up eki eklenir; örneğin rvt-ts-32-md-up. Sekme şeridi birkaç satıra bölünmemelidir. Etiketleri kısa tutun ve dar genişliklerde gerçek metinle test edin; metni sığdırmak için küçültmek, doğru gezinme bileşenini seçmenin yerini tutmaz. Yerel etkileşimde Sol ve Sağ ok tuşları odağı sekmeler arasında, uçlara gelindiğinde başa sararak taşır. Enter veya Space odaktaki sekmeyi etkinleştirir. Kapalı panellerdeki etkileşimli alt öğeler sekme sırasına girmemelidir. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Örneği kurun ve doğrulayın ### Tek bir başlatma çağrısıyla tarayıcı paketi Sağlanan kurulum, 2.9.1 sürümünü sabitler ve yayımlanmış CSS dosyasını ve küçültülmüş tarayıcı JavaScript dosyasını sitenin statik dizinine kopyalar. Rivet.init() çağrısından önce bu varlıkları sunun. Bir çerçeve HTML öğesini daha sonra bağlarsa, ilk sayfa taramasının yeni düğümleri gördüğünü varsaymak yerine belgelenmiş JavaScript entegrasyon yaşam döngüsünü kullanın. Tek başına çalışan önizleme, resmî CSS ve JavaScript varlıklarını yerel olarak yükler. Tipografi yedekleri ve sarmalayıcı genişliği, açıkça belirtilmiş uygulama geçersiz kılmalarıdır. Ağ üzerinden rezervasyon isteği, kalıcı depolama, analiz veya otomatik oluşturulan onay yoktur. Gösterilen etkileşimin tamamı yerel sekmelerdir. 1. Yerel stil sayfasını yükleyin ve başlatmadan önce üç sekme tetikleyicisinin ve panelin de bulunduğunu doğrulayın. 2. Rivet'ı başlatın; her sekmeye önce fareyle, ardından ok tuşları ve Enter veya Space ile geçin. 3. Masaüstü ve dar mobil ekran boyutlarında seçili tetikleyiciyi, görünür paneli, odak halkasını ve belge genişliğini kontrol edin. Destekleyici belirtimi okuyun ## Rivet Tasarım Sistemi Bileşen örnekleri ### Ziyaret bilgilerini gösteren üç panelli bir sekme değiştirici Açıkça eşleştirilmiş veri öznitelikleri ve başlangıç paneli; odak ve görünürlük denetimini yerel Rivet üstlenir. ```

A practical introduction to archives

Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.

Arrive at the learning studio

In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.

Choose a comfortable way to participate

The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.

``` Kod referansı - Etkinlik başlığını ve gerekli bilgileri panellerin dışında tutun. - Yayımlanmış CSS ve JavaScript dosyalarını ekleyin, Rivet.init() çağrısını bir kez yapın. - Ok tuşları odağı taşır; Enter veya Space odaktaki sekmeyi etkinleştirir. ### Eksiksiz bağımsız örnek Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun. ``` Workshop visit — Rivet specimen

LEARNING STUDIO · RIVET COMPONENT EXAMPLE

Reading the archive

A hands-on introduction to working with historical sources. Explore the visit information below.

SessionSaturday · 10:00–11:30

FormatSmall-group workshop

LocationLearning studio · Room 204

Fictional event for interface demonstration. No reservation is made.

A practical introduction to archives

Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.

Arrive at the learning studio

In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.

Choose a comfortable way to participate

The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.

``` Kod referansı - Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur. - Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir. ## Rivet tasarım sistemi Yapay Zekâ Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Yayımlanmış rivet-core 2.9.1 tarayıcı varlıklarının yolları, resmî başlangıç kılavuzuna göre doğrulandı. Genel dizini sunucunuza göre ayarlayın; önizleme yerel kopyaları ve yedek bir yazı tipi kullanır. Kaynaklar bölümündeki eksiksiz çalışma örneği ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/indiana-rivet.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın. ``` npm install rivet-core@2.9.1 mkdir -p public/vendor/rivet cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/ cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/ # Add these tags to the HTML served from public/: # # ...component markup... # # ``` ### Projeniz İçin Bir İstem ``` Yerel HTML sekmelerini kullanan bir Rivet 2.9.1 üniversite atölyesi ayrıntı sayfası oluşturun. rivet.min.css ve rivet.min.js dosyalarını yükleyip Rivet.init() çağrısını yapın. Eşleşen data-rvt-tab/data-rvt-tab-panel değerleri, anlamlı bir sekme listesi etiketi ve ilk panelde data-rvt-tab-init kullanın. Başlığı, tarihi ve önemli bildirimleri sekmelerin dışında tutun. Gövde metninde 16px, panel başlıklarında 23px, sayfa başlığında 32px ve Rivet aralık belirteçlerini kullanın. 480/740/1080/1260/1400px kırılma noktalarına uyun. Panelleri kısa tutun; klavye odağı ve seçim davranışını koruyun ve tüm kurgusal etkinlik bilgilerini gösterim içeriği olarak belirtin. Yetkiniz olmadan IU kimlik öğelerini kullanmayın. ``` ## Rivet Tasarım Sistemi Kaynaklar ve kapsam Teknik bir Rivet referansı ve kurgusal atölye gösterimi. Kurumsal amblemler ve yazı tipi izinleri Indiana University kurallarına tabidir; gerçek ziyaret veya rezervasyon sunulmamaktadır. - Rivet genel bakış Resmî amaç ve kaynaklara genel bakış. - Tasarım belirteçleri Paylaşılan görsel kararlar için adlandırılmış değerler. - Düzenler Uygulamalar ve içerik sayfaları için başlangıç düzenleri. - Bileşenler Belgelenmiş arayüz bileşenleri. - Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez. ## Rivet Tasarım Sistemi İlgili kaynaklar ### Digital Agency tasarım sistemi DADS metin rolleri, anlamsal tasarım belirteçleri ve yerel HTML bileşen anatomisiyle okunaklı Japonca kamu hizmeti arayüzleri oluşturun. Biçim hatası, eşleşme bulunamaması sonucu ve incelenebilir bir durum kaydı içeren çalışan bir makbuz sorgulamasını deneyin. ### KERN Doğrulanmış tipografi, anlamsal temalar, açılır-kapanır öğeler ve geri alınabilir bir onay akışıyla yerel bir KERN arayüzü oluşturun. ### Michigan Forty Two Çalışan bir rol ve araştırma filtresi örneği üzerinden Forty-Two’nun desteklenen WordPress iş akışını, web paletini ve kişi dizini örüntülerini tanıyın. - [Uygulama başvurusu](https://rivet.iu.edu/components/tabs/) - [Kaynak](https://rivet.iu.edu/utilities/typography/) - [Kaynak](https://rivet.iu.edu/design-tokens/) - [Destekleyici belirtimi okuyun](https://rivet.iu.edu/getting-started/) - [Destekleyici belirtimi okuyun](https://rivet.iu.edu/utilities/typography/) - [Destekleyici belirtimi okuyun](https://rivet.iu.edu/design-tokens/) - [Kod referansı](https://rivet.iu.edu/components/tabs/) - [Destekleyici belirtimi okuyun](https://rivet.iu.edu/components/tabs/) - [Rivet genel bakış Resmî amaç ve kaynaklara genel bakış.](https://rivet.iu.edu/) - [Tasarım belirteçleri Paylaşılan görsel kararlar için adlandırılmış değerler.](https://rivet.iu.edu/design-tokens/) - [Düzenler Uygulamalar ve içerik sayfaları için başlangıç düzenleri.](https://rivet.iu.edu/layouts/) - [Bileşenler Belgelenmiş arayüz bileşenleri.](https://rivet.iu.edu/components/)