Cách hack Bootstrap CSS để có trang web đẹp hơn

Bootstrap nắm giữ rất nhiều bàn tay của các nhà phát triển full-stack khi nói đến việc tạo các trang web. Rất nhiều người trong chúng ta không biết cách sử dụng Figma, không chắc về “thiết kế” tốt là gì và không thành thạo với các thuộc tính CSS.

Nhưng chết tiệt chúng ta có giỏi trong việc xây dựng lược đồ cơ sở dữ liệu, xây dựng bộ điều khiển và mô hình của chúng ta, tạo một chủ đề bootstrap mà chúng ta tìm thấy trên Google trong quan điểm của mình và gọi đó là một ngày.

Kết quả cuối cùng thường khiến một người hài lòng với hiệu quả mà họ đã tạo trang web của họ nhưng không hài lòng với kết quả .

“Có vẻ ổn nhưng không giống như trang web tuyệt vời đó của một nhà thiết kế tuyệt vời nào đó mà tôi đã thấy gần đây” - nhà phát triển full-stack nói chung.

Bài viết này là một hướng dẫn về các mẹo thiết kế hữu ích để đạt được sự hài lòng với giao diện của trang web theo chủ đề bootstrap của bạn.

Thành lập

Tôi sẽ bắt đầu với chủ đề bootstrap miễn phí này. Bây giờ chúng ta hãy cải thiện nó!

Mở rộng màu sắc của bạn

Cập nhật bảng màu của bạn

Bootstrap đi kèm với một bảng màu toàn bộ mà bạn có thể chưa biết. Hãy tận dụng lợi thế của nó để trông khác biệt so với các trang web bootstrap cắt cookie khác.

Để có quyền truy cập vào các màu này, chúng ta chỉ cần thêm chúng vào tệp bootstrap scss/_variables.scss của mình.

 $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;

Hoặc nếu bạn đang sử dụng thiết lập npm cho Bootstrap, hãy cập nhật tệp sass tùy chỉnh của bạn đã được biên dịch.

 @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";

Bây giờ chúng tôi có thể cập nhật màu xanh chính của bootstrap thô đó thành màu xanh mòng két mềm mại đẹp mắt cho nút bắt đầu của chúng tôi. Chúng tôi cũng sẽ muốn thay đổi văn bản từ màu trắng sang màu đen bằng cách loại bỏ lớp text-white trên nó. Điều này là để dễ đọc trên màu nền sáng hơn.

Thêm gợi ý màu sắc vào đầu phần anh hùng của bạn

Chúng tôi có thể thêm một đường viền nhỏ vào đầu điều hướng để mang lại sức sống thêm cho trang của chúng tôi với màu chính xanh mòng két mới thông qua đường viền chính .

Chữ

Thay đổi chiều cao dòng thành các phần tử chung

Một thay đổi nhỏ mà nhiều người không biết là giảm chiều cao dòng của bạn khi văn bản lớn hơn. Hãy ghi đè chiều cao dòng mặc định cho các phần tử HTML phổ biến trong tệp CSS của chúng tôi.

 h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 

Khoảng cách chữ được cập nhật

Các dòng tiêu đề lớn thường có quá nhiều khoảng cách giữa các chữ cái theo mặc định. Thu hẹp khoảng cách chữ cái của thẻ h1 và h2 của bạn bằng cách cập nhật tệp CSS của chúng tôi như chúng tôi đã làm đối với chiều cao dòng.

 h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 

Văn bản hỗ trợ dòng tiêu đề nặng hơn

Bây giờ chúng ta có thể củng cố văn bản hỗ trợ trong anh hùng. Sự tương phản giữa nó và thẻ H1 là cực kỳ lớn. Chúng tôi sẽ loại bỏ lớp chính và cấp cho nó một lớp fs-5 . Điều này đi kèm với trọng lượng phông chữ dày hơn.

Bản tóm tắt

Nơi chúng ta đang ở cho đến nay ...

Tôi muốn tái cấu trúc chủ đề này trong 1 bài đăng trên blog nhưng nó quá nhiều nội dung. Tôi đang chia nó thành nhiều bài báo.

Kiểm tra lại vào tuần sau cho bài viết 2 hoặc đăng ký Bản tin của tôi tại thefreelancedev.com . Tôi sẽ cập nhật phần tính năng của chủ đề và sẽ có một số mẹo 🔥 cho bạn.

Tôi cũng khuyên bạn nên xem Refactoring UI . Nó đã thay đổi hoàn toàn quan điểm của tôi về thiết kế với tư cách là một nhà phát triển.

✌️

Cũng được xuất bản ở đây .