Show HN: CSS Minimalis untuk Penyihir, 'magick.css'

• magick.css adalah framework CSS yang hampir tanpa class dan disediakan sebagai satu file, dengan gaya dokumen web yang diarahkan seperti “catatan penyihir” yang mudah dibaca dan menyampaikan informasi dengan baik
• Berfungsi di semua ukuran layar dan bisa digunakan tanpa JavaScript, sehingga mudah diterapkan langsung pada dokumen statis atau halaman HTML ringan
• Dapat dipasang melalui CDN, penyertaan file langsung, atau import npm, dan juga menjelaskan konfigurasi penggunaan bersama normalize.css
• Struktur dasarnya adalah kolom yang mudah dibaca dengan fokus pada dan, dan penjelasan tambahan di samping isi dapat ditempelkan dengan `` dan sidenote
• Sebagian besar elemen dasar HTML diberi gaya, tetapi fitur yang memerlukan struktur seperti sidenote dan nomor baris kode disediakan sebagai class terpisah

---

Tujuan dan karakter magick.css

• magick.css adalah framework CSS yang minimalis dan sebagian besar tanpa class
• Seluruhnya dimuat dalam satu file, dan alasan di balik setiap pilihan dapat diikuti melalui komentar di dalam CSS
• Secara visual, framework ini menciptakan suasana magis yang elegan namun tetap jenaka, dengan prioritas pada kemudahan baca dan kekuatan penyampaian informasi
• Menjaga tampilan dan fungsi di semua perangkat dan ukuran layar, serta berjalan tanpa JavaScript
• Terinspirasi oleh LaTeX, buku aturan TTRPG lama, concrete.css, Tufte CSS, dan etos brutalisme “usability as design”

Instalasi dan cara penggunaan

• Untuk mencoba paling cepat, tambahkan 2 stylesheet CDN ke HTML ``

• Anda juga bisa mengunduh file magick.css dari repositori dan menyertakannya seperti CSS biasa

• Dalam proyek JavaScript, pasang dengan npm lalu import

npm install normalize.css magick.css

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

• Konfigurasinya 99% tanpa class, sehingga dibuat agar mudah diterapkan juga pada dokumen HTML5 yang sudah ada

Tata letak berfokus pada pembacaan

• Untuk membuat kolom responsif, disarankan membungkus seluruh konten dengan dan membagi teks panjang menggunakan
• Struktur dokumen yang umum adalah menempatkan , beberapa , dan di dalam
• Bahkan tanpa mengikuti struktur ini, magick.css tetap bisa dipakai hanya untuk tipografi dan komponen yang sudah diberi gaya
• Informasi tambahan dinyatakan dengan tag ``
• Jika ingin menambahkan konteks ekstra di tengah isi, gunakan sidenote, dan penomorannya akan dibuat otomatis

Gaya elemen HTML dasar

• Tipografi mencakup judul, paragraf, tautan, penekanan, garis bawah, teks kecil, kode inline, dan lainnya
• Heading yang lebih rendah dari `` tidak diberi gaya oleh magick.css
  • Heading tingkat rendah dianggap lebih sering dipakai untuk tujuan khusus daripada untuk hierarki struktur
  • Jika perlu, pengguna dapat memberi gaya sendiri
• Daftar dibuat tetap sederhana agar tidak mengganggu isi
  • daftar tak berurutan
  • daftar berurutan
  • daftar deskripsi
• Tabel memakai gaya yang jelas dan ringkas agar fokus tetap pada data
• Form dan elemen input dapat digunakan sendiri atau di dalam form
  • Input teks tidak diberi batasan kuat pada ukuran atau tata letak karena kegunaannya sangat beragam
  • Label untuk checkbox dan radio button diharapkan muncul setelah input
  • Form diberi gaya seperti catatan kertas tulisan tangan untuk menarik perhatian pengguna

Media, kode, dan kutipan

• Gambar dan video dapat ditempatkan sendiri atau dimasukkan ke dalam `` untuk ditampilkan bersama caption
• `` yang berdiri sendiri akan ditampilkan pada ukuran alaminya saat ruang mencukupi, tanpa diperbesar atau didistorsi
• Dengan menggunakan dan, media dapat ditampilkan lebih menonjol sambil menambahkan konteks
• Untuk kode inline gunakan , dan untuk blok kode besar gunakan struktur yang membungkus ``
• Potongan kode juga dapat ditampilkan sebagai figure
• Kutipan menggunakan ``
  • Penyebutan sumber ditambahkan dengan `` di dalam blockquote
  • Teks yang formatnya penting, seperti puisi, dapat dibungkus dengan ``

Fitur yang digunakan dengan class terpisah

• Beberapa fitur memerlukan class khusus sehingga dipisahkan dari perilaku inti magick.css yang tanpa class
• Untuk menambahkan sidenote ke dalam isi, tambahkan posisi referensi dan isi sidenote bersama-sama

Sidenote Content.

• Di perangkat seluler, sidenote akan dipindahkan ke dalam kolom utama
• Untuk menampilkan nomor baris pada blok kode atau pre, Anda perlu menyisipkan `` yang berisi setiap nomor baris
• Penyisipan nomor baris bisa dilakukan secara manual, dengan JavaScript, atau melalui pemrosesan sisi server sesuai kebutuhan

Tautan proyek

• Jika Anda menyukainya, Anda bisa memberi star di GitHub
• Jika tertarik pada karya lainnya, Anda bisa bergabung ke Discord

[GN⁺]

Pendapat di Hacker News

