Mẫu CSS: Grid, Table và nhiều thứ có sẵn cho website trên htm.wiki

Giới thiệu về Thư viện CSS sử dụng cho mã nguồn W3AMP. Các Blog, trang website được tạo từ htm.wiki cùng dùng chung thư viện CSS này.
Với nhu cầu cơ bản của đa số admin là: trình bày một trang nội dung rõ ràng bố cục, thì có thể chưa cần đọc tài liệu này. Chỉ cần tham khảo bài: "CSS căn bản cho người sáng tạo nội dung HTML" là đủ để dùng.

Nếu bạn cần tạo nhiều ô dữ liệu phức tạp hơn?
Đây, nói về CSS Framework for W3AMP & HTM.WIKI

Những CSS Class được viết sẵn, bạn có thể kết hợp các class có sẵn với cách viết style="" của riêng bạn để trình bày trang nội dung. Xin mời xem ở đây
LƯU Ý KIỂM TRA RESPONSIVE: TẤT CẢ CÁC ĐƯỜNG LINK BẠN NÊN XEM TRÊN THIẾT BỊ ĐIỆN THOẠI, IPAD, MÁY TÍNH BẢNG... ĐỂ CHẮC CHẮN RẰNG NÓ LUÔN HIỂN THỊ ĐẸP MẮT
CARD

Card title

content inside card content inside card content inside card content inside card 

<div class="card">

  <header>

    <h4>Card title</h4>

  </header>

  <p>content inside card content inside 

  card content inside card content inside card </p>

  <footer class="is-right">

    <a class="button primary">Submit</a>

    <a class="button">Cancel</a>

  </footer>

</div>


HIDE ELEMENT
  • hidden - hides the element completely
  • hidden-xs - hides the element for screens <600px
  • hidden-sm - hides the element for screens >=600px and <900px
  • hidden-md - hides the element for screens >=900px and <1200px
  • hidden-lg - hides the element for screens >=1200px
  • hidden-pr - hides the element for printing


    • TAG & BADGE
    Badge.. 
    <span class=badge>Badge..</span>
    Tag.. 
    <span class=tag>Tag..</span>
    tag 
    <span class="tag" style="background:purple;color:violet">tag</span>


    TABLES Class: table,table-all,hoverable,bordered 
    <table class="table table-all hoverable bordered">
    
	<tr><td>Line1-Col1</td><td>Line1-Col2</td><td>Line1-Col3</td></tr>
    
	<tr><td>Line2-Col1</td><td>Line2-Col2</td><td>Line2-Col3</td></tr>
    
</table>
    Line1-Col1Line1-Col2Line1-Col3
    Line2-Col1Line2-Col2Line2-Col3


    BUTTON
    Default 
    <a class="button">Default</a>
    Primary 
    <a class="button primary">Primary</a>
    Secondary 
    <a class="button secondary">Secondary</a>
    Dark 
    <a class="button dark">Dark</a>
    Error 
    <a class="button error">Error</a>
    Success 
    <a class="button success">Success</a>
    Outline 
    <a class="button outline">Outline</a>
    Primary outline 
    <a class="button outline primary">Primary outline</a>
    Secondary outline 
    <a class="button outline secondary">Secondary outline</a>
    Dark outline 
    <a class="button outline dark">Dark outline</a>
    Clear 
    <a class="button clear">Clear</a>
    <button type="button" class="button primary icon">New file 
    
  <img src="https://icongr.am/feather/file.svg?size=16&color=ffffff">
    
</button>
    <button type=submit>Default button</button>


    TABS 
    <nav class="tabs is-full">
    
  <a>Tab 1</a>
    
  <a class="active">Tab 2</a>
    
  <a>Tab 3</a>
    
</nav>


    NAV 
    <nav class="nav">
    
  <div class="nav-left">
    
    <a class="brand" href="#">Brand</a>
    
    <div class="tabs">
    
      <a>Link 1</a>
    
      <a class="active">Link 2</a>
    
    </div>
    
  </div>
    
  <div class="nav-right">
    
    <a class="button outline">Button</a>
    
  </div>
    
</nav>
    
	
    <nav class="nav">
    
  <div class="nav-left">
    
    <a class="active">Link 1</a>
    
    <a>Link 2</a>
    
  </div>
    
  <div class="nav-center">
    
    <a class="brand">
    
      <img src="https://w3amp.com/logo-sm.png" alt="">
    
    </a>
    
  </div>
    
  <div class="nav-right">
    
      <a>Link 3</a>
    
      <a>L4</a>
    
  </div>
    
</nav>


    DETAIL
    Read more

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis. 

    <details>
    
    <summary>Read more</summary>
    
    <p>Lorem ipsum dolor sit amet, 
    
	consectetur adipiscing elit. 
    
	Donec viverra nec nulla vitae mollis.
    
    </p>
    
 </details>
    My Profile

    Edit

    Alerts 3

    Logout

    Login 
    <details class=dropdown>
    
