👾 Uygun varsayılanlara ve güzel görünümlere sahip, ayarlanabilir taslak-ımsı bir statik site teması. (ˈpik-səl)
English 🇬🇧 | Türkçe 🇹🇷
Not: Bu proje ağır geliştirme sürecinde, biçimlendirme temelleri ilk büyük sürüm çıkışına kadar değişebilir. Sürüm etiketlerinin arasında stiller/betikler bozulabilir. Sadece ne yaptığınızı biliyorsanız kullanın.
- 🥇 Önden HTML ve Anlamsal CSS; sonra yalnızca esnek anahatlar, erişilebilirlik özellikleri için framework'süz JavaScript (nam-ı diğer Aşamalı İyileştirme)
- Dikey ritim, birimsel ölçeklendirme, esnek metin kontrastı ile iyileştirilmiş okunabilirlik.
- CSS mantıksal özellikleriyle temel çift yönlü metin desteği
- Sanitize.css ile CSS sıfırlaması
- Every Layout'tan Anahat İlkelleri
- 🎈 Liquid taslak diliyle yazılmış 11ty uyumlu taslaklar
- PostHTML ve uyumlu eklentileri ile işlenen taslakların düz versiyonu
- 🌗 Aydınlık ve karanlık mod desteği
- İlk sistem tercihine göre otomatik seçer, drkmd.js ile temayı kapa aç yapmanı sağlar
- Her modun Solarized, Gruvbox, One Dark UI gibi kendi renk şema tercihleri var.
- Her renk şemasının Tinted Theming base16 şemalarından düzenlenmiş ve dönüştürülmüş farklı gölgelendirmesi, katmanları ve 6 + 2 renk tonu var.
- 🎛 Bir sürü tarz niteleyicileri ile cisimler ve bileşenler
- Hat/dış hat kalınlığı, köşe yuvarlaklığı, gölge/kapartma efektleri gibi kap makyajlamaları
- Anasayfa anahattında varsayılan olarak uyumlu kargir yapı anahattı ve gezinim bileşeni
- Tüm platformlarda sabit ve tam ekranda olabilecek harmanlama ekleme, tanecik/renk eğim efektleri tercihen harici arkaplanlar
- Zincirleme niteleyicili BEM sınıf isimlendirmesi ve kodu hem insanlara hem ağ tarayıcılarına daha okunabilir kılmak için diğer ince ayarlar
- 👷 Oluşturmak (PostCSS + Lightning CSS, PostHTML), doğrulama (html-validate, biome), eniyileme (htmlnano, swc, svgo, Lightning CSS, sharp) ve PNPM betiklerindeki medya dosyaları ve biçimlendirme, stil, betik için dosya izleme işleri (chokidar aracılığıyla)
- ⚡️ 11ty'den yerel, canlı ve sade geliştirme sunucusu from 11ty
Öngereksinimler
Note: Windows'ta Node modüllerine bağımlı işlerle çalışmak için WSL'i veya Windows için Git'i kur. Eğer Windows için Git'le ilerlemek istersen, bu yapılandırmayı ayarla. pnpm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
Bir terminal emülatörü aç (Windows'ta başlat tuşuna sağ tıklayıp, "Windows PowerShell"i seç ya da macOS'te, ⌘+Boşluka basıp "Terminal.app" yaz) ve aşağıdaki komutları takip et:
# Depoyu klonla ve dizini değiştir
git clone https://github.com/egeesin/pxl && cd pxl
# Install local Node modules of the repository
# Yerel Node modüllerini kur
pnpm i
# İlk yapımı oluştur (pnpm build) ve geliştirici sunucusunu başlat (pnpm watch)
pnpm start
# Sunucu bir kere çalıştığında, bir ağ tarayıcısının adres çubuğuna "http://localhost:3000" veya "http://127.0.0.1:3000" yaz. Geliştirici sunucusunu yerel ağ üzerinden farklı cihazlarda test yapmak için, başka konağa erişmek için terminal kayıtlarını kontrol et. (192.168.1.xxx:3000 gibi)Uyarı: Bu dağıtım tercihlerinden hiçbiri henüz test edilmedi. Eğer ne yaptığınızı biliyorsanız kullanın.
- Üretim dalı:
main - Oluşturma komutu:
pnpm build - Geliştirme komutu:
pnpm build - Kurulum komutu:
pnpm i - Yapım dizini:
dist
- Ana depo sayfasından Actions sekmesini seç.
- Listenin en üstünde yeşil tikli en son başarılı iş akışı çalışmasını bul ve tıkla.
- En aşağı sürükle ve yapım eserlerini (
dist/) indir.
Kurulum bölümünde bu projeyi çoğalttıktan/çatalladıktan sonra aşağıdaki adımları takip et:
-
package.json'ın içinde "author" (yazar), "repository" (depo), "funding"in (fonlamanın) içeriğini temizle. -
view/media/veview/_content/blog/article/'ın içindeki dosyaları temizle (Eğer yeni gönderiler için kopyalayacak taklit bir Markdown gönderisine ihtiyacın varsa bir tanesini tut.) - (Tercihen) Eğer tema bileşenlerini test etmekle ilgilenmiyorsan
plain/'i kaldır ve Node ortamını "production" (üretim) olarak ayarla. ("plain" içeren tüm işler oluşturma komutunda atlanmalı!) - (Tercihen) Eğer hazır simge setini kullanmıyorsan,
src/icon/'un içindeki dosyaları da temizle. - Daha çok adım eklenecek…
-
Başlık, favori simge, yazar, sosyal bağlantılar gibi bütünsel site bilgileri için,
view/_data/site.json'u düzenle. -
Gezinim ögeleri için,
view/_data/nav.json'u düzenle. -
Gönderi içeriği için Markdown dosyalarını
view/_content/blog/articlea aktar. (örn../2024-02-24-gonderi-baslik.md) Taklit Markdown gönderisindeki gibi Front Matter bilgilerinin bulunduğundan emin ol. Eğer WordPress'ten geçiş yapıyorsanız, yönetici panelinden XML yedeğini alıp toplu Markdown dosyaları halinde dönüştürün. -
(Tercihen) Siteyi Aşamalı Ağ Uygulaması'na (PWA'ya) dönüştürmek için,
view/app.webmanifest.liquidi düzenle. -
(Tercihen) CSS stillerinin üzerine yazmak için,
static/style/shame.css'i düzenle. Aynı zamandastatic/style/index.css'te@importyapmayı unutmadığınız sürece başka bir CSS dosyası oluşturabilir.@import-globda geçerli. -
Daha çok adım eklenecek…
- Burada görüldüğü üzere tadilatları keşfedin.
- Zevkinize göre
view/_data/site.json'darootClassesvebodyClasseskısımlarını düzenleyin. - (Tercihen) Sayfa başına tema tadilatını zorlamak için
appendRootClassveyaappendBodyClassgibi Front Matter bilgilerini kullanın. - Daha çok adım eklenecek…
pnpm build: Üretim/geliştirme dizini oluşturpnpm watch: Üretim/geliştirme dizini izle ve geliştirme sunucusunu sunpnpm upmod: Bağımlılıkları ve package.json'u güncellepnpm debug:11ty: Eleventy oluşturma işinden hata ayıklama mesajlarını aktarpnpm "/^optimize:.*/": "optimize:" ile başlayan betikleri güzel bir çıktıyla paralel bir şekilde çalıştırır.pnpm exec browserslist | pbcopy: Panonuza en az desteklenen tarayıcı sürümlerinin listesini kopyalar böylece bunu Can I Use?'a kolayca yeni bir set olarak içe aktarabilirsiniz. (macOS'un kabuk ortamında çalışır, değişik pano aracı kullanmak için "pbcopy" kısmını değiştirin) Not:package.json'da daha çok PNPM çalıştırma betiklerine göz atın.
cloc <path-to-directory> --exclude-dir=node_modules,tmp,dist,.git,utility --exclude-ext=svg,png,jpg,jpeg,webp,tif,ico: Eğercloc'a sahipseniz, girdi dizinindeki toplam kod satırlarını ölçün.
WEBMENTION_IO_TOKEN
İlk başta, pxl günce tutma, portfolyo ve değişik içerik türleri için kişisel bir ağ teması olarak yapıldı. Ama geliştirme devam ettikçe, karışıklığı ve ölçeklenebilirliği halletmek için farklı CSS yöntemleri ve tasarım sistemleri uygulandı.
Zaman sırasına göre BEM (blok--eleman__niteleyici) adlandırma kuralı, ITCSS (Ters Üçgen CSS) dosya yapısı, BEMIT (BEM + ITCSS) ve Harry Roberts'tan diğer görünmez arayüz ad alanları, BEVM'den zincirlenebilir nitelikler ve İçsel Ağ Tasarımı (Jen Simmons, Heydon Pickering ve Andy Bell'den etkilenilmiştir) pxl'in dayandığı tasarımlardır.
ITCSS'den dizin ve öznellik hiyerarşisi, BEM'den blok ve elemen adlandırması, BEVM)'den zincirlenebilir niteleyiciler, [ABEM]'den camelCase ad gruplar seçili tasarımlar olduğu gibi uygulananlardır.
BEMIT'den Harry Roberts'ın ad alanları (objeler, bileşenler, araçlar, tema, kapsam, JS durumları ve hackler) ve İçsel Ağ Tasarımı; kurcalanılması gereken veya bir arada varolmalarının uygun olması ve bu projeyi daha erişilebilir kılmak amacıyla sadece ayrıştırıcı kısımları seçilen, etkilenmiş tasarımlardır.
-
Kök dizin bu deponun hangi dosyaları hariç tutacağı, lisansı ve README sayfası gibi üstveriler üzerine bilgi içerir.
-
view/dizini içinde, 11ty denilen framework bilmez statik site oluşturucusu ile işlenen HTML veya Markdown içeriğinin üzerinde Liquid taslakları, JSON ağ sitesi verisi, dönüştürme/filtreleme betikleri ve CMS medya dosyaları var. Bu dizin, üretim için zorunlu. -
static/'in içinde stil sayfaları, betikler, vektör simgeler ve yer tutucu görüntüler var. Stil sayfaları (static/style/), PostCSS eklentileri + (bir PostCSS eklentisi olarak) LightninCSS tarafından işlenir ve aynı zamanda CSS'in farklı kapsamlarını sınıflandırmak ve vurgulamak amacıyla alt dizinlere sahiptir.-
static/style/index.csstüm stillerin ana dosyasıdır.postcss-importvepostcss-import-ext-globeklentileriyle oluşturulurken, globlarla tanımlanmış karşılığı gelen alt dizinlerin içindeki her bir sınıflandırılmış stil aktarılır ve A'dan Z'ye tek bir CSS dosyasında birbirine bağlanır. -
static/style/_vendor/veyanode_modules'tan edinilmiş herhangi bir diğer 3. parti CSS dosyaları, CSS sıfırlamasından hemen önce içermek için bulunur. -
static/style/abstract/içindeki stiller, mixin'leri, özel özellikleri (değişkenleri), animasyon tanımları ve aydınlık/karanlık modları için çokça renk şemalarını içerir. Bu stiller biçimlendirmenin içinde ne olduğu farketmeksizin her sayfanın görünüşünü, boşluğunu, tipografisini etkiler. -
static/style/base/önyargılı CSS sıfırlamaları, tema niteleyicilerini, varsayılan HTML stillerini, formlar, satır içi elemanlar, ızgara anahatları ve yeniden kullanılabilen bileşenleri içerir. -
static/style/class/gezinimler, kartlar, kareler, başlıklar ve harici arkaplanlar gibi biraz daha sıkı bileşenler içerir. -
static/style/shame.css, en son seviyede, deneysel, sınıflandırılmamış stillerdir.shame.css'teki stil tanımları; yeniden adlandırmalara, silinmeye veya ileride daha alakalı CSS dosyasına taşınmasına meyillidir.
-
-
static/script/; gezinim ve paslı ızgara bileşeninin belirlenmiş stil niteleyicilerini uygulamak için istemci taraflı fonksiyonları ve etkinlik dinleyicileri vardır. Görüş alanı boyutuna göre veya ekran okuyucularına daha iyi erişilebilirlik sağlamak için önemli elementlerin ARIA niteliklerini güncellemek için bu betik(ler) uygulanır. Üretim içinmain.jsve sadece geliştirme içintest.js. -
static/asset/ağ yazı tipi ve yer tutucu görüntüler gibi gerekli medya dosyalarına sahiptir. -
static/icon/Affinity Designer taslak dosyasından (bu depoda henüz yok) dışa aktarılmış SVG vektör dosyalarına sahiptir. Bunlar daha sonra tek bir<symbol>bağımsız görüntü sayfası (spritesheet) işlemek içindir. -
config/; kaynak dosyalarını kontrol etmeye, izlemeye, oluşturmaya ve eniyilemeye kabiliyeti olan Node modüllerinin yapılandırmalarının tamamının bulunduğu bir yerdir. -
plain/dizinindeki düz HTML dosyaları, geliştirme ve tekrarlanan biçimlendirmeyi azaltmak ve başlığı/altlığı düzenlemeyi kolaylaştırmak adına PostHTML eklentileri tarafından işlenecek bölümler içindir. Dizin; değişik bileşenlerin, taklit içerikli anahatların, renk tablosunun, tüm HTML elemanlarının eviyesinin temel yapılarını içerir. Bu dizin, Liquid dışında diğer taslak dilleriyle özel tasarımlar yapmak için varolan düz HTML dosyalarını incelemek veya kurcalamak isteyenlere üretim için isteğe bağlıdır.plain/_include/önceden bahsettiğim bölümlerdir.plain/class/'taki taslaklar yeniden kullanılabilen bileşenlerin, ızgaraların ve anahat ilkellerinin biçimlendirmesini içerir.plain/example/renk şema tablosunun örneklerini, tüm sınıfsız HTML5 elementlerini ve simge önizlemesi içerir.
Çoğu paragraf ve başlıklar gibi satıriçi elemanlar, ayarlanmış bir birimsel ölçeklendirme üzerinden boyutlandırılır. Her elemanın tek dikey boşluk birimi veya birden fazla (var(--typeScale…)) bütün sayfa boyunca dikey ritimi yerinde tutma sahiptir.
Varsayılan yazı tipleri altkümeli ve her iki Inter ve Iosevka'nın OpenType özelliği/biçimsel seti dondurulmuş versiyonudur. Alternatif olarak sistem yazı tipi yığını var ama farklı tarzlar için popüler işletim sistemlerinde çalışması gererekn farklı yazı tipi yığınları da var. Farklı yazı tipi yığınları için static/style/abstract/01-font.csse göz at.
Varsayılan olarak mobil öncelikli esnek tasarım yaklaşımı kullanılır ve farklı insan ergonomiklerine uyan farklı ekran boyutlarıyla geliştirilir.
- 🤝 bilek (akıllı saatler, <2inç),
- 🤲 avuç (akıllı telefonlar, phabletler, ≥640px),
- 🦵 diz (dikey moddaki tabletler,, ≥960px),
- 🖥️ masa (yatay moddaki tabletler, dizüstüler, masaüstü PC'ler, ≥1280px) ve
- aşağıdaki gibi abartılmış özel medya özellikleri:
- 🖼️ duvar (masaüstü PC, tam yüksek çözünürlüklü ekranlar, ≥1600px)
- 🏬 bina (2K ekranlar, ≥1920px) and,
- 🦖 devasa (ultra geniş monitörler, 4K ekranlar, ≥2400px)
%0.5'e veya daha yüksek global kullanıma sahip (Opera Mini ve diğer eskimiş tarayıcılar haricinde) tüm ağ tarayıcıları desteklidir. package.json'daki browserslist kısmını inceleyin. Destekli tarayıcıların güncel listesi burada gösterilmiştir.
Bu proje GNU Genel Kamu Lisansı 3.0 lisanslıdır.