Felix Buy

Layout

Toàn bộ layout chính được sử dụng trong template này

.content

Layout này định hình cho phần chính nội dung của toàn bộ trang web

                      <div class="content"></div>

.empty-content

Empty content là layout xử lý phần hiển thị trống dữ liệu cho trang web, được sử dụng bên trong .content. .empty-show support canh giữa màn hình hiển thị

                      <div class="content">
...
  <div class="empty-content">
    <div class="empty-show">
      <img src="../../assets/images/background-request-cash.png" class="bg-empty" />
      <p class="text-b18 text-black-darker-2">Bạn chưa có Yêu cầu báo giá nào?</p>
      <button class="btn btn-red">
        <p>Gửi yêu cầu báo giá ngay</p>
      </button>
    </div>
  </div>
</div>

.signin

Phần layout xử lý cho các trang bên ngoài trước khi đăng nhập vào website. Chúng ta có thể sử dụng .row và .col-* trong Bootstrap để chia lại layout cho phù hợp.

                      <div class="signin row">
  <div class="signin-left">...</div>
  <div class="signin-right">...</div>
</div>

.center-page

Xử lý canh giữa màn hình.

                      <div class="center-page">...</div>

Header

Header được thiết kế cho 2 loại giao diện trước và sau đăng nhập hệ thống, được bọc trong <header>...</header>

.header-outside

                      <header>
  <div class="header-outside">
  <div class="logo">
    <img src="../../assets/images/logo-felix-buy.png" />
    </div>
    <div class="more">
      <p class="text-n14">Bạn chưa có tài khoản? <a class="refer" href="./sign-up.html">Đăng ký</a></p>
    </div>
  </div>
  </header>

.header-logined

                      <header>
  <div class="header-logined">
    <a class="logo" href="./home-request-price-empty.html">
      <img src="../../assets/images/logo-felix-buy-clean.png" />
    </a>
    <div class="header-navigation">
      <div class="navigation">
        <a class="navigation-item" href="./home-request-price-empty.html">
          <span class="icons icons-ordering"></span>
          <p class="text-b14 text-black-lighter-2">Yêu cầu báo giá</p>
          <span class="line"></span>
        </a>
        <a class="navigation-item active" href="./home-manage-ordering-empty.html">
          <div class="icons icons-caring"></div>
          <p class="text-b14 text-black-lighter-2">Quản lý đơn hàng</p>
          <div class="line"></div>
        </a>
        <a class="navigation-item" href="./home-support.html">
          <div class="icons icons-support"></div>
          <p class="text-b14 text-black-lighter-2">Trợ giúp</p>
          <div class="line"></div>
        </a>
      </div>
    </div>
    <div class="header-profile">
      <div class="profile">
        <div class="profile-show dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <div class="infor">
            <p class="text-n14 text-black-lighter-2">Xin chào,</p>
            <p class="text-b14 text-black">Võ Đăng Khoa</p>
          </div>
          <div class="avatar">
            <!-- <img src="../../assets/images/default-avatar.png" /> -->
            <span class="icons icons-user icons-red">
          </div>
          <span class="ic-dropdown icons icons-arrows-down icons-black-lighter-1"></span>
        </div>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="./profile-personalization.html">
            <span class="icons icons-user icons-black-darker-2"></span>
            <span class="text-n14 text-black">Thông tin cá nhân</span>
          </a>
          <a class="dropdown-item" href="./profile-change-password.html">
            <span class="icons icons-key icons-black-darker-2"></span>
            <span class="text-n14 text-black">Đổi mật khẩu</span>
          </a>
          <a class="dropdown-item" href="./profile-manage-address-list.html">
            <span class="icons icons-address icons-black-darker-2"></span>
            <span class="text-n14 text-black">Quản lý địa chỉ</span>
          </a>
          <a class="dropdown-item text" href="./sign-in.html">
            <span class="icons icons-shutdown icons-red"></span>
            <span class="text-n14 text-red">Thoát</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

