# UIkit Tasarım Sistemi

## UIkit Tasarım Sistemi Arayüz Önizlemesi

Üç oturum arasında geçiş yapın, hazırlık ayrıntılarını genişletin, bir oturum seçin ve yerel katılımcı planını doğrulayın.

## UIkit Tasarım Sistemi Tasarım Referansı

UIkit 3.25.25 Less kaynağı ve derlenmiş varsayılan CSS. @ ile başlayan adlar, çalışma zamanı CSS özel özellikleri değil, derleme zamanı Less değişkenleridir. Önizlemede ayrıca açıkça belirtilen ekrana özgü geçersiz kılmalar bulunur.

### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Varsayılan sistem yazı tipi yığını. |
| @global-font-size | 16px | Temel metin boyutu. |
| @global-line-height | 1.5 | Gövde metninin ritmi. |
| @global-large-font-size | 1.5rem | Büyük metin yardımcı sınıfı. |
| @global-medium-font-size | 1.25rem | Orta boy metin yardımcı sınıfı. |
| @global-small-font-size | 0.875rem | Küçük metin yardımcı sınıfı. |
### Renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| @global-color | #666 | Varsayılan metin. |
| @global-emphasis-color | #333 | Daha belirgin metin ve başlıklar. |
| @global-muted-color | #999 | Varsayılan soluk metin; önizleme meta verileri için #65717a değerini kullanır. |
| @global-link-color | #1e87f0 | Varsayılan bağlantılar. |
| @global-background | #fff | Varsayılan sayfa/yüzey arka planı. |
| @global-muted-background | #f8f8f8 | Soluk karo/yüzey. |
| @global-primary-background | #1e87f0 | Birincil vurgu yüzeyi. |
| @global-secondary-background | #222 | İkincil koyu yüzey. |
| @global-border | #e5e5e5 | Nötr kenarlıklar. |
### Boşluklar ve kontroller

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| @global-margin | 20px | Varsayılan kenar boşluğu düzeni. |
| @global-small-margin | 10px | Küçük kenar boşluğu. |
| @global-medium-margin | 40px | Orta kenar boşluğu. |
| @global-large-margin | 70px | Büyük kenar boşluğu. |
| @global-gutter | 30px | Varsayılan ızgara oluğu. |
| @global-small-gutter | 15px | Küçük ızgara oluğu. |
| @global-medium-gutter | 40px | Orta ızgara oluğu. |
| @global-control-height | 40px | Normal giriş/ düğme yüksekliği. |
| @global-control-small-height | 30px | Küçük kontrol yüksekliği. |
| @global-control-large-height | 55px | Büyük kontrol yüksekliği. |
### Duyarlı genişlik aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| @breakpoint-small | 640px | @s genişlik kuralları başlar. |
| @breakpoint-medium | 960px | @m genişlik kuralları başlar; planlayıcı iki sütunlu düzene geçer. |
| @breakpoint-large | 1200px | @l genişlik kuralları başlar. |
| @breakpoint-xlarge | 1600px | @xl genişlik kuralları başlar. |
### Atölye için özgün iyileştirmeler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Heading | 42px; 34px below 640px | uk-heading-small için açık yerel geçersiz kılma. |
| Card padding | 28px; 20px below 640px | Açık yerel kompakt düzen. |
| Metadata color | #65717a | Açık renkli yüzeylerde daha koyu yerel üstveri metni. |
| Focus outline | 3px solid #145ca5, offset 4px | Sekmeler, akordeon başlıkları ve düğmeler için klavye odağı vurgusu eklendi. |
## UIkit 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ı.

## UIkit Tasarım Sistemi: CSS Sınıfları ve Özniteliklerle Tanımlanan Davranışlar

### CSS Sınıfları ve Özniteliklerle Yönlendirilen Davranış