• Ini benar-benar sistem desain yang indah, dan cara menampilkannya juga keren
  Saya suka bagaimana font tulisan tangan di area input berpadu dengan serif yang organik, juga perhatian detail pada tinggi baris dan ketebalan yang seimbang
  Kode untuk yang berminat: https://github.com/wintermute-cell/magick.css/blob/master/ma...
  Akan bagus kalau ada checkbox dan radio button kustom juga. Saat ini hanya dua elemen itu yang merusak imersi, sementara sisanya benar-benar bagus. Mungkin ini akhirnya membuat saya membangun blog yang sudah lama saya pikirkan
• Contoh bagus tentang seberapa cocok sebuah font dengan gaya yang diinginkan
  Saking cocoknya, hampir tidak terasa disadari
  • Menurut saya font ini tidak terlihat sebagus itu. Saya tidak tahu persis kenapa, tetapi meski tidak terlalu sulit dibaca, rasanya tidak senyaman font-font umum lainnya
  • Gayanya cocok, tapi saya merasa terlalu sulit dibaca
• Ada typo kecil di contoh sederhana
  Perhatikan bahwa tag penutupnya header, bukan main
  • Sebagai tambahan, untuk situs yang mendemokan CSS, akan bagus kalau menyertakan CSS yang tidak diminifikasi
    Saya ingin cepat melihat seperti apa bentuknya, tetapi harus melewati beberapa langkah lagi untuk melihat sumber aslinya. Setidaknya akan bagus jika ada tautan yang bisa diklik langsung ke bentuk yang belum diproses
  • Untuk konten utama halaman gunakan tag main, dan untuk konten yang terkait tetapi tambahan seperti bagian komentar atau tag, gunakan tag terpisah
  • Secara semantik, HEADER dan FOOTER seharusnya masing-masing berada sebelum dan sesudah tag MAIN
• Jika gaya ini dicampur dengan nuansa seperti dokumen LaTeX, hasilnya persis dengan suasana yang saya inginkan untuk situs pribadi
  Entah kenapa, nuansa seperti itu benar-benar menarik
  Ditambah tampilan super minimal yang hampir hanya HTML seperti situs web para profesor universitas dulu juga terlihat keren
  Saya berharap blog pribadi lebih populer
• Jika menyukai gaya seperti ini, Tufte CSS mungkin juga cocok: https://edwardtufte.github.io/tufte-css/
  • Saya suka karena Tufte menekankan integrasi erat antara gambar dan teks. Menurut saya itu pilihan gaya yang masuk akal, meski sebagian puris TeX enggan mengakuinya
    Setidaknya dalam tulisan saya, baik tulisan teknis maupun bukan, gambar dan teks membentuk satu narasi berkelanjutan. Mengatur ulang gambar dan memindahkannya ke tempat lain sama tidak masuk akalnya dengan melakukan hal itu pada paragraf
• Saya berharap font skrip tidak dipakai dalam huruf kapital. Itu fatal untuk keterbacaan
  Sebenarnya lebih baik tidak menulis apa pun seluruhnya dengan huruf kapital. Itu cara penekanan dari era mesin tik, seperti garis bawah, karena saat itu hanya bisa memakai satu font
  Bentuk huruf kapital terlalu mirip satu sama lain. Tidak ada variasi tinggi huruf, sehingga mata lebih sulit membaca. Jika huruf besar dan kecil dicampur, ada huruf yang turun ke bawah seperti y, p, j dan yang naik ke atas seperti b, d, t, sehingga muncul variasi dan lebih mudah dikenali
  Untuk penekanan, lebih baik gunakan ukuran, ketebalan, atau italic
  • Benar, ini memang melanggar aturan keterbacaan, sehingga lebih sulit dibaca daripada yang seharusnya
    Namun berkat itu, muncul gaya yang unik
    Meski begitu, rasanya saya tetap menyukainya
• Saya berharap ada lebih banyak framework CSS minimalis dengan gaya yang berkarakter
  Framework serbaguna yang sangat bagus mudah ditemukan, tetapi jauh lebih sulit jika ingin sesuatu dengan cita rasa yang jelas
  • Tufte CSS layak dicoba: https://edwardtufte.github.io/tufte-css/
• Jika font remote diblokir, teks dirender sebagai Comic Sans. Tidak enak dilihat
  • Kebencian terhadap Comic Sans rasanya sudah agak ketinggalan zaman
    https://www.mcsweeneys.net/articles/im-comic-sans-asshole
  • Jika pemilihan font oleh halaman web saya blokir, teks dirender dengan font pilihan saya, tetapi ketebalan font berkurang dan ukuran huruf serta tinggi baris sedikit membesar
    Terutama ketika ketebalan yang rendah berpadu dengan tema gelap, teks jadi cukup tidak nyaman dibaca
  • Saya agak kesal setelah sadar bahwa pengaturan saya saat ini tidak memblokir Google Fonts. Biasanya hal seperti ini saya blokir di level /etc/hosts
• Kenapa semua framework CSS dan sistem desain begitu membenci kolom input teks?
  Alih-alih menanganinya dengan akal sehat, Google akhirnya melakukan riset pengguna terhadap 800 orang dan sampai pada kesimpulan bahwa “kolom input teks harus terlihat seperti kolom input teks”: https://medium.com/google-design/the-evolution-of-material-d...
• Saya suka ide framework CSS yang sebagian besar tidak membutuhkan class
  Dulu saya pernah membuat satu, meski mungkin tidak sebagus ini: https://elementcss.neocities.org
  • Saya akui, Element adalah framework tanpa class yang selalu saya pakai. Terima kasih sudah membuatnya