Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "demo-ten_mau-stt_mau" đã tạo ở trên (Download folder mẫu về, chỉnh sửa các thông tin theo quy định và cắt ghép).

Quy định cấu trúc

Cấu trúc 1 dự án mẫu sẽ bao gồm các thư mục con:

images :
- Chứa tất cả ảnh sử dụng cho dự án. Quy định về ảnh: Tất cả các ảnh icons (icon search, icon menu,...)
- Kích thước mỗi ảnh icon khi export từ figma sẽ lấy kích thước x2 (Để khi sử dụng ở mobile không bị vỡ nét)
- Sau đó sẽ gộp chung các ảnh icon thành 1 ảnh lớn
- Trong file CSS sẽ tạo 1 class chứa ảnh ở trên, background-size sẽ giảm 50% để hiển thị chính xác kích thước của icon. Khi sử dụng sẽ bắt theo tọa độ ảnh:
  
  VD: ảnh có kích thước 500x500, vị trí hiển thị icon là: x = -200px, y = 0
  .icons {background: url(../images/sprite.png) no-repeat;background-size: 250px 250px;}
  .icons.icon-search{background-position: -200px 0;}
js:
- Chứa các file JS sử dụng cho dự án.
- Các plugin hiệu ứng, code js có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án (vd: tắt/bật xem thêm nội dung, tìm kiếm,....) sẽ gộp chung vào 1 file, đặt tên là library.js
scss :
- Chứa các file CSS sử dụng cho dự án.
- Sử dụng SASS để viết CSS
- Các style có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án sẽ gộp chung vào 1 file, đặt tên là library.css
index.html:
- Là file HTML
- Có thể chia nhỏ thành nhiều file sử dụng cho từng giao diện (VD: homepage.html, category.html,...) hoặc gộp chung tất cả code HTML vào 1 file

Hướng dẫn đặt tên class

Ở mỗi trang sẽ bọc 1 thẻ chứa class là tên gọi của trang đó. Style css sẽ bắt theo class bọc ngoài cùng để tránh lỗi giao diện ở các trang khác. Độ sâu tối đa của style từ 2 -> 3 cấp

VD: Style menu ở header css sẽ viết theo => .global-header .menu {....}

Header: class="global-header"
Footer: class="global-footer"
Trang chủ : class="homepage"
Danh sách sản phẩm : class="product-page"
Chi tiết sản phẩm : class="product-detail-page"
Giỏ hàng : class="cart-page"
Tin tức : class="article-page"
Chi tiết tin tức : class="article-page article-detail-page"

Hướng dẫn up code sử dụng git

Các bước up code:

Lấy tất cả code từ git url về máy
Kiểm tra trạng thái
Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)
Tạo ghi chú (Không viết tiếng việt có dấu)
Upload code

git pull (git URL) master: Lấy code về máy
git status: Kiểm tra file nào có sự thay đổi
git add 'tên file có sự thay đổi': Là file được báo đỏ ở git status
git commit -m 'nội dung mô tả' : Comment nội dung
git push origin master : Upload code

VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git', Thêm/Sửa file README.md

git pull https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git master
git status
git add 'README.md'
git commit -m 'Huong dan, quy dinh'
git push origin master