> UIkit, bir CSS çerçevesini JavaScript bileşen katmanıyla bir araya getirir. uk-card sınıfı bir yüzeyi biçimlendirir; uk-switcher özniteliği etkileşimli bir bileşeni başlatır. Bu ayrım atölye örneğinde açıkça görülür: kartlar ve form kontrolleri yalnızca CSS ile görüntülenebilir, ancak oturumlar arasında geçiş yapmak ve akordeonu genişletmek için UIkit JavaScript paketi gerekir.

Önizleme, derlenmiş gerçek 3.25.25 stil sayfasını ve çalışma zamanı kodunu yerel olarak yükler. Üç oturumun süreleri ve düzenleri birbirinden farklıdır; bu nedenle oturumlar arasında geçiş yapmak, aynı kartta yalnızca bir etiketi değiştirmek yerine gerçek içerik davranışını gösterir. Yerel katılımcı planı betiği, UIkit çalışma zamanından ayrıdır ve eksiksiz olarak eklenmiştir.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Less Değişkenleri ve Çalışma Zamanı Stilleri

### Less Değişkenleri ve Çalışma Zamanı Biçimlendirmesi

@ ile başlayan referans adları Less değişkenleridir. Derleme sırasında çözümlenirler; @global-primary-background değerini sıradan bir tarayıcı stil sayfasına eklemek, çalışma zamanı temasını değiştirmez. Tabloda kurulu kaynaktan doğrulanan değerler yer alırken önizlemede paketin önceden derlenmiş varsayılan CSS teması kullanılır.

Markalı bir UIkit teması oluşturmak için belgelenmiş Less içe aktarma/özelleştirme işlem hattını kullanıp yeniden derleyin. Tekil sayfa iyileştirmeleri için resmî stil sayfasından sonra sıradan CSS ile bir sınıfı hedefleyebilirsiniz. Bu örnekte başlık boyutu, kart dolgusu ve üstveri rengi için ikinci yöntem kullanılır. Bu geçersiz kılmaların yeni resmî UIkit belirteçleri olduğu iddia edilmez.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Metin, Renk ve Yüzey Hiyerarşisi

### Metin, Renk ve Yüzey Hiyerarşisi

Varsayılan genel yazı tipi, on altı piksellik boyuta ve 1.5 satır yüksekliğine sahip bir sistem yazı tipi yığınıdır. Varsayılan birincil arka plan #1e87f0, ikincil arka plan koyu nötr bir renktir; soluk yüzeylerin rengi ise #f8f8f8 değerindedir. Bu roller, birincil seçim eylemini daha sakin bir açıklama karosundan ayırır. Sağlanan belirtim tablosunda dekoratif dört renkli bir palet yerine hem metin hem de yüzey değerleri yer alır.

Atölyede boyutu büyük ama sınırlandırılmış bir başlık, küçük bir program etiketi ve her oturum kartının içinde bir başlık kullanılır. Üstveri yerel olarak koyulaştırılarak #65717a yapılır. Hazırlık karosunda özgün, soluk mavi bir yüzey ve sıradan koyu metin kullanılır. Koyu arka planların otomatik olarak ters renk gerektirdiği varsayılmaz: koyu bir arka plan için uygun UIkit ters renk stili ya da bununla açıkça eşleşen metin stilleri gerekir.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Oturum Gezintisini İçeriğe Bağlama

### Oturum Gezinmesini İçeriğe Bağlayın

Gezinti listesinde connect: #sessions ve fade animasyonuyla birlikte uk-switcher kullanılır. İçerik listesinde uk-switcher sınıfı ve eşleşen kimlik bulunur. Eşleştirme liste sırasına göre yapılır: ilk geçiş düğmesi ilk içerik öğesini denetler. Bu nedenle oturum eklerken veya sıralamayı değiştirirken her iki tarafı da birlikte güncelleyin. Açıkça belirtilen connect seçicisi, öğelerin doğrudan bitişik olmasına güvenme gereğini ortadan kaldırır.

