# Fomantic UI Tasarım Sistemi

## Fomantic UI Tasarım Sistemi Arayüz Önizlemesi

Özgün üç okuma önerisini filtreleyin, yıldızlarla veya ok tuşlarıyla puanlayın ve tartışma için kısa listeyi koruyun.

## Fomantic UI Tasarım Sistemi Tasarım Referansı

Fomantic UI 2.9.4 derlenmiş varsayılanları doğrudan incelendi. Bunlar Less tabanlı temasındaki seçici düzeyindeki varsayılanlardır; uydurma çalışma zamanı CSS tasarım belirteçleri değildir. Özgün kapak renkleri ve uygulama boyutları ayrıca belirtilmiştir.

### Varsayılan site tipografisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| html font-size | 14px | Varsayılan rem taban değeri. |
| body font-family | Lato, system-ui, platform and emoji fallbacks | Önizlemede yerel Lato font dosyaları kullanılır. |
| body line-height | 1.4285em | Varsayılan 14px metin boyutunda yaklaşık 20px. |
| body text color | rgba(0, 0, 0, 0.87) | Varsayılan yüksek vurgulu metin. |
| h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Özgün sayfa düzenlemeleri uygulanmadan önceki varsayılan başlık boyutları. |
| heading line-height | 1.28571429em | Varsayılan başlık aralığı. |
### Varsayılan düğmeler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| .ui.button background | #e0e1e2 | Nötr varsayılan düğme. |
| .ui.button border-radius | 0.28571429rem | Varsayılan kök boyutunda yaklaşık 4px. |
| .ui.teal.button background | #00b5ad | Kısa liste düğmesinde kullanılan yerel turkuaz eylem rengi. |
| .ui.teal.button:hover | #009c95 | Yerel turkuaz üzerine gelme durumu. |
| .ui.teal.button:focus | #008c86 | Yerel turkuaz odak arka planı. |
| .ui.teal.button:active | #00827c | Yerel turkuaz basılı durum arka planı. |
| .ui.primary.button background | #2185d0 | Birincil mavi, adı belirtilen turkuaz varyantından ayrıdır. |
### Varsayılan kart geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| .ui.card width | 290px | Varsayılan sabit genişlik; akışkan varyant bu uygulama ızgarasını doldurur. |
| .ui.card border-radius | 0.28571429rem | Varsayılan kök boyutunda yaklaşık 4px. |
| .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Varsayılan yükselti ve kenarlık. |
| .ui.card margin | 1em 0 | Kartları hizalamak için özgün ızgara kenar boşluklarını sıfıra ayarlar. |
| .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Varsayılan kart hareketi. |
### Puanlama yapılandırması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| maxRating | 4 by default; 5 in this example | Açıkça belirtilen beş puanlık ölçek, erişilebilir kaydırıcının üst sınırıyla eşleşir. |
| initialRating | 0 | Kullanıcı etkileşiminden önce puanlanmamış. |
| clearable | auto by default; true in this example | Mevcut bir puanın silinmesine izin verir. |
| interactive | true | Fareyle etkileşim etkindir. |
| onRate(value) | Callback after a rating is selected | Metin çıktısını ve erişilebilir değeri eşzamanlı günceller. |
### Özgün okuma alanı ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Page padding | 36px 28px / 24px 18px mobile | Özgün düzen aralıkları. |
| Grid gap | 22px | Özgün üç sütunlu okuma rafı. |
| Page heading | 34px / 1.15; 29px mobile | Özgün başlık düzenlemesi. |
| Cover height | 175px / 155px mobile | Özgün CSS kitap kapağı görseli. |
| Layout breakpoint | 760px | Tek sütunlu kart düzenine özgün geçiş. |
## Fomantic UI Tasarım Sistemi Kapsamlı 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ı.

## jQuery Modülleriyle Fomantic UI Tasarım Sistemi ve CSS Söz Varlığı

### jQuery Modülleriyle Bir CSS Söz Dağarcığı

