GCSS CSS frame work.

Heading Levels

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

นี่คือย่อหน้าที่เกิดจาก tag <p>....</p> คุณสามารถใส่เนื้อหาต่างๆได้ภายใต้ tag นี้

จัดตัวอักษรชิดขวาด้วย class=right

จัดตัวอักษรกึ่งกลางด้วย class=center

จัดตัวอักษรชิดซ้ายด้วย class=left

Message Box

Error : โดยทั่วไปจะใช้สำหรับแดงข้อผิดพลาด สามารถเรียกใช้ได้โดยระบุ class=error และ box นี้จะต้องอยู่ภายในกรอบเนื้อหาเท่านั้น (.content)
Message : สำหรับแสดงข้อความ หรือความคิดเห็นทั่วไป สามารถเรียกใช้ได้โดยระบุ class=message และ box นี้จะต้องอยู่ภายในกรอบเนื้อหาเท่านั้น (.content)
Warning! : ใช้สำหรับแสดงข้อความ แจ้งเตือน ข้อควรระมัดระวัง สามารถเรียกใช้ได้โดยระบุ class=warning และ box นี้จะต้องอยู่ภายในกรอบเนื้อหาเท่านั้น (.content)
Tip : ใช้สำหรับแสดงข้อความทั่วไป คำแนะนำ หรืออื่นๆ สามารถเรียกใช้ได้โดยระบุ class=tip และ box นี้จะต้องอยู่ภายในกรอบเนื้อหาเท่านั้น (.content)

Code

ข้อความด้านบนของบล๊อค <code> ก่อนการแสดงโค้ด ใช้สำหรับระบุส่วนที่เป็นโค้ด โดยอยู่ภายใต้ tag <code>....</code> ข้อความด้านล่างของบล๊อค <code> จะเห็นว่าระยะทั้งสองส่วนไม่เท่ากัน ซึ่งข้อความด้านล่าง ปกติแล้วจะเอาไว้อธิบายการทำงานของกรอบโค้ดด้านบน

Blockquote

อ้างจากคำตอบที่ #4 โดยทั่วไปจะใช้สำหรับการอ้างอิงไปยังคำพูด หรือการอ้างไปยังข้อความที่เกี่ยวข้อง โดยมีรูปแบบ <blockquote><b>อ้างจากคำตอบที่ <em>#4</em></b>......</blockquote>

Button

GCSS มีรูปแบบของปุมกดมาตราฐานอยู่ 3 รูปแบบ คือ

  1. รูปแบบมาตรฐานคือ Metro styles
  2. รูปแบบคล้ายปุ่มกดของ Facebook คือ Facebook styles
  3. รูปแบบ 3D คือ Pretty styles

Metro styles

.red.green.blue.magenta.pink.orange.light.rosy.brown.purple.cyan.gold

Pretty styles

.red.green.blue.magenta.pink.orange.light.rosy.brown.purple.cyan.gold
<p class=[pretty|facebook]>
  <input class="button [small|large] [wide] [color]" value="Button">
</p>
  • ที่กรอบนอก (<p>) ถ้าไม่ระบุ class ไว้ ปุ่ม (.button) ที่อยู่ภายในจะแสดงผลเป็น Metro styles
  • ถ้าระบุ class ที่กรอบนอกเป็น pretty หรือ facebook ปุ่ม (.button) ที่อยู่ภายในจะแสดงผลเป็น Pretty styles หรือ Facebook styles ตามลำดับ
  • สามารถระบุขนาดของปุ่มได้โดยกำหนด class เพิ่มเติมให้กับปุ่ม เช่น small สำหรับปุ่มขนาดเล็ก, large สำหรับปุ่มขนาดใหญ่
  • หากกำหนด class wide ให้กับปุ่ม ปุ่มจะยืดขนาดความกว้างออกจนเต็มพื้นที่
  • สามารถกำหนดสีของปุ่มได้ โดยการระบุ class ชื่อสีตามตัวอย่างด้านบน