Text, Typographies and Colors stylist

Dưới đây là toàn bộ kiểu chữ, màu sắc và phông chữ được sử dụng trong template. Template hiện tại sử dụng font chữ có hỗ trợ từ Google: font-family: 'Muli', sans-serif

.text-*

Kiểu chữ phân làm 2 loại .text-b* (in đậm) và .text-n* (in thường). Cỡ chữ trong khoảng 12-36px

Text

.text-b12

Text

.text-b14

Text

.text-b16

Text

.text-b18

Text

.text-b24

Text

.text-b36

Text

.text-n12

Text

.text-n14

Text

.text-n16

Text

.text-n18

Text

.text-n24

Text

.text-n36

Color

Màu sắc cũng được phân loại và đặt tên như bên dưới. Khi sử dụng màu sắc để đánh dấu cho text, button, icon, thì ta sẽ thay class --color-* tương ứng với: text-*, btn-*, icons-*

#FFF5F3 color: var(--color-red-lighter-2)

#FFF5F3 color: var(--color-red-lighter-1)

#E24C35 color: var(--color-red)

#975F56 color: var(--color-red-darker-1)

#C2FFE9 color: var(--color-green-lighter-1)

#35E2A4 color: var(--color-green)

#4D97FF color: var(--color-blue)

#FFFFFF color: var(--color-white)

#F5F5F5 color: var(--color-black-lighter-7)

#F9F9FB color: var(--color-black-lighter-6)

#F5F6F9 color: var(--color-black-lighter-5)

#F3F3F3 color: var(--color-black-lighter-4)

#DDDDED color: var(--color-black-lighter-3)

#CACACA color: var(--color-black-lighter-2)

#5D5D5D color: var(--color-black-lighter-1)

#383838 color: var(--color-black)

#222222 color: var(--color-black-darker-1)

#000000 color: var(--color-black-darker-2)

Icons

Icons được sử dụng là trích xuất từ bản thiết kế dạng file .svg. Chúng ta sẽ sử dụng bằng cách kết hợp class .icons.icons-* như sau:

<i class="icons icons-*"></i>
<i class="icons icons-user"></i>

.icons-address

.icons-arrows-down

.icons-arrows-right

.icons-arrows-up

.icons-caring

.icons-checked

.icons-dept

.icons-double-down

.icons-email

.icons-enter

.icons-guideline

.icons-import

.icons-key

.icons-line-arrow-right

.icons-lock

.icons-lookup

.icons-mobile

.icons-notification

.icons-ordering

.icons-pencil

.icons-plus

.icons-search

.icons-shutdown

.icons-support

.icons-trash

.icons-user

.icons-user-o

.icons-warning

Accordion

Accordion được sử dụng trong trang Support

<div class="accordion" id="support">
  <!-- Card item -->
    <div class="card">
      <a class="card-header text-b14 text-black"x href="#" id="id1" data-toggle="collapse" data-target="#col1" aria-expanded="false" aria-controls="col1">
        1. Làm sao để thay đổi thông tin tài khoản? <span class="icons icons-arrows-down"></span>
      </a>
      <div id="col1" class="collapse" aria-labelledby="id1" data-parent="#support">
        <div class="card-body text-n14 text-black-lighter-1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus lacus, auctor eget viverra at, blandit at turpis. Sed congue semper tellus, non vulputate ante pulvinar id. Vestibulum urna nisi, pellentesque vitae blandit at, convallis et sapien. Sed rhoncus ligula eget rhoncus pretium. Donec iaculis finibus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur neque lectus, fermentum a felis non, rutrum sodales tortor.
        </div>
      </div>
    </div>
    <!-- ... -->
  </div>

