Layout & Navigation
Grid System & Breakpoints
Grid 12 คอลัมน์ พร้อม gutter ที่ขยับตาม breakpoint (ใช้ token spacing จาก Spacing, Radius & Elevation):
| Breakpoint | ความกว้าง | คอลัมน์ | Gutter | Margin ข้าง |
|---|---|---|---|---|
| Mobile | < 576px | 4 | space.4 (16px) | space.4 (16px) |
| Tablet | 576–996px | 8 | space.6 (24px) | space.6 (24px) |
| Desktop | 997–1400px | 12 | space.8 (32px) | space.8 (32px) |
| Wide | > 1400px | 12 (max-width จำกัด) | space.8 (32px) | auto-center, max-width 1320px |
คอลัมน์เส้นประคือ track ทั้ง 12 ช่อง — บล็อกสีคือของจริงที่ span ทับ track เหล่านั้น ทุกความกว้างต้องลงตัวกับ track เสมอ ห้ามใช้ width: 37% ลอยๆ
ระยะขอบและ gutter ในสามกรอบนี้เป็นค่า token จริง (space.4 / space.6 / space.8) ไม่ได้ย่อสเกล
เนื้อหาไม่ควรเต็มความกว้างจอในหน้าจอ wide — จำกัด max-width เพื่อรักษาความยาวบรรทัดให้อ่านง่าย (แนวทาง minimal/boardroom-ready ตาม Overview)
B.Grimm ดำเนินธุรกิจพลังงานมากว่า 140 ปี ด้วยความมุ่งมั่นในการสร้างพลังงานที่ยั่งยืน
B.Grimm ดำเนินธุรกิจพลังงานมากว่า 140 ปี ด้วยความมุ่งมั่นในการสร้างพลังงานที่ยั่งยืนให้กับสังคมไทยและภูมิภาคเอเชียตะวันออกเฉียงใต้อย่างต่อเนื่องมาโดยตลอด
CSS Grid Layout Templates
สาม layout template ที่ใช้ CSS Grid ล้วน — พร้อมนำไปใช้เป็นโครงสร้างเริ่มต้นของหน้าแบบต่างๆ ไม่ต้องใช้ React หรือ component library
Admin Dashboard
โครงสร้าง 3 โซน: header bar ด้านบน · sidebar ซ้าย · เนื้อหาหลักขวา — เหมาะกับหน้าแดชบอร์ดภายใน
Grid 3-zone: header / sidebar / main — sidebar กว้าง 240px คงที่ · เนื้อหาหลัก overflow-y scroll แยกอิสระ · ใช้ grid-template: "header header" / "sidebar main"
Public Website
โครงสร้าง marketing 4 แถว: navbar · hero · เนื้อหาหลัก · footer — เหมาะกับเว็บไซต์องค์กรหรือหน้าแคมเปญ
Grid 4-row: navbar / hero / main+sidebar / footer — hero bleed เต็มจอ · เนื้อหาจำกัด max-width 1320px · sidebar 300px · footer bleed เต็มจออีกครั้ง
Mobile App
โครงสร้าง mobile-first: top bar · เนื้อหา scroll · bottom nav — เหมาะกับ PWA หรือ mobile web view
Grid 3-row: topbar / content / bottomnav — full-height 600px · topbar + bottomnav สูงคงที่ด้วย grid-template-rows: auto 1fr auto · เนื้อหาตรงกลาง scroll ได้
Navigation Behavior
- Sticky navbar — navbar ติดด้านบนเมื่อ scroll ลง พื้นหลังโปร่งแสงเล็กน้อยพร้อม backdrop blur (ตามที่ implement จริงใน
custom.cssของเว็บไซต์นี้:rgba(255,255,255,0.88)) - Active state — ลิงก์ที่ active ใช้สี
--ifm-navbar-link-hover-color(#FF6727) ไม่ใช้ underline หนาหรือพื้นหลังทึบ - Mobile menu — พับเป็น hamburger menu ต่ำกว่า breakpoint tablet เสมอ ไม่ยัดเมนูเต็มจอเล็กแบบ horizontal scroll
เมนู active ใช้สี #FF6727 + เส้นใต้บาง 2px — ไม่ใช้พื้นหลังทึบหรือ underline หนา และปุ่ม CTA มีได้ตัวเดียวใน navbar
Sidebar / App Shell
สำหรับหน้าเครื่องมือภายในหรือ dashboard ที่มีเมนูเยอะ ใช้ sidebar แทนการยัดทุกอย่างลง navbar:
เมนูที่ active ใช้พื้น #FFF1EA + แถบส้มซ้าย 3px + ตัวอักษร #C43400 — สื่อตำแหน่งปัจจุบันโดยไม่ต้องใช้พื้นทึบสีเข้ม · sidebar ยุบเป็น drawer ต่ำกว่า breakpoint tablet
Page Structure มาตรฐาน
┌─────────────────────────────┐
│ Navbar (sticky) │
├─────────────────────────────┤
│ Hero (optional) │
├─────────────────────────────┤
│ Main content (max-width) │
│ — จัดเป็น section ตาม grid │
├─────────────────────────────┤
│ Footer │
└─────────────────────────────┘
เส้นประส้มสองข้างคือขอบ max-width ของ main content — hero และ footer bleed เต็มความกว้างได้ แต่ตัวอักษรข้างในยังต้องอยู่ในกรอบเดียวกัน
- ทุกหน้าเริ่มด้วย heading ระดับ h1 เดียว (ไม่มี h1 ซ้ำในหน้าเดียวกัน)
- ระยะห่างระหว่าง section ใช้ scale เดียวกันทั้งเว็บ (
space.16หรือspace.24แล้วแต่ความหนาแน่นเนื้อหา) ไม่กะระยะด้วยสายตา
