css framework ยอดนิยมในไทย ปี 2018

ก่อนอื่นมาดูกราฟความนิยมของ css framework ในบ้านเรากันดูก่อนน่ะครับว่ามีตัวไหนกันบ้าง แอดมินวัดจากผลการ Search จาก Google Trend น่ะครับ

-------------------------

------------------------

1. Bootstrap

เป็น css framework อันดับ 1 ที่นิยมใช้กันทั่วโลกและรวมประเทศไทยด้วย ด้วยความที่มันมีคุณสมบัติพื้นฐานต่าง ๆ ครบถ้วนและการใช้งานค่อยข้างเข้าใจง่าย จึงไม่น่าแปลกใจที่เป็น css framework ที่ครองใจคนใช้ทั่วโลก ปัจจุบันพัฒนาเป็นเวอร์ชั่น Bootstrap 4แล้ว ซึ่งในเวอร์ชั่นนี้จะรองรับ  IE10+ ขึ้นไป ถ้าหาใครอยากให้รันได้ใน IE8 ได้ก็ต้องใช้เวอร์ชั่น 3 น่ะครับ

โดยใน v.4 นี้มีการเปลี่ยนแปลงและเพิ่มเติมฟีเจอร์หลัก ๆ เช่น

• เปลี่ยนจากใช้ LESS มาเป็น Sass  เพาะ Sass =สามารถ Compile โค๊ตได้เร็วกว่า LESS 
• Grid System ปรับปรุงใหม่ให้มี 5 ขนาด  จากเดิมที่ระบบ Grid มี 4 ขนาด คือ xs, sm, md และ lg  พอมาBootstrap 4 มีเพิ่ม  xl ซึ่งเป็นขนาดใหญ่สุด เพิ่มขึ้นมารวมเป็น 5 ขนาดหน้าจอ
• เขียน JavaScript ใหม่หมดด้วย ES6  (ES6 คือ เวอร์ชั่นล่าสุดของ JavaScript )
• เลิก Support IE8 รองรับ IE 10 + ขึ้นไป

2. Foundation

ตัวนี้ดังไม่แพ้ Bootstrap เลยครับ เกิดหลัง Twitter Bootstrap นิดหน่อย  แต่ฟีเจอร์ล้ำหน้า Bootstrap มากพอสมควร แต่มีข้อเสียคือ เรื่องของ Browser มันรองรับ IE9+ เท่านั้นครับ เทียบกับ Bootstrap 3 ที่ยังรองรับ IE8 อยู่ ซึ่งในเมืองไทยคนใช้ในออกฟฟิศส่วนใหญ่ก็ยังเป็น IE  อยู่ ดังนั้นก็ต้องคิดให้ดีน่ะครับถ้าเลือกใช้ Foundation อิ ๆ 

ปัจจุบัน Foundation พัฒนาเป็นเวอร์ชั่น 6 โดยมีฟีเจอร์สำคัญ ๆ ดังนี้

- เขียนขึ้นมาด้วย SASS
- ระบบGrid ของ Foundation  เป็นแบบ Responsive Grid 12 Columns  และมีคุณสมบัติแยกย่อย ของ Grid อีก 3 แบบคือ

• XY Grid
• Float Grid
• Flex Grid

  ใช้  box-sizing: border-box ซึ่งเป็นคุณสมบัติของ css3   ทำให้ไม่รองรับ IE 8
 
- ่javascript plugin เขียนด้วย javasccript ES6 ทำให้ไม่รองรับ IE 8

ใส่ส่วนตัวแอนมินเคยใช้ ข้อดีคือมีฟีเจอร์ที่เยอะครบครัน มีตัวอย่าง template และต้นแบบให้โหลดมาใช้งานได้ด้วย และสามารถ customize code ได้ว่าเราจะเลือกเอาอะไรมาใช้บ้าง แต่แอดมินว่าการใช้งานและเรียนรู้ค่อยข้างยากกว่า Bootstrap น่ะ

3. Bulma

สำหรับเจ้า Bulma css framework นี้แอนมินยกให้เป็นอันดับ1 ในใจเลย พอเอามาใช้ทำเว็บ lnwquiz.com ก็ไม่ผิดหวัง ใช้ง่ายม๊ากกกกก การทำ menu หรือ dropdrown list หรือ Modal pupup  ต่าง ๆ ทำได้โดยไม่ต้องใช้ javascript เลย
และที่แอนมินชอบมากที่สุดคือ คอลัมน์สูงเท่ากันอัตโนมัติ ไม่มีปัญหาการตัดคอร์ลัมน์เหมือนใน Bootstrap และ Foundation  ในส่วนฟีเจอร์จัดมาเต็มครบครั้น 

4. Semantic UI

ส่วนตัวแอดนมินยังไมเคยลองใช้ แต่เห็นเว็บต่างประเทศยกให้เป็น top 5 เลยทีเดียว  จากข้อมูลที่ได้อ่านคราว ๆ มี UI Components  สำเร็จรูปให้เราเลือกใช้อย่างครบครัน และมี ui  Components  ที่ดีกว่า css framework 3 ตัวด้านบนเลยทีเดียว บวกกับการทำเอฟเฟ็คต่าง ๆ ของ ul แต่ละตัวทำออกมาได้ดีมาก ในส่วนของ javascript ก็ใช้ jQuery เป็นหลัก

แอนมินขอแนะคราว ๆ แค่นี้ล่ะกัน ใครสนใจอยากเป็นนักพัฒนาเว็บไซต์ก็ลองเข้าไปลองศึกษาใช้งานดูครับ เพาะการอ่านอย่างเดียวไม่ได้ทำให้เราเก่งและรู้จริงได้ การที่เราจะเก่งและรู้จริงนั้นต้องลองมือทำ