Gezintiye görsel biçim vermek için uk-tab kullanılır. Etkin öğe durumunu ve buna bağlı erişilebilirlik davranışını UIkit yönetir. Özgün plan durumu bundan özellikle bağımsız tutulur: farklı bir oturumu görüntülemek, seçimi sessizce değiştirmez. Seçili etiketi yalnızca Oturumu seç eylemi değiştirir ve odağı katılımcı alanına taşır.

1. Prototipleme oturumunu açın ve kendine özgü içeriğini inceleyin.

2. Bu oturumu seçin ve aşağıdaki seçili etiketi kontrol edin.

3. Systems clinic oturumuna geçin ama seçmeyin; yerel planda Prototipleme seçili kalır.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Duyarlı Genişlikler ve Izgara Olukları

### Duyarlı Genişlikler ve Kenar Boşluğunun Yönetimi

Oturum içeriğinde uk-grid içinde uk-width-2-3@m ve uk-width-1-3@m kullanılır. Orta boyutlu 960px kesme noktasında içerik ve hazırlık karosu yatay olarak yan yana gelir. Bu genişliğin altında alt alta dizilirler. Plan ve hazırlık bölümlerinde aynı kesme noktasında eşleşen yarım genişlik kuralları kullanılır; böylece küçük ekranlarda da kaynak sırası mantıklı kalır.

UIkit ızgarası, ızgara sınıflarıyla ilişkili oluk mantığını kullanır. Örnekte geniş bölümler için uk-grid-medium, başlıkta ise uk-grid-small kullanılır. Izgara öğelerine gelişigüzel kenar boşlukları ekleyip kesirli genişliklerinin toplamının hâlâ doğru olacağını varsaymayın. Kenar boşluklarını dış kapsayıcı ve dolgu sağlar; yerel mobil iyileştirmeler kart dolgusunu ve başlık boyutunu küçültür.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Yerel Bileşen Durumuyla Hazırlık Ayrıntıları

### Yerel Bileşen Durumuyla Hazırlık Ayrıntıları

uk-accordion-default sınıfı varsayılan biçimlendirmeyi sağlar. uk-accordion özniteliğinde multiple: true ayarı kullanıldığı için bir hazırlık yanıtını açmak diğerini kapatmaz. Her öğe uk-accordion-title ve uk-accordion-content içerir. Genişletilmiş durumu ve içerik görünürlüğünü çalışma zamanı yönetir; yalnızca CSS sınıfları bu davranışı sağlamaz.

İki soru farklı pratik konuları yanıtlar: yanınızda ne getirmeniz gerektiği ve yerel planlayıcının yer ayırıp ayırmadığı. İkinci yanıtın açıkça belirtilmesi, arayüzün harici bir etkinlik işlemi yapıldığı izlenimini vermesini önler. Bu sınır yalnızca akordeon içeriğinde belirtilmez; durum mesajında da herhangi bir yer ayrılmadığı açıkça ifade edilir.

- multiple: true, her iki yanıtın da açık kalmasını sağlar.

- Başlık ve içerik aynı akordeon öğesinde kalmalıdır.

- Klavye odağı anahattı her başlıkta görünür kalır.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Kitaplık Görünümünü Uygulama Doğrulamasından Ayırma

### Kitaplık Görünümünü Uygulama Doğrulamasından Ayırma

Katılımcı alanında, gerçek bir etiket ve açıklayıcı metinle birlikte uk-form-controls içinde uk-input kullanılır. Tarayıcının required doğrulaması, boş formun gönderilmesini engeller. Uygulama ayrıca boşluk karakteri denetimi yapar ve geçersiz olaylarda uk-form-danger ile aria-invalid uygular; böylece görsel ve anlamsal durumlar birbiriyle uyumlu kalır. Düzenleme yapıldığında eski hata temizlenir.

Oturum seçildiğinde yerel seçim güncellenir ve ad giriş alanına odaklanılır. Form gönderildiğinde katılımcıyı ve seçili oturumu belirten bir durum mesajı yazılır. Metin textContent ile eklenir, bu nedenle yazılan biçimlendirme kodu çalıştırılmaz. Bu, arka ucu olmayan yerel bir planlayıcıdır; form için kayıt, kaydetme ya da bildirim anlamları UIkit tarafından uydurulmaz.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: Önce CSS ve Çalışma Zamanını, Sonra Uygulama Kodunu Yükleme

