มูลนิธิ - ผู้ช่วยวิชาการพิมพ์
ในบทนี้เราจะศึกษาเกี่ยวกับ Typography Helpers. ตัวช่วยการพิมพ์ใช้เพื่อจัดรูปแบบข้อความของคุณในรูปแบบที่เกี่ยวข้องกับความหมาย คลาส Helper ใน Foundation ช่วยให้คุณนั่งร้านรูปแบบการพิมพ์ได้เร็วขึ้น
ตารางต่อไปนี้แสดงรายการตัวช่วยในการพิมพ์ซึ่งใช้ใน Foundation
| ซีเนียร์ | ตัวช่วยพิมพ์และคำอธิบาย |
|---|---|
| 1 | การจัดตำแหน่งข้อความ ซึ่งจะช่วยในการเปลี่ยนแปลงการจัดตำแหน่งข้อความองค์ประกอบเช่นซ้าย , ขวา , ศูนย์และปรับ |
| 2 | ส่วนหัวย่อย สามารถเพิ่มส่วนหัวย่อยให้กับองค์ประกอบส่วนหัวใดก็ได้โดยใช้คลาส. Subheader |
| 3 | วรรคนำ เป็นกลุ่มข้อความที่ใหญ่กว่ามากเมื่อเทียบกับข้อความปกติซึ่งสามารถใช้สำหรับการโฆษณาหรือข้อความอธิบายอื่น ๆ |
| 4 | Un-bulleted List ตามค่าเริ่มต้น<ul>คือรายการหัวข้อย่อยใน Foundation หากต้องการลบสัญลักษณ์แสดงหัวข้อย่อยคุณสามารถใช้คลาส. no-bullet |
| 5 | สถิติ เมื่อใดก็ตามที่คุณจัดการกับแดชบอร์ดคุณต้องเน้นตัวเลขที่สำคัญบางอย่าง คุณสามารถบรรลุสิ่งนี้ได้โดยใช้คลาส. stat |
การอ้างอิง Sass
ตัวแปร
ตารางต่อไปนี้แสดงรายการตัวแปร SASS ในไฟล์การตั้งค่าของโปรเจ็กต์ที่ทำให้สไตล์เริ่มต้นของคอมโพเนนต์ได้รับการปรับแต่ง
| ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 | $lead-font-size ขนาดแบบอักษรสำหรับย่อหน้านำตามค่าเริ่มต้น |
จำนวน | $ global-font-size * 1.25 |
| 2 | $lead-lineheight ความสูงของบรรทัดสำหรับย่อหน้านำโดยค่าเริ่มต้น |
สตริง | 1.6 |
| 3 | $subheader-lineheight ความสูงของบรรทัดเริ่มต้นของส่วนหัวย่อย |
จำนวน | 1.4 |
| 4 | $subheader-color สีแบบอักษรเริ่มต้นของส่วนหัวย่อย |
สี | เทาเข้ม |
| 5 | $subheader-font-weight น้ำหนักตัวอักษรเริ่มต้นของส่วนหัวย่อย |
สตริง | $ global-weight-normal |
| 6 | $subheader-margin-top ระยะขอบบนเริ่มต้นของส่วนหัวย่อย |
จำนวน | 0.2rem |
| 7 | $subheader-margin-bottom ขอบล่างเริ่มต้นของส่วนหัวย่อย |
จำนวน | 0.5rem |
| 8 | $stat-font-size ขนาดตัวอักษรเริ่มต้นของหมายเลขคงที่ |
จำนวน | 2.5rem |