คลาสของ CSS ที่มีให้ในธีม Seed และ Plant
ใช้แนวทางการตั้งชื่อแบบ RSCSS เพื่อทำให้อ่านง่าย คลาสสั้น
ยกเว้นคลาส hide และ table ที่แพร่หลายจาก Bootstrap อยู่แล้ว
| คลาส | คำอธิบาย |
| hide | ไม่แสดงเนื้อหา |
| table |
แสดงเส้นคั่นสำหรับตาราง <table> |
| _mobile | แสดงในมือถือ (จอกว้างไม่เกิน 768px) |
| _desktop | แสดงในจอคอมพิวเตอร์ (จอกว้างตั้งแต่ 992px เป็นต้นไป รวมแท็บเบล็ตแนวนอนด้วย) |
| _heading | ทำให้เป็นฟอนต์พาดหัว |
| _space |
เพิ่มระยะด้านล่าง (margin-bottom) ขนาดมาตรฐานคือ 16px บนมือถือ และ 30px บนจอคอม |
| _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 ได้ แต่ไม่แนะนำ เพราะทำให้อ่านยาก | |