GCSS CSS Framework

CSS Framework หมายถึง กลุ่มคำสั่งของ CSS ที่ได้ถูกรวบรวมไว้ เพื่อให้สามารถนำไปใช้งานได้ง่ายๆ เพียงแค่กำหนด Class ของ Element ตามที่กำหนดไว้ ก็จะแสดงผล Element ได้ในรูปแบบที่ต้องการ ซึ่งองค์ประกอบของ GCSS จะประกอบด้วย

กลุ่มคำสั่ง CSS Reset ใช้สำหรับกำหนดให้ทุกบราวเซอร์สามารถแสดงผลได้เหมือนๆกัน
กลุ่มคำสั่งสำหรับจัดการ Layout เช่น ระบบ Grid หรือ Layout
กลุ่มคำสั่ง Media Queries สำหรับจัดการแสดงผลบราวเซอร์บนอุปกรณ์ Mobile
กลุ่มคำสั่ง และจัดการรูปแบบสำหรับการตกแต่งโดยเฉพาะ เช่นการกำหนดค่าสี เริ่มต้น ตัวหนา ตัวเอียง ขนาดตัวอักษร
กลุ่มคำสั่งสำหรับ Widget ต่างๆเช่น ปฏิทิน ฟอร์ม
กลุ่มคำสั่งที่ใช้บ่อยสำหรับ GCMS

จริงๆแล้ว GCMS มีการใช้ CSS Framework มานานแล้วครับ ภายใต้ชื่อ gcms.css เพียงแต่ผมไม่ได้จัดระเบียบมันไว้ ทำให้การเรียกใช้งานในแต่ละครั้งจะยังสับสนและเปลี่ยนแปลงไปตามแม่แบบที่ต้องการใช้ ผมจึงได้นำมารวบรวมและเรียบเรียงใหม่เป็น GCSS (gcss.css) เพื่อให้เป็นระเบียบและสะดวกต่อการนำไปใช้งาน และถึงแม้ GCSS จะถูกออกแบบมาเพื่อใช้กับ GCMS โดยเฉพาะ แต่ก็สามารถนำไปใช้ในการอออกแบบเว็บทั่วไปได้ครับ เช่น http://gcss.goragod.com/theme/smart/index.html ซึ่งออกแบบโดยใช้ GCSS เช่นกัน และไม่ได้ใช้ GCMS

เทคนิคการใช้งานก้ไม่มีอะไรมากครับ โดยทั่วไปก็เพียงแค่ กำหนด Class ที่ต้องการ ให้กับ Element เท่านั้น (คล้ายๆการกำหนด property ของ element ในสมัย HTML4) ก็จะได้รูปแบบที่ต้องการ เช่น ถ้าต้องการกำหนดข้อความให้มีสีแดง เราจะใช้ <em>สีแดง</em> (GCSS กำหนดให้ tag em เป็นตัวอักษรปกติสีแดง) โดยที่ไม่ต้องเขียน CSS เพิ่มเติมเพื่อกำหนดเอง และ ยังแสดงผลเหมือนๆกันในทุกบราวเซอร์อีกด้วย

นอกจากนี้แล้ว หากกำหนดคำสั่งต่างๆอย่างถูกต้องแล้ว เราจะสามารถได้เว็บไซต์ที่ไม่ต้องเขียนคำสั่ง CSS ใดๆเพิ่มเติมได้เลย โดยมีการจัดรูปแบบอย่างถูกต้อง เช่น เว็บไซต์แบบ 2 คอลัมน์ หรือ 3 คอลัมน์ เป็นต้น และยังสามารถแสดงผลบนอุปกรณ์ Mobile ได้ด้วย (Responsive) โดยที่ CSS ที่เราอาจเขียนเพิ่มเติม (สำหรับ GCMS คำสั่งเพิ่มเติมจะอยู่ที่ style.css) ก็จะเป็น CSS สำหรับการตกแต่งเท่านั้น

สำหรับรายละเอียดคำสั่งที่สมบูรณ์ สามารถดูได้จาก http://gcss.goragod.com นะครับ