คลาส CSS ที่มากับธีม Plant

CSS Classes ที่อยู่ในธีม Plant พร้อมใช้งาน

Helper Classes

ขึ้นต้นด้วยเครื่องหมาย _ เพื่อตั้งค่าเพิ่มเติม

CSS Class	รายละเอียด
_mobile	แสดงผลบนมือถือและแท็บเบล็ตเท่านั้น (จอกว้างไม่เกิน 1023px)
_desktop	แสดงผลบนจอคอมเท่านั้น (จอกว้าง 1024px ขึ้นไป)
_space	เพิ่มระยะด้านล่าง (Margin-Bottom) โดยค่าเริ่มต้นคือ 16px, 20px, 32px สำหรับจอมือถือ, แท็บเบล็ต และจอคอม
_guest	แสดงเฉพาะคนที่ไม่ได้ล็อกอิน
_member	แสดงเฉพาะคนที่ล็อกอิน (แค่ซ่อนการแสดงผล ไม่ควรใช้กับข้อมูลลับ)
_th	แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาไทย (HTML lang=“th”)
_en	แสดงเฉพาะเมื่อเปิดเว็บด้วยภาษาอังกฤษ (HTML lang=“en-US”)
_body	แสดงฟอนต์สำหรับตัวอ่าน (Body ใน Customizer)
_h	แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer)
_heading	แสดงฟอนต์สำหรับพาดหัว (Heading ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้
_h_alt	แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer)
_heading_alt	แสดงฟอนต์สำหรับพาดหัวแบบที่ 2 (Heading Alt ใน Customizer) และน้ำหนัก (ตัวหนา/ตัวบาง) ตามที่ตั้งไว้
_nowrap	ตั้งค่าไม่ให้มีการตัดขึ้นบรรทัดใหม่ เข่นปุ่ม หรือหัวข้อสั้นๆ

S-Grid

เป็นคลาสสำหรับจัดคอลัมน์พื้นฐาน ตามขนาดจอ (Mobile, Tablet, Desktop)

CSS Class	รายละเอียด
s-grid	แสดงผลแบบ Grid
-m2, -m3	จำนวนคอลัมน์ที่แสดงบนมือถือ (2,3 คอลัมน์) หากไม่ระบุคือ 1 คอลัมน์
-t2, -t3, -t4	จำนวนคอลัมน์ที่แสดงบนแท็บเบล็ต (2,3,4 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ
-d1, -d2, -d3, -d4, -d5, -d6	จำนวนคอลัมน์ที่แสดงบนจอคอม (1-6 คอลัมน์) หากไม่ระบุ จะอิงตามมือถือ

ตัวอย่างการใช้งาน

<div class="s-grid -m2 -t3 -d4">
  <div>CONTENT 01</div>
  <div>CONTENT 02</div>
  <div>CONTENT 03</div>
  <div>CONTENT 04</div>
  <div>CONTENT 05</div>
  <div>CONTENT 06</div>
  <div>CONTENT 07</div>
  <div>CONTENT 08</div>
  <div>CONTENT 09</div>
  <div>CONTENT 10</div>
  <div>CONTENT 11</div>
  <div>CONTENT 12</div>
</div>

ผลลัพธ์ที่ได้

CONTENT 01

CONTENT 02

CONTENT 03

CONTENT 04

CONTENT 05

CONTENT 06

CONTENT 07

CONTENT 08

CONTENT 09

CONTENT 10

CONTENT 11

CONTENT 12

หมายเหตุ สามารถใช้ร่วมกับ gap-0, gap-1, gap-2, ตามตารางด้านล่างได้

Tailwind Classes

คลาสที่อิงจาก Tailwind CSS เฉพาะพื้นฐานที่ใช้บ่อย ระบบใส่ !important ให้ เพื่อให้ใช้ร่วมกับ Block / Page Builder ได้

CSS Class	รายละเอียด
relative	position: relative
flex	display: flex
inline-flex	display: inline-flex
grid	display: grid
text-left	text-align: left จัดข้อความชิดซ้าย
text-center	text-align: center จัดข้อความกึ่งกลาง
text-right	text-align: right จัดข้อความชิดขวา
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
items-start	align-items: flex-start
items-center	align-items: center
↑ รายการด้านบน รองรับ Responsive	ขึ้นด้วยด้วย sm: / md: / lg: ได้ (กว้าง 600px, 768px, 1024px)
mx-auto	margin-left: auto; margin-right: auto (จัดกึ่งกลาง)
m-0	margin: 0 (ปรับให้ระยะด้านนอกเป็น 0 ทุกด้าน)
mt-0	margin-top: 0
mb-0	margin-bottom: 0
mb-1	margin-bottom: 0.25rem
mb-2	margin-bottom: 0.5rem
gap-0	gap: 0
gap-1	gap: 0.25rem
gap-2	gap: 0.5rem
bg-transparent	background-color: transparent

Other Classes

คลาสอื่นๆ ที่นิยมใช้

CSS Class	รายละเอียด
hide	display: none ซ่อนการแสดงผล