รวมสุดยอด Web Design CSS Framework ที่น่าใช้ในปี 2014 !!

เมื่อก่อนการทำเว็บไซต์ในส่วน Front-end (HTML / CSS / JS) จะต้องเขียนกันเองหมด หรือใช้โปรแกรมอย่าง Adobe Dreamweaver มาช่วยครับ แต่พอเวลาผ่านไปเราก็มีเครื่องไม้เครื่องมือช่วยเขียนโค้ดเพิ่มขึ้นมามากมาย

เริ่มตั้งแต่พวก Grid Framework / CSS Framework ที่ช่วยให้วางโครงเว็บไซต์ได้อย่างรวดเร็ว และช่วยแก้ไข ปัญหา CSS เละใน Internet Explorer เวอร์ชั่นเก่า ๆ อีกด้วย

จนมาถึงตอนนี้ จากที่ CSS Framework เป็นโค้ด CSS อย่างเดียว ก็เติบโตกลายเป็น Framework ที่รวมทั้ง HTML / CSS / JS เข้าด้วยกัน เรียกว่า Front-end Framework หรือจะเรียก Web Design Framework ก็ได้ครับ ท่านใดยังไม่รู้ว่ามันคืออะไร แนะนำให้อ่านบทความ Front-end Framework คืออะไร? ก่อนนะครับ

วันนี้ผมได้รวบรวม Front-end Framework ต่าง ๆ ที่น่าใช้ในโปรเจคตัวต่อไปมาแนะนำกันครับ รับรองว่าแต่ละตัวช่วยประหยัดเวลาทำเว็บเราไปได้อีกเยอะแน่นอน

Twitter Bootstrap 3 – สุดยอด Front-end Framework

ตอนนี้ไม่มีใครไม่รู้จัก Twitter Bootstrap แน่นอนครับ Framework ตัวนี้อยู่มานาน จนมาถึง Version 3 แล้ว (ตัวผมเองเพิ่งรู้จักตอนเป็น Bootstrap 2 ครับ) ซึ่งผมก็เคยหยิบตัวนี้มาใช้ในเว็บไซต์ของ Genie-Records.com ด้วย หากใครสนใจสามารถอ่าน เล่าเรื่องการทำเว็บไซต์ Genie-Records เพื่อดูขั้นตอนในการหยิบ Framework มาใช้ทำเว็บได้ครับ

Twitter Bootstrap มาพร้อม Grid แบบ Responsive 12 Columns ที่ใช้งานง่ายมาก ๆ (ในเวอร์ชั่น 2) ส่วนในเวอร์ชั่นล่าสุด Grid ใช้ยากขึ้นนิดหน่อย แต่ยืดหยุ่นขึ้นเยอะมากครับ สามารถปรับ Layout ตามขนาดหน้าจอได้ถึง 5 ขนาดเลยทีเดียว (XS, S, M, L, XL)

สำหรับ CSS ของ Framework ตัวนี้ เขียนขึ้นมาด้วย LESS CSS ครับ แต่ไม่จำเป็นต้องรู้จัก LESS CSS ก็ได้ครับ เพราะเค้ามีไฟล์ .CSS ให้มาแล้ว ยกเว้นว่าต้องการแก้ไข Grid แบบ Advance เท่านั้น โดยโค้ด CSS ที่เค้าให้มาก็ครอบคลุมแทบทุกอย่างในเว็บครับ ไม่ว่าจะเป็นการทำ Menu แบบ Responsive, การทำปุ่ม CSS, การทำฟอร์ม และอื่น ๆ อีกมากมาย

ในส่วนของ Javascript ของ Framework ตัวนี้ เขียนขึ้นมาเป็น jQuery Plugin ครับ ซึ่งก็สามารถทำได้หลายอย่าง ที่เด่น ๆ ก็คือ Slider แบบ Responsive, Modal Box ใช้ง่าย ๆ, Tab Content และยังมีอีกหลายอย่างเลยครับ

สำหรับมือใหม่แนะนำ Twitter Bootstrap เลยครับ เพราะใช้งานง่าย คนใช้เยอะ ทำให้สามารถหาข้อมูลวิธีการใช้งานได้ง่ายมากครับ

เข้าสู่เว็บไซต์ Twitter Bootstrap

Foundation 5 Framework – คู่แข่งคนสำคัญของ Bootstrap

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

Grid ของ Foundation 5 เป็นแบบ Responsive Grid 12 Columns ที่เปลี่ยนแปลง Layout ได้ตามขนาดจอ 3 ขนาด (Small, Medium, Large) ครับผม และยังมี Block Grid ให้ใช้ ซึ่งเป็นกริดแบบกำหนดขนาด Column ให้อัตโนมัติครับ