> Fomantic UI anlamsal sınıf dizelerini isteğe bağlı durum bilgisi tutan modüllerle birleştirir. Okuma rafının görünümü için ui fluid card, ui teal button ve ui basic label kullanılır. Açılır menü ve puanlama, jQuery üzerinden açıkça başlatılır. Yalnızca stil sayfasını yüklemek kartları görüntüler, ancak aynı etkileşimleri sağlamaz.

Bu örnekte Fomantic UI 2.9.4 ve jQuery 3.7.1 sabitlenmiştir. Açılır menüden önce transition modülü, ardından rating yüklenir. Bu bağımlılıkları görünür kılmak, statik bir yıldız satırı gösterip bunu etkileşimli bir kütüphane örneği olarak adlandırmaktan daha faydalıdır. Özgün uygulama modülü, yalnızca kart işaretlemesi oluşturulduktan sonra çalışır.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Derlenmiş Varsayılanları Çalışma Zamanı Tasarım Belirteci Adları Değildir

### Derlenmiş Varsayılanlar, Çalışma Zamanındaki Tasarım Belirteci Adları Değildir

Fomantic’in varsayılan teması Less aracılığıyla oluşturulur. Bu nedenle referansta turkuaz düğmenin arka planı ve kartın kenarlık yarıçapı gibi gerçek seçici değerleri kaydedilir. Derlenmiş paketin sunmadığı --fomantic-primary tasarım belirtecini API uydurmaz. Daha kapsamlı tema değişiklikleri için belgelenmiş tema derlemesi ve değişken dosyaları kullanılmalıdır.

Adı belirtilen turkuaz varyantı, birincil mavi varyantından ayrıdır. Bu okuma rafında kısa liste eylemi turkuaz renktedir; özgün kapak görsellerinde ise kâğıt, adaçayı ve sıcak kil tonları kullanılır. Bu kapaklar uygulamaya özgü çizimlerdir, resmî renk paleti örnekleri değildir. Düğmelerin üzerine gelme, odak ve basılı durum değerleri Fomantic’in yerel varsayılanlarıdır.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi On Dört Piksel Rem Değerleri Geometriyi Değiştirir

### On Dört Piksel Rem, Geometriyi Değiştirir

Varsayılan site stil sayfası, kök ve gövde metin boyutunu on dört piksel olarak ayarlar. Bu nedenle düğme ve kartlar için kullanılan 0.28571429rem yarıçap yaklaşık dört piksele karşılık gelir. Bu rem değerini, kök boyutu on altı piksel olan başka bir ortama kopyalamak farklı bir geometri oluşturur. Bu yüzden referansta yalnızca açıklamasız bir yarıçap vermek yerine kök boyutu da belirtilmiştir.

Tercih edilen yazı tipi ailesi Lato’dur ve derlenmiş pakette yerel font dosyaları bulunur. Bu bağımsız önizleme, web fontu hizmetine istek göndermek yerine bu font kaynaklarını sayfaya gömer. Sayfa başlığındaki 34 piksel değeri özgün bir düzenlemedir; kart açıklamalarında ise uygulamaya özgü daha geniş satır aralığıyla birlikte kompakt gövde metni kullanılır.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Kart Yapısı, İçeriği ve Eylemleri Birbirinden Ayırır

### Kartın Yapısı, İçeriği ve Eylemleri Birbirinden Ayırır

Her yerel kartta dekoratif bir kapak, konu ve açıklama için bir içerik bloğu, puanlama için başka bir içerik bloğu ve kısa liste eylemi için ek bir içerik bloğu bulunur. Akışkan kartlar, paketin varsayılan 290px genişliğini kullanmak yerine özgün üç sütunlu ızgarayı doldurur. Sayfa, ızgaranın tutarlı aralıklar sağlaması için kartların kendi kenar boşluklarını kaldırır.

Alıştırmalar farklı okuma görevleri sunar: harf aralığını karşılaştırma, negatif boşluğu incelemek için bir öğeyi kaldırma ve bağlama göre renk değişimlerini gözlemleme. Kapaklar, tipografi, dikdörtgenler ve üst üste binen renklerle bu alıştırmaları görsel olarak yansıtır. Bunlar açıkça özgün alıştırmalardır ve herhangi bir yayınevinin onayını ima etmez.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Her Giriş Yolunda Yerel Puanlama Davranışını Çağırın