<summary class="button outline">My Profile</summary>
    
<div class=card>
    
  <p><a href="#">Edit</a></p>
    
  <p><a href="#">Alerts <span class=tag>3</span></a></p>
    
  <hr/>
    
  <p><a href="#" class=text-error>Logout</a></p>
    
</div>
    
</details>
    
<details class=dropdown>
    
<summary class="button outline">Login</summary>
    
  <form class="card row">
    
   <input class=col-12 placeholder=username>
    
   <input class=col-12 placeholder=password type=password>
    
   <footer class=is-right>
    
    <a class="button clear">Sign up</a>
    
     <button type=submit>Sign in</button>
    
   </footer>
    
  </form>
    
</details>


    Responsive Grid

    Flexible grid

    A simple way to build flexible responsive columns:

    • Add a .row container
    • Add as many .col elements as you want

    Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

    <div class="row">
    
    <div class="col">
    
      <div class="card">.col</div>
    
    </div>
    
</div>
    

    
<div class="row">
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
 <div class="col">
    
	<div class="card">.col</div>
    
 </div>
    
</div>
    .col
    .col
    .col
    .col

    Sized

    You can also specify the size of the columns

    • Add a .row container
    • Add a .col-n child where n can be from 1 to 12

    Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use:
    .col-4.

    <div class="row">
    
  <div class="col-1"> .col-1 </div>
    
  <!-- repeat 11 times -->
    
</div>
    
<div class="row">
    
  <div class="col-4"> .col-4 </div>
    
  <!-- repeat twice -->
    
</div>
    
<div class="row">
    
  <div class="col-12"> .col-12 </div>
    
</div>
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-1
    .col-4
    .col-4
    .col-4
    .col-12

    Responsive grids:

    We now have responsive grids that work based on device width.

    • All columns are 100% for device width < 600px
    • .col and .col-N for all device sizes >= 600px
    • .col-N-md for >= 900px sizes
    • .col-N-lg for >= 1200px sizes
    
<div class="row">
    
<div class="col-12 col-6-md col-4-lg">
    
  <div class="card">.col-12.col-6-md.col-4-lg</div>
    
</div>
    
<div class="col-6 col-3-md col-4-lg">
    
  <div class="card">.col-6.col-3-md.col-4-lg</div>
    
</div>
    
<div class="col-6 col-3-md col-4-lg">
    
  <div class="card">.col-6.col-3-md.col-4-lg</div>
    
</div>
    
</div>
    
<div class="row">
    
<div class="col col-6-lg">
    
  <div class="card">.col.col-6-lg</div>
    
</div>
    
<div class="col col-3-lg">
    
  <div class="card">.col.col-3-lg</div>
    
</div>
    
<div class="col col-3-lg">
    
  <div class="card">.col.col-3-lg</div>
    
</div>
    
</div>
    .col-12.col-6-md.col-4-lg
    .col-6.col-3-md.col-4-lg
    .col-6.col-3-md.col-4-lg
    .col.col-6-lg
    .col.col-3-lg
    .col.col-3-lg

    Mix-n-Match

    You can use a combination of flexible and sized columns.

    When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

    <div class="row">
    
    <div class="col-2">
    
      <div class="card">.col-2</div>
    
    </div>
    
    <div class="col-2">
    
      <div class="card">.col-2</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
  </div>
    
  <div class="row">
    
    <div class="col-10">
    
      <div class="card">.col-10</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
  </div>
    
  <div class="row">
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="is-full-width"></div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
    <div class="col">
    
      <div class="card">auto</div>
    
    </div>
    
  </div>
    .col-2
    .col-2
    auto
    .col-3
    .col-10
    auto
    auto
    auto
    auto
    auto

    Reverse Direction

    Add .reverse to the .row to reverse the column direction. 

    <div class="row reverse">
    
    <div class="col-6">
    
      <div class="card">.col-6</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
    <div class="col-3">
    
      <div class="card">.col-3</div>
    
    </div>
    
</div>
    .col-6
    .col-3
    .col-3


    Ví dụ cách kết hợp class và style

    Cách viết 
    <TAG class="class1 class2 classn" style="....">HTML-Content-inside</TAG>

    Giải thích: Các tên class, có trong các ví dụ bên trên. Hoặc bạn cũng có thể tự viết CSS thêm cho trang website của mình (ở mục CSS bên cột trái trang admin).
    Ví dụ thực tế Trên cùng là mô phỏng 1 card, với màu nền mặc đinh. Giờ ta tạo ra 1 card mới: độ rộng 1/2 màn hình lớn, nền xanh, chữ vàng, font chữ K2D, kích thước font 200%.
    This is an example, made by W3AMP.com 
    <div class=row>
    
	<div class="card col-6" style="background:blue; color:yellow; font-family:K2D; font-size:200%">
    
		This is an example, made by <a href=https://w3amp.com>W3AMP.com</a>
    
	</div>
    
</div>
    Create Blog     Contact   Terms