1. Làm sao để thay đổi thông tin tài khoản?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus lacus, auctor eget viverra at, blandit at turpis. Sed congue semper tellus, non vulputate ante pulvinar id. Vestibulum urna nisi, pellentesque vitae blandit at, convallis et sapien. Sed rhoncus ligula eget rhoncus pretium. Donec iaculis finibus posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur neque lectus, fermentum a felis non, rutrum sodales tortor.

Address View

Address view

<div class="address-infor">
<!-- <div class="address-infor active"> -->  
  <div class="col-sm-10">
    <div class="address-item">
      <label class="address-title text-b14">Họ Tên*</label>
      <p class="text-n14">Võ Đăng Khoa</p>
    </div>
    <div class="address-item">
      <label class="address-title text-b14">Điện thoại*</label>
      <p class="text-n14">0968688668</p>
    </div>
    <div class="address-item">
      <label class="address-title text-b14">Địa chỉ cụ thể*</label>
      <p class="text-n14">Số 03 Nguyễn Trãi, phường 2, quận 3, TP.HCM</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="float-right">
      <button class="btn choice"><p class="text-n12">Mặc định</p></button>
      <button class="btn"><p class="text-n12">Sửa</p></button>
      <button class="btn"><p class="text-n12">Xóa</p></button>
    </div>
  </div>
</div>

Họ Tên*

Võ Đăng Khoa

Điện thoại*

0968688668

Địa chỉ cụ thể*

Số 03 Nguyễn Trãi, phường 2, quận 3, TP.HCM

Họ Tên*

Võ Đăng Khoa

Điện thoại*

0968688668

Địa chỉ cụ thể*

Số 03 Nguyễn Trãi, phường 2, quận 3, TP.HCM

Button

Button thừa kế lại các thiết kế của bootstrap 4 nên ta chỉ cần tập trung vào các thay đổi nhỏ theo bản thiết kế ban đầu về màu sắc.

<button class="btn btn-*">button</button>
<a class="btn btn-*">link</a>

<!-- Embed imgage or icon into button -->
<button class="btn">
  <img src="../../assets/images/logo-google-plus.png" />
  <p class="text-n14">Google</p>
</button>

Checkbox & Radio button

Checkbox và Radio button cũng được thay đổi lại cho phù hợp với thiết kế. Sử dụng class kết hợp .checkbox.checkbox-* và <.radio.radio-*

<!-- Checkbox -->
<div class="checkbox checkbox-*">
  <input id="checkbox6" type="checkbox" >
  <label class="text-n14 text-black-lighter-1" for="checkbox6">Ghi nhớ</label>
</div>
<!-- Radio group button -->
<div class="radio-items-group">
  <div class="radio radio-*">
    <input type="radio" name="radio2" id="radio4" value="option4" />
    <label class="text-n14" for="radio4">.radio-blue</label>
  </div>
</div>

.checkbox.checkbox-red

.checkbox.checkbox-red-darker-1

.checkbox.checkbox-green

.checkbox.checkbox-blue

.checkbox.checkbox-black

.radio-red

.radio-red-darker-1

.radio-green

.radio-blue

.radio-black

Dashboard

Dashboard sử dụng kết hợp với .list-group của Bootstrap 4 thay đổi lại phù với bản thiết kế

<div class="dashboard list-group">
  <a href="./profile-personalization.html" class="list-group-item active">
    <span class="item-label">
      <span class="icons icons-user-o"></span>Thông tin cá nhân
    </span>
    <span class="icons icons-arrows-right"></span>
  </a>
  <a href="./profile-change-password.html" class="list-group-item">
    <span class="item-label">
      <span class="icons icons-key"></span>Đổi mật khẩu
    </span>
    <span class="icons icons-arrows-right"></span>
  </a>
  <a href="./profile-manage-address-list-emtpy.html" class="list-group-item">
    <span class="item-label">
      <span class="icons icons-address"></span>Quản lý địa chỉ
    </span>
    <span class="icons icons-arrows-right"></span>
  </a>
</div>

Dash line

Dash line là một component nhỏ được xử lý trong trang đăng kí và đăng nhập.