### Her Girdi Yolunda Yerel Derecelendirme Davranışını Çağırın

Puanlama modülü için en fazla değer beş, clearable true olarak ayarlanır. onRate, mevcut sayısal değeri alır ve hem görünür puanı hem de erişilebilir kaydırıcı değerini eşzamanlı günceller. Puanı temizle eylemi, etkin sınıfları elle kaldırmak yerine modülün clear rating davranışını çağırır.

Yerel yıldız modülü fareyle etkileşim sağlar; bu örneğe ayrıca açık klavye desteği eklenmiştir. Puanlama kapsayıcısı, sıfır ile beş arasında değer alabilen ve etiketi belirtilmiş bir kaydırıcıdır. Ok tuşları puanı bir adım değiştirir, Home puanı siler ve End beş puanı seçer. Her giriş yolu set rating işlevini çağırarak görüntülenen yıldızlarla uygulama çıktısının aynı modül durumunu kullanmasını sağlar.

1. Bir puanlamaya Tab tuşuyla gidin ve beş üzerinden iki puan vermek için Sağ Ok tuşuna iki kez basın.

2. Beş puan vermek için End tuşuna, ardından Puanlanmadı durumuna dönmek için Home tuşuna basın.

3. Bir yıldıza tıklayın ve metin çıktısıyla erişilebilir değerin birlikte güncellendiğini doğrulayın.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Açılır Menü Filtreleme, Gizli Durumu Korur

### Açılır Liste Filtrelemesi Gizli Durumu Korur

Konu seçimi, dropdown başlatıcısı aracılığıyla yerel bir Fomantic açılır menüsüne dönüşür. onChange geri çağrısı, konusu seçili değerle eşleşmeyen kartları gizler ve görünür alıştırma sayısını günceller. Tüm konular seçeneği rafın tamamını yeniden gösterir. Menü hareketi için bileşen transition modülünü kullanır.

Filtreleme bir kartı silip yeniden oluşturmaz. Gizlenen kartların mevcut puanları ve kısa liste üyelikleri özgün kayıtlarında korunur. Bu davranış bilinçlidir: rafı daraltmak bir görüntüleme işlemidir; kullanıcının önceki seçimlerini silme isteği değildir. Bu nedenle özet, geçerli filtrenin dışında kalan bir öğeden de söz edebilir.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Kısa Liste Puanlamadan Bağımsızdır

### Kısa Liste, Derecelendirmeden Bağımsızdır

Puanlama, sıfır ile beş arasında ilgiyi belirtirken kısa liste üyeliği ayrı bir evet/hayır seçimidir. Kullanıcı, bir alıştırmayı puanlamadan önce tartışmak üzere listede tutabilir. Kısa liste düğmesi seçili durumunu aria-pressed ile bildirir ve Ekle ile Kaldır etiketleri arasında geçiş yapar. Özet, adları kararlı konu kimliklerinden oluşan bir Set üzerinden alır.

Durum alanı, seçili alıştırmaları koleksiyonun uzaktan kaydedildiğini iddia etmeden açıklar. Tarayıcı yeniden yüklendiğinde bu örnekteki veriler silinir. Gerçek anlamda paylaşılan bir okuma listesi için kalıcılık, kullanıcı kimliği ve çakışma yönetimi gerekir; bunlar bir kart sınıfı eklemekle sağlanmaz.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Dekoratif Yıldızların Ötesinde Sayısal Anlamı Koruyun

### Dekoratif Yıldızların Ötesinde Sayısal Anlamı Koruyun

Ebeveyn kaydırıcı sayısal değeri ve etiketi sunduğundan yıldız simgeleri yardımcı teknolojilerden gizlenir. Görünür Puanlanmadı metni veya kesirli değer çıktısı, okuyucunun renkli simgeleri saymasına gerek kalmadan aynı anlamı aktarır. Odak görünür olduğunda belirgin bir çerçeve etkin kaydırıcıyı işaretler; Temizle düğmesi odağı bu denetime geri taşır.

