bulma css framework มาแรงปี 2018 ที่แจ่มมากแต่หลายคนในเมืองไทยยังไม่รู้จัก

Bulma เป็น CSS Framework น้องใหม่ ซึ่ง Bulma CSS Framework เขาใช้ Flexbox ซึ่งข้อดีของ Flexboxคือ เราสามารถทำให้คอลัมน์สูงเท่ากันอัตโนมัติได้ 

ส่วนใครที่ยังไม่เข้าใจว่า Flexbox คืออะไรลองหาใน google อ่านดูก่อนน่ะ อิๆ 

โดยตัว Bulma CSS Framework มันจะเป็นแค่ css ที่ไม่มี javascrip รวมมาให้ทำให้มันมีขนาดที่เล็ก ซึ่งเหมาะกับคนที่ต้องการเขียน javascrip ที่ไม่ใช้ jquery หรือต้องกาารเขียน javascript เอง

สถิติข้อมูลการนำไปใช้งาน ณ เดือนกรกฎาคมปี 2018 มีการนำ Bulma CSS Framework ไปใช้งานได้โดยนักพัฒนาซอฟต์แวร์มากกว่า 100,000 ราย และต่างประเทศก็ให้ความสนกับ Bulma CSS Framework ไม่น้อยไม่กว่า bootstrap 4 พูดได้ว่าคู่คี่สูสีกันกันเลยที่เดียว

ใคสนใจก็ลองดาวน์โหลดมาใช้งานกันดูได้น่ะครับ  https://bulma.io/

ข้อมูลด้านล่างคือกราฟแสดงความนิยมระหว่าง Bulma กับ Bootstrap (แต่สถิติในความเป็นจริง Bulma น่าจะน้อยกว่า Bootstrap เพราะ Bulma จะเขียนแบบเดียวกับ Bulma ในเรื่อง dragonball 55)

โดย Bulma  เองนี้ จะรองรับการย่อ/ ขยาย หน้าจอ กันได้ 5 แบบคือ

1. mobile: up to 768px
2. tablet: from 769px
3. desktop: from 1024px
4. widescreen: from 1216px
5. fullhd: from 1408px

ระบบ gid ก็มีให้ใช้ได้หลายรูปแบบ 

แบบ basic 

<!--bulma css framework-->
<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

 แบบกำหนดขนาด column

<!--bulma css framework-->
<div class="columns">
  <div class="column is-two-thirds">is-two-thirds</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-10">is-10</div>
  <div class="column">1</div>
  <div class="column has-text-centered">1</div>
</div>

ตัวอย่างการกำหนดค่า form

<!--bulma css framework-->
<div class="field">
  <div class="control">
    <input class="input is-primary" type="text" placeholder="Primary input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-info" type="text" placeholder="Info input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-success" type="text" placeholder="Success input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-warning" type="text" placeholder="Warning input">
  </div>
</div>
<div class="field">
  <div class="control">
    <input class="input is-danger" type="text" placeholder="Danger input">
  </div>
</div>

ใครอยากเข้าไปดูคุณสมบัติฟีเจอร์ต่าง ๆ ก็เข้าไปอ่านที่ https://bulma.io/documentation/ ได้เลยเขาทำ doc ไว้ดีมากอ่านเข้าใจง่าย ใครอ่านแปลอังกฤษไม่ค่อยได้แอดมินแนะนำให้ฝึกไว้ครับ เพราะอยู่วงการนี้ภาษาอังกฤษสำคัญอยู่

สุดท้ายนี้ขอให้คะแนนเรื่องประสิทธิภาพและความน่าใช้ของ Bulma CSS Framework เต็ม 100 ให้ 100 ไปเลยและเว็บ lnwquiz.com นี้ก็ใช้  Bulma  เหมือกัน อิ ๆ 

ถ้าลองเอาไปใช้งานจริงล่ะก็รับรองได้ว่า Designer จะออกแบบมายากขนาดไหน เราก็ใช้ Bulma CSS Framework ประกอบหน้าเว็บได้ตามดีไซน์ได้ไม่ยากเย็นแน่นอนครับ lnwquiz.com ฟันธง!!!