Show HN: CSS แบบมินิมัลลิสต์สำหรับพ่อมด, 'magick.css'

• magick.css เป็น CSS framework แบบแทบจะไร้คลาสที่มาในไฟล์เดียว โดยมุ่งไปที่สไตล์เอกสารเว็บแนว “สมุดบันทึกของพ่อมด” ที่อ่านง่ายและสื่อสารข้อมูลได้ดี
• ใช้งานได้กับทุกขนาดหน้าจอและใช้ได้ โดยไม่ต้องมี JavaScript จึงนำไปใช้กับเอกสารแบบสแตติกหรือหน้า HTML น้ำหนักเบาได้ทันทีอย่างง่ายดาย
• ติดตั้งได้ผ่าน CDN, การใส่ไฟล์โดยตรง, และการ import ผ่าน npm พร้อมแนะนำการใช้งานร่วมกับ normalize.css
• โครงสร้างพื้นฐานคือคอลัมน์ที่อ่านสบายโดยยึด และ เป็นหลัก และสามารถแนบคำอธิบายเสริมข้างเนื้อหาด้วย `` และ sidenote
• มีการจัดสไตล์ให้กับองค์ประกอบ HTML พื้นฐานเกือบทั้งหมด แต่ฟีเจอร์ที่ต้องมีโครงสร้างเฉพาะ เช่น sidenote และเลขบรรทัดของโค้ด จะให้มาเป็นคลาสแยก

---

เป้าหมายและลักษณะของ magick.css

• magick.css เป็น CSS framework ที่มินิมัลและส่วนใหญ่เป็นแบบ classless
• ทั้งหมดถูกรวมไว้ในไฟล์เดียว และสามารถตามดูเหตุผลของการเลือกต่าง ๆ ได้จากคอมเมนต์ใน CSS
• ในเชิงภาพลักษณ์ มุ่งสร้างบรรยากาศแบบเวทมนตร์ที่ทั้งสง่างามและขี้เล่น พร้อมให้ความสำคัญกับความอ่านง่ายและการสื่อสารข้อมูล
• คงรูปลักษณ์และการทำงานไว้ได้บนทุกอุปกรณ์และทุกขนาดหน้าจอ และทำงานได้ โดยไม่ต้องมี JavaScript
• ได้แรงบันดาลใจจาก LaTeX, คู่มือกฎ TTRPG แบบเก่า, concrete.css, Tufte CSS, และแนวคิดด้าน brutalism แบบ “usability as design”

การติดตั้งและวิธีใช้งาน

• หากต้องการลองให้เร็วที่สุด ให้เพิ่ม stylesheet จาก CDN 2 ตัวใน HTML ``

• สามารถดาวน์โหลดไฟล์ magick.css จาก repository แล้วใส่รวมเหมือน CSS ปกติได้เช่นกัน

• ในโปรเจกต์ JavaScript สามารถติดตั้งผ่าน npm แล้ว import ได้

npm install normalize.css magick.css

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

• ด้วยการออกแบบที่ 99% classless จึงทำให้นำไปใช้กับเอกสาร HTML5 ที่มีอยู่แล้วได้ง่าย

เลย์เอาต์ที่เน้นการอ่าน

• หากต้องการสร้างคอลัมน์แบบ responsive แนะนำให้ครอบคอนเทนต์ทั้งหมดด้วย และแยกบทความยาวด้วย
• โครงสร้างเอกสารทั่วไปคือวาง , หลาย ๆ , และ ไว้ภายใน
• แม้ไม่ทำตามโครงสร้างนี้ ก็ยังสามารถใช้ magick.css เฉพาะด้าน typography และคอมโพเนนต์ที่จัดสไตล์ไว้ได้
• ข้อมูลเพิ่มเติมสามารถแสดงด้วยแท็ก ``
• หากต้องการใส่บริบทเพิ่มเติมกลางเนื้อหา สามารถใช้ sidenote ได้ โดยระบบจะใส่หมายเลขให้อัตโนมัติ

สไตล์ขององค์ประกอบ HTML พื้นฐาน

