# Pure CSS Tasarım Sistemi

## Pure CSS Tasarım Sistemi Arayüz Önizlemesi

Altı kiti filtreleyin, ada göre sıralayın, kullanılabilir öğeleri seçin ve filtreler değişirken seçimi koruyun.

## Pure CSS Tasarım Sistemi Tasarım Referansı

Pure CSS 3.1.0 derlenmiş paket modülleri. Bunlar, adlandırılmış bir tasarım tokenı API değil, seçici değerleridir: Pure, Chakra veya Pico gibi anlamsal CSS değişken teması yayımlamaz. Uygulama kendi tipografisini, düzen boşluklarını ve daha belirgin odak dış çizgisini ekler.

### Resmî düğme ve form değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Devralınan düğme metni boyutuyla ölçeklenir. |
| .pure-button radius | 2px | Varsayılan düğme köşe biçimi. |
| .pure-button background | #E6E6E6 | Nötr düğme dolgusu. |
| .pure-button-primary background | rgb(0, 120, 231) | İsteğe bağlı birincil/seçili dolgusu. |
| .pure-button disabled opacity | 0.40 | Davranış için disabled özniteliğini de kullanın. |
| .pure-form input padding | 0.5em 0.6em | Metin giriş alanlarında kullanılan standart iç boşluk. |
| .pure-form input border | 1px solid #ccc | Varsayılan giriş alanı kenarlığı. |
| .pure-form input radius | 4px | Giriş alanının köşe yarıçapı düğmeninkinden farklıdır. |
### Resmî tablo değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Tablonun dış kenarlığı. |
| .pure-table td / th padding | 0.5em 1em | Rahat okunabilirlik sağlayan hücre aralıkları. |
| .pure-table thead background | #e0e0e0 | Sütun başlığı yüzeyi. |
| .pure-table-striped odd-row fill | #f2f2f2 | Şeritli satırlar isteğe bağlıdır; bu örnekte yatay çizgiler kullanılmıştır. |
| .pure-table-horizontal | Bottom borders only | Dikey ayırıcılar olmadan satır yapısını korur. |
### Duyarlı ızgara sınırları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| sm | 35.5em | 16px’lik varsayılan tarayıcı boyutunda 568px. |
| md | 48em | 768px; kenar çubuğu genişliğin dörtte birini kaplar. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | Yüklü 3.1.0 sürümünün duyarlı ızgarasında 1920px. |
### Özgün katalog stilleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Uygulamaya özgü, açıkça tanımlanmış tipografi. |
| Page heading | 34px / 1.15; 28px on mobile | Özgün editoryal hiyerarşi. |
| Section heading | 18px / 1.3 | Özgün kenar çubuğu ve seçim başlığı. |
| Content gutters | 24px desktop, 16px mobile | Özgün dış dolgu. |
| Focus outline | 3px solid #0078e7; offset 3px | Varsayılan düğme odak gradyanının üzerine eklenen uygulama iyileştirmesi. |
| Table minimum width | 540px | Yerel olarak kaydırılabilir bir alanda sütun anlamını korur. |
## Pure CSS 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ı.

## Pure CSS Tasarım Sistemi: Az Sayıda CSS Modül

### CSS Modüllerinden Oluşan Küçük Bir Küme

> Pure; temel normalleştirme, ızgaralar, düğmeler, formlar, menüler ve tablolar sunar. Bu katalogda paketin derlenmiş rollup dosyasıyla ayrı bir duyarlı ızgara dosyası kullanılır. Herhangi bir JavaScript çatısı, sağlayıcısı veya widget çalışma zamanı içe aktarılmaz. Filtreleme, sıralama ve seçim, yukarıda eksiksiz biçimde gösterilen uygulama koduyla gerçekleştirilir.

Pure ile kapsamlı bir bileşen platformunu karşılaştırırken bu ayrım önemlidir. pure-table sınıfı hücre stilleri sağlar; sıralama, sayfalama, sanallaştırma veya seçim davranışı sağlamaz. pure-button, yerel bir düğmeye uygulanabilen görsel bir sınıftır. Örnek, sınıf adlarının davranış kazandırmasını beklemek yerine alttaki anlamsal HTML öğelerini korur.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Gerçek CSS Değerleri, Uydurulmuş Bir Token Sistemi Değil

### Gerçek CSS Değerleri, Uydurulmuş Bir Token Sistemi Değil

