Foundation - Phong cách Toàn cầu
Trong chương này, chúng ta sẽ nghiên cứu về Phong cách toàn cầu . Khung CSS toàn cầu của Foundation bao gồm các thiết lập lại hữu ích giúp đảm bảo kiểu dáng nhất quán trên các trình duyệt.
Định cỡ phông chữ
Kích thước phông chữ của biểu định kiểu trình duyệt được đặt thành 100% theo mặc định. Kích thước phông chữ mặc định được đặt thành 16 pixel. Tùy thuộc vào kích thước phông chữ, kích thước lưới được tính toán. Để có kích thước phông chữ cơ sở riêng biệt và các điểm ngắt lưới không bị ảnh hưởng, hãy đặt giá trị $ rem-base thành $ global-font-size , giá trị này phải bằng pixel.
Màu sắc
Các phần tử tương tác như liên kết và nút sử dụng màu xanh lam mặc định lấy từ biến SASS $ primary-color . Các thành phần cũng có thể có các màu như: thứ cấp, cảnh báo, thành công và cảnh báo . Để biết thêm thông tin kiểm tra tại đây .
Tham chiếu SASS
Biến
Bảng sau liệt kê các biến SASS, được sử dụng để tùy chỉnh kiểu mặc định của các thành phần trong dự án _settings.scss của bạn .
| Sr.No. | Tên & Mô tả | Kiểu | Giá trị mặc định |
|---|---|---|---|
| 1 | $global-width Nó thể hiện chiều rộng toàn cầu của trang web. Được sử dụng để xác định chiều rộng hàng của lưới. |
Con số | rem-calc (1200) |
| 2 | $global-font-size Nó đại diện cho kích thước phông chữ được áp dụng cho <html> và <body> . Nó được đặt 100% theo mặc định và giá trị cài đặt trình duyệt của người dùng sẽ được kế thừa. |
Con số | 100% |
| 3 | $global-lineheight Nó đại diện cho tất cả các loại chiều cao dòng mặc định. $ global-lineheight là 24px trong khi $ global-font-size được đặt thành 16px. |
Con số | 1,5 |
| 4 | $primary-color Nó mang lại màu sắc cho các thành phần tương tác như liên kết và nút. |
Màu sắc | # 2199e8 |
| 5 | $secondary-color Nó được sử dụng với các thành phần hỗ trợ lớp .secondary . |
Màu sắc | # 777 |
| 6 | $success-color Nó đại diện cho trạng thái hoặc hành động tích cực khi được sử dụng với lớp .success . |
Màu sắc | # 3adb76 |
| 7 | $warning-color Nó thể hiện trạng thái hoặc hành động thận trọng khi được sử dụng với lớp .warning . |
Màu sắc | # ffae00 |
| số 8 | $alert-color Nó thể hiện một trạng thái hoặc hành động tiêu cực khi được sử dụng với lớp .alert . |
Màu sắc | # ec5840 |
| 9 | $light-gray Nó được sử dụng cho các mục giao diện người dùng màu xám nhạt. |
Màu sắc | # e6e6e6 |
| 10 | $medium-gray Nó được sử dụng cho các mục giao diện người dùng màu xám trung bình. |
Màu sắc | #cacaca |
| 11 | $dark-gray Nó được sử dụng cho các mục giao diện người dùng màu xám đậm. |
Màu sắc | # 8a8a8a |
| 12 | $black Nó được sử dụng cho các mục giao diện người dùng màu đen. |
Màu sắc | # 0a0a0a |
| 13 | $white Nó được sử dụng cho các mục giao diện người dùng màu trắng. |
Màu sắc | #fefefe |
| 14 | $body-background Nó đại diện cho màu nền của cơ thể. |
Màu sắc | $ trắng |
| 15 | $body-font-color Nó thể hiện màu văn bản của phần thân. |
Màu sắc | $ đen |
| 16 | $body-font-family Nó đại diện cho danh sách các phông chữ của phần thân. |
Danh sách | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased Loại chống răng cưa được bật bằng cách đặt thuộc tính này thành true bằng cách sử dụng các thuộc tính CSS -webkit-font-smoothing và -moz-osx-font-smoothing . |
Boolean | thật |
| 18 | $global-margin Nó đại diện cho giá trị ký quỹ toàn cầu trên các thành phần. |
Con số | 1rem |
| 19 | $global-padding Nó đại diện cho giá trị đệm toàn cầu trên các thành phần. |
Con số | 1rem |
| 20 | $global-margin Nó đại diện cho giá trị ký quỹ toàn cầu được sử dụng giữa các thành phần. |
Con số | 1rem |
| 21 | $global-weight-normal Nó đại diện cho trọng lượng phông chữ toàn cầu cho loại bình thường. |
Từ khoá hoặc Số | bình thường |
| 22 | $global-weight-bold Nó đại diện cho trọng lượng phông chữ toàn cầu cho kiểu in đậm. |
Từ khoá hoặc Số | Dũng cảm |
| 23 | $global-radius Nó đại diện cho giá trị toàn cầu của tất cả các phần tử có bán kính đường viền. |
Con số | 0 |
| 24 | $global-text-direction Nó đặt hướng văn bản của CSS thành ltr hoặc rtl |
ltr |