Kitap kapağı şekilleri de dekoratiftir. Gerçek alıştırma başlığı, süresi ve açıklaması kartın içinde metin olarak kalır. Dar ekranlarda kartlar, özgün 760px kırılma noktasında alt alta sıralanır. Gömülü kullanımda içerik yüksekliğinin doğru hesaplanması ve düzen kusurlarının gizlenmemesi için örnek, derlenmiş gövdenin görünüm alanı yüksekliğini ve gizli yatay taşmasını sıfırlar.

- Geçerli sayıyı hem metinle hem de erişilebilir değer olarak sunun.

- Puanı temizlemek ve kısa liste seçimlerini değiştirmek için yerel düğmeler kullanın.

- Izgara tek sütunlu hâle geldiğinde etiketleri ve açıklamaların tamamını koruyun.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Fontları Stillerin Yanında Sunun veya Pakete Ekleyin

### Yazı Tiplerini Stillerle Birlikte Dağıtın veya Pakete Ekleyin

Normal bir projede semantic.css dosyasını ayıklayıp themes varlıklarını unutmak yerine fomantic-ui-css dizininin tamamını kopyalayın. Derlenmiş stiller, Lato ve simge font dosyalarına göreli yollarla başvurur. Aşağıdaki kurulum bu yolları korur ve jQuery’yi paket modüllerinden önce yükler.

Yerel önizlemede yalnızca gerekli bileşen stilleri ve komut dosyaları kullanılır, ardından bunların başvurduğu varlıklar tek bir belgeye gömülür. Harici font isteği yapılmaz. Üretim paketleyicileri bu varlıkları farklı biçimde işleyebilir; ancak başarılı bir npm install işleminden yola çıkarak varsaymak yerine teslim edilen sayfada font yolu ve modül sırası yine de test edilmelidir.

Destekleyici belirtimi okuyun

## Fomantic UI Tasarım Sistemi Bileşen Örnekleri

### Üç kartlı okuma rafı

Yerel kartlar, etiketler, düğmeler, açılır menü işaretlemesi ve puanlama kapsayıcıları.

```
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>
```

Kod referansı

- Bunlar gerçek kitap kapakları değil, özgün alıştırma önerileridir.

- Her puanlamanın kendine ait erişilebilir etiketi ve sayısal aralığı vardır.

- Kısa liste eylemleri aria-pressed durumunu bildirir.

### Modül başlatma ve yerel etkileşim

Açılır menü filtreleme, puanlama davranışı çağrıları, klavye desteği ve kısa liste durumu.

```
const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set();
$('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}});
const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));});
$('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};});
cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};});
```

Kod referansı

- jQuery ve Fomantic modülleri bu dosyadan önce yüklenmelidir.

- Ok tuşlarıyla yapılan değişikliklerde de aynı set rating yöntemi kullanılır.

- Filtreleme, derecelendirmeleri veya seçimleri silmeden kartları gizler.

### Özgün raf düzeni

Duyarlı ızgara, kapak görselleri ve belirgin odak stilleri.

```
body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}}
html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible}
```

Kod referansı

- Derlenmiş site varsayılanı olan height:100% gömmeler için auto olarak sıfırlanır.

- Düzen hatalarını gizlemek için body taşması kullanılmaz.

## Fomantic UI Tasarım Sistemi Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Fomantic UI 2.9.4 ve jQuery 3.7.1 ile doğrulanmıştır. Tek başına çalışan örnek, gerekli yazı tipi varlıklarını içerir; standart kurulumda paket göreli yolları korunur. HTML sarmalayıcısı body işaretlemesinin tamamını içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.

```
<!-- npm install fomantic-ui-css@2.9.4 jquery@3.7.1 -->
<!-- Copy node_modules/fomantic-ui-css into public/vendor/fomantic-ui-css. -->
<!-- Copy node_modules/jquery/dist/jquery.min.js into public/vendor/jquery.min.js. -->
<link rel="stylesheet" href="/vendor/fomantic-ui-css/semantic.min.css">
<link rel="stylesheet" href="style.css">
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>

<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/transition.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/dropdown.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/rating.min.js"></script>
<script src="app.js"></script>
<!-- Keep the themes/ assets beside the copied CSS. -->
```

### Projeniz İçin Bir İstem

