แนวคิด
TCHF ถูกเขียนขึ้นมาเพื่อการจัดการรูปแบบการทำงานด้าน CSS และ HTML เพื่อไม่ให้เกิดการ ทำซ้ำ ในสิ่งที่ “ไม่น่าจะต้องทำ” เช่น การเขียน Navigation ซ้ำๆ ใน CSS หรือการแบ่งหน้าเว็บออกเป็น หลายคอลัมน์ ซ้ำๆ
โดยแก่นหลักของ TCHF นี้ จะผูกกับการใช้ HTML5 และ CSS3 เพื่อจัดการกับ Web Layout เท่านั้น ยังไม่มีส่วนใดเกี่ยวเนื่องกับ HTML5 ส่วนอื่นๆ แต่ในอนาคตอาจจะมีการเพิ่มเติมความสามารถเข้ามา
หมวดหมู่ของ TCHF
TCHF ได้แบ่งหมวดหมู่การทำงานของ Web Layout ออกเป็น 5 หมวดหมู่ และอีก 1 ชุด Template
- Layout คือ ชุดการเขียน Layout แบบต่างๆ การแบ่งคอลัมน์เพื่อนำไปใช้งาน
- Navigation คือ ชุดการเขียน “เมนู” ทั้ง แนวนอน แหละแนวตั้ง รวมไปถึงการเขียนในแบบ Dropdown ด้วย
- List คือ ชุดการทำ List ของข้อมูลแบบต่างๆ โดยแบ่งออกเป็นกลุ่มเป็นก้อน
- Form คือ การจัดการ Form รวมไปถึงการเขียนเพื่อรองรับการ Validate และ Error
- Box ลักษณะการทำงานจะคล้ายคลึงกับ List แต่แตกต่างกันที่การตีความในการเขียน
- ชุด Template รวมชุดตัวอย่างการนำ TCHF ไปใช้งานโดยการเขียนคร่าวๆ เพื่อนำไปศึกษาต่อ
ตารางการใช้คำย่อใน TChF
| อักษรย่อ | หมวดหมู่ | คำอธิบาย | หมายเหตุ |
|---|---|---|---|
| tchf | Core | ThaiCSS css html5 web layout framework | |
| ch | Parent | Child (การสั่งงานไปที่ ลูกของ(x)) (E>F) | |
| gch | Parent | Grand Child (การสั่งงานไปที่ หลานของ (x)) (E>F> foo) | |
| gs | Parent | General sibling combinator คือ การสั่งงานไปยังน้อง ทั้งหมด (E~F) | |
| as | Parent | Adjacent sibling combinator คือ การสั่งงานไปยัง น้องที่อยู่ลำดับถัดไปตัวเดียว (E+F) | |
| lay | Module | Layout คือ การสร้าง layout หลัก ตามกฎของ Box model | |
| -on | Design Unit | One คือ หนึ่ง | |
| -tw | Design Unit | Two คือ สอง | |
| -th | Design Unit | Three คือ สาม | |
| -fo | Design Unit | Four คือ สี่ | |
| -fi | Design Unit | Five คือ ห้า | |
| -si | Design Unit | Six คือ หก | |
| -lis- | Module | List คือการสร้าง List แบบต่างๆ | |
| -its- | Module | itself คือการสั่งงาน html element นั้นๆ โดยตรง | เช่นการสั่ง float ซ้าย หรือขวา ให้กับรูปภาพ |
| -thm- | Design Unit | Thumbnail คือ การเซ็ตรูปย่อ หรือ มีรูปย่อใน list | |
| -nav- | Module | Navigation คือ หน่วยของ เมนูและการเข้าถึง | |
| -hr,-hre- | Design Unit | Horrizontal คือ การเกิดลักษณะตามแนวนอน | |
| -vr,-vre- | Design Unit | Vertical คือการเกิดลักษณะตามแนวตั้ง | |
| -in- | Design Unit | Inline คือ การเกิดแบบ Inline | |
| _dbl | Design Unit | Display Block คือ การเกิดแบบ Block | |
| -box- | Module | Box หรือ Block คือการสร้างกล่องข้อมูลแบบต่างๆ | |
| mbox | Module | Multi boxes คือ การแสดงกล่องข้อมูลมากกว่า 1 | |
| -fg_ | Design Unit | Figure หรือ การทำ box list ที่มีภาพประกอบ | |
| -frm- | Module | Form หรือ รูปแบบการจัดการ form ต่างๆ |
โครงสร้างไฟล์ CSS ใน TCHF
ใน TCHF จะประกอบไปด้วย file CSS หลักอยู่ทั้งหมด 3 ไฟล์
- structure-tchf.css เป็นไฟล์ สำคัญที่สุด “ห้ามทำการแก้ไข หรือ ดัดแปลงใดๆ ทั้งสิ้น” เพราะในอนาคต TCHF จะมีการปรับปรุงแก้ไข และอัพเดทเวอร์ชั่นใหม่เรื่อยๆ
- layout-tchf.css เป็นไฟล์สำรองการเขียน Layout แบบเฉพาะเจาะจงของผู้ที่นำไปใช้เอง ค่าพื้นฐานที่มีอยู่นั้น สามารถ ลบ แก้ไข ดัดแปลงได้ตามความเข้าใจ
- tchf.css ไฟล์หลักสำหรับ นำ css อื่นๆ เข้ามาใช้งาน รวมไปถึงเป็นไฟล์สำรองในการสั่งงานได้ด้วย
ความแตกต่างระหว่าง layout-tchf.css และ tchf.css
- layout-tchf.css จะใช้จัดการ Properties หลัก ในหมวดหมู่ของ CSS Basic Box Model
- tchf.css ใช้จัดการ background, border, color, font และอื่นๆ ที่ไม่ได้อยู่ใน Box model
การใช้งาน
Code ทั้งหมดเขียนด้วย CSS3 และ HTML5
ทำการ link ไฟล์ tchf.css เข้าไปยังส่วนหัวของเอกสารแล้วเริ่มใช้งาน
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html dir="ltr" lang="th">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="[YOUR PATH]/tchf.css" />
การตั้งชื่อ class ของ TCHF ให้กับ html
ชื่อคลาสของ TCHF นั้นจะขึ้นต้นด้วยคำว่า tchf- เสมอ ตามด้วย Parent – Module และ Design Unit
ตัวอย่างการเขียน class ของ TCHF
<div class="tchf-ch-lay-tw">
HTML Code
<div class="tchf-ch-lay-tw">
<section> </section>
<section> </section>
</div>
ในไฟล์ structure-tchf.css นั้น จะมีการเขียนคำสั่งเพื่อรองรับการแบ่งคอลัมน์ เอาไว้เรียบร้อยแล้ว
CSS
[class*="-ch-lay-"]>* {float: left;}
[class*="-ch-lay-tw"]>* {with: 50%;}
การแสดงผลหลัก
หมายถึง การสั่ง ลูกทั้ง 2 ตัวให้แบ่งเป็น 2 คอลัมน์ โดยค่าความกว้างพื้นฐานนั้นจะอยู่ที่ข้างละ 50%
การปรับแต่งการแสดงผลตามที่เราต้องการ
จากตัวอย่าง TCHF ได้จัดการ แบ่งคอลัมน์ไว้ให้แล้ว ที่เหลือคือหน้าที่ของเราเองที่ต้องจัดการแบ่งคอลัมน์เนื้อหา ให้เป็นไปตามส่วนที่เราต้องการ ตามกฎของ TCHF ที่ตั้งไว้คือ ห้ามแก้ไขไฟล์ structure-tchf.css การจัดการหน้าเว็บให้เพิ่มเติมดังนี้
ถ้าหากเราต้องการเปลี่ยนแปลงความกว้างของ Childs ใหม่ ให้เรา เพิ่ม Class ที่มีความสำพันธ์กับเนื้อหาของเราเข้ามา ด้านหน้า และเว้นระยะระหว่าง class ของ tchf ด้วยช่องว่าง เช่น
เปลี่ยนความกว้าง Child Layout แบบ 2 คอลัมน์
HTML
<div class="tchf-ch-lay-tw">
<article></article>
<aside></aside>
</div>
หาก หน้าเว็บของเรา กว้าง 1000px และเราต้องการแก้ไขความกว้างให้ <article> กว้าง 700px และ <aside> กว้าง 300px ให้เราเพิ่มคลาสเข้ามา เช่น
HTML
<div class="เว็บของฉัน หน้าแรก tchf-ch-lay-tw">
<article></article>
<aside></aside>
</div>
Class เว็บของฉัน หน้าแรก นั้นถูกเพิ่มเข้ามาด้านหน้า จากนั้นให้เราไปที่ไฟล์ layout-tchf.css แล้วสามารถเขียน selector เพื่อแก้ไขค่าความกว้างใหม่ได้ เช่น
CSS
div[class|="เว็บของฉัน"][class~="หน้าแรก"]>article { width: 700px;}
div[class|="เว็บของฉัน"][class~="หน้าแรก"]>aside{ width: 300px;}
หรือ
div.หน้าแรก>article { width: 700px;}
div.หน้าแรก>aside{ width: 300px;}
รูปแบบการเขียน Selector นั้น เราสามารถปรับเปลี่ยนให้เหมาะสมได้ ตามลักษณะและความซับซ้อนของงาน