Show HN: Büyücüler için minimalist CSS, 'magick.css'

• magick.css, tek dosya halinde sunulan, neredeyse classless bir CSS framework'üdür; okunması kolay ve bilgiyi iyi aktaran bir “büyücünün not defteri” tarzı web belge stili hedefler
• Tüm ekran boyutlarında çalışır ve JavaScript olmadan kullanılabilir; bu da onu statik belgeler veya hafif HTML sayfalarına doğrudan uygulamayı kolaylaştırır
• CDN, dosyayı doğrudan dahil etme ve npm import yöntemiyle kurulabilir; ayrıca normalize.css ile birlikte kullanım yapılandırması da açıklanır
• Temel yapı, ve etrafında şekillenen, okunabilir sütun düzenidir; `` ve sidenote ile ana metnin yanına ek açıklamalar eklenebilir
• HTML'nin temel öğelerinin çoğunu stillendirir; ancak sidenote ve kod satır numaraları gibi yapısal gereksinimleri olan özellikler ayrı class'larla sunulur

---

magick.css'in hedefleri ve karakteri

• magick.css, minimalist ve büyük ölçüde classless bir CSS framework'üdür
• Tek bir dosyada bulunur ve CSS içindeki yorumlar sayesinde yapılan seçimlerin gerekçesi takip edilebilir
• Görsel olarak zarif ama oyunbaz, büyülü bir atmosfer yaratır; okunabilirlik ve bilgi aktarımını önceliklendirir
• Tüm cihaz ve ekran boyutlarında görünümünü ve işlevini korur, JavaScript olmadan çalışır
• LaTeX, eski TTRPG kural kitapları, concrete.css, Tufte CSS ve brütalizmin “usability as design” anlayışından ilham alır

Kurulum ve kullanım biçimi

• En hızlı denemek için HTML `` içine iki CDN stylesheet'i eklenir

• Depodan magick.css dosyasını indirip normal bir CSS dosyası gibi dahil etmek de mümkündür

• JavaScript projelerinde npm ile kurup ardından import edilir

npm install normalize.css magick.css

import 'normalize.css'
import 'magick.css'

• %99 classless yapısı sayesinde mevcut HTML5 belgelerine uygulamak da kolaydır

Okuma odaklı yerleşim

• Duyarlı bir sütun oluşturmak için tüm içeriği ile sarmak, uzun metinleri ise ile bölmek önerilir
• Tipik belge yapısı, içinde, birden fazla , ve kullanımıdır
• Bu yapıyı izlemeden de magick.css yalnızca tipografi ve stillendirilmiş bileşenler için kullanılabilir
• Ek bilgiler `` etiketiyle gösterilir
• Metnin içine ek bağlam katmak istendiğinde sidenote kullanılır; numaralandırma otomatik yapılır

Temel HTML öğesi stilleri

• Tipografi; başlıklar, paragraflar, bağlantılar, vurgu, altı çizili metin, küçük yazı ve inline code gibi öğeleri kapsar
• `` altındaki heading'ler magick.css tarafından stillendirilmez
  • Daha düşük seviye heading'lerin çoğu zaman hiyerarşiden çok özel amaçlarla kullanıldığı varsayılır
  • Gerekirse kullanıcı bunları kendisi stillendirebilir
• Listeler, içeriğin önüne geçmemesi için sade tutulur
  • Sırasız liste
  • Sıralı liste
  • Açıklama listesi
• Tablolar, veriye odaklanmayı kolaylaştıran net ve öz bir stille sunulur
• Formlar ve input öğeleri tek başına ya da bir form içinde kullanılabilir
  • Metin girişleri çok farklı amaçlarla kullanılabildiğinden boyut ve yerleşim konusunda katı bir tercih dayatılmaz
  • Checkbox ve radio button label'larının input'tan sonra gelmesi beklenir
  • Formlar, kullanıcının dikkatini çekecek şekilde, elde yazılmış kağıt not hissi verecek biçimde stillendirilir

Medya, kod ve alıntılar

• Görseller ve videolar tek başına yerleştirilebilir ya da `` içinde caption ile birlikte sunulabilir
• Tek başına kullanılan `` yeterli alan varsa doğal boyutunda gösterilir; büyütülmez veya bozulmaz
• ve kullanımı, medyayı daha belirgin hale getirip bağlam eklemeyi sağlar
• Kod, satır içi kullanımda ile; büyük kod bloklarında ise öğesinin `` öğesini sarmaladığı yapıyla gösterilir
• Kod parçaları da figure olarak sunulabilir
• Alıntılar için `` kullanılır
  • Kaynak belirtimi, blockquote içindeki `` ile eklenir
  • Şiir gibi biçimin önemli olduğu metinler `` ile sarılabilir

Ayrı class'larla kullanılan özellikler

• Bazı özellikler özel class gerektirir; bu nedenle magick.css'in temel classless davranışından ayrılır
• sidenote eklemek için referans konumu ile sidenote içeriğinin birlikte eklenmesi gerekir

Sidenote Content.

• Mobil cihazlarda sidenote ana sütunun içine taşınır
• Kod veya pre bloklarında satır numarası göstermek için her satır numarasını içeren `` eklenmelidir
• Satır numarası ekleme işlemi elle, JavaScript ile veya sunucu tarafında istenen yöntemle yapılabilir

Proje bağlantıları

• Beğenirseniz GitHub üzerinde yıldız verebilirsiniz
• Diğer çalışmalarıyla ilgileniyorsanız Discord'a katılabilirsiniz

[GN⁺]

Hacker News yorumları

