# **Thống nhất và hướng dẫn UI**

UI - USER INTERFACE có nghĩa là giao người dùng, hiểu theo một cách đơn giản nhất thì UI là những gì người dùng nhìn thấy màu sắc, kích thước chữ, layout, hình ảnh... Ui đóng vai trò mạnh mẽ trong việc truyền tải các thông điệp tới người sử dụng trang web, giúp người dùng định hướng được các khu vực của web. Chung quy lại UI chính là bộ khung thiết kế của website.

[x] 1. Định hướng code UI
[x] 2. BEM là gì?
[x] 3. Giới thiệu Simple Grid
[x] 4. Vai trò của thẻ `<figure>`
[x] 5. icon được phép sử dụng trong dự án tại OSD.VN
[x] 6. Cách dùng biến ::root trong CSS
[x] 7. Tổ chức file CSS theo định hướng module
[x] 8. Mẫu HTML
[x] 9. Mẫu block chuẩn BEM
[x] 10. Tổng kết

## 1. Định hướng code UI

1 trang web cơ bản sẽ gồm các phần sau :


có 2 loại thẻ cơ bản trong lập trình giao diện website:

1. Khối đóng vai trò làm layout
2. Khối đóng vai trò quản lý nội dung

Các khối có vai trò làm layout (1) sẽ thường là các khối lớn, có định hướng rõ ràng và giúp các khối content bên trong được hiển thị theo đúng với design, ví dụ 1 số thẻ thuộc loại này: head, bod, section, div, article, header, nav...

Các loại thẻ có vai trò quản lý nội dung (2) chiếm đa số, những thẻ này diễn tả những đặc tính như thẻ strong, em, i,.... đến các thẻ có khả năng phân loại nội dung cao như p, h1, pre, abbr,...

## 2. BEM - Tại sao phải sử dụng?

Là cách đặt tên thường được sử dụng trong việc tạo giao diện website bởi tính tường minh của nó, BEM phân định rõ ràng các khối chính, khối thành phần phụ thuộc và các đặc tính đi kèm, việc khai báo này dễ hiểu nhất thì giống việc mô tả một đối tượng.

Chuẩn BEM diễn tả được hết một đối tượng và các thành phần ở bên trong nó, giúp lập trình viên dễ hiểu và fixcode nhanh chóng hơn.

## Cách đặt tên class theo chuẩn BEM

<div class="block">
    <div class="block__element block--modifier">
        <img class="block__element-img">
    </div>
</div>

**Trình bày trong CSS**

/* block là thành phần đóng vai trò Module */
.block{} 
.block .block__element{}
.block .block__element--modifier{}
.block .block__element .block__element-img{}

<!-- .block thành phần cấp to nhất của abstraction hoặc component.

.block__element thành phần con bên trong của block .block--modifier Là 1 phiên bản # của block.

ví dụ : mô tả chú robot dưới đây theo BEM


Dựa vào chuẩn BEM để mô tả chú robot

<div class="robot">

mô tả thành phần đầu của robot

<div class="robot">
	<div class="robot___head robot__head--mint"></div>
</div>

.robot__head {
    width: 100px;
    height: 50px; 
    border-radius: 15px;
}
.robot__head--mint{
	background-color:rgb(4, 240, 248);
}

<!-- **Chú ý :**

Khối block sẽ được viết đầu tiên, các thành phần con bên trong block sẽ được viết sau block và phân cách bởi 2 dấu gạch dưới "__" và thành phần đặc tả sẽ viết sau thành phần con, được phân cách bởi dấu "--"

Không được đặt một class con như sau: .robot__head__eye mà thay vào đó để miêu tả mỗi quan hệ giữa các khối và phần tử với nhau như sau .robot__head--eye. -->
<!-- ## Quy định đặt tên theo module

dành cho header:

<header class="site__header">
    <div class="header__logo">
        <a href="."><img src="logo.svg" alt="aa" /></a>
    </div>
    <nav class="header__nav">
        <ul class="nav nav--header">
            <li><a href="">Trang chủ</a></li>
            <li><a href="san-pham">Sản phẩm</a></li>
        </ul>
    </nav>
</header>

dành cho banner:

<div class="mod mod__banner">
    <div class="mod__content">
        <div class="banner">
            <h2 class="banner__title"> Lorem ipsum dolor sit amet</h2>
            <span class="banner__description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </span>
            <button type="button" class="banner__btn btn--cta">Click Me!</button>
        </div>
    </div>
</div>

dành cho các khối (product):

