giao_dien_web_mau/README.md

<h1>Hướng dẫn các bước làm dự án mẫu</h1>

<h2>Mô tả</h2>
<p>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.</p>


<h2>Hướng dẫn tạo dự án mẫu</h2>
<p>
    Quy trình:
    <ol>
        <li>Kéo tất cả file giao diện từ Repo về máy</li>
        <li>Tạo 1 folder dự án mẫu</li>
        <li>Upload code lên Repo (<a href="huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</a>)</li>
        <li>Cắt giao diện</li>
        <li>Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó</li>
    </ol>
</p>
<p>Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "<a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau" target="_blank">demo-ten_mau-stt_mau</a>" đã 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).</p>


<h2>Hướng dẫn đặt tên</h2>
<p>Mỗi thư mục sẽ đặt tên theo quy định: <strong>demo-tên_mẫu-số_thứ_tự_mẫu</strong>. 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 </p>
<p>VD: Giao diện mẹ và bé, mẫu 2 </p> 
<ul>
    <li>Tên folder: <strong>demo-mevabe-2</strong></li>
    <li>Mô tả: <a href="https://mevabe8.hurasoft.com/?show_template=mau_2">https://mevabe8.hurasoft.com/?show_template=mau_2</a></li>
</ul>


<h2>Quy định cấu trúc</h2>
<p>Cấu trúc 1 dự án mẫu sẽ bao gồm các thư mục con:</p>

<ul>
    <li>
        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/images" style="font-weight: bold;" target="_blank">images</a> : 
        <ul>
            <li>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,...)</li>
            <li>Kích thước mỗi ảnh icon khi export từ figma sẽ lấy kích thước <strong>x2</strong> (Để khi sử dụng ở mobile không bị vỡ nét)</li>
            <li>Sau đó sẽ gộp chung các ảnh icon thành 1 ảnh lớn</li>
            <li>
                <p>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: </p>
                <p>VD: ảnh có kích thước 500x500, vị trí hiển thị icon là: x = -200px, y = 0<br/>
                    <strong>.icons {background: url(../images/sprite.png) no-repeat;background-size: 250px 250px;}</strong><br/>
                    <strong>.icons.icon-search{background-position: -200px 0;}</strong>
                </p>
            </li>
        </ul>
    </li>

   <li>
        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/js" style="font-weight: bold;" target="_blank">js</a>: 
        <ul>
            <li>Chứa các file JS sử dụng cho dự án.</li>
            <li>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à <strong>library.js</strong> </li>
        </ul>
    </li>

   <li>
        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/scss" style="font-weight: bold;" target="_blank">scss</a> :
        <ul>
            <li>Chứa các file CSS sử dụng cho dự án.</li>
            <li>Sử dụng SASS để viết CSS</li>
            <li>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à <strong>library.css</strong></li>
        </ul>
    </li>

   <li>
        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/index.html" style="font-weight: bold;" target="_blank">index.html</a>: 
        <ul>
            <li>Là file HTML</li>
            <li>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</li>            
        </ul>
    </li>
</ul>

<h2>Hướng dẫn đặt tên class</h2>
<p>Ở 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 </p>
<p>VD: Style menu ở header css sẽ viết theo => .global-header .menu {....} </p>
<ul>
    <li>Header: <strong>class="global-header"</strong></li>
    <li>Footer: <strong>class="global-footer"</strong></li>
    <li>Trang chủ : <strong>class="homepage"</strong> </li>
    <li>Danh sách sản phẩm : <strong>class="product-page"</strong> </li>
    <li>Chi tiết sản phẩm : <strong>class="product-detail-page"</strong> </li>
    <li>Giỏ hàng : <strong>class="cart-page"</strong> </li>
    <li>Tin tức : <strong>class="article-page"</strong> </li>
    <li>Chi tiết tin tức : <strong>class="article-page article-detail-page"</strong> </li>
</ul>

<h2 id="huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</h2>
<p> Các bước up code:
    <ol>
        <li>Lấy tất cả code từ git url về máy</li>
        <li>Kiểm tra trạng thái</li>
        <li>Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)</li>
        <li>Tạo ghi chú (Không viết tiếng việt có dấu)</li>
        <li>Upload code</li>
    </ol>
</p>

<p></p>

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

<p>VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git', Thêm/Sửa file README.md</p>
<ol>
    <li>git pull https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git master</li>
    <li>git status</li>
    <li>git add 'README.md'</li>
    <li>git commit -m 'Huong dan, quy dinh'</li>
    <li>git push origin master</li>    
</ol>