Blue Print CSS Framework

พอดีเมื่อวานนี้นั่งดู Stat ของ obbon.net แล้วไปเห็นว่ามีคนเข้า Google แล้วค้นหาด้วยคำว่า “jquery drag drop กบ” เห็นแล้วรู้สึกดีมากเลยครับ เหมือนมีคนมาตบไหล่เบาๆ แล้วพูดว่า สู้ต่อไปดิวะ ฮี่ๆ น้ำตาจะไหล เข้าเรื่องกันดีกว่าครับ

สำหรับคนที่ใช้ CSS ในการจัดรูปแบบเว็ปเพจ คงเคยรู้สึกว่า ทำไมทุกครั้งที่ทำเว็ปใหม่ เราต้องมานั่งวางโครง กำหนดลักษณะตัวอักษร ใส่โค๊ดเพื่อแก้ปัญหาการแสดงผลในบางเบราวเซอร์ ซึ่งสิ่งต่างๆ เหล่านี้ ส่วนใหญ่เราก็จะทำไปเรื่อยๆ เจอปัญหาทีก็แก้ที คนกลุ่มหนึ่งที่เค้าก็เคยเจอปัญหาเดียวกับเรา เค้าเลยคิดชุด CSS มาตรฐานขึ้นมา จะได้ไม่ต้องมานั่งทำซ้ำๆ ซึ่งเราเรียกว่า CSS Framework นั่นเอง

สิ่งที่ต้องมี

Blueprint CSS Framework ความจริงมันมีหลายเจ้านะครับ แต่ที่ผมเลือกตัวนี้เพราะว่า ผมเคยทำแต่ตัวนี้ …
ไฟล์ HTML 1 ไฟล์เอาไว้ลองครับ
หมดละครับ

เข้าใจ Blueprint

ก่อนอื่นเรามาทำความเข้าใจแนวคิดของคนทำ Blueprint ก่อนนะครับ Blueprint จะมองหน้าเว็ปเพจว่ามีความกว้าง 950 px นะครับ โดยจะถูกแบ่งเป็น Grid ซึ่งมีความกว้าง 30 px จำนวน 24 Grid แต่ละ Grid มีระยะห่างกัน 10 px ตามภาพประกอบ 1.2ก นะครับ แล้วทำไมต้องรู้ด้วย เพราะว่าเวลาเราจะวางข้อมูล เราก็จะต้องวางตาม Grid นะครับ แต่สุดท้ายเราก็สามารถปรับแต่งได้อยู่ดีครับ มันช่วยให้เราวางโครงเป็นระบบมากขึ้น ทำให้เราทำงานได้เร็วขึ้น

ลงมือปฎิบัติ

เริ่มแรกเราต้องมีภาพเว็ปในใจแล้วนะครับ อันนี้เป็นตัวอย่างนะครับ
จากนั้นเราจะต้องมองโครงสร้างในแบบของ Grid นะครับ ซึ่งก็จะได้ตามรูปนี้ ต่างคน ก็อาจจะมองออกมาไม่เหมือนกันนะครับ ซึ่งไม่มีถูกผิดนะครับ แต่ถ้าทำไปเรื่อยๆ ก็จะรู้เองว่ามองแบบใหนถึงจะเหมาะสม
หลังจากมองโครงสร้างเรียบร้อยแล้ว ก็ได้เวลาเขียนไฟล์ HTML แล้วล่ะครับ

<html>

<head>

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen,projection"><![endif]-->
<link rel="stylesheet" href="css/mystyle.css" type="text/css" media="screen, projection">

</head>

<body>

<div class="container">
<div id="header" class="span-24">Header</div>
<div id="side_bar" class="span-6">Sidebar</div>
<div id="main_content" class="span-17 push-1 last">
<div class="span-8">Column#1</div>
<div class="span-8 last">Column#2</div>
<div id="footer" class="span-24">footer</div>
</div>

</body>
</html>

บรรทัดที่ 5-7 : เป็นการประกาศใช้ไฟล์ css ของ Blueprint ครับ บรรทัดที่ 5 จะพิเศษหน่อยเพราะมันเอาไว้แก้ปัญหาการแสดงผลของ IE ตั้งแต่เวอร์ชั่น 7 ลงไปครับ
บรรทัดที่ 8 : เป็นการประกาศใช้ไฟล์ css ของเราเองนะครับ Blueprint ไม่ได้ทำให้เราทุกอย่าง อะไรที่เราอยากปรับแต่งเองก็เอาใส่ไว้ในไฟล์นี้ล่ะครับ
บรรทัดที่ 14 : จะเห็นว่าผมสร้าง DIV ซึ่งมีคลาสคือ container ครอบไว้ ที่ต้องทำแบบนี้เพราะ Blueprint เค้ากำหนดไว้ครับ ว่าคลาสต่างๆ ที่เค้าเตรียมไว้ให้นั้น มันจะมีผลก็ต่อเมื่อมันอยู่ในคลาส container
บรรทัดที่ 15 : คลาส span-24 เป็นการบอกว่า จะให้กล่องนี้มีความกว้าง 24 ช่องนะ เราเลือกได้ตั้งแต่ span-1 ถึง span-24 ครับ ส่วนไอดี header ผมเอาไว้ให้ mystyle.css ใช้ในการปรับแต่งครับ
บรรทัดที่ 17 : push-1 คือการขยับไปทางขวาอีก 1 ช่องด้วยการเพิ่ม margin ครับ Blueprint เค้ามีคลาสอื่นๆ ให้ใช้อีกเยอะนะครับ ดูได้ใน screen.css เลยครับ ส่วนคลาส last ใส่ไว้เพื่อให้กล่องมันลงล็อคพอดีครับ เพราะว่าคลาส span โดยปกติจะมี margin-right: 10px ซึ่งถ้าเป็นแบบนี้หมด 24 อันจะเห็นว่ามันจะกลายเป็น 24 x (30 + 10) = 960 ซึ่งมันไม่ใช่ (ดูจากรูป 1.12ก นะครับ จะเห็นว่า Grid ขวาสุดจะไม่มีขอบด้านขวา) การใส่คลาส last ก็เพื่อบอกว่ามันเป็นบล็อคขวาสุดนะ ไม่ต้องมีระยะขอบ งงมั้ยเนี่ย ถ้างงกลับไปอ่านตั้งแต่บรรทัดแรก สิบรอบ ปฎิบัติ!

/* File mystyle.css นะครับ */

#header{
background: #e9e7cf;
}

#footer{
background: #eaaaaa;
}

#side_bar{
background: #b7dcff;
}

#main_content{
background: #b7dcff;
}

#main_content_header{
background: #ecd4ba;
}

#column_1{
background: #e4c8f2;
}

#column_2{
background: #ffd7d7;
}

ไฟล์นี้คงไม่ต้องอธิบายนะครับ เพราะมันก็ไม่มีอะไรให้งง # เอาไว้บอกว่า อะไรก็ตามที่มี id นั้น ให้แสดงผลตามนี้นะ เช่น ในส่วน #header ก็คือการบอกว่า อะไรก็ตามที่มี id เป็น header ให้มีสีพื้นหลัง #e9e7cf นะ

เมื่อเรียบร้อยหมดแล้ว ลองเปิด index.html ดูก็จะได้ดังรูปนี้ครับ จะเห็นว่าระยะแนวนอนนั้นถูกต้องแล้ว แต่ระยะแนวตั้งนั้นยังต้องปรับ ซึ่งอันนี้เป็นหน้าที่ของเราโดยตรงนะครับ ในขั้นตอนนี้เราจะจัดระยะในแนวตั้งนะครับ ด้วยไฟล์ mystyle.css นั่นแหละครับ เอามาแก้ต่อได้เลย

/* File mystyle.css นะครับ */

#header{
background: #e9e7cf;
height: 150px;  margin-bottom: 30px;
}

#footer{
background: #eaaaaa;
height: 100px;
margin-top: 20px;
}

#side_bar{
background: #b7dcff;
}

#main_content{
background: #b7dcff;
}

#main_content_header{
background-color: #ecd4ba;
margin-bottom: 15px;
}

#column_1{
background: #e4c8f2;
}

#column_2{
background: #ffd7d7;
}

เสร็จแล้วก็จะได้ตามรูปนี้ครับ ไม่สวยเลยใช่มั้ยครับ

สรุป

พอทำมาจนจบแล้วหลายคนอาจจะเห็นว่า ไม่เห็นสวยเลย มันดียังไงเนี่ย ห๊ะะะ ที่มันไม่สวยก็เพราะหน้าที่หลักของมันคือใช้สำหรับวางโครงสร้างครับ ข้อดีมันมีมากมายนะครับ

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

เป็นอันว่าจบบทความนี้ครับ มีข้อสงสัยก็คุยกันได้นะครับ อันใหนที่ผมรู้ก็จะบอก อันใหนที่ไม่รู้จะช่วยหามาตอบให้ครับ

สิ่งที่ต้องมี

เข้าใจ Blueprint

ลงมือปฎิบัติ

สรุป

ขอขอบคุณ