Pure’un derlenmiş düğme stillerinde nötr #E6E6E6 dolgu, iki piksellik köşe yarıçapı ve em birimiyle tanımlanmış iç boşluk kullanılır. İsteğe bağlı birincil düğmede rgb(0,120,231) arka plan ve beyaz metin bulunur. Form giriş alanlarının köşe yarıçapı dört pikseldir ve kendi iç boşluk değerleri vardır. Tasarım sistemi başvurusu, bunları hayalî bir ortak köşe yarıçapı ölçeğinde birleştirmek yerine gerçek farklılıkları gösterir.

Bu katalogda özellikle ölçülü bir uygulama paleti kullanılır: koyu mavi-gri metin, nötr ayırıcılar ve soluk bir seçim özeti. Bunlar resmî Pure marka renkleri değildir. Bu örnek sürümü, alternatif bir uygulama paletini bütünüyle uygulamadığından koyu mod anahtarı içermez. Tema değiştirici; formları, tablo başlıklarını, kenarlıkları, metni ve odak durumlarını birlikte kapsamalıdır.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Tipografi ve Boşluklar Uygulamaya Aittir

### Tipografi ve Boşluklandırma Uygulamaya Aittir

Özgün sayfa katmanında satır yüksekliği 1.5 olan, 16 piksel boyutunda Arial/Helvetica; 34px başlık ve 18px bölüm başlıkları seçilmiştir. Dar ekranlarda başlık 28px olur. Bunlar, Pure’un editoryal bir ölçek belirlediği iddiası değil, açıkça tanımlanmış tercihlerdir. Kompozisyonu yeniden oluşturmak için gereken tüm değerler CSS örneğinde yer alır.

Pure’un ızgarası, satır içi birimleri işlemek için ızgara kapsayıcısında metin oluşturma davranışını ve harf aralığını ayarlar. Birim kuralları metin davranışını normale döndürür. Katalog ayrıca yazı tipi ailesini ızgara birimlerine atayarak kenar çubuğu ve sonuçlar içinde beklenmedik bir yazı tipi değişikliğini önler. Kesirli genişlikleri korumak için uygulama iç boşlukları, border-box boyutlandırmasıyla birimlerin içine yerleştirilir.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Duyarlı Kesirli Genişlikler İçin Duyarlı Modül Gerekir

### Duyarlı Oranlar İçin Duyarlı Modül Gerekir

Kenar çubuğunda pure-u-1 ile pure-u-md-1-4, sonuçlarda ise pure-u-1 ile pure-u-md-3-4 birleştirilir. Başlangıçta ikisi de tam genişliktedir. md medya eşiğinde, yani 48em’de, genişlikleri sırasıyla dörtte bir ve dörtte üç olur. Böylece filtre, özel JavaScript yerleşim hesaplamaları gerektirmeden okunaklı bir sabit orana sahip olur.

Ana pure-min.css rollup dosyasında duyarlı ızgaranın medya sorgusu sınıfları bulunmaz. grids-responsive-min.css dosyasını unutursanız md değiştiricileri etkisiz kalır. Kurulumda iki dosya da açıkça yüklenir. Mobil genişliklerde kenar çubuğu tablodan önce görünür ve sonuç kenarlığı kaldırılarak kesintisiz bir okuma sırası sağlanır.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Filtreleme ve Seçme Ayrı İşlemlerdir

### Filtreleme ve Seçme Ayrı İşlemlerdir

Dikey olarak sıralanan formda etiketli bir arama alanı, kategori seçimi ve kullanılabilirlik onay kutusu bulunur. Her giriş değişikliğinde üç koşula göre görünür satırlar yeniden oluşturulur. Form gönderimi engellenir; böylece arama alanında Enter’a basmak sayfadan ayrılmaya neden olmaz. Filtreleri temizleme işlemi yerel form sıfırlama davranışını çağırır ve tarayıcı varsayılanları geri yükledikten sonra görünümü yeniden oluşturur.

Seçimler, kararlı kit kimliklerinden oluşan bir Set içinde saklanır. Bir filtre seçilmiş öğeyi gizlese bile bu öğe Set’ten çıkarılmaz. Bu nedenle sürekli görünür olan inceleme listesi, seçili öğelerin hangileri olduğunu gösteren asıl kaynaktır. Seçim sayısının yanındaki açıklama bu davranışı belirtir; aksi hâlde kullanıcı, filtrelenerek gizlenen satırların seçimini kaldırdığını sanabilir.

1. Kullanılabilir bir ses kayıt cihazı veya kamera seçin.

2. Başka bir kategoriye göre filtreleyin ve seçilen öğenin inceleme listesinde kalıp kalmadığını kontrol edin.

3. Filtrelerden bağımsız olarak seçili tüm kimlikleri kaldırmak için seçimi temizleyin.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Dar Ekranlarda Tablo Anlamını Koruyun

