ทำความรู้จัก Foundation CSS สร้างเลย์เอ้าเว็บง่ายปลายนิ้วชี้

การเขียนเว็บไซด์ปัจจุบันไม่ได้กำจัดให้ดูได้เฉพาะบน PC อีกต่อไปเเล้วครับ มีอุปกรณ์เพิ่มขึ้นมาเรื่อยๆ ไม่ว่าจะเป็น Tablet , Smart phone ซึ่งมีความเเตกต่างหลากหลายขนาดหน้าจอ จนตัวdeveloper เองยังปวดหัว เพราะการแสดงผลบนขนาดจอที่แตกต่างกันนี้ สามารถสร้างประสบการณ์การรับชมเว็บไซด์ที่แตกต่างกันอีกด้วย

ลองนึกภาพตามครับขนาดอักษร 14pt ที่เราเห็นบนเว็บทั่วๆไป พอเอามาแสดงผลบนจอมือถือขนาดเล็ก จะถูกย่อขนาดลงตามความละเอียดของจอภาพ เราเลยต้องซูมเข้าออกเพื่อขยายขนาดเอง ดังนั้นหลักการขอ Foundation Framework คือปรับขนาดองประกอบเองโดยคำนึงขนาดจอภาพเป็นหลัก

เว็บไซด์หลักของ Foundation  http://foundation.zurb.com/

ว่าด้วยเรื่องของ Grid
หัวใจหลักเลยครับ เพราะต่อไปเราจะมองเว็บเป็นกริดเป็นคอลัมม์ ราวกับว่าเบืื้องหลังของเว็บเราคือตารางขนาดใหญ่ ที่มีขนาดใหญ่สุด 12 ส่วนในด้านกว้าง (ด้านยาวขึ้นอยู่ตามขนาด content) ทีนี้พอนับเป็นส่วน"เราก็สามารถกำหนดขนาดเเต่ละส่วนได้บนขนาดจอที่เเตกต่างได้ "













ตัวอย่างโค๊ดจะประมาณนี้ นะครับ

<div class="code-container">
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>></span>
  <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-2 columns"</span>></span>2 columns<span class="tag"></<span class="title">div</span>></span>
  <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-10 columns"</span>></span>10 columns<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"row"</span>></span>
  <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-3 columns"</span>></span>3 columns<span class="tag"></<span class="title">div</span>></span>
  <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"small-9 columns"</span>></span>9 columns<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span></div>
<div class="code-container">
<span class="tag">
</span></div>

ทีนี้มาส่อง Component สวยๆบ้างว่ามีอะไรมั่ง
ปุ่มกด Button: มีหลากหลายขนาดให้เลือกเเต่สีกับดีไซด์สู้ บูทสเเตบไม่ได้แหะ

 

 เมนูเนวิเกเตอร์ Nav : การจัดตำแหน่งเมนูต่างๆก็ทำได้ง่ายๆเพราะมี class รองรับ เพียงเเค่เพิ่ม class ให้ Nav ก็จะสามารถ

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

ตัวอย่าง layout ที่ Foundation จัดไว้ให้เเล้วเป็นตัวอย่าง (มีอธิบายเป็นส่วนๆ สวยงามมาก)
http://foundation.zurb.com/templates.html

ตัวอย่าง Tool ที่มีให้ Download ฟรี
http://foundation.zurb.com/develop/resources.html

เขียนเว็บPHP, ออกแบบระบบPHP , สร้างเว็บขายของ
ติดต่อ ชยุต 089-755-8042 Mail: profrezz@gmail.com