<div class="product">
    <figure class="product__figure">
        <img class="anh" src=".">
        <div class="product__wrapper">
            <h3 class="product__title text-uppercase product__title--color">Title product</h3>
            <span class="product-cta product--red-color">Add</span>
        </div>
    </figure>
</div>

<!-- ### header khung mẫu cơ bản

 <header class="header" id="header">
     <div class="container">
         <div class="header--top"></div>
         <nav id="nav">
             <a class="logo">
                 <img src="." alt="logo" class="logo__img">
             </a>
             <ul class="nav__inline">
                 <li>
                     <a href="#">item1</a>
                 </li>
                 <li>
                     <a href="#">item2</a>
                 </li>
                 <li>
                     <a href="#">item3</a>
                 </li>
                 <li>
                     <a href="#">item4</a>
                 </li>
                 <li>
                     <a href="#">item5</a>
                 </li>
             </ul>
         </nav>
     </div>
 </header>

### footer khung mẫu cơ bản

 <footer class="footer">
     <div class="container">

         <div class="col--12 col__md--3 col__lg--3">
                        //content
         </div>
         <div class="ccol--12 col__md--3 col__lg--3">
                        //content
         </div>
         <div class="col--12 col__md--3 col__lg--3">
                        //content
         </div>
         <div class="col--12 col__md--3 col__lg--3">
                        //content
         </div>
     </div>
 </footer>

## 3. Giới thiệu Simple Grid

Simple Grid là hệ thống css selector được xây dựng bởi các lập trình viên của OSD.VN, giúp xây dựng và quản lý giao diện dự án dễ dàng hơn.

các selector trong Simpple Grid chủ yếu gồm:

Trình bày layout: container, row, col, block,...
Trình bày content: strong, em, upper,...
Sử dụng các class bên trong file Simple Grid, ví dụ:

    <ul class="nav list--inline">
        <li>
            <a class="menu-item">Trang chủ</a>
        <li>
        <li>
            <a class="menu-item">blog</a>
        <li>
    </ul>

Chú ý đọc kĩ file Simple Grid để tận dụng tối đa hệ thống grid, hạn chế custom lại các class đã được định nghĩa.

## 4. Hình ảnh và table, video sẽ được bọc bởi thẻ Figure

<figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

<figure>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</figure>

<figure>
    <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
    </iframe>
</figure>

<figure>
  <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
  </table>
</figure>

## 5. Quy định về cách dùng icon trong các dự án tại **[OSD.VN](http://osd.vn/)**

1. Sử dụng icon có định dạng SVG
2. Không sử dụng CDN từ bên thứ 3 cung cấp
3. Icon.svg sử dụng trong dự án cần dowload lưu trữ tại máy
4. Khi bàn giao code zip toàn bộ file svg và ghi rõ lấy ở nguồn nào.

## 6. Sử dụng biến ::root
Ví dụ: Khi khai báo ở đầu file CSS.

::root {
  --border-mod-width: 1px;
  --main-color: green;
}

Thì chúng ta có thể sử dụng như sau

.mod__beseller {
    border: 1px solid var(--border--mod-width);
}

Vậy lợi ích của việc này là gì?

Là ở mỗi dự án khác nhau, người dùng có thể chỉ cần khai báo lại tham số được nêu trong `::root` thì không phải làm gì nhiều về mặt UI nữa.

<!-- **Biến toàn cục và biến cục bộ với :root**
Như ở đoạn code khai báo root ở phía trên, phạm vi sử dụng của các biến là toàn bộ dự án nhưng bạn có thể tái định nghĩa biến trong các thành phần cục bộ

:root {
  --red: red;
}
.second-box {
  
  --red: pink; /* dùng biến --red ở bên trong để ghi đè ở :root*/
  background-color: var(--red);
}

**Biến CSS hỗ trợ responsive**

:root {
  --big-title-size: 50px;
  --text-size: 16px;
  --link-size: 14px;
}
@media only screen and (max-width: 767px) {
  :root {
    --big-title-size: 30px;
    --text-size: 15px;
    --link-size: 13px;
  }
}

Đa số các trình duyệt hiện đại đã hỗ trợ biến CSS nhưng các trình duyệt như IE và Operamini thì chưa nên hãy xác định dự án có cần hiển thị trên các trình duyệt này không nhé
-->
## 7. Tổ chức file CSS theo hướng mô-đun

Do việc triển khai dự án khác nhau sẽ có nhu cầu sử dụng các mô-đun khác nhau nên việc tách vùng CSS sẽ tạo điều kiện để lập trình viên có thể giảm dung lượng file CSS.