• typography ครอบคลุมหัวเรื่อง, ย่อหน้า, ลิงก์, การเน้นข้อความ, ขีดเส้นใต้, ตัวอักษรขนาดเล็ก, อินไลน์โค้ด และอื่น ๆ
• heading ที่ต่ำกว่า `` จะไม่ถูกจัดสไตล์โดย magick.css
  • มองว่า heading ระดับต่ำมักถูกใช้เพื่อวัตถุประสงค์เฉพาะ มากกว่าจะใช้เป็นลำดับชั้นของเนื้อหา
  • หากจำเป็น ผู้ใช้สามารถจัดสไตล์เองได้
• รายการถูกทำให้เรียบง่ายเพื่อไม่ให้รบกวนเนื้อหา
  • รายการแบบไม่เรียงลำดับ
  • รายการแบบเรียงลำดับ
  • รายการคำอธิบาย
• ตารางใช้สไตล์ที่ชัดเจนและกระชับเพื่อให้โฟกัสกับข้อมูลได้
• ฟอร์มและองค์ประกอบรับข้อมูลสามารถใช้เดี่ยว ๆ หรือใช้ภายใน form ก็ได้
  • ช่องกรอกข้อความมีการใช้งานได้หลากหลาย จึงไม่ได้กำหนดขนาดหรือการจัดวางแบบตายตัวมากนัก
  • สำหรับ checkbox และ radio button คาดว่า label จะอยู่หลัง input
  • form ถูกจัดสไตล์ให้ดึงความสนใจของผู้ใช้ด้วยอารมณ์คล้ายสมุดโน้ตกระดาษเขียนมือ

สื่อ, โค้ด, และคำอ้างอิง

• รูปภาพและวิดีโอสามารถวางเดี่ยว ๆ หรือใส่ไว้ใน `` พร้อม caption ได้
• `` ที่วางเดี่ยวจะแสดงตามขนาดจริงเมื่อมีพื้นที่เพียงพอ และจะไม่ถูกยืดหรือบิดเบี้ยว
• การใช้ และ ช่วยให้สื่อดูเด่นขึ้นและเพิ่มบริบทได้
• โค้ดแบบอินไลน์ใช้ และบล็อกโค้ดขนาดใหญ่ใช้โครงสร้างที่ ครอบ ``
• ชิ้นส่วนโค้ดก็สามารถแสดงเป็น figure ได้เช่นกัน
• คำอ้างอิงใช้ ``
  • การระบุแหล่งที่มาสามารถเพิ่มด้วย `` ภายใน blockquote
  • ข้อความที่การจัดรูปแบบสำคัญ เช่น บทกวี สามารถครอบด้วย `` ได้

ฟีเจอร์ที่ใช้ผ่านคลาสแยก

• ฟีเจอร์บางอย่างต้องใช้คลาสพิเศษ จึงถูกแยกออกจากการทำงานแบบ classless หลักของ magick.css
• หากต้องการใส่ sidenote ลงในเนื้อหา ต้องเพิ่มทั้งตำแหน่งอ้างอิงและตัวเนื้อหา sidenote ไปพร้อมกัน

Sidenote Content.

• บนอุปกรณ์พกพา sidenote จะย้ายเข้ามาอยู่ในคอลัมน์หลัก
• หากต้องการแสดงเลขบรรทัดในโค้ดหรือบล็อก pre จะต้องแทรก `` ที่เก็บเลขของแต่ละบรรทัด
• การแทรกเลขบรรทัดสามารถทำได้ตามต้องการ ไม่ว่าจะด้วยมือ, JavaScript, หรือการประมวลผลฝั่งเซิร์ฟเวอร์

ลิงก์โปรเจกต์

• หากชอบ สามารถกด star ให้บน GitHub ได้
• หากสนใจผลงานอื่น ๆ สามารถเข้าร่วม Discord ได้

[GN⁺]

ความคิดเห็นจาก Hacker News

