CSS ที่ใช้งาน

เนื่องจากอยากให้เริ่มต้นได้ง่ายและเบา จึงไม่ได้ใช้ CSS Framework แต่เตรียมค่าเริ่มต้นไว้ให้

หากต้องการนำไปใช้กับ Tailwind หรือ Framework อื่นๆ ก็สามารถทำได้

CSS Variables

อยู่ที่ไฟล์ /src/styles/_var.scss

ส่วนใหญ่เป็นการตั้งค่าสี และฟอนต์ body กับ heading (ซึ่งตอนนี้ใช้ฟอนต์ Noto Sans Thai ทั้งคู่)

อยู่ที่ไฟล์ /src/styles/_ini.scss ตั้งชื่อคลาสตามแนวทางการตั้งชื่อแบบ RSCSS

เป็นคลาสพื้นฐานที่ใช้ได้ในทุกหน้า

Components: มี - คั่นในชื่อ Variants: ขึ้นต้นด้วย -

CSS Class	Description
`.th-container`	ไว้ครอบเพื่อจัดกึ่งกลางหน้า ค่ามาตรฐานคือกว้างสูงสุด 1140px
`.th-sec`	เพิ่ม Padding บนล่าง เพื่อให้มีระยะมากกว่าปกติ เหมาะกับไว้แบ่ง Section
`.th-grid`	ปรับการแสดงผลให้มีหลายคอลัมน์ได้ (Grid)
CSS used with `.th-grid`
`.-m2`, `.-m3`	แสดง 2 หรือ 3 คอลัมน์ บนมือถือ (น้อยกว่า 720px)
`.-t2`, `.-t3`, `.-t4`	แสดง 2-4 คอลัมน์ บนแท็บเบล็ต (720px - 1023px)
`.-d1`, … , `.-d6`	แสดง 1-6 คอลัมน์ บนจอคอม (1024px ขึ้นไป)

คลาสสำหรับช่วยปรับการแสดงผล ตั้งชื่อขึ้นต้นด้วย \_

CSS Class	Description
`_h1`, `_h2`, `_h3`, `_h4`, `_h5`	ปรับขนาดตัวอักษรให้เล็กใหญ่เหมือนขนาด h1 - h5
`_sr`	ไม่แสดงข้อความ ใช้สำหรับ Screen Reader เท่านั้น
`_space`	เพิ่ม margin-bottom ตามขนาดอุปกรณ์ (16px - 30px)
`_mobile`	แสดงผลเฉพาะบนมือถือ (กว้างสูงสุด 1023px)
`_desktop`	แสดงผลเฉพาะบนจอคอม (กว้าง 1024px ขึ้นไป)
`_full`	ทำให้กว้างเต็มจอ (แม้จะอยู่ใน Container)

คลาสจาก Tailwind CSS แต่นำมาใช้เฉพาะปรับแต่งพื้นฐาน