### CSS, Runtime ve Ardından Uygulama Kodunu Yükleyin

uikit@3.25.25 paketini kurun ve dist klasöründeki derlenmiş CSS ile JavaScript dosyalarını yerel varlıklara kopyalayın. CSS dosyasını küçük düzen geçersiz kılmasından önce, uikit.min.js dosyasını ise app.js dosyasından önce yükleyin. Her iki komut dosyasında da defer kullanarak ayrıştırma sonrasında kaynak sırasının korunmasını sağlayabilirsiniz. Gövde örneğinde gerekli tüm bileşen öznitelikleri ve içerikleri bulunur.

Sayfada uk-icon kullanılmadığından burada simge paketi isteğe bağlıdır. Daha sonra simge eklerseniz eşleşen simge çalışma zamanı kodunu yükleyin ve yalnızca simge içeren kontrollere anlamlı etiketler verin. Dosya adları eşleşiyor diye daha yeni bir JavaScript paketini eski bir stil sayfasıyla birlikte kullanmayın: bileşen yapısı ve stiller aynı sabitlenmiş paketten gelmelidir.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi: İçerik Büyürken Geçiş Bağlantılarını Kararlı Tutma

### İçerik Büyürken Seçici Bağlantılarını Kararlı Tutun

Geçiş bileşeni, gezinti öğeleriyle içerik öğelerini sıralarına göre eşleştirir. Oturum eklerken aynı konuma her iki tarafa da öğe ekleyin; açıkça belirtilen connect: #sessions hedefi tanımlar. Bir sayfada birbirinden bağımsız birden çok geçiş bileşeni varsa her hedefe benzersiz bir kimlik verin ve başlatma özniteliğinde bu ilişkiyi koruyun.

Seçili atölye oturumu, etkin panelden bağımsız kalır. Başka bir oturuma göz atmak, planlayıcıda önceden yapılmış bir seçimi sessizce değiştirmemelidir. Daha uzun paneller eklerken yeni etkin paneldeki paylaşılan duyarlı ızgarayı ve akordeon içeriğini kontrol edin; yalnızca ilk paneli boyutlandırmak, kullanıcı oturumlar arasında geçiş yapana kadar düzen sorunlarını gizleyebilir.

Destekleyici belirtimi okuyun

## UIkit Tasarım Sistemi Bileşen Örnekleri

### Yerel UIkit özniteliklerini kullanan atölye sayfası

Geçiş bileşeni #sessions hedefine bağlanır; Akordeon birden çok bölümün açılmasına izin verir; ızgara genişlikleri @m noktasında devreye girer.

```
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
```

Kod referansı

- uk-switcher özniteliği davranışı başlatır; uk-switcher sınıfı içerik kapsayıcısını belirtir.

- Bu düzen için UIkit simge paketi gerekmez.

### Özgün yerel plan davranışı

Oturum seçimleri ve doğrulama, yerel UIkit etkileşimlerinin yanında uygulama mantığı olarak çalışır.

```
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
```

Kod referansı

- Oturum seçildiğinde katılımcı alanına odaklanılır.

- Herhangi bir rezervasyon hizmeti çağrılmaz veya bildirim gönderilmez.

### Ekrana özgü açık iyileştirmeler

UIkit bileşenleri korunarak küçük boşluk ve odak düzenlemeleri yapılır.

```
body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}}
```

Kod referansı

- Bu geçersiz kılmalar, varsayılan resmî belirteç değerleri değildir.

## UIkit Tasarım Sistemi Aracısı Kurulumu

### Uygulamaya Başlangıç Noktası

Sağlanan ekran iyileştirmelerini style.css, yerel plan davranışını ise app.js olarak kaydedin. Geçiş bileşenini ve Akordeonu UIkit yönetir. Bu düzen simge paketi gerektirmez. HTML sarmalayıcısı, gövdenin tüm işaretlemesini içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.