• เป็น ระบบดีไซน์ ที่สวยงามจริง ๆ และวิธีนำเสนอก็ยอดเยี่ยม
  ชอบที่ใส่ใจรายละเอียด ตั้งแต่วิธีที่ฟอนต์ลายมือในช่องกรอกข้อมูลเข้ากับเซริฟแบบออร์แกนิก ไปจนถึงระยะบรรทัดและน้ำหนักตัวอักษรที่สมดุล
  โค้ดสำหรับคนที่สนใจ: https://github.com/wintermute-cell/magick.css/blob/master/ma...
  อยากให้มี checkbox และ radio button แบบคัสตอมด้วย ตอนนี้มีแค่สองอย่างนี้ที่ทำให้หลุดจากบรรยากาศ ส่วนที่เหลือยอดเยี่ยมจริง ๆ อาจทำให้ผมได้เริ่มทำบล็อกที่คิดมาตั้งนานในที่สุดก็ได้
• เป็นตัวอย่างที่ดีว่า ฟอนต์ สามารถเข้ากับสไตล์ที่ต้องการได้ดีแค่ไหน
  มันเข้ากันมากจนแทบไม่รู้สึกถึงการมีอยู่ของมันเลย
  • ฟอนต์นี้ดูไม่ได้ดีขนาดนั้น ไม่แน่ใจเหตุผลที่แน่ชัด แต่ถึงจะไม่ได้อ่านยากมาก ก็อ่านไม่สบายเท่าฟอนต์อื่น ๆ ที่พบได้ทั่วไป
  • สไตล์เข้ากันก็จริง แต่รู้สึกว่าอ่านยากเกินไป
• ในตัวอย่างง่าย ๆ มี พิมพ์ผิด เล็กน้อย
  ต้องดูตรงแท็กปิดที่เป็น header ไม่ใช่ main
  • ขอเสริมว่า ถ้าเป็นไซต์ที่สาธิต CSS ก็น่าจะใส่ CSS ที่ยังไม่ถูกย่อขนาด ไว้ด้วย
    ผมอยากดูเร็ว ๆ ว่าหน้าตาเป็นอย่างไร แต่ถ้าจะดูต้นฉบับต้องผ่านอีกหลายขั้นตอน อย่างน้อยก็น่าจะมีลิงก์ที่คลิกได้ไปยังรูปแบบที่ยังไม่ผ่านการประมวลผลโดยตรง
  • เนื้อหาหลักของหน้าควรใช้แท็ก main ส่วนเนื้อหาที่เกี่ยวข้องแต่เป็นส่วนประกอบ เช่น ส่วนคอมเมนต์หรือแท็ก ควรใช้แท็กแยกต่างหาก
  • ในเชิง semantic แล้ว HEADER และ FOOTER ควรอยู่ก่อนและหลังแท็ก MAIN ตามลำดับ
• ถ้าผสมความรู้สึกแบบ เอกสาร LaTeX เข้าไปในสไตล์นี้ ก็จะตรงกับบรรยากาศที่อยากได้สำหรับเว็บส่วนตัวพอดี
  แปลกดีที่ความรู้สึกแบบนั้นดึงดูดมากจริง ๆ
  แถมรูปลักษณ์ที่มินิมอลสุด ๆ แทบมีแต่ HTML เหมือนเว็บไซต์ของอาจารย์มหาวิทยาลัยสมัยก่อนก็ดูเท่
  อยากให้บล็อกส่วนตัวได้รับความนิยมมากกว่านี้
• ถ้าชอบสไตล์แบบนี้ คุณอาจชอบ Tufte CSS ด้วย: https://edwardtufte.github.io/tufte-css/
  • ชอบที่ Tufte เน้น การผสานกันอย่างแนบแน่น ระหว่างรูปภาพกับข้อความ ผมมองว่าเป็นการเลือกสไตล์ที่สมเหตุสมผล ซึ่งพวก TeX สายบริสุทธิ์บางคนไม่อยากยอมรับ
    อย่างน้อยในงานเขียนของผม ไม่ว่าจะเป็นบทความเทคนิคหรือไม่ รูปภาพกับข้อความก็ประกอบกันเป็นเรื่องเล่าต่อเนื่องเดียวกัน การจัดรูปภาพใหม่แล้วย้ายไปไว้ที่อื่นนั้นไม่สมเหตุสมผลพอ ๆ กับทำแบบนั้นกับย่อหน้า
