[CSS Framework] Bulma : เบื่อหน้า Bootstrap แล้วต้องลองตัวนี้

เมื่อวานแอดมินเพิ่งกลับมาจากงาน Hackathon ครับ ซึ่งงาน Hackathon คือ การแข่งขันสร้าง Product ในเวลาสั้น ๆ นั่นเอง โดยจะมีโจทย์ของงานแตกต่างกันไป แน่นอนว่าเราต้องการเครื่องมือที่ทำให้สร้างเว็บไซต์ได้เร็วที่สุดครับ และในด้านของ Frontend การใช้ CSS Framework ก็ตอบโจทย์ได้ดีมาก บทความแนะนำ: CSS Framework คืออะไร? มารู้จักกับ CSS Framework ชื่อดังแต่ละตัวกัน เชื่อว่าหลาย ๆ คนคงรู้จัก Bootstrap / Foundation กันอยู่แล้ว โดยเฉพาะ Bootstrap นี่กลายเป็นเครื่องมือติดตัวที่คนทำเว็บไซต์ส่วนใหญ่เลือกใช้ และส่งผลให้เว็บไซต์ออกมาหน้าตาเหมือนกันหมด สำหรับมือใหม่ที่ยังไม่เคยใช้ Bootstrap แอดมินเคยแจก สไลด์สอนใช้ Bootstrap 3 เอาไว้ในบลอคนะฮะ ส่วน Bootstrap 4 สามารถดูวิธีใช้แบบละเอียดได้ที่บทความ คู่มือสอนวิธีใช้ Bootstrap 4 ตั้งแต่เริ่มต้น ได้เลยนะครับ ด้วยความที่แอดมินเบื่อหน้า Bootstrap แล้ว และการแข่งขันเมื่อวานมีเวลาน้อย (ปกติ Hackathon จะแข่งกัน 2 วัน 48 ชั่วโมง งานนี้แข่งกันแค่คืนเดียว 24 ชั่วโมง และกว่าจะเริ่มโค้ดได้ก็ต้องมาตีโจทย์กับฝั่ง Business อีกหลายชั่วโมง) จะเขียน Frontend เริ่มจาก 0 ก็ต้องมานั่งดีไซน์ใหม่ ทำไม่ทันแน่นอน สุดท้ายเลยมาจบที่การใช้ CSS Framework ตัวใหม่ ชื่อว่า Bulma ซึ่งเป็น CSS Framework ที่ใช้ Flexbox ! ผมใช้แล้วรู้สึกชอบมาก มาดูกันว่า CSS Framework ตัวนี้มีอะไรเด็ดบ้างครับ

Bulma กับกริดมหัศจรรย์ (ยืดหดได้)

[caption id="attachment_5180" align="aligncenter" width="2440"] เพิ่ม-ลดคอลัมน์ แล้วมันจะย่อ-ขยายให้เอง[/caption] ความสามารถหนึ่งของ Flexbox คือ มันสามารถยืดหดตามพื้นที่ที่มีได้ ไม่ต้องมานั่งกำหนด class แบบ .col-md-6 เหมือนใน Bootstrap / Foundation แบบเก่า ๆ (หรือจะกำหนดมันก็ Fix ความกว้างให้ได้) มาดูตัวอย่างโค้ดถ้าต้องการทำกริด 5 คอลัมน์ (ถ้าสังเกตดี ๆ อันนี้เป็นสิ่งนึงที่ Bootstrap / Foundation ทำไม่ได้ เพราะพวกนั้นใช้ 12 Grid หารห้าคอลัมน์ไม่ลงตัวฮะ ถ้าจะเอาก็ต้องเขียนเอง)

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

จะเห็นว่าไม่มีการกำหนดอะไรเลยว่าแต่ละคอลัมน์กว้างเท่าไหร่ เขียนแค่คลาส "column" เฉย ๆ ส่วนอีกความสามารถหนึ่งของ Flexbox คือ มันซัพพอร์ทเฉพาะ Browser ใหม่ ๆ เท่านั้น ใครต้องรองรับ IE9 ก็ลาก่อนครับ 555+ #ในเลขห้ามีน้ำตาซ่อนอยู่แว้บๆ

คอลัมน์สูงเท่ากันอัตโนมัติ, ข้อมูลจัดกลางอัตโนมัติ, กล่องเต็มจออัตโนมัติ

เชื่อว่าคนที่เคยทำ Frontend (ที่ไม่ได้ดีไซน์เอง) ย่อมต้องเคยเจอปัญหาแบบ "ทำยังไงให้คอลัมน์สูงเท่ากัน" โดยปกติก็จะแก้กันด้วย JavaScript ครับ ในที่นี้ผมชอบใช้ jQuery MatchHeight เวิร์คมาก ฉลาดมาก แสนรู้ด้วย ...แต่ Bulma มีฟีเจอร์นี้มาให้เลย !! [caption id="attachment_5181" align="aligncenter" width="2466"] ตัวอย่าง Metro UI เขียนด้วย Bulma จะเห็นว่าความสูงเท่ากันเป๊ะอัตโนมัติเลยครับ[/caption] นั่นคือปัญหาแรก ปัญหาที่สอง คือ เรื่องของการจัดกลาง "ถ้าจัดกลางในแนวตั้งทำยังไง" ปกติผมมี CSS3 ที่ใช้อยู่และรองรับ IE9 ครับ ส่วน Bulma ใช้ Flexbox ก็แก้ปัญหานี้ได้โดยใส่แค่คลาส is-medium ปัญหาที่สามที่เราเจอกันบ่อย ๆ คือ "ทำยังไงให้กล่องสูงเต็มจอ" ซึ่งถ้าเอาแบบชัวร์ ๆ ที่เราทำปกติ คือ ใช้ JavaScript คำนวณความสูงให้ ...แต่นี่ปี 2016 แล้วครับ เราแค่ใช้ CSS3 height: 100vh; บรรทัดเดียวจบ vh ย่อมาจาก Viewport Height ครับ คือ ความสูงของหน้าจอ นั่นเอง เพราะฉะนั้น 100vh แปลว่า 100% ของความสูงหน้าจอ เข้าใจง่ายมาก ๆ ๆ ๆ ๆ ๆ ๆ ฮะ [caption id="attachment_5182" align="aligncenter" width="2128"] มีความดีงาม มีความสูงเต็มจอ[/caption] สรุปได้ง่าย ๆ ว่า Designer จะออกแบบมาท่าไหน เราก็ใช้ Bulma CSS Framework แก้ปัญหายาก ๆ ได้หมด ครับ