### Dar Ekranlarda Tablo Anlamını Koruyun

Tabloda caption, thead ve tbody öğeleriyle sütun başlığı scope öznitelikleri kullanılır. Equipment başlığında, adların sırasını tersine çeviren yerel bir düğme bulunur. Üst kapsayıcı th öğesine, görünen okla eşleşecek şekilde aria-sort=ascending veya aria-sort=descending atanır. Sıralama sırasında tüm satırlar aynı sütun yapısını korur.

540px’lik minimum genişlik; Select, Equipment, Category ve Availability başlıklarının anlamını korur. Dar ekranda yatay olarak yalnızca etiketli tablo alanı kaydırılır. Bu alan klavyeyle odaklanabilir ve görünür bir odak çerçevesine sahiptir. Sayfanın kendisi genişlemez. Bu, her satırı görsel açıdan ilgisiz bir karta dönüştürmek yerine veri tabloları için bilinçli olarak seçilmiş bir yaklaşımdır.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Devre Dışı, Boş ve Odak Durumları Gerçek Davranış Gerektirir

### Devre Dışı, Boş ve Odak Durumları Gerçek Davranış Gerektirir

Ödünç verilmiş öğeler, kullanılabilirlik durumunu açıklamak için listede kalır ancak seçilemez: yerel onay kutuları devre dışıdır. Set boş olduğunda seçimi temizleme denetimi de devre dışı kalır. Pure’un opaklık kuralı, öğenin devre dışı görünmesine yardımcı olur; ancak etkinleştirilmesini önleyen HTML özniteliğidir.

Sonuç bulunmayan filtrelerde, başlıkları koruyan özel bir boş durum iletisi gösterilir. Sonuç sayısı, nazik bildirim yapan bir durum bölgesidir. Özgün stil dosyasına belirgin bir focus-visible çerçevesi eklenmiştir; çünkü Pure’un varsayılan düğme odağı görünümünde arka plan gradyanı kullanılır ve çerçeve sıfırlanır. Bu işlevsel araç için klavye odağını daha net göstermek yararlıdır.

- Devre dışı onay kutuları, kullanılabilir olmayan kitleri satırlarını kaldırmadan açıklar.

- Boş durum iletisi, filtreleri temizleyerek sonucun nasıl geri getirileceğini açıklar.

- Odak çerçeveleri düğmeleri, giriş alanlarını, seçim listelerini ve kaydırma alanını kapsar.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Kataloğun Tamamını Kurup Yeniden Oluşturun

### Kataloğun Tamamını Kurup Yeniden Oluşturun

purecss@3.1.0 paketini yükleyin, pure-min.css ile grids-responsive-min.css dosyalarını yerel assets dizinine kopyalayın ve style.css dosyasından önce, belirtilen sırayla ekleyin. Gövdenin tamamı, uygulama betiği ve CSS yukarıda verilmiştir. Oluşturulan dosyalar statik bir sunucudan sunulabilir; kataloğun çalışması için derleme çalışma zamanı gerekmez.

Paket modülleri, paket boyutunu küçültmek gerektiğinde ayrı ayrı da kullanılabilir. CSS kapsamını daraltırken temel bağımlılıklarla ızgara bağımlılıklarının uyumunu koruyun. Yalnızca tablo stil dosyasını kopyalayıp form veya düğme sınıflarının yine de stillendirileceğini varsaymayın. Mevcut örnekte açıklanmamış kısmi bir paket yerine yeniden oluşturulabilir ve eksiksiz bir kurulum tercih edilir.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi: Bağımlılıkları Kaybetmeden CSS Modülleri Seçin

### Bağımlılıkları Kaybetmeden CSS Modüllerini Seçin

Derlenmiş rollup, katalogdaki düğmelere, formlara ve tabloya stil verir; grids-responsive-min.css ise kesme noktalarına göre etkinleşen kesirli genişlikleri sağlar. Duyarlı dosyayı kaldırmak hata oluşturmaz; yalnızca md sınıfları artık yerleşimi değiştirmez. İçe aktarılan modülleri daraltırken sütunların nasıl davrandığını kontrol edin.

Izgara kapsayıcılarının satır içi yerleşim için değiştirdiği metin davranışını ızgara birimleri de normale döndürür. Uygulamanın yazı tipi atamasını birimlerde koruyun ve iç boşlukları border-box boyutlandırmasıyla bu birimlerin içine yerleştirin. Kataloğa ileride sayfalama eklenirse seçimleri uygulama durumunda kararlı kimliklerle saklayın; ne tablo CSS ne de ızgara kesirleri bu davranışı sağlar.

Destekleyici belirtimi okuyun

