เริ่มต้นใช้ css กับ blueprint css
บทความนี้ ถือว่าเป็นครั้งแรก ที่ผมจะได้ใช้ blue print css framework ไปพร้อมกันนะครับ ซึ่งเจ้า blueprint นี้ นอกจากเป็น css framework แล้วยังมี css reset ติดตัวมาด้วยครับ อย่ารอช้า มาเริ่มกันเลยดีกว่า
เริ่มจากโหลดไฟล์นะครับโหลดกันได้จากหน้าเว็บเลย ที่ http://www.blueprintcss.org/
หลังจากที่เราได้ไฟล์มาก็แตกออกมา โดยแฟ้มที่เราจะเอามาใช้งานนั่นก็คือแฟ้มที่ชื่อ blueprint โดยมีแฟ้ม tests เป็นตัวอย่างการใช้งานให้เราดูนั่นเอง
การเรียกใช้เหรอครับ ง่ายมาก แค่วางโค้ดเหล่านี้ไปที่ส่วน head ของเว็บคุณ
<link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->
โดยโค้ดนี้อ้างอิงว่าคุณได้นำไฟล์ทั้งหมด ที่อยู่ในแฟ้ม blueprint วางไว้ในแฟ้มเดียวกับที่เก็บหน้าเว็บ หากไม่ตรงตามนี้ต้องแก้ไข path ให้ถูกต้อง (ข้างใน href="")
เราจะได้โครงสร้างพื้นฐานเหมือนตามรูปนี้เลยครับ
เส้นฟ้าคือแนว grid ที่เราจะได้ ส่วนพวกข้อความเราเป็นคนจัดวางเอง ตามตำแหน่งที่เราต้องการ
ถ้าใครที่พื้นฐาน อาจจะเปิดแฟ้ม test แล้วเอา firebug จับส่วนที่ต้องการเอาเลยก็เร็วดี แต่วันนี้จะมาปูพื้นกัน
เริ่มต้นจากโค้ดนี้เลย เอาไว้ใน body ตามปกติเลยครับ
<div class="container">
<p>Here's my site!</p>
</div>
หน้าเว็บจะได้แบบนี้
ถ้าได้ลองยืดหดขยายหน้าเว็บดูจะเห็นว่า มันจะจัดกึ่งกลางหน้าเว็บให้ด้วย
อ้อลืมบอกไป ว่า ค่าเดิมของตัวนี้ หน้าเว็บจะมีความกว้างรวม 950 px มี 24 column กว้าง 30 px และระยะระหว่าง column คือ 10px
จากนั้นเราจะเริ่มวาง layout กันโดยเปลี่ยนโค้ดเป็นดังนี้
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
Main content
</div>
<div class="span-4 last">
Right sidebar
</div>
</div>
เราก็จะได้หน้าเว็บแบบนี้
เว็บมี 3 column+1 header แล้ว เร็วจังเลย ง่ายแค่นี้เอง
โดยความหมายของ class span-x ก็หมายความว่าให้กว้าง x column แล้วถ้าตามด้วย last ก็คือ ให้จบ ใน row นั้น โดยจะเห็นว่า header คือ span-24 last คือกว้างเต็มความกว้างเลย แล้วจบส่วน header มาขึ้นส่วนใหม่ที่ด้านล่างเลย
ทีนี้เรามาลองแบบ advance มากขึ้นไปอีก เปลี่ยนโค้ดเป็นดังนี้
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
หน้าเว็บที่ได้มี side bar สองด้านซ้ายขวา และตรงกลางท่อนบนแบ่งเป็น 3 กล่อง ปิดด้านล่างด้วย footer
สำหรับโค้ดชุดนี้ให้เราแบ่งการมองออกเป็นส่วนหลักส่วนย่อย โดยมองภาพรวมก่อน คือ ให้มองจากด้านซ้ายไปขวา จาก parent ไป child โดยหากมองตามนี้เราจะเห็นดังนี้ span-4 || span-16 || span-4 last นั้นคือส่วนของ ซ้าย || กลาง || ขวา ตามลำดับของ parent เลย และเมื่อเราแตก child ลงมา จะเห็นว่ามีแต่ใน span-16 เท่านั้นที่มี child อีก โดยแบ่งได้เป็น span-8 || span-4 || span-4 last หากเรามองออก เราจะเห็น3 column นี้เท่านั้น ใน row แรก ก็คือการแบ่งออกเป็น 3 กล่องขนาด 8 ,4 และ 4 column ตามลำดับ โดยเราจะมอง row ที่สอง เห็นต่อมาก็คือ span-16 last ที่เป็นส่วน content นั่นเอง ที่เป็นอย่างนั้นก็เพราะว่าเมื่อกี้ มี span-4 last มาแล้วโดยคีย์มันอยู่ที่ last นั่นเองที่ทำให้จบ row
ง่ายมั้ยครับ สำหรับการใช้งาน เชื่ออได้ว่า มือเก่าที่ยึดติดกับ table คงบอกว่า งงตึ้บ และมือใหม่ที่ไม่รู้จัก CSS เลยก็คงบอก อะไรของมัน แต่ถ้าเป็นคนที่เป็น CSS มาบ้าง น่าจะพอกล้อมแกล้มเข้าใจได้ไม่ยาก
ทั้งนี้ อยากให้ลองออกแบบโดยวาดในกระดาษมาก่อนครับ แล้วค่อยเอามาเขียนโค้ดดู ว่ามันจะเป็นไปตามที่วาดหรือไม่ ต้องฝึกมากๆครับ ตัวนี้ถือว่าช่วยจัดโครงสร้างหน้าเว็บให้เยอะมากแล้ว จำได้ว่าตอนที่ผมเริ่ม css ยังไม่มีพวกนี้เลย(หรือไม่รู้จักเองนี่แหล่ะ 555) ก็ถึกเอาแทบตายเหมือนกัน ชนิดที่ว่า 3 วันไม่ต้องทำอะไรเลย แก้ css อยู่นั่นแหล่ะ ถ้ามีอันนี้คงช่วยผมไปได้มากเลย
สุดท้าย ฝากข้อควรจำไว้สองข้อครับ
- ให้ใช้ "last" เมื่อจบใน column สุดท้าย
- ใน row เดียวกันต้องนับ column ให้ได้ครบ 24 ไม่อย่างนั้นเละครับ (และ "last" ก็ไม่ได้ช่วยหากใส่ column ไม่ครบเอง)
อ้อ เกือบลืมบอกไปว่า blue print css ตัวนี้ หากเรียกใช้ตามนี้มันติดตัว reset มาด้วยแล้วนะครับ และยังมี plugin ที่ติดตัวมาเพื่อเพิ่มความสวยงามของเว็บด้วย ที่เหลือจากนี้คือการลองแล้วครับ ถ้าติดปัญหาการใช้งานตรงไหนมาแลกเปลี่ยนกันได้ครับ
tag : css framework, เขียน css framework,ใช้ blueprint css,blue print css framework, blueprint css,blueprint, blueprint เริ่มต้น