.button {
  background-color: #FFF;
  color: #FFF;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

สามารถระบุสีของปุ่ม และสีตัวอักษร และเงาของตัวอักษร เพิ่มเติมได้ตามตัวอย่างด้านบน

Inline Text

  • class term0-term5 สำหรับการทำ Highlight ข้อความ .term0 .term1 .term2 .term3 .term4 .term5 เช่นข้อความค้นหา
  • tag <em> ใช้สำหรับเน้นข้อความสำคัญ
  • tag <strong> และ <b> และ <dt> แสดงผลเป็นตัวหนา
  • tag <i> และ <dfn> แสดงผลเป็นตัวเอียง
  • tag <ins> และ <u> แสดงผลเป็นตัวขีดเส้นใต้
  • tag <del> แสดงผลเป็นตัวขีดฆ่า
  • tag <acronym> และ <abbr>
  • tag <sub> และ <sup> แสดงผลเป็นตัวห้อยและตัวยก
  • tag <small> และ <big> สำหรับปรับขนาดตัวอักษร
  • tag สำหรับแสดงวันที่และเวลา
  • #save_wait.show
  • #save_complete

Colors

  • .comment และ .comments
  • .script, .date และ .create
  • .sql, .tags และ .keywords
  • .visited และ .count
  • .reply
  • .ip
  • .php
  • .asp
  • .css
  • .xml
  • .html
  • .htaccess

Media

<img src=......>
rounded
<img src=...... class=rounded>
circle
<img src=...... class=circle>

รูปภาพทั้งหมด (<img>) โดยปกติจะแสดงผลในแบบ Responsive โดยจะมีการปรับขนาดรูปภาพโดยอัตโนมัติ (รักษาอัตราส่วน) ไม่ให้มีขนาดเกินขนาดของหน้าจอ หรือพื้นที่แสดงผล

<div class=youtube>
  <iframe allowfullscreen frameborder=0 height=315 src="//www.youtube.com/embed/XhLtE-xGxfU?wmode=transparent" width=560></iframe>
</div>

เราสามารถใส่โค้ดแสดง Youtube ได้โดยใส่ โค้ด Youtube ภายใต้ class youtube และผมแนะนำให้ใส่ wmode=transparent ลงใน URL ของ Youtube ด้วย เพื่อให้บราวเซอร์รุ่นเก่าๆป้องกันไม่ให้ Youtube บัง Layer อื่นๆ

Horizontal Arrangement

<div class=float-left>ใช้สำหรับกำหนดให้บล๊อกนี้แสดงผลชิดซ้าย</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.
<div class=float-center>ใช้สำหรับกำหนดให้บล๊อกนี้แสดงผลกึ่งกลาง</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
<div class=float-right>ใช้สำหรับกำหนดให้บล๊อกนี้แสดงผลชิดขวา</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Tables

<table>
   <caption>.....</caption>
   <thead>
       <tr>
           <th> ... </th>
           ...
       </tr>
   </thead>
   <tbody>
       <tr>
           <td> ... </td>
           ...
       </tr>
       <tr>
           <th scope=rowgroup colspan=n>....</th>
       </tr>
       .....
   </tbody>
</table>
caption
  Col1 Col2 Col3
Row1 Col1 Col2 Col3
Row2 Col1 Col2 Col3
Row Group
Row3 Col1 Col2 Col3
Row4 Col1 Col2 Col3

ค่าเริ่มต้นของตารางของ GCSS จะเป็นตารางแบบด้านบนครับ ซึ่งเราสามารถกำหนดรูปแบบให้กับตารางได้ ดังรายละเอียดด้านล่าง

  • .border สำหรับกำหนดให้ตารางแสดงกรอบ เช่น table class=border
  • .horiz-table สำหรับกำหนดให้ตารางแสดงกรอบในแนวนอนเท่านั้น โดยต้องใช้ร่วมกับ .borderเช่น table class="border horiz-table"
  • .vert-table สำหรับกำหนดให้ตารางแสดงกรอบในแนวตั้งเท่านั้น โดยต้องใช้ร่วมกับ .borderเช่น table class="border vert-table"
  • .bg2 เป็น class สำหรับใช้กับ tr เพื่อกำหนดสีพื้นหลังให้กับแถวของตาราง เช่น tr.bg2 สำหรับใช้สลับสีการแสดงผลตาราง
  • .fullwidth เป็น class ใช้กับ table เพื่อกำหนดให้แสดงเต็มความกว้างของพื้นที่ เช่น table class=fullwidth
  • .data เป็น class ใช้กับ table สำหรับกำหนด style ให้กับ ตาราง
 Col1Col2Col3
Row1Col1Col2Col3
Row2Col1Col2Col3
Row3Col1Col2Col3
<table class=border>
  .....
</table>
 Col1Col2Col3
Row1Col1Col2Col3
Row2Col1Col2Col3
Row3Col1Col2Col3
<table class="border horiz-table">
  ....
</table>
 Col1Col2Col3
Row1Col1Col2Col3
Row2Col1Col2Col3
Row3Col1Col2Col3
<table class="border vert-table">
  .....
</table>
 Col1Col2Col3
Row1Col1Col2Col3
Row2Col1Col2Col3
Row3Col1Col2Col3
<table class="border fullwidth data">
  .....
  <tr class=bg2>.....</tr>
  .....
</table>

นอกจากนี้ คุณยังสามารถใช้ div แทน ตารางได้ด้วยโดยกำหนด class .table .tr .thead .th และ .td ให้กับ div ซึ่งจะทำให้ div แสดงตัวเหมือน table

Col1
Col2
Col3
Row1
Col1
Col2
Col3
Row2
Col1
Col2
Col3
Row3
Col1
Col2
Col3
<div class="table border fullwidth data">
  <div class="tr thead">
    <div class=th></div>
    <div class=th>Col1</div>
    <div class=th>Col2</div>
    <div class=th>Col3</div>
  </div>
  <div class=tr>
    <div class=th>Row1</div>
    <div class=td>Col1</div>
    <div class=td>Col2</div>
    <div class=td>Col3</div>
    </div>
  <div class="tr bg2">
    <div class=th>Row2</div>
    <div class=td>Col1</div>
    <div class=td>Col2</div>
    <div class=td>Col3</div>
    </div>
  <div class=tr>
    <div class=th>Row3</div>
    <div class=td>Col1</div>
    <div class=td>Col2</div>
    <div class=td>Col3</div>
  </div>
</div>