• Gerçekten güzel bir tasarım sistemi ve bunu sunma biçimi de harika
  Giriş alanındaki el yazısı fontunun organik seriflerle uyumu, dengeli satır yüksekliği ve ağırlık gibi ayrıntıların özenle ele alınması hoşuma gitti
  İlgilenenler için kod: https://github.com/wintermute-cell/magick.css/blob/master/ma...
  Özel checkbox ve radio button’lar da olsa iyi olurdu. Şu an sadece bu ikisi atmosferi bozuyor; geri kalanı gerçekten mükemmel. Uzun zamandır düşündüğüm blogu sonunda yapmamı sağlayabilir
• İstenen stile bir fontun ne kadar iyi oturabileceğini gösteren güzel bir örnek
  O kadar iyi uyuyor ki neredeyse fark edilmiyor
  • Bu font bana o kadar iyi görünmüyor. Tam nedenini bilmiyorum ama okunması çok zor olmasa da yaygın diğer fontlar kadar rahat okunmuyor
  • Stile uyuyor, ama okuması çok zor geliyor
• Basit örnekte küçük bir yazım hatası var
  Kapanış etiketinin main değil header olduğuna bakmak gerekiyor
  • Ek olarak, CSS’i sergileyen bir siteyse küçültülmemiş CSS de eklenirse iyi olur
    Hızlıca nasıl göründüğüne bakmak istedim, ama kaynağı görmek için birkaç adım daha atmam gerekti. En azından işlenmemiş hâline doğrudan giden tıklanabilir bir link olsa iyi olurdu
  • Sayfanın ana içeriği için main etiketi, yorum bölümü veya etiketler gibi ilgili ama yardımcı içerikler içinse ayrı bir etiket kullanılır
  • Anlamsal olarak HEADER ve FOOTER sırasıyla MAIN etiketinin önünde ve arkasında yer almalı
• Bu stile LaTeX belgesi hissi karışırsa kişisel sitemde istediğim havaya tam uyar
  Garip bir şekilde bu his gerçekten çekici geliyor
  Üstelik eski üniversite hocalarının web siteleri gibi neredeyse sadece HTML’den oluşan aşırı minimalist görünüm de güzel duruyor
  Keşke kişisel bloglar daha popüler olsa
• Bu tarzı seviyorsanız Tufte CSS de hoşunuza gidebilir: https://edwardtufte.github.io/tufte-css/
  • Tufte’nin görsel ve metnin sıkı entegrasyonunu vurgulamasını seviyorum. Bazı TeX saflık yanlılarının kabul etmek istemediği makul bir stil tercihi olduğunu düşünüyorum
    En azından benim yazılarımda, teknik olsun olmasın, görseller ve metin tek bir kesintisiz anlatı oluşturuyor. Görselleri yeniden sıralayıp başka bir yere taşımak, paragraflara bunu yapmak kadar anlamsız
• Script fontların büyük harfle kullanılmamasını isterdim. Okunabilirlik için ölümcül
  Aslında herhangi bir şeyi tamamen büyük harfle yazmamak daha iyi. Alt çizgi gibi, daktilo döneminden kalma bir vurgu yöntemi; çünkü o zamanlar yalnızca tek bir font kullanılabiliyordu
  Büyük harf biçimleri birbirine fazla benziyor. Harf yüksekliğinde değişim olmadığı için gözün okuması zorlaşıyor. Büyük-küçük harf karışınca y, p, j gibi aşağı sarkan ve b, d, t gibi yukarı çıkan harfler değişkenlik yaratıyor ve daha kolay ayırt ediliyor
  Vurgu için boyut, kalınlık ve italik kullanmak daha iyi
  • Evet, bu bir okunabilirlik kuralını çiğnemek sayılır; bu yüzden okunması olabileceğinden daha zor
    Ama bu sayede kendine özgü bir stil de oluşuyor
    Yine de sanırım hoşuma gidiyor
• Kendine has tarza sahip daha fazla minimal CSS framework’ü olsa keşke
  Gayet iyi genel amaçlı framework’ler kolayca bulunuyor, ama belirgin bir karakteri olan bir şey istiyorsanız çok daha zor
  • Tufte CSS denenebilir: https://edwardtufte.github.io/tufte-css/
• Uzak font engellenirse metin Comic Sans ile render ediliyor. Pek iyi görünmüyor
  • Comic Sans nefreti artık biraz modası geçmiş gibi
    https://www.mcsweeneys.net/articles/im-comic-sans-asshole
  • Web sayfasının font seçimini tamamen engellersem tercih ettiğim fontla render ediliyor, ama font kalınlığı azalıyor; yazı boyutu ve satır yüksekliği biraz artıyor
    Özellikle düşük kalınlık dark tema ile birleşince metni okumak epey rahatsız edici oluyor
  • Mevcut ayarımın Google Fonts’u engellemediğini fark edince biraz sinirlendim. Genelde böyle şeyleri /etc/hosts düzeyinde engellerim
• Neden tüm CSS framework’leri ve tasarım sistemleri metin giriş alanlarından bu kadar nefret ediyor?
  Sağduyulu davranmak yerine Google sonunda 800 kişiyle kullanıcı araştırması yapıp “metin giriş alanları metin giriş alanı gibi görünmeli” sonucuna varmış: https://medium.com/google-design/the-evolution-of-material-d...
• Çoğunlukla class gerektirmeyen bir CSS framework’ü fikri hoşuma gidiyor
  Eskiden bir tane yapmıştım ama muhtemelen bunun kadar iyi değildir: https://elementcss.neocities.org
  • İtiraf edeyim, Element benim hep kullandığım class’sız framework. Yaptığın için teşekkürler