หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

- matcha.css

matcha.css เป็นไลบรารี CSS บริสุทธิ์ที่ออกแบบมาเพื่อจัดสไตล์องค์ประกอบ HTML คล้ายกับสไตล์เบราว์เซอร์เริ่มต้นซึ่งไม่จำเป็นต้องใช้ความต้องการสำหรับผู้ใช้ในการแก้ไขเอกสารด้วยตนเอง

เหมาะอย่างยิ่งสำหรับการสร้างต้นแบบที่รวดเร็ว, หน้า HTML แบบคงที่, เอกสารที่สร้างจาก Markdown และนักพัฒนาที่ต้องการปรับปรุงเวิร์กโฟลว์ของพวกเขาโดยไม่ต้องเจาะลึกลงไปในความซับซ้อนของ CSS และต้องการใช้ประโยชน์จากองค์ประกอบ HTML ที่มีอยู่อย่างเต็มรูปแบบ

  • ✅ ไม่มี ขั้นตอนการสร้าง
  • ✅ ไม่มี การพึ่งพา
  • ✅ ไม่มี จาวาสคริปต์
  • ✅ ไม่ จำเป็นต้องมีการกำหนดค่า
  • ✅ ไม่ จำเป็นต้องมีการปรับเปลี่ยนใหม่
  • ✅ ~7kB gzipped (สามารถลดลงได้อีก)

- ตัวอย่างภาพหน้าจอ

- ทำไมต้องเลือก matcha.css ?

- ไม่เชื่อเรื่องพระเจ้า

ทำงานได้อย่างราบรื่นกับเอกสารใด ๆ และครอบคลุมองค์ประกอบ HTML ที่กว้างขึ้นเมื่อเทียบกับห้องสมุดที่คล้ายกัน มันยังคงไม่สร้างความรำคาญโดยการใช้ประโยชน์จาก CSS pseudo-etement และให้การสนับสนุนเบราว์เซอร์ที่กว้างขวาง

- ย้อนกลับได้

เพียงรวมถึง <link rel="stylesheet"> เพื่อเริ่มต้นและลบออกเมื่อจำเป็นโดยไม่จำเป็นต้องใช้เอกสารใหม่หรือทำความสะอาด

- ความหมาย

ปรับแต่งสไตล์ตามลำดับชั้นขององค์ประกอบที่ให้พฤติกรรมที่ใช้งานง่ายเช่น "เมนูย่อยโดยปริยาย" เมื่อทำรัง <menu> องค์ประกอบตัวบ่งชี้ฟิลด์ที่จำเป็น ( * ) เมื่อจับคู่ <input required> <label>

- ปรับแต่งได้

ชงบิลด์ของคุณเองโดยใช้ตัวสร้างที่กำหนดเองของเราเพื่อเลือกคุณสมบัติเฉพาะและลดขนาดการสร้างสุดท้ายตามความต้องการของโครงการของคุณ

- โอเพ่นซอร์ส

เปิดตัวภายใต้ใบอนุญาต MIT สามารถใช้งานได้อย่างอิสระที่ github.com/lowlighter/matcha

การใช้งาน

ในการใช้ประโยชน์จาก matcha.css เพียงรวมบรรทัดต่อไปนี้ในส่วน <head> ของเอกสารของคุณ มันง่ายมาก! 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >

สินทรัพย์มีโฮสต์บน vercel แต่ matcha.css ยังมีอยู่ในบริการและ CDN บริการที่แจกจ่ายแพ็คเกจ NPM เช่น JSDELIVR

เวอร์ชันที่เผยแพร่ทั้งหมดมีอยู่ในไดเรกทอรี /v/ ไดเรกทอรี โดยค่าเริ่มต้นสาขา main จะให้บริการ

- à la carte

ไดเรกทอรีย่อยแต่ละรายการที่แสดงรายการใน /styles ยังให้บริการโดยตรงจาก matcha.mizu.sh ตัวอย่างเช่นหากคุณต้องการรวมสไตล์ @syntax-highlighting แทนที่จะใช้บิลด์เริ่มต้นหรือรูปแบบที่กำหนดเองคุณสามารถใช้: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " >

