UIkit; CSS çatısı, Less özelleştirmesi ve özniteliklerle yönlendirilen JavaScript bileşenlerini bir araya getirir. Aşağıdaki atölye planlayıcısında Switcher, Accordion ve duyarlı ızgara birlikte çalışır; yerel bileşen davranışının nerede sona erdiğini ve uygulama seçim durumunun nerede başladığını gösterir.
Yerel UIkit 3.25.25 CSS ve JavaScript; özgün oturum içeriği ve plan durumu. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
Prototipleme oturumunu açın ve kendine özgü içeriğini inceleyin.
Bu oturumu seçin ve aşağıdaki seçili etiketi kontrol edin.
Systems clinic oturumuna geçin ama seçmeyin; yerel planda Prototipleme seçili kalır.
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.
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.
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.
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
[email protected] 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.
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.
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.
html
<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>
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.
JavaScript
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.';});
Bu geçersiz kılmalar, varsayılan resmî belirteç değerleri değildir.
04
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.
html
<!-- npm install [email protected]
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
Ajan İstemi
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.
05
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.