```
<!-- npm install uikit@3.25.25
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
```

### Projeniz İçin Bir İstem

```
Sağlanan atölye planlayıcısını genişletmek için UIkit 3.25.25 kullanın. uk-switcher öğesini açıkça #sessions bağlantısını kullanacak şekilde, gezinme/içerik sıralamasını eşleşecek biçimde, uk-grid duyarlı kesirlerini ve aynı anda birden fazla öğenin açılabildiği yerel akordeonu koruyun. Bir oturumu görüntülemek, onu seçmekten ayrı kalmalıdır. Seçim, etiketli katılımcı giriş alanına odaklanmalıdır; yalnızca boşluklardan oluşan bir gönderim uk-form-danger sınıfını ve aria-invalid özniteliğini göstermelidir. Durum, herhangi bir yer ayrıldığını iddia etmeden seçilen oturumu ve katılımcıyı yerel plan olarak belirtmelidir. Uygulama betiğinden önce eşleşen UIkit çalışma zamanı ortamını yükleyin.
```

## UIkit Tasarım Sistemi Kaynakları ve Kapsamı

UIkit 3.25.25 yerel bileşen referansı. Less değerleri derleme zamanı tanımlarıdır; yerel başlık/dolgu/odak geçersiz kılmaları özgün çalışmadır. Etkinlik rezervasyonu yapılmaz.

- Less Derleme zamanı tema değişkenleri.

- Switcher Bağlantılı gezinme/içerik davranışı.

- Açılır bölüm Birden fazla öğeyi açma ve yapısı.

- Izgara Duyarlı genişlikler ve oluklar.

- Form Giriş ve doğrulama sınıfları.

- Kurulum Çalışma zamanı ve stil yükleme.

## UIkit Tasarım Sistemiyle İlgili Kaynaklar

### Vant

Vant 4 ile oluşturulmuş mobil adres seçme akışı: gerçek CSS değişkenleri, denetimli adres kimliği, alan doğrulama, tema değiştirme ve açıkça yalnızca yerel olarak kaydetme.

### Vuestic UI

Kaynaklarla doğrulanmış açık ve koyu ön ayarlar, erişilebilir puan etiketleri, metin alanı doğrulaması, hesaplanan ortalama ve tamamlanan değerlendirmeyi koruyan kayıtlı durum içeren yerel bir Vuestic değerlendirme çalışma sayfası.

### Web Awesome

Kapsamı belirlenmiş köşe yarıçapı ve boşluk değişiklikleri, shadow DOM stillendirmesi, seçim davranışı ve girdi doğrulaması dahil olmak üzere yerel özel öğelerde Web Awesome’ın gerçek anlamsal belirteçlerini inceleyin.


- [Uygulama başvurusu](https://getuikit.com/docs/switcher)
- [Kaynak](https://getuikit.com/docs/less)
- [Kaynak](https://getuikit.com/docs/utility)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/javascript)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/less)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/card)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/switcher)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/grid)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/accordion)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/form)
- [Destekleyici belirtimi okuyun](https://getuikit.com/docs/installation)
- [Kod referansı](https://getuikit.com/docs/switcher)
- [Kod referansı](https://getuikit.com/docs/form)
- [Kod referansı](https://getuikit.com/docs/utility)
- [Less Derleme zamanı tema değişkenleri.](https://getuikit.com/docs/less)
- [Switcher Bağlantılı gezinme/içerik davranışı.](https://getuikit.com/docs/switcher)
- [Açılır bölüm Birden fazla öğeyi açma ve yapısı.](https://getuikit.com/docs/accordion)
- [Izgara Duyarlı genişlikler ve oluklar.](https://getuikit.com/docs/grid)
- [Form Giriş ve doğrulama sınıfları.](https://getuikit.com/docs/form)
- [Kurulum Çalışma zamanı ve stil yükleme.](https://getuikit.com/docs/installation)