สำหรับ CSS ของ Framework ตัวนี้ เขียนขึ้นมาด้วย SASS ครับ ซึ่งถือเป็นข้อดี เพราะ SASS สามารถทำอะไรได้หลายอย่างกว่า LESS CSS มาก โดยโค้ด CSS เค้าก็ให้มาครบ พวกเมนู, ปุ่ม, ฟอร์ม นอกจากนั้นยังให้ CSS ทำตารางราคา กับ Progress Bar มาด้วยครับ

ในส่วนของ Javascript ของตัวนี้ นอกจากที่ส่วนใหญ่จะเหมือน Twitter Bootstrap ก็มีของเด็ด ๆ อย่าง Interchange สำหรับแสดง Content ที่แตกต่างกันตามขนาดหน้าจอ ซึ่งตัวอย่างง่าย ๆ คือแสดงรูปเล็กสำหรับคนเข้าผ่านมือถือ และเปลี่ยนเป็นรูปใหญ่สำหรับคนเข้าผ่าน PC ได้โดยอัตโนมัติครับ หรือ Gallery Lightbox สำเร็จรูปมาให้เลย

Foundation 5 เป็นตัวเลือกที่ดีสำหรับเว็บไซต์ที่ไม่ต้องรองรับ IE8 แล้วครับ ฟีเจอร์ครบครัน และมีของเด็ด ๆ ให้ใช้มากมาย

เข้าสู่เว็บไซต์ Foundation 5

Gumby Framework 2 – Framework น้องใหม่ที่แรงไม่แพ้รุ่นพี่

นอกจาก Twitter Boostrap กับ Foundation แล้ว มีอีกตัวที่ฟีเจอร์ครบไม่แพ้กัน นั่นคือ Gumby Framework ครับ โดยเวอร์ชั่นแรกออกมายังสู้เค้าไม่ค่อยได้ แต่พอเป็นเวอร์ชั่น 2 ความน่าใช้เพิ่มขึ้นเยอะ และยังรองรับ Internet Explorer 8 อีกด้วย

ระบบ Grid ของ Framework ตัวนี้มีความพิเศษ คือ นอกจาก 12 Column Grid ทั่วไป เราสามารถใช้ Hybrid Grid ที่มี 14 หรือ 16 คอลัมน์ได้ครับ

สำหรับ CSS ของ Framework ตัวนี้ เขียนขึ้นมาด้วย SASS ครับ นอกจากนั้น Gumby Framework ยังสนับสนุนให้คนใช้ SASS มาเขียน CSS โดยการเตรียม SASS Mixin ฟังชั่นสำคัญ ๆ เอาไว้ให้ ซึ่งทำให้การเขียน CSS สะดวกขึ้นมากครับ

ในส่วนของ Javascript ใช้เขียนเป็น jQuery Plugin โดยฟีเจอร์ก็ไม่ต่างกับเจ้าอื่น ๆ แต่มีฟีเจอร์เด็ด ๆ เพิ่มขึ้นมาหลายอย่าง ไม่ว่าจะเป็น Retina Image สำหรับแสดงรูปที่เหมาะกับหน้าจอ Retina Display หรือความสามารถในการทำเว็บแบบ Parallax

นอกจากนั้น Gumby Framework มีคำสั่ง Command Line มาให้ด้วย ใครชอบเล่น Terminal จะยิ่งใช้งานสะดวกมากขึ้นไปอีกครับ

Gumby Framework เป็นตัวเลือกที่ดีสำหรับใครที่เบื่อหน้า Bootstrap แล้วครับ ตัวนี้ Browser Support เท่ากันด้วย เอามาใช้แทนกันได้สบาย ๆ เลย

เข้าสู่เว็บไซต์ Gumby Framework 2

สำหรับ Front-end Framework ต่าง ๆ ที่รวบรวมมาให้วันนี้จะเป็น Framework ที่มีพวก CSS / Javascript Component มาให้เยอะ สามารถนำไปใช้ทำเว็บไซต์ได้โดยแทบไม่ต้องพึ่ง jQuery Plugin อื่นเสริมเลยครับ

สำหรับ Front-end Framework ตัวอื่นที่น่าสนใจ สามารถดูจากในลิสต์นี้ได้เลยครับผม

• Pure
• Base
• Semantic UI
• UIKit
• Schema
• Titon

ลองเลือกกันดูนะครับว่าโปรเจคต่อไปของคุณ จะใช้ Front-end Framework ตัวไหนดี หรือถ้าเจอตัวไหนเด็ด ๆ แนะนำมาได้ครับ จะมาเพิ่มในลิสต์ให้ครับ