## Pure CSS Tasarım Sistemi Bileşen Örnekleri

### Pure modüllerini kullanan katalog işaretlemesi

Duyarlı dörtte bir/dörtte üç yerleşim, dikey sıralanmış form ve yatay çizgili tablo.

```
<main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
```

Kod referansı

- grids-responsive-min.css ayrı olarak yüklenir.

- Ödünç verilmiş öğelerin onay kutularında yalnızca soluk bir stil değil, disabled kullanılır.

### Filtreleme, sıralama ve seçim durumu

Özgün davranış, altı sabit örnek kaydı oluşturur ve seçimleri kararlı kimliklerle saklar.

```
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
```

Kod referansı

- Filtreleme, seçili kimlikleri fark ettirmeden silmez.

- Kullanıcının girdiği arama terimi hiçbir zaman HTML hâline gelmez.

### Uygulamaya özgü tipografi ve odak CSS

Bilerek yalın tasarlanmış kütüphaneyi tamamlayan eksiksiz bir görsel katman.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Kod referansı

- Bu değerler resmî Pure tasarım jetonları değil, uygulamaya özgü tercihlerdir.

## Pure CSS Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

CSS ve JavaScript örneklerini style.css ve app.js olarak kaydedin. Duyarlı ızgara medya sınıfları ayrı bir dosyadadır. Çevrimdışı önizlemede her iki resmî stil dosyasıyla özgün uygulama kodu satır içine alınır. HTML sarmalayıcısı, gövde işaretlemesinin tamamını içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.

```
<!-- npm install purecss@3.1.0
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
```

### Projeniz İçin Bir İstem

```
Sağlanan Pure CSS 3.1.0 ekipman kataloğundan oluşturun ve hem pure-min.css hem de grids-responsive-min.css dosyalarını yükleyin. Çeyrek ve dörtte üç genişliğindeki duyarlı ızgara birimlerini, etiketli filtreleri, anlamsal ve sıralanabilir tabloyu ve tabloyu saran yatay kaydırma alanını koruyun. Seçili kimlikleri silmeden arama, kategori ve kullanılabilirlik filtrelerini birlikte uygulayın. Ödünç verilmiş ekipmanların onay kutularını devre dışı bırakın, Ekipman sütununun sıralama yönü değiştiğinde aria-sort değerini güncelleyin ve filtreler seçili öğeleri gizlese bile bunları inceleme listesinde tutun. Seçim yereldir ve rezervasyon olarak bildirilmemelidir.
```

## Pure CSS Tasarım Sistemi Kaynakları ve Kapsamı

Pure CSS 3.1.0. Seçici değerleri resmî paket değerleridir; katalog tipografisi, renkleri, aralıkları ve uygulama davranışı özgündür. Herhangi bir rezervasyon yapılmaz.

- Resmî depo Modül sınırları, derleme dosyaları, duyarlı ızgara kullanımı ve lisans.

- Izgara uygulaması Izgara kapsayıcısı ve birim metni işleme.

- Paket kaynağı Yüklü 3.1.0 modüllerini doğrulamak için kullanılan seçici düzeyindeki kaynak.

## Pure CSS Tasarım Sistemiyle İlgili Kaynaklar

### Quasar

Gerçek marka ve aralık değerleri, QForm doğrulaması, üç adımlı brief oluşturucu, radyo biçim seçenekleri ve canlı 45 dakikalık gündem içeren yerel bir Quasar rehberli iş akışı.

### React Native Elements

Gerçek tema rolleri, denetimli girdiler ve seçimler, doğrulama, yerel onay ve test edilmiş bir web derlemesiyle React Native Elements 5.0.0 kullanarak eksiksiz bir odak planı oluşturucusu geliştirin.

### React Suite

Doğrulanmış v6 CSS değişkenleri, tarih hücresi işaretçileri, seçili günün gündemi, iletişim kutusu doğrulaması ve açık yerel planlama kuralları içeren yerel bir React Suite inceleme takvimi.


- [Uygulama başvurusu](https://github.com/pure-css/pure)
- [Kaynak](https://github.com/pure-css/pure)
- [Destekleyici belirtimi okuyun](https://github.com/pure-css/pure)
- [Kod referansı](https://github.com/pure-css/pure)
- [Resmî depo Modül sınırları, derleme dosyaları, duyarlı ızgara kullanımı ve lisans.](https://github.com/pure-css/pure)
- [Izgara uygulaması Izgara kapsayıcısı ve birim metni işleme.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Paket kaynağı Yüklü 3.1.0 modüllerini doğrulamak için kullanılan seçici düzeyindeki kaynak.](https://github.com/pure-css/pure/tree/main/src)