```
Sağlanan jQuery modül başlatma işlemini, Dropdown ve Rating bileşenlerini kullanarak Fomantic UI 2.9.4 okuma odası kısa listesini genişletin. Üç okuma önerisini, derecelendirme durumlarını ve yerel kısa liste davranışını görünür kartlara bağlı tutun. Derecelendirme kontrolüne eklenen belirgin klavye desteğini ve kaydırıcı semantiğini, eşleşen tema ve simge varlıklarıyla birlikte koruyun. Kısa liste yinelenen eklemeleri önlemeli ve mevcut içeriğini açıkça göstermelidir; bu, destek talebi iş akışı veya uzaktan öneri hizmeti değildir.
```

## Fomantic UI Tasarım Sistemi Kaynakları ve Kapsamı

jQuery 3.7.1 ile Fomantic UI 2.9.4. Tema değerleri derlenmiş varsayılanlardır; özgün kapak görselleri ve klavye iyileştirmesi belirtilmiştir. Tüm seçimler yerel olarak kalır.

- Başlarken Derlenmiş varlıklar ve modül kurulumu.

- Tema oluşturma Less tabanlı tema özelleştirmesi.

- Site Genel tipografi ve sayfa varsayılanları.

- Card Kart içeriğinin yapısı ve çeşitleri.

- Derecelendirme Derecelendirme yöntemleri ve onRate geri çağırımı.

- Açılır menü Seçim başlatma ve değişiklik işleme.

- Button Yerleşik adlandırılmış varyantlar ve durumlar.

## Fomantic UI Tasarım Sistemiyle İlgili Kaynaklar

### Foundation

XY Grid, Abide özel doğrulayıcıları, Reveal onayı, gerçek Sass ayarları ve eksiksiz yerel entegrasyon koduyla çalışan bir Foundation kanıt masası.

### Framework7

Gerçek swipeout eylemleri, açık iOS tema değerleri, klavyeyle erişilebilen bir eylem açıcı ve tamamlanmış çalışmaları sıfırlanana kadar listede tutan filtreli bir liste içeren yerel bir Framework7 eskiz defteri.

### gluestack UI

gluestack’in gerçek core Button ve Input oluşturucularını, açık v5 anlamsal renklerini ve eksiksiz React Native Web kaynak kodunu kullanarak bir saha kiti kontrol listesi oluşturun. Doğrulamayı, klavye eylemlerini, kararlı öğe kimliğini ve yerel olarak hesaplanan paketleme ilerlemesini inceleyin.


- [Uygulama başvurusu](https://fomantic-ui.com/modules/rating.html)
- [Kaynak](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css)
- [Kaynak](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css)
- [Kaynak](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css)
- [Kaynak](https://fomantic-ui.com/modules/rating.html)
- [Kaynak](https://fomantic-ui.com/usage/layout.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/introduction/getting-started.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/usage/theming.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/globals/site.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/views/card.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/modules/rating.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/modules/dropdown.html)
- [Destekleyici belirtimi okuyun](https://fomantic-ui.com/elements/button.html)
- [Kod referansı](https://fomantic-ui.com/views/card.html)
- [Kod referansı](https://fomantic-ui.com/modules/rating.html)
- [Kod referansı](https://fomantic-ui.com/usage/layout.html)
- [Başlarken Derlenmiş varlıklar ve modül kurulumu.](https://fomantic-ui.com/introduction/getting-started.html)
- [Tema oluşturma Less tabanlı tema özelleştirmesi.](https://fomantic-ui.com/usage/theming.html)
- [Site Genel tipografi ve sayfa varsayılanları.](https://fomantic-ui.com/globals/site.html)
- [Card Kart içeriğinin yapısı ve çeşitleri.](https://fomantic-ui.com/views/card.html)
- [Derecelendirme Derecelendirme yöntemleri ve onRate geri çağırımı.](https://fomantic-ui.com/modules/rating.html)
- [Açılır menü Seçim başlatma ve değişiklik işleme.](https://fomantic-ui.com/modules/dropdown.html)
- [Button Yerleşik adlandırılmış varyantlar ve durumlar.](https://fomantic-ui.com/elements/button.html)