• อย่าใช้ฟอนต์สคริปต์เป็น ตัวพิมพ์ใหญ่ เลย มันทำลายความอ่านง่ายอย่างรุนแรง
  จริง ๆ แล้วไม่ควรเขียนอะไรทั้งประโยคเป็นตัวพิมพ์ใหญ่ทั้งหมด วิธีเน้นแบบนี้เหมือนการขีดเส้นใต้ เป็นมรดกจากยุคเครื่องพิมพ์ดีด เพราะตอนนั้นใช้ฟอนต์ได้แค่แบบเดียว
  รูปทรงของตัวพิมพ์ใหญ่คล้ายกันเกินไป ไม่มีความเปลี่ยนแปลงของความสูงตัวอักษร ทำให้สายตาอ่านยากขึ้น ถ้าใช้ตัวพิมพ์เล็กและใหญ่ปนกัน จะมีตัวอักษรที่ยื่นลงล่างอย่าง y, p, j และตัวที่ยื่นขึ้นบนอย่าง b, d, t ทำให้เกิดความหลากหลายและจับรูปคำได้ง่ายกว่า
  สำหรับการเน้น ควรใช้ขนาด น้ำหนักตัวอักษร หรืออิตาลิกจะดีกว่า
  • ใช่ อันนี้เหมือนเป็นการฝืน กฎความอ่านง่าย เลย ทำให้อ่านยากกว่าที่ควรจะเป็น
    แต่ก็เพราะแบบนั้นจึงเกิดสไตล์ที่เป็นเอกลักษณ์
    ถึงอย่างนั้นผมก็คิดว่าชอบนะ
• อยากให้มี CSS framework แบบมินิมอล ที่มีสไตล์เฉพาะตัวมากกว่านี้
  framework อเนกประสงค์ที่ใช้ได้ดีมาก ๆ หาได้ไม่ยาก แต่ถ้าอยากได้อะไรที่มีรสชาติชัดเจนจะยากกว่ามาก
  • Tufte CSS น่าลองใช้: https://edwardtufte.github.io/tufte-css/
• ถ้าบล็อกฟอนต์จากระยะไกล ข้อความจะเรนเดอร์เป็น Comic Sans ดูไม่ดีเลย
  • กระแสเกลียด Comic Sans นี่เริ่มตกยุคไปหน่อยแล้ว
    https://www.mcsweeneys.net/articles/im-comic-sans-asshole
  • ถ้าบล็อก การเลือกฟอนต์ ของเว็บเพจเอง มันจะเรนเดอร์ด้วยฟอนต์ที่ผมชอบ แต่น้ำหนักฟอนต์จะลดลง ส่วนขนาดตัวอักษรกับระยะบรรทัดจะใหญ่ขึ้นเล็กน้อย
    โดยเฉพาะเมื่อน้ำหนักที่บางลงเจอกับธีมมืด ก็ทำให้อ่านข้อความค่อนข้างลำบาก
  • เพิ่งรู้ว่าการตั้งค่าตอนนี้ไม่ได้บล็อก Google Fonts เลย เลยหงุดหงิดนิดหน่อย ปกติของแบบนี้ผมบล็อกในระดับ /etc/hosts
• ทำไม CSS framework กับระบบดีไซน์ทุกตัวถึงได้เกลียด ช่องกรอกข้อความ กันขนาดนี้?
  แทนที่จะจัดการแบบสามัญสำนึก สุดท้าย Google ต้องไปทำวิจัยผู้ใช้กับคน 800 คน แล้วได้ข้อสรุปว่า “ช่องกรอกข้อความควรดูเหมือนช่องกรอกข้อความ”: https://medium.com/google-design/the-evolution-of-material-d...
• ชอบไอเดียของ CSS framework ที่แทบไม่ต้องใช้คลาส
  เคยทำไว้ตัวหนึ่งเหมือนกัน แต่อาจไม่ดีเท่านี้: https://elementcss.neocities.org
  • สารภาพว่า Element คือ framework แบบไม่ใช้คลาส ที่ผมใช้ประจำ ขอบคุณที่สร้างมันขึ้นมา