อย่างไรก็ตามโปรดทราบว่าหากคุณไม่ได้ให้ตัวแปร CSS ของคุณเองคุณอาจจำเป็นต้องรวมแพ็คเกจ @root เนื่องจากมีคำจำกัดความตัวแปร Matcha.CSS ทั้งหมด

ไฟล์ mod.css ทั้งหมดยังมีนามแฝงกับไดเรกทอรีหลักที่เกี่ยวข้องเพื่อความสะดวกซึ่งหมายความว่าคุณสามารถใช้: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >

- การบริจาค

- ขอบเขตโครงการ

  • เคารพการเข้าถึงและแนวทางปฏิบัติที่ดีที่สุดในการใช้งาน
  • เคารพการตั้งค่าของผู้ใช้ปลายทาง (เช่นโทนสี)
  • เป็นเดสก์ท็อปและเป็นมิตรกับมือถือ
  • ไม่เปลี่ยนสไตล์ปัจจุบันอย่างมาก (เว้นแต่จะทำตามหลักการที่กล่าวถึงก่อนหน้านี้อย่างใดอย่างหนึ่ง)
  • ยังคงมีน้ำหนักเบาโมดูลาร์และปรับแต่งได้
    • คุณสมบัติเพิ่มเติมที่พิจารณาว่าเป็น "bloat" จะถูกแยกออกเป็นค่าเริ่มต้นและจะเลือกเข้าร่วม
    • !important จะไม่ถูกนำมาใช้เพื่อให้แน่ใจว่าผู้ใช้สามารถแทนที่สไตล์ได้อย่างง่ายดาย

โครงสร้างโครงการ

โครงการนี้แบ่งออกเป็นสามไดเรกทอรีหลัก:

  • /api สำหรับฟังก์ชั่น Serverless ทำงานบน vercel
  • /app สำหรับจุดเข้าสินทรัพย์คงที่และสร้างสคริปต์
  • /styles สำหรับไฟล์ต้นฉบับ CSS

- ไดเรกทอรีเกี่ยวกับ /styles

ไดเรกทอรีย่อยแต่ละรายการภายในโฟลเดอร์นี้มีวัตถุประสงค์เพื่อส่วนใหญ่มีอยู่ในตัวเองและกำหนดขอบเขต ช่วยให้ Codebase จัดระเบียบในขณะที่ยังช่วยให้ผู้ใช้สามารถเลือกคุณสมบัติเฉพาะของเชอร์รี่และสร้างการสร้างที่กำหนดเอง

คุณสมบัติพิเศษควรได้รับการแก้ไขโดยใช้อักขระ @ และควรได้รับการยกเว้นส่วนใหญ่โดยค่าเริ่มต้นในตัวสร้างเพื่อหลีกเลี่ยงการสร้างบิวช์เริ่มต้น

? ‍ วงจรการพัฒนา

เมื่อส่งคำขอดึงตัวอย่างจะมีอยู่ใน Vercel ผู้ดูแลและผู้มีส่วนร่วมอื่น ๆ สามารถตรวจสอบการเปลี่ยนแปลงและให้ข้อเสนอแนะก่อนที่จะรวมกัน

การพัฒนาในท้องถิ่นมีวัตถุประสงค์เพื่อทำโดยใช้ Deno Runtime หากคุณไม่ต้องการติดตั้งคุณยังสามารถใช้การกำหนดค่า devContainer ที่ให้ไว้เพื่อเรียกใช้โครงการในสภาพแวดล้อมแบบคอนเทนเนอร์หรือโดยตรงบนรหัส GitHub

ในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาให้เรียกใช้คำสั่งต่อไปนี้: 

deno task serve

ก่อนที่จะส่งการเปลี่ยนแปลงของคุณตรวจสอบให้แน่ใจว่าทุกอย่างถูกจัดรูปแบบอย่างถูกต้องโดยเรียกใช้คำสั่งต่อไปนี้: 

deno task fmt

ใบอนุญาต 

 MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด