สืบเนื่องมาจากผมนั้นอยากทำเว็บสนองความอยากตัวเอง โดยหาอะไรที่มันสะดวกรวดเร็วและเข้าใจง่าย ตัว CSS Framework ตัวนี้ได้รับการแนะนำมาจากเพื่อนๆอีกที และเขาใช้กันจริงจังเอาเราก็อยากใช้ แต่ใช้ไม่เป็น ฮ่าๆ เราจึงต้องหาอ่านคู่มือ เหมือนเครื่องใช้แหละครับ เราจะใช้โดยไม่เรียนรู้วิธีใช้มันก็ยังไงอยู่ ใช้ไปก็ไม่รู้ว่าถูกผิดเราจึงต้องศึกษาแหละครับ
Updated
ปัจจุบันไม่ได้ใช้งานตัวนี้แล้วถ้าใครผ่านเข้ามาอ่านแนะนำให้ไปใช้พวก frontend framework พวก react,vue นะครับ สามารถไปเรียนรู้การสร้างเว็บได้ที่นี่ครับ
https://oxygenyoyo.com/general/index-getting-started-code-website/
960 Grid CSS คืออะไร ?
หลายๆปีก่อนนั้นเรายังต้องใช้ Table tag เพื่อจัด Layout ของเว็บไซร์ และการมาของ CSS ก็เปลี่ยนมัน จนถึงวันนี้ก็มีการทำ CSS Framework ที่ทำให้เหล่า Designer สามารถออกแบบเว็บไซร์ได้ค่อนข้างจะง่ายดาย
แต่บางทีการที่เรามีเครื่องมือเทพ แต่ … ใช้ไม่เป็นนั้นก็จบ เอวังแน่ๆ เราจึงต้องมานั่งเรียนรู้วิธีการใช้มันได้อย่างถูกต้องและทำให้เราไปได้เร็วกว่าเราไม่ใช่มัน ถ้าเราใช้มันแล้วทำให้เราช้าจะใช้มันทำไมกันเออ !
CSS Framework นั้นมีการแก้ปัญหาต่างๆที่นักออกแบบเว็บไซต์หลายๆคนนั้นปวดหัวเวลาเจอเช่น Browser ตัวที่ขึ้นต้นด้วยตัว I ลงท้ายด้วยตัว E นั้นอ่านหน้าเพจไม่เหมือนกันหรือ บางค่ายอ่านเหมือนกันแต่แสดงต่างกันนิดหน่อย ปัญหาพวกนี้นั้นจะหมดไป แต่ ! ก็ไม่ถึงกับทุกปัญหา แต่อย่างน้อย Framework ตัวนี้ก็ช่วยให้เราลดภาระที่เราต้องไปนั่งแก้ไขปัญหาซ้ำๆ
ปัจจุบันไม่ได้ใช้งานตัวนี้แล้วถ้าใครผ่านเข้ามาอ่านแนะนำให้ไปใช้พวก frontend framework พวก react,vue นะครับ
ก่อนที่ CSS จะถูกใช้อย่างแพร่หลายนั้น Table tag ถูกใช้ในการจัด layout ของหน้าเพจโดยเหล่า Designer นั้นขาดเจ้า Table tag ไม่ได้เลย เพราะไม่รู้จะใช้อะไรมาแทน ซึ่งใช้โครตจะยากสำหรับคนไม่ชอบเีขียนโค้ด แล้วถ้าคุณเป็นคนรุ่นเก่าๆหน่อยเท่าๆเจ้าของบล๊อกเนี้ยแหละ ก็คงจะรู้ว่าต้องโครงสร้าง ซับซ้อนดูแล้วปวดตับทุกครั้ง สำหรับมือใหม่ถ้าไม่เข้าใจ คือมันเหมือนที่คุณต้องสร้างตารางในตาราง ในตาราง ในตาราง ….. นั่นแหละซึ่งจะยากต่อการแก้ไขทีหลังอีก CSS base layout จึงทำให้นักออกแบบเว็บไซร์หลงไหลเพราะว่าเขียนโค้ดน้อยกว่ามาก และยังดึงดูดพวกที่ชอบเขียนโค้ดตรงตามหลักสากล เพียงแค่การใส่ CSS เข้าไปทำให้มันสนับสนุนการทำงานของ HTML ว่าภายใน tag นั้นๆมันทำหน้าที่เก็บอะไร ไม่ใช่แค่ว่ามันดูเหมือนอะไร งงมะ ? ผมก็งง ก็ประเภทว่าแต่ก่อนใช้ <h1> กันแต่ก็ไม่ได้มี class มาช่วยบอกว่า ไอ้ h1 ใน div อีกตัวนั้นเป็นหัวข้อรองนะ ทำนองเนี้ยหรือว่า <h1> มันคือหัวข้อหลักนะ
ฉะนั้นนักออกแบบเอ๋ยพวกเธอว์จงเรียนรู้การใช้ Div แทนพวก Table ซะนะเพราะว่า Div มันก็ซ้อนๆได้เหมือน Table หรือไม่รกหูรกตามากกว่านั้นนะเธอว์ มาใช้ 960 grid css กันเถอะ
6 ความน่าใช้ของ Class และ Div ของ 960 grid css
อย่างแรกคือ สะอาดตามากกกมว๊ากกกกก เพราะว่าเราจะได้รับจากการใช้ CSS คือ …
- เขียนโค้ดน้อยแต่ใช้งานได้เยอะ
- ง่ายต่อการแก้ไข
- ช่วยให้การดูหน้าเพจไวขึ้น ( คอมพิวเตอร์อ่านหน้าเพจได้ไวขึ้น )
- ปัญหาน้อยเมื่อทำหน้าเพจเราให้รองรับหลายๆ Browser
- เมื่ออ่านหน้าเร็ว Search Engines ก็ชอบและบางตัวสามารถรู้ได้ด้วยว่าอันไหนหัวเรื่อง
- สามารถทำให้รองรับมือถือ
และข้อได้เปรียบแบบสุดๆคือ ปกติเวลาเราต้องใช้ Table tag เราก็คงเขียน … <table><tr><td>…</td></tr></table> แต่เมื่อเรามาเจอ CSS เขียนแค่ … <div>…</div> แค่นี้ !!? จริงๆเขียนแค่นี้จริงๆเห็นไหมว่าทำไมเราถึงเขียนโค้ดน้อยลงเพราะว่าเราไม่ต้องเขียน table ให้ยุ่งยาก
มีคำถามต่อว่าถ้าเราใช้ CSS Framework อย่าง 960GS มาใช้แล้วเนี้ยจะเกิดปัญหาเดิมๆเหมือน Table หรือไม่ ? ถ้าเป้าหมายคือการทำให้ HTML มีประสิทธิภาพคงตอบใช่
สำหรับ address tag คือจริงๆแล้วคุณอาจจะใช้แค่ div class=”address” นั้นก็ไม่เสียหายอะไรเลย จะเห็นว่ามันลดการเขียนได้ลงดังตัวอย่างที่เห็น แล้วทำอย่างไรล่ะ คราวนี้ถึงเวลาได้ลุยกับเจ้าตัวนี้กันซักทีไปดูกันเลย ~~
มาดู 960 grid css กันเป็นส่วนๆ
960.gs ได้เตรียมการจัดกลุ่มแบบ column เขียนแบบ CSS ซึ่งอำนวยความสะดวกสำหรับการจัด layout ของเว็บเพจคุณสามารถ Download มาแล้วใส่มันลงไปในหน้าเพจของเราไม่ต้องมี plugin อะไรเพิ่มเติมหรือเทคโนโลยีตัวอื่นใดๆทั้งสิ้น คุณสามารถใช้มันร่วมกับไฟล์ CSS ตัวอื่นได้อีกด้วย
column ทั้งหมดถูกแบบออกเป็นแบบ 12 กับ 16 ซึ่งจะเปรียบเสมือนที่บรรจุ ‘containers’ โดยเราจะสามารถเรียกใช้แบบนี้ container_12 หรือ container_16 เป็น class ใน div ตัวอย่าง
จากภาพตัวอย่างเราจะเห็นได้ว่าค่าปกติทั้งสองแบบเราสามารถเลือกได้ ในภาพส่วนสีเทานั้นจะไม่เห็นตอนที่เราใช้บนเว็บแล้ว column ทั้งหลายที่เราเห็นนั้นถูกจัดเรียงเป็น block ซึ่งเราจะเรียก block นั้นว่า Grid ซึ่งในตัวอย่างนั้นเป็นการย่อรูปแล้วจึงดูแคบแต่จริงๆกว้าง 960 ครับ สามารถดูได้ที่เว็บไซร์หลัก ตัวอย่าง Demo
Grid คือ block ที่บรรจุ content หรือเนื้อหาสามารถรวมหลายๆ column และจะลอย “ซ้าย” หรือ float:left เสมอเมื่อถูกบรรจุใน class container_xx ( xx คืออาจจะเป็น 12,16 ) ตัว Grid ก็จะแยกออกจากกันและความกว้างของ Grid จะถูกเปลี่ยนแปลงตาม ‘ขนาด’ ของ container สมมติว่าผมกำหนดว่าใช้ container_12 และกำหนด div มี class คือ grid_1 อย่างนี้ก็คือความกว้างจะเท่ากับ 1 column ถ้าผมกำหนดเป็น div class=”grid_5″ อย่างนี้ก็คือ ความกว้างเท่ากับ 5 column
จากตัวอย่างด้านบนนั้น จะเห็นได้ว่าผมกำหนด container_12 จะมี grid_4,grid_4,grid_4 ตามลำดับ ซึ่งจะมีขนาดพอดีคือ 12 column
จากรูปด้านบนก็จะเห็นว่า container_16 ก็ใส่ grid_4, grid_4, grid_4, grid_4 ตามลำดับ ซึ่งจะพอดี แต่ความกว้างของแต่ละ column จะเล็กลงเพราะขนาดจริงๆนั้นยังเท่าเดิมคือ 960 แต่ซอยย่อยเป็น 16 column จ้า
ในส่วนของหน้าเว็บ 960.gs นั้นก็มีการโชว์ว่าเว็บไซร์ที่ถูกสร้างขึ้นด้วย framework ตัวนี้เป็นอย่างไร ซึ่งมีทั้งหน้าที่ generate หรือเป็น page template ให้เราสามารถเอาไปใช้ได้เลยหรือคุณต้องการเอาไปใช้กับพวก photoshop ก่อนก็มีตัวไฟล์เตรียมให้พร้อมสรรพ และข้อมูลการใช้ต่างๆให้ ไม่ว่าจะเป็นการเว้นระยะห่างหรือการจัดตำแหน่งก็สามารถทำได้ยืดหยุ่นอีกด้วย
ทั้งหมดที่กล่าวมานั้นจึงทำให้เราอาจจะหลีกเลี่ยงไม่ได้ที่เราต้องเขียนโค้ดแบบ class-itis คือการกำหนด class เป็นตัวๆไป ไม่ใช่ว่าเราจะใส่ class=”grid_xx” กับตัว Div อย่างเดียว ( เดียวมีตัวอย่างให้ดูด้านล่างๆ อีกครับ ) เพราะว่าเราเริ่มจาก <div class=”container_12″> … </div> โดยมี div ต่างๆที่เรากำหนดความกว้างซึ่งตัวมันเองก็สนับสนุนใหัเขียน class แยกกันอยู่แล้วเราจึงต้องเขียน <div class=”grid_xx”>…</div> หรือแม้แต่เรื่อง div-itis ก็คล้ายๆกันคือการกำหนดต่างๆให้ชัดเจนแต่อาจจะเยอะก็ต้องยอมรับในส่วนนี้ เดี๋ยวเราไปดูกันว่ามันสามารถมาประยุกต์ใช้กับ class-itis, div-itis ได้อย่างไร …
Solutions
บางคนบอกว่าใช้แค่ table ก็เพียงพอสำหรับการจัด layout แบบง่ายๆแล้ว เพราะการใช้ div ซับกัน 3 – 4 ชั้นขึ้นไปก็ยังแก้ปัญหาไม่ได้ เพราะมันแค่เป็นการแทนค่า table ที่มันใช้หลาย tag ( <table><tr><td>….</td></tr></table> ) ตัว Framework เองก็ช่วยได้แต่ไม่หมด แต่ ! ถ้าเราดูดีๆ เราอาจจะหลบปัญหาพวกนั้นได้ ก็ไม่ต้องแก้ไง หลบเอา ( อัพ agi เยอะๆ จะได้มีค่า flee หลบปัญหา )
เอาล่ะมาดูกันว่าเราจะใช้ Framework ตัวนี้ทำอะไรได้บ้าง แล้วจะแก้ปัญหาหรือจะหลบปัญหาบ้างตัวได้อย่างไรอ่านต่อโลด
ใช้ Class เท่าที่จำเป็น
ปัญหาแรกๆที่เราพบได้บ่อยที่สุดคือ … การที่เราใช้ class เยอะเกินไปและไม่รู้ว่าตัวไหนสำคัญ ( /me ผมก็เป็น ) 960.gs เป็นเครื่องมือ wireframe ซึ่งในตัว css ของมันเองรองรับให้เราสามารถจัดการ จัดวางแบ่ง grid_xx ตามใจซึ่งตัวมันเองต้องมีโค้ดมารองรับตรงนี้เยอะมากนั่นเอง เมื่อเว็บไซร์เปิดแล้วนั้น เราอาจจะต้องใช้ class มากกว่า 180 ตัว เพราะมีตัวที่เราไม่ได้ใช้รวมอยู่ด้วย
ฉะนั้นเราควรจะใช้เท่าที่เราจำเป็นนั่นก็คือถ้าสมมติว่าเราใช้ .container_12 แล้วเราใช้แค่ grid_5 และ grid_7 เท่านั้นก็ให้เราทำการลบอันอื่นออกพวก grid_1,grid_2 , … , grid_n ที่เราไม่ได้ใช้
ใช้ class=”grid_xx” กับ tag ที่เราต้องการ – Headings , Images , Links
class container และ grid_xx ไม่ได้ถูกจำกัดให้ใช้กับ div ต้องไม่ลืมว่า class คือ attribute ตัวหนึ่งนะครับ มันสามารถใ้ช้กับ html,head,meta,param,script,title และ style จริงๆแล้วก็คือทุกตัวใน body tag ถ้าเป็นพวกเอา div ไปคร่อม tag อื่นแค่ tag เดียวก็ไม่จำเป็นต้องใช้ div คร่อมดูตัวอย่างด้านล่างเลย
ใช้ความสามารถของ grid กับ element อื่น
คือการที่เรานั้นอยากได้พวก properties ต่างๆของ class grid เราสามารถเอา class grid มาใช้กับ class ตัวอื่นหรือ tag ตัวอื่นอย่างที่กล่าวมาแล้วโดยตัวอย่างด้านล่าง
<div class=”menu”>
<div class=”sub-menu”>…</div>
<div class=”sub-menu”>…</div>
<div class=”sub-menu”>…</div>
</div>
แต่เราอยากได้ class grid มาช่วยเราจัดการเรื่องการจัดวาง layout เราอาจจะเขียนได้เป็น
<ul class=”menu container_12″>
<li class=”grid_4 sub-menu”>…</li>
<li class=”grid_4 sub-menu”>…</li>
<li class=”grid_4 sub-menu”>…</li>
</ul>
เช่นนี้ก็จะประหยัด div ไปแหละจัดการง่ายขึ้น
สรุป
วัตถุประสงค์ของ 960.gs และพวก CSS Framework ทั่วไปนั้นลดเวลาในการ ออกแบบเว็บ ลดการใช้พวก Tag ต่างๆในหน้า HTML ที่สิ้นเปลือง เหลือแต่ Tag ที่สำคัญและใช้จริงๆในการโหลดหน้าเพจแต่มันก็เป็นภาษาจัดแต่ง layout CSS มันไม่ได้ perfect มันเป็นเครื่องมือที่ช่วยให้เราทำงานสำเร็จเร็วขึ้นแต่ก็ไม่ได้แก้ไขปัญหาทั้งหมด ตัวเราเองนั่นแหละคือคนที่ต้องแก้ไขและเลือกที่ว่าเราจะทำอย่างไรให้งานออกมาดี รู้จักใช้เครื่องมือมันก็สะดวก แต่ถ้าเราใช้ไม่เป็นสุดท้ายก็เสียเวลาเปล่า
ปล.
จริงๆแล้วบางบทความนั้นมีการสอนให้เราสามารถส่งค่า properties ของ grid ต่างๆไปให้ class ตัวอื่นได้แต่ผมลองเอามาทำแล้วมันไม่รันอย่างที่ตัวอย่างในเว็บเขาทำจึงไม่ได้มานำเสนอให้ในบทความนี้ครับถ้าอย่างไรก็แล้วแต่ถ้ามีใครพอจะทราบว่าทำอย่างไรก็รบกวน comment หรือบอกผมทางที่ติดต่อผมได้เลยครับ จะขอบคุณมากที่นำความรู้ที่ถูกต้องมาแบ่งปันต่อครับ
