มูลนิธิ - สไตล์สากล

ในบทนี้เราจะศึกษาเกี่ยวกับรูปแบบทั่วโลก เฟรมเวิร์ก CSS of Foundation ทั่วโลกมีการรีเซ็ตที่มีประโยชน์ซึ่งทำให้การกำหนดสไตล์สอดคล้องกันในเบราว์เซอร์

ขนาดตัวอักษร

ขนาดแบบอักษรของสไตล์ชีตของเบราว์เซอร์ถูกตั้งค่าเป็น 100% ตามค่าเริ่มต้น ขนาดตัวอักษรเริ่มต้นตั้งไว้ที่ 16 พิกเซล ขึ้นอยู่กับขนาดตัวอักษรขนาดตารางจะถูกคำนวณ หากต้องการมีขนาดตัวอักษรพื้นฐานที่แตกต่างกันและจุดพักกริดที่ไม่ได้รับผลกระทบให้ตั้งค่า$ rem-baseเป็น$ global-font-size value ซึ่งต้องเป็นพิกเซล

สี

องค์ประกอบโต้ตอบเช่นการเชื่อมโยงและปุ่มใช้เฉดสีเริ่มต้นของสีฟ้าซึ่งมาจาก SASS ตัวแปร$ หลักสี ส่วนประกอบยังสามารถมีสีเช่น: รองแจ้งเตือนความสำเร็จและการเตือน สำหรับการตรวจสอบข้อมูลเพิ่มเติมได้ที่นี่

การอ้างอิง SASS

ตัวแปร

ตารางต่อไปนี้แสดงรายการตัวแปร SASS ซึ่งใช้ในการปรับแต่งรูปแบบเริ่มต้นของส่วนประกอบในโปรเจ็กต์ _settings.scss ของคุณ

ซีเนียร์ ชื่อและคำอธิบาย ประเภท ค่าเริ่มต้น
1

$global-width

แสดงถึงความกว้างทั่วโลกของไซต์ ใช้เพื่อกำหนดความกว้างของแถวของกริด

จำนวน รี - แคล (1200)
2

$global-font-size

เพราะมันหมายถึงขนาดตัวอักษรที่ใช้กับ<html>และ<body> ตั้งค่าเป็น 100% โดยค่าเริ่มต้นและค่าการตั้งค่าเบราว์เซอร์ของผู้ใช้จะได้รับการสืบทอด

จำนวน 100%
3

$global-lineheight

แสดงถึงความสูงของบรรทัดเริ่มต้นทุกประเภท $ global-lineheightคือ 24px ในขณะที่$ global-font-sizeตั้งค่าเป็น 16px

จำนวน 1.5
4

$primary-color

ให้สีสันกับส่วนประกอบแบบโต้ตอบเช่นลิงก์และปุ่ม

สี # 2199e8
5

$secondary-color

มันจะใช้กับชิ้นส่วนที่สนับสนุน.secondaryระดับ

สี # 777
6

$success-color

เพราะมันหมายถึงสถานะในเชิงบวกหรือการกระทำเมื่อใช้กับ.successระดับ

สี # 3adb76
7

$warning-color

แสดงถึงสถานะคำเตือนหรือการดำเนินการเมื่อใช้กับคลาส. คำเตือน

สี # ffae00
8

$alert-color

แสดงสถานะหรือการกระทำเชิงลบเมื่อใช้กับคลาส . alert

สี # ec5840
9

$light-gray

ใช้สำหรับรายการ UI สีเทาอ่อน

สี # e6e6e6
10

$medium-gray

ใช้สำหรับรายการ UI สีเทากลาง

สี # คาคากา
11

$dark-gray

ใช้สำหรับรายการ UI สีเทาเข้ม

สี # 8a8a8a
12

$black

ใช้สำหรับรายการ UI สีดำ

สี # 0a0a0a
13

$white

ใช้สำหรับรายการ UI สีขาว

สี #fefefe
14

$body-background

แสดงถึงสีพื้นหลังของร่างกาย

สี สีขาว
15

$body-font-color

แสดงถึงสีข้อความของเนื้อหา

สี $ ดำ
16

$body-font-family

แสดงรายการฟอนต์ของเนื้อหา

รายการ 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

ประเภท antialiased ถูกเปิดใช้งานโดยการตั้งค่าแอตทริบิวต์นี้จะเป็นจริงโดยใช้คุณสมบัติของ CSS -webkit-ตัวอักษรให้เรียบและ-moz-OSX-ตัวอักษรให้เรียบ

บูลีน จริง
18

$global-margin

แสดงถึงค่าขอบส่วนกลางของส่วนประกอบ

จำนวน 1rem
19

$global-padding

ซึ่งแสดงถึงค่าการขยายทั่วโลกในส่วนประกอบ

จำนวน 1rem
20

$global-margin

แสดงถึงค่ามาร์จิ้นสากลที่ใช้ระหว่างส่วนประกอบ

จำนวน 1rem
21

$global-weight-normal

แสดงน้ำหนักตัวอักษรส่วนกลางสำหรับประเภทปกติ

คีย์เวิร์ดหรือตัวเลข ปกติ
22

$global-weight-bold

แสดงถึงน้ำหนักตัวอักษรส่วนกลางสำหรับตัวหนา

คีย์เวิร์ดหรือตัวเลข ตัวหนา
23

$global-radius

แสดงถึงค่าส่วนกลางขององค์ประกอบทั้งหมดที่มีรัศมีขอบ

จำนวน 0
24

$global-text-direction

กำหนดทิศทางข้อความของ CSS เป็นltrหรือrtl

ltr