Bricks

Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.

Design

Màu sắc

Accent: #ff0000 Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);

Font

Font toàn trang là Play (Google Fonts).

Cách setup:

• Edit 1 page bất kỳ (trang chủ)
• Click icon Settings > Font Manager
• Chọn Google Fonts > tìm font Play > Add to Favorites
• Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).

Cách setup font cho các element:

• Edit 1 page bất kỳ (trang chủ)
• Click icon Settings > Style Manager > Tạo 1 style là DongA
• Chỉnh sửa các style cho body, h1, h2, ...

Elements

Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager

• Button

Class chung

.text-gradient: chữ màu đồng gradient .section-border: có border gradient cuối section .bg-gradient: background màu đồng gradient .image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure. .center-x: căn giữa theo chiều ngang .slide-arrows: để style 2 nút prev/next của slider .border-gradient: làm border gradient màu đồng

Bricks

Settings:

• Disable Bricks Open Graph meta tags
• Disable Bricks SEO meta tags
• Disable "Skip links"
• Smooth scroll (CSS)

Notes

• LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:
  • section: dùng cho các
    (semantic), như ở trang chủ
  • block: tương đương với flex wrapper, dùng cho các block nhỏ
  • div: thẻ div thường
  • container: có container width cho content
• Đối với slider, phân biệt các element sau:
  • Slider: bản cũ, không nên dùng vì tuỳ biến ít
  • Carousel: cũng khó tuỳ biến các element bên trong
  • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
• Social icons: ở trong footer, dùng element button + svg
• Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
• Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
• Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
• Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...

Chỉnh sửa khác so với design:

Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:

• Container: 1440px => 1110px (mặc định của Bricks)
• Body: 20px => 16px
• h1 (trên banner): 64px => 48px
• h2 (title section, gradient): 48px => 36px
• h3 (tên công ty con): 36px => 24px