Element สำคัญ ๆ ครบเท่า Bootstrap (แต่ไม่มี jQuery นะ)

[caption id="attachment_5183" align="aligncenter" width="2466"] ปุ่มหลากหลายสี, Menu Bar, Notification Bar, Form etc. มีครบหมดใน Bulma[/caption] ถ้าใครใช้ Bootstrap มาก่อน จะย้ายมาใช้ Bulma ก็สบายเลยครับ เพราะ Element สำคัญ ๆ ที่ใช้ก็ครบแบบ Bootstrap เป๊ะ แต่เป็น HTML/CSS ทั้งหมด ไม่มี JavaScript / jQuery มาด้วยครับ ไม่มี JS มาด้วยหมายถึงอะไร? ก็เช่นว่า ถ้าต้องการทำ Popup / Modal Box เอง ใน Bulma มี CSS มาให้เสร็จแล้ว แต่เราต้องเขียน JavaScript เพื่อเรียกใช้เอง เพราะฉะนั้น ถ้าใช้ Modal Box ควรรู้จัก jQuery นิดหน่อยด้วยครับ [caption id="attachment_5184" align="aligncenter" width="1762"] Modal Box ใน Bulma หน้าตาสวยงามอยู่ฮะ[/caption]

ตัวอย่างการทำ Layout สวย ๆ ด้วย Bulma (จากแอดมินเอง)

[caption id="attachment_5185" align="aligncenter" width="2472"] ตัวอย่าง Layout แชทแอพง่าย ๆ[/caption] ก่อนไปแข่ง Hackathon แอดมินได้ลองใช้ Bulma ทำแอพสำหรับแชทง่าย ๆ ขึ้นมาครับ (เผลอกดลบ แอพหายไปต่อหน้าต่อตา T_T) หน้าตาออกมาดูดีเลยทีเดียว พวก Header, กล่องข้อความ, Form, ปุ่ม ทุกอย่างใช้ Bulma หมดเลยครับ ส่วนผลงานที่ไปแข่ง Hackathon ก็ใช้ Bulma เช่นกัน ลองเข้าไปดูได้ที่ Ride with Me for Mastercard Hackathon ครับ แกะโค้ดได้ตามอัธยาศัยฮะ

น่าสนใจนะ แล้ว Bulma มันใช้ยังไง ?

ด้วยความที่ Bulma เป็น CSS ไฟล์เดียวจบ ไม่มี JavaScript / รูปภาพอะไรทั้งสิ้น ก็สามารถ Download มาใช้ได้เลยจาก เว็บไซต์ Bulma CSS Framework หรือ Bulma Github หรือใช้ CDN (ก็คือไฟล์ CSS ที่เค้าโฮสต์ให้แล้ว) เพื่อเอามาลองใช้ก่อนได้ ถ้าดีค่อยดาวน์โหลด ใส่บรรทัดนี้เข้าไปในเว็บเราได้เลย:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">

ป.ล. ในโค้ดข้างบนคือเวอร์ชั่น 0.2.1 ตอนจะใช้ให้เช็คก่อนว่าเวอร์ชั่นใหม่ล่าสุดคืออะไร เช็คได้ที่นี่

สรุป Bulma CSS Framework เวิร์คไม่เวิร์ค

อันนี้เป็นความเห็นแอดมินเองล้วน ๆ นะครับ ในส่วนของข้อดีของ Bulma:

• ฟรี
• ใช้งานง่าย แค่ใส่ CSS ไฟล์เดียวจบ
• หน้าตาสวยงาม เบื่อ Bootstrap แล้วเชิญทางนี้
• ใช้ Flexbox ทำให้ทำ Layout ที่เคยยากได้ง่ายมาก
• ชอบที่ Column ยืดหดเองได้ ไม่ต้องมานั่งบวกลบเลขเยอะ
• ไม่มี JavaScript ติดมาให้ สำหรับคนใช้ JS Framework (React, Vue.js, AngularJS) ไม่ต้องกังวลว่าโค้ดจะตีกับ Bulma

ข้อเสียของ Bulma:

• ไม่มี JavaScript ติดมาให้ เพราะงั้นถ้าเราไม่ได้ใช้ JS Framework ควรมีความรู้ jQuery เบื้องต้นถ้าจะใช้พวก Tab, Modal Box
• ใช้ Flexbox เลยรองรับเฉพาะ IE 10+

ประมาณนี้ครับผม ใครลองใช้แค่เจอข้อดี - ข้อเสียอะไรเพิ่มเติมก็มาคุยกันได้ครับ :)