เปิดหัวข้อมาก็น่าใช้แล้วใช่มั้ยล่ะ!! แต่แน่นอนถ้ายังไม่เห็น value ของมันจะไปบอกว่าดีได้ยังไง เริ่มจากการอธิบายปัญหาก่อนแล้วกัน
ปัญหา
สำหรับ Front End ที่ต้องหมกมุ่นอยู่กับ HTML, CSS ตลอดเวลาคงจะเจอปัญหานี้ไม่น้อยเช่นเราต้องการสร้าง button ขึ้นมาซัก 1 ปุ่มก็คงหนีไม่พ้นแบบนี้
// css ของ button bootstrap
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
}ซึ่งมันก็ดีถ้าเกิดว่าทั้งเว็บเรา ปุ่ม, กล่อง อะไรต่างๆเท่ากัน แต่ถ้าเกิด Designer หัวหมออยากได้ปุ่ม ใหญ่บ้างเล็กบ้างเราก็ต้อง override class ต่างๆของ css ทำให้วุ่นวาย ยกตัวอย่างผมอยากเปลี่ยน padding ของ .btn เราก็ต้อง
.btn {
padding: 5px 10px
}แต่ถ้าเกิดว่า Designer บอกอย่างเปลี่ยนแค่ปุ่มนี้ปุ่มเดียวอ่ะเปลี่ยนให้หน่อยสิ!! (เสียงแข็ง)
.btn-index-page {
padding: 5px 10px
}แน่นอนครับ เราก็จำใจสร้าง class ใหม่ตามระเบียบ..
Biomatic CSS
Biomatic css คืออะไร อธิบายง่ายๆคือการที่เราจะสร้าง component อะไรบางอย่างเราจะต้องเอา class หลายๆอันมารวมกันเช่น button เราก็สร้างแบบนี้
<div class="_pd-8px _tal-ct _bgcl-primary _bdw-2px _bdcl-primary">Click Button</div>เห้ยทำไมมันดูวุ่นวายจัง ผมเขียนให้มันดูวุ่นวายไปยั่งงั้นแหละครับเพราะจริงๆแล้ว Framework ตัวนี้เค้ามี component พืิ้นฐานมาให้เหมือน bootstrap เลย
คงพอเข้าใจกันแล้วมาดูว่าเวลาผมเขียน css จะทำยังไงกับ Designer สุดโหดเวลาผมสร้าง div, layout ต่างๆผมจะไม่ใส่พวก padding margin color ไว้เลยลดการเขียน code ซ้ำๆลงไปได้เยอะด้วยเวลา Designer บอก เช่นสร้าง กล่อง 1 อันผมก็จะเขียนแบบนี้
.box {
display: flex;
align-items: center;
align-content: center;
border-radius: 4px;
}ตอนสร้างก็สร้างแบบนี้เลย
<div class="box _bgcl-gray _pd-10px mgr-10px"></div>เวลาที่ Designer อย่างให้เปลี่ยนอะไรเราก็มาแก้แค่ class ใน HTML ง่ายไปอี๊ก..หุหุ
การตั้งชื่อ class ใน framework ตัวนี้จะตั้งให้ออกเสียงแบบไทยแท้เช่น มาจินบ๊อทท่อม ก็จะได้ class แบบนี้ _mgbt-* ต่อด้วย pdbt-* ลองเดาดูว่าคืออะไรครับ
จากนี้เราจะต่อกรกับ Designer ได้ง่ายขึ้นมาก(จะเปลี่ยนใช่มั้ย pdt-3px แม่มเลยฮ่าๆ)
components
สำหรับ component ต่างๆนั้นทาง biomatic ก็เตรียมไว้อย่างครบถ้วนไม่ว่าจะเป็น
Card
Form
Message
Accordion
Progress
Tooltip
มีให้เลือกมากมายจะสร้างเองหรือจะเอามาเพิ่ม class อะไรก็ง่ายดั่งใจสั่งมา แถมทำโดยคนไทยด้วย !! และ เว็บไซต์ biomatic frame ตัวนี้ก็เป็นภาษาไทยทั้งหมดด้วย
แถมระบบ grid ของเค้าก็เป็นระบบ CSS Grid Layout ที่ใช้งานง่ายแสนง่ายสำหรับใครที่อยากลองเชิญเข้าไปเสพได้ตามลิงค์นี้เลย
ปล
ในการใช้งานจริงๆนั้นผมเลือกใช้เฉพาะ atomic class เท่านั้นเพราะ components แต่ละเว็บอาจจะไม่เหมือนกันจึงไม่สามารถใช้ component ทั้งหมดของ biomatic ได้เลย แต่อะไรที่แยกออกมาใช้ atomic class ได้ผมก็จะแยกแถม class ก็ไม่ชนแน่นอนเพราะเค้าเริ่มต้นด้วย _ สามารถใช้รวมกับ CSS Framework ตัวอื่นๆได้สบายๆ และ ยังทำ class แต่ละอันเป็น module ด้วยเราสามารถลบ import ที่เราไม่ได้ใช้งาน css file ก็เล็กลงไปอีก..หุหุ ของดีต้องบอกต่อเลย ^^
