[Ruby on Rails] Twitter Bootstrap - a Powerful Front-end Framework

เมื่ออารมณ์ในการพัฒนา มาพร้อมกับความสวยงามที่ต้องแบกรับ
ใครมาหัดเขียน Web แบบผม จะพบว่า Website หนึ่งเว็บแบ่งเป็น 2 ส่วน คือ

Front-end --> Web Markup and Style Sheets Language (HTML, CSS)
Backend   --> Web Application Programming Language (Ruby, Python, etc.)

ซึ่งในบริษัทที่ทำงานแบ่งกันชัดเจน จะแยก 2 ส่วนนี้ให้มีนักพัฒนาเฉพาะทางไปเลย
เพราะพวก Programmer ส่วนมากที่ Hard Coding จะไม่ค่อยถูกกับความสวย ความงามสักเท่าไร :P


Twitter Bootstrap เป็น CSS Library ที่เข้าใจง่าย ใช้ง่าย
เหมาะสำหรับคนที่ต้องการความสวยงามแบบ Basic และพัฒนาได้ง่ายมาก
สำหรับคนที่ไม่เคยเขียน CSS มาก่อน (อย่างผม) ก็เห็นผลลัพธ์ที่สวยงามได้อย่างไม่ยากเย็นนัก

โดย Twitter Bootstrap จะเขียนในรูปแบบ LESS CSS ซึ่งเป็น Preprocessor ของ CSS อีกที
LESS CSS คือรูปแบบของภาษาที่จะ Wrapped CSS เอาไว้อีกที เพื่อให้กระชับ เหมาะสำหรับ Programmer เป็น Style ที่เรียกได้ว่า ถ้าเขียน Program มาก่อนนี่จะรู้สึก เรียนรู้ได้ไม่ยากนัก

LESS CSS Official Page
http://lesscss.org

โดย LESS จะถูก Compile ไปเป็น CSS อีกที เมื่อนำไปทำงาน
Feature หลักๆ ของ LESS นั่นคือ Variables, Mixins, Nested Rules, Functions และ Operations
(ตัวอย่างของ LESS ผมวางไว้ท้าย Blog นะครับ :)

และจะใช้ CoffeeScript แทน Javascript ใครไม่ถนัดก็เขียนเป็น Javascript
แล้วใช้ http://js2coffee.org ช่วยแปลงเอาก็ได้ครับ

CoffeeScript ก็คล้าย LESS แต่เป็น Preprocessor ของ Javascript ครับ :)

Official CoffeeScript Website
http://coffeescript.org

Example Website using Twitter Bootstrap

แน่นอนว่า Twitter Bootstrap สามารถนำไปใช้บน Web Platform อะไรก็ได้ ... ก็ลองหาวิธีการใช้งานดู
ใน Blog นี้เราจะทำกันบน Ruby on Rails ซึ่งเป็น Web Framework ยอดนิยมตัวหนึ่ง :)

คราวนี้วิธีการใช้บน Ruby on Rails ก็ไม่ยาก สิ่งที่เราต้องทำก็คือไปเพิ่ม Gem ใน Gemfile
gem 'twitter-bootstrap-rails'
จากนั้นก็สั่ง Install ผ่าน Terminal
$ rails generate bootstrap:install
** ข้อควรระวัง **
ตอนที่ Generate Scaffold นั้นใส่ --skip--stylesheets ต่อท้ายไปด้วย เพื่อที่จะให้ Bootstrap ทำหน้าที่ในการจัดการ Stylesheet เท่านั้น ไม่งั้นมันจะเพี้ยนด้วย CSS ที่ Scaffold จัดให้ ... ตัวอย่าง
$ rails generate modelName title:string --skip-stylesheets 
ส่วนใครที่ทำอยู่แล้ว ต้องการเพิ่ม Bootstrap ไปทีหลัง
ก็ให้ไปลบ scaffolds.css.sass ใน app/assets/stylesheets

** ใครเจอปัญหา variable @fontAwesomeEotPath_iefix is undefined
ให้ Install ใหม่นะครับ ด้วยคำสั่ง -> rails g bootstrap:install -f

วิธีการใช้งานก็เหมือน CSS ทั่วๆ ไปเลยครับ
เพียงแต่ทุกอย่างที่เราต้องการจะมีหมดแล้ว ไม่ว่าจะเป็น Button, Tab, Grid Layout เป็นต้น
สามารถ Browse ของต่างๆ ได้ ที่นี่ของครับ :)

และถ้า Component นั้นต้องใช้ Javascript ก็ต้องไปเขียนที่ bootstrap.js.coffee ใน app/assets/javascript

http://twitter.github.com/bootstrap/

เราแค่ไปดูว่า เราจะใช้อะไรในการทำงานบ้าง และเราต้องใช้ class attributes อะไรสำหรับสิ่งนั้น
ตัวอย่างในที่นี้ <%= yield %> คือ Content บนเว็บทั้งหมด ที่ผมทำคือ
Fixed Layout ให้ Content ทั้งหมดอยู่ตรงกลาง ซึ่งจะใช้ <div class="container">
Fluid Grid System เพื่อแบ่ง Column ของ Content โดยแบ่งเป็น 2 ส่วน (ต้องรวมกันได้ 12)
เวลาจะ Custom Style Sheets ก็ให้ไปแก้ที่ bootstrap_and_overrides.css.less ใน app/assets/stylesheet
และเราสามารถ Themed ได้ด้วย ถ้าอยากให้ Bootstrap ช่วยเรา
$ rails g bootstrap:themed controller_name -f
 ตัวอย่าง LESS CSS




ตัวอย่าง CoffeeScript

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น