การปรับแต่ง Bootstrap ให้ตรงตาม Corporate Identity ( CI ) ของแบรนด์ ไม่ใช่แค่การเปลี่ยนสีปุ่มครับ แต่คือการควบคุมโทนสี ( Color Palette ), แบบอักษร ( Typography ) และความโค้งมน ( Border Radius ) ให้เป็นไปในทิศทางเดียวกันทั้งหมด เพื่อให้จัดการง่ายและยืดหยุ่นที่สุด ผมแนะนำให้ใช้ Sass ( Syntactically Awesome Style Sheets ) ( SCSS ) ในการ Override ตัวแปรหลักของ Bootstrap ครับ
กำหนดค่าสีหลัก ( Theme Colors )
ในคู่มือ CI ของคุณมักจะมีค่า HEX Code มาให้ ให้คุณนำมาใส่ในไฟล์ SCSS ก่อนที่จะ import Bootstrap เข้ามา
// 1. กำหนดตัวแปรสีตาม CI
$primary: #004a99; // สีหลักขององค์กร
$secondary: #6c757d; // สีรอง
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
// 2. รวมสีเข้ากับ Map ของ Bootstrap
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"brand-gold": #d4af37 // เพิ่มสีพิเศษนอกเหนือจากมาตรฐานได้
);
ปรับแต่ง Typography & Global Styles
ฟอนต์คือหัวใจของ CI อย่าลืมโหลดฟอนต์ ( เช่น Google Fonts ) มาไว้ในโปรเจกต์ก่อนนะครับ
$font-family-sans-serif: 'Sarabun', sans-serif; // ฟอนต์ภาษาไทยตาม CI
$font-size-base: 1rem; // ขนาดตัวอักษรหลัก
$line-height-base: 1.6;
// ปรับความโค้งมนของปุ่มและกรอบ (ถ้า CI เน้นความเหลี่ยมให้ปรับเป็น 0)
$border-radius: 0.25rem;
$border-radius-lg: 0.5rem;
การ Compile และนำไปใช้
โครงสร้างไฟล์ควรเป็นลักษณะนี้
// custom.scss
@import "variables"; // ไฟล์ที่คุณแก้ค่าข้างบน
// นำเข้า Bootstrap source
@import "bootstrap/scss/bootstrap";
// เขียน CSS เพิ่มเติมเฉพาะส่วนที่ Bootstrap ไม่มี
.navbar-brand {
letter-spacing: 1px;
}
อ่านเพิ่มเติม