คลาสของ CSS ที่มีให้ในธีม Seed

ใช้แนวทางการตั้งชื่อแบบ RSCSS เพื่อทำให้อ่านง่าย คลาสสั้น

ยกเว้นคลาส hide และ table ที่แพร่หลายจาก Bootstrap อยู่แล้ว

คลาส คำอธิบาย
hide ไม่แสดงเนื้อหา
table
แสดงเส้นคั่นสำหรับตาราง <table>
_mobile แสดงในมือถือ (จอกว้างไม่เกิน 768px)
_desktop แสดงในจอคอมพิวเตอร์ (จอกว้างตั้งแต่ 992px เป็นต้นไป รวมแท็บเบล็ตแนวนอนด้วย)
_heading ทำให้เป็นฟอนต์พาดหัว
_space
เพิ่มระยะด้านล่าง (margin-bottom) ขนาดมาตรฐานคือ 16px บนมือถือ และ 20px บนจอคอม
_space_0 บังคับให้ระยะด้านล่าง (margin-bottom) เป็น 0 
_scroll
ทำให้เนื้อหาที่ scroll มีความลื่นและเด้งเหมือนวัตถุในมือถือ
button-primary
s-button
แสดงปุ่ม โดย s-button ต้องใช้กับ a หรือใส่ครอบ a (เช่นในเมนู)
s-box
แสดงกล่อง มีเงา
s-sec เพิ่มระยะ padding บนล่าง เหมาะกับเปลี่ยน section ในหน้า
s-title
เหมาะกับแสดงชื่อในแต่ละ section

S-GRID

ไว้จัดเลย์เอาท์แบบกริด สามารถประกาศซ้อนกันได้ โดยมีคลาสที่ใช้ด้วยกันตามด้านล่าง
คลาสหลัก คลาสเสริม รายละเอียด
s-grid  m2 แสดง 2 คอลัมน์บนมือถือ
m3 แสดง 3 คอลัมน์บนมือถือ
d2 แสดง 2 คอลัมน์บนจอคอม
d3 แสดง 3 คอลัมน์บนจอคอม
d4 แสดง 4 คอลัมน์บนจอคอม
d5 แสดง 5 คอลัมน์บนจอคอม
d6 แสดง 6 คอลัมน์บนจอคอม

S-SLIDER

จะมี js เช็คและเรียกใช้ ทำให้เกิด slider โดยต้องมี .slider ครอบเนื้อหาภายใน
คลาสหลัก คลาสเสริม รายละเอียด
s-slider    -large
แสดงเต็มความกว้างบนมือถือ ส่วนจอคอมแสดงเท่าพื้นที่ที่มี
-full
แสดงเต็มความกว้างจอ ทั้งมือถือและจอคอม
-dots-in
ทำให้ลูกศร (navigation) และจุดแสดงสไลด์ (dots) อยู่ภายในสไลด์ ปรับเป็นสีขาว
-togrid
ทำให้เมื่อแสดงบนจอคอม ไม่แสดงลูกศรและจุด เห็นเหมือนเนื้อหาในกริดทั่วไป
-center-m
จัดกึ่งกลางบนมือถือ เหมาะกับ m1.X ด้านล่าง
-center-d
จัดกึ่งกลางบนจอคอม
m1.X, m2, m3 แสดงบนมือถือ 1/2/3 คอลัมน์ โดย 1.X จะทำให้แสดงสไลด์อื่นๆ เพิ่มมาอีกส่วนหนึ่ง แนะนำ m1.2 กำลังสวย
d1.X, d2, d3, d4, d5, d6 แสดงบนจอคอมโดยแบ่งคอลัมน์ตามตัวเลขที่ใส่ สามารถใส่มากกว่า 6 ได้ แต่ไม่แนะนำ เพราะทำให้อ่านยาก
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us