<div class="dash-line">
  <div class="line"></div>
  <div class="label">
    <p class="text-b14 text-black-lighter-1">hoặc</p>
  </div>
</div>

Date Picker

Date Picker sử dụng library bên thứ 3 là bootstrap-datepicker để xử lý định dạng loại dữ liệu thời gian.

<div class="input-view">
  <label class="col-* col-form-label">
    <p class="float-right">Ngày sinh<span class="dot">*</span></p>
  </label>
  <div class="col-*">
    <input type="text" class="form-control datepicker" placeholder="DD/MM/YYYY" />
  </div>
</div>

Input & Input clean

Input text là mẫu component phổ biến trong các template, ở đây ta sử dụng kết hợp với .form-group .form-part để định hình form cần sử dụng.

<div class="form-group">
  ...
  <div class="form-part row">

    <!-- Clean input -->
    <div class="input-group mb-3">
      <span class="input-group-text icons icons-enter"></span>
      <input type="password" class="form-control" placeholder="Clean input" aria-label="Username" aria-describedby="basic-addon1">
    </div>

    <!-- Input view -->
    <div class="input-view">
      <label for="ipass2" class="col-sm-3 col-form-label">
        <p class="float-right">Input View<span class="dot">*</span></p>
      </label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="ipass2" placeholder="Input View">
      </div>
    </div>
  </div>
</div>

Modal View

Modal View xử lý popup sử dụng chung cho toàn bộ template

<!-- Linking to open popup by id -->
<a class="btn btn-blue" href="#" data-toggle="modal" data-target="#exampleModal">Show popup</a> 

<!-- Put modal view in the end of body tag -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content modal-view">
      <div class="modal-header">
        <p class="modal-title text-b18 text-black">Popup Title</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="text-n12 text-black-lighter-1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-red" data-dismiss="modal"><p>Button</p>
      </div>
    </div>
  </div>
</div>

Navigation

Navigation nằm ở Header có thể tuỳ ý thêm bớt dữ liệu theo màn hình, tuỳ vào nội dung mà ta muốn.

<div class="navigation">
  <a class="navigation-item" href="./home-request-price-empty.html">
    <span class="icons icons-ordering"></span>
    <p class="text-b14 text-black-lighter-2">Yêu cầu báo giá</p>
    <span class="line"></span>
  </a>
  <a class="navigation-item active" href="./home-manage-ordering-empty.html">
    <div class="icons icons-caring"></div>
    <p class="text-b14 text-black-lighter-2">Quản lý đơn hàng</p>
    <div class="line"></div>
  </a>
  <a class="navigation-item" href="./home-support.html">
    <div class="icons icons-support"></div>
    <p class="text-b14 text-black-lighter-2">Trợ giúp</p>
    <div class="line"></div>
  </a>
</div>

Forming

<div class="forming">
  <div class="forming-header">
    <p class="text-b18 text-black">Thay đổi mật khẩu</p>
    <p class="text-n14 text-black-lighter-2">Vui lòng nhập đầy đủ</p>
  </div>
  <form class="forming-body">...</form>

  <!-- Replace: <div /> -->
  <div class="forming-body">...</div>
</div>

Thay đổi mật khẩu

Vui lòng nhập đầy đủ

Mật khẩu hiện tại*

Mật khẩu mới*

Nhập lại mật khẩu mới*

Profile

<div class="profile-page">
  <aside class="profile-aside aside-dashboard">...</aside>
  <aside class="profile-aside aside-content">...</aside>
</div>

Upload Image

Upload image hỗ trợ xử lý upload ảnh từ thiết bị cá nhân của người dùng.

<div class="upload">
  <img id="show-img" class="upload-img" src="../../assets/images/default-image-upload.png" onchange="" />
  <label class="upload-label" for="uploadID">Upload</label>
  <input type="file" id="uploadID" onchange="readURL(this)" data-img="show-img"/>
</div>