Pure CSS; çalışma zamanı bileşenleri olmadan ızgaralar, formlar, düğmeler, menüler ve tablolar için kullanılan modüler bir stil sayfasıdır. Bu kılavuz, isteğe bağlı duyarlı ızgara modülünün ve yerel anlamsal öğelerin filtrelenebilir bir ekipman kataloğunda nasıl birlikte çalıştığını gösterir; sıralama ve seçim açıkça uygulanmıştır.
Resmî Pure CSS 3.1.0 ve duyarlı ızgara modülleri; özgün vanilla JavaScript. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
Kullanılabilir bir ses kayıt cihazı veya kamera seçin.
Başka bir kategoriye göre filtreleyin ve seçilen öğenin inceleme listesinde kalıp kalmadığını kontrol edin.
Filtrelerden bağımsız olarak seçili tüm kimlikleri kaldırmak için seçimi temizleyin.
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.
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.
Pure CSS Tasarım Sistemi: Kataloğun Tamamını Kurup Yeniden Oluşturun
Kataloğun Tamamını Kurup Yeniden Oluşturun
[email protected] 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.
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.
Ö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.
JavaScript
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();
Bu değerler resmî Pure tasarım jetonları değil, uygulamaya özgü tercihlerdir.
04
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.
html
<!-- npm install [email protected]
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
Ajan İstemi
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.
05
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.
