Hướng dẫn các bước làm dự án mẫu

Mô tả

Là nơi tổng hợp các giao diện mẫu (HTML, CSS, JS) để tham khảo, sử dụng cho các dự án.

Hướng dẫn tạo dự án mẫu

Quy trình:

1. Kéo tất cả file giao diện từ Repo về máy
2. Tạo 1 folder dự án mẫu
3. Upload code lên Repo (Hướng dẫn up code sử dụng git)
4. Cắt giao diện
5. Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó

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).

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

Mỗi thư mục sẽ đặt tên theo quy định: demo-tên_mẫu-số_thứ_tự_mẫu. Mô tả của thư mục sẽ là URL dẫn đến giao diện đã được cắt ghép hoàn chỉnh

VD: Giao diện mẹ và bé, mẫu 2

• Tên folder: demo-mevabe-2
• Mô tả: https://mevabe8.hurasoft.com/?show_template=mau_2

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:

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

1. git pull (git URL) master: Lấy code về máy
2. git status: Kiểm tra file nào có sự thay đổi
3. git add 'tên file có sự thay đổi': Là file được báo đỏ ở git status
4. git commit -m 'nội dung mô tả' : Comment nội dung
5. 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

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