Có 2 loại tổ chức CSS:
#### 1. CSS trong 1 file chung và đánh dấu điểm bắt đầu của mô-đun và điểm kết thúc của mô-đun. Ví dụ:

/* Start besseller */
.mod__beseller {
    border: 1px solid var(--border--mod-width);
}
/* End besseller */

<div class="mod mod__beseller">
    <div class="mod__title">
        Sản phẩm bán chạy
    </div>
    <div class="mod__content">
        <div class="product-grid product-grid__vertical">
            <div class="product">
                <figure class="product__thumb product__thumb--small">
                    <a href="#"><img class="thumb--img" alt="sản phẩm 1" /></a>
                </figure>
                <h3 class="product__title"><a href="#">Sản phẩm 1</a></h3>
                <div class="product__price">900.000 <span class="product__currency">VND</span></div>
            </div>
            <div class="product">
                <figure class="product__thumb product__thumb--small">
                    <a href="#"><img class="thumb--img" alt="sản phẩm 1" /></a>
                </figure>
                <h3 class="product__title"><a href="#">Sản phẩm 1</a></h3>
                <div class="product__price">900.000 <span class="product__currency">VND</span></div>
            </div>
        </div>
    </div>
</div>

#### 2. CSS theo từng file
Thông thường sẽ được gắn với các nghiệp vụ. Ví dụ, phần tuyển dụng tách thành job.css. Phần document tách thành doc.css

<!-- ví dụ chia folder css theo module

    |- assets/
    |- css/
    |    - simple_grid.css 
    |    - menu.css
    |    - cart.css
    |    - slide.css
    |    - product.css

## 8. Mẫu HTML page


cấu trúc cơ bản của dự án

|- assets/
|- css/
|- style.css // file chứa CSS
|- fonts/
|- images/
|- js/
|- main.js // file thực thi lệnh JS
|- index.html // file html - trang chủ của dự án

## 9. Block áp dụng chuẩn BEM

**(1)** là khu vực khai báo thành phần HTML của khối block có class là "block__example", khối này chứa 1 thẻ `<p>` có class là "block__example--content" bao bọc nội dung.
**(2)** là kết quả hiện thị thành công của khối block

## 10. Tổng kết: Thống nhất UI
**1. Mobile First**
Là khái niệm viết css cho màn hình mobile trước, sau đó mới viết cho màn hình máy tính bảng, máy tính

**2. Để ý đến khung nhìn đầu tiên:**
Khung nhìn đầu tiên là khung nhìn của người dùng mà người dùng không cần Scroll ngang hoặc scroll xuống.Thay vì việc đặt một banner quá to (và có thể ít thay đổi) thì nên thu nhỏ lại và đưa thông tin quan trọng lên. Việc này đôi khi cũng không được để ý trên mobile, một số màn hình khi vào chỉ nhìn được giao diện của tab hoặc những thông số filter, trên mobile có thể ẩn bớt một số thành phần ít quan trọng để vùng nhìn đầu tiên có thể thể hiện được nhiều thông tin quan trọng. Vùng nhìn đầu tiên còn đặt biệt quan trọng với màn hình chính.

**3. Khai báo các col chia lưới định dạng mobile đầu tiên**

 <footer>
     <div class="container">
         <div class="col--12 col__md--3 col__lg--3">
            //content
         </div>
         <div class="col--12 col__md--3 col__lg--3">
            //content
         </div>
         <div class="col--12 col__md--3 col__lg--3">
            //content
         </div>
         <div class="col--12 col__md--3 col__lg--3">
            //content
         </div>
     </div>
 </footer>

**4. Sử dụng BEM để đặt tên cho class**

<header>
    <div class="header__nav header--top">
        <img class="header__img logo--left">
        <ul class="header__nav nav--list">
            <li class="nav__item">
                <a class="nav__link"> home </a>
            </li>
            <li class="nav__item">
                <a class="nav__link"> about </a>
            </li>
        </ul>
    </div>
</header>

**5. Sử dụng các thẻ HTML5 để chia layout**

<main class="site-home">
    //nội dung chính của trang chủ
</main>

<section>
    // nội dụng khối section
</section>

<header>
    // nội dụng khối header
</header>

<footer>
    // nội dụng khối footer
</footer>

<aside>
    // nội dụng khối aside
</aside>

**6. Dùng thẻ `<figure>`** để bọc thẻ`<img>`,`<table`,`video`,`<iframe>`

**7. Tạo ra các biến CSS**
Sử dụng :root để định nghĩa các màu sắc, font chữ, ... trong trong web

::root {  
    --main-color:#ff0000;
}