มูลนิธิ - คู่มือฉบับย่อ

Foundation คืออะไร?

Foundation เป็นหนึ่งใน front-end framework ขั้นสูงสำหรับการออกแบบเว็บไซต์ที่ตอบสนองอย่างสวยงาม ทำงานบนอุปกรณ์ทุกประเภทและมีปลั๊กอิน HTML, CSS และ JavaScript

Foundation เริ่มต้นด้วยการแนะนำรูปแบบภายในซึ่งสร้างโดย ZURB ในปี 2008 ZURB เป็น บริษัท ออกแบบผลิตภัณฑ์ในแคมป์เบลล์แคลิฟอร์เนีย เปิดตัว Foundation 2.0 เป็นโอเพ่นซอร์สในเดือนตุลาคม 2554 Foundation เวอร์ชันล่าสุดคือ 6.1.1 วางจำหน่ายในเดือนธันวาคม 2558

ทำไมต้องใช้ Foundation?

ให้การพัฒนาที่เร็วขึ้นโดยใช้คอมไพเลอร์ Sass ซึ่งทำงานได้เร็วกว่าคอมไพเลอร์เริ่มต้นมาก
เพิ่มคุณค่าให้เว็บไซต์ของคุณด้วยตารางราคาสวิตช์จอยไรด์ตัวเลื่อนช่วงไลท์บ็อกซ์และอื่น ๆ อีกมากมาย
มาพร้อมกับแพ็คเกจการพัฒนาเช่น Grunt และ Libsass เพื่อการเข้ารหัสและการควบคุมที่เร็วขึ้น
Foundation for sites ช่วยให้คุณมี HTML, CSS และ JS เพื่อสร้างเว็บไซต์ได้อย่างรวดเร็ว
เฟรมเวิร์กอีเมลให้อีเมล HTML ที่ตอบสนองซึ่งสามารถอ่านได้บนอุปกรณ์ใดก็ได้
Foundation for Apps ช่วยให้คุณสร้างเว็บแอปที่ตอบสนองได้อย่างสมบูรณ์

คุณสมบัติ

มีระบบกริดที่ทรงพลังและส่วนประกอบ UI ที่มีประโยชน์และปลั๊กอิน JavaScript ที่ยอดเยี่ยม
มีการออกแบบที่ตอบสนองซึ่งรองรับอุปกรณ์ทุกประเภท
ได้รับการปรับให้เหมาะสมสำหรับอุปกรณ์พกพาและรองรับแนวทางแรกของมือถืออย่างแท้จริง
มีเทมเพลต HTML ซึ่งปรับแต่งได้และขยายได้

ข้อดี

เป็นเรื่องง่ายที่จะเรียนรู้เมื่อคุณมีความเข้าใจพื้นฐานเกี่ยวกับ HTML และ CSS
คุณสามารถใช้ Foundation ได้อย่างอิสระเนื่องจากเป็นโอเพ่นซอร์ส
มีเทมเพลตมากมายให้คุณซึ่งจะช่วยให้คุณเริ่มพัฒนาเว็บไซต์ได้ทันที
Foundation รองรับพรีโปรเซสเซอร์เช่น SASS และ Compass ซึ่งทำให้การพัฒนาเร็วขึ้น

ข้อเสีย

เนื่องจากความนิยมของ Twitter Bootstrap การสนับสนุนของชุมชนสำหรับ Twitter Bootstrap จึงดีกว่า Foundation
อาจต้องใช้เวลาสักระยะสำหรับผู้เริ่มต้นในการเรียนรู้และใช้ประโยชน์จากการสนับสนุนของตัวประมวลผลล่วงหน้า
ขาดการสนับสนุนที่กว้างขึ้นเช่นไซต์ QA และฟอรัมสำหรับการแก้ไขปัญหา
มูลนิธิมีธีมน้อยกว่าเมื่อเทียบกับคนอื่น ๆ

ในบทนี้เราจะพูดถึงวิธีการติดตั้งและใช้งาน Foundation บนเว็บไซต์

ดาวน์โหลด Foundation

เมื่อคุณเปิดลิงค์foundation.zurb.comคุณจะเห็นหน้าจอดังที่แสดงด้านล่าง -

คลิก Download Foundation 6 คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าอื่น

คุณจะเห็นปุ่มสี่ปุ่ม -

Download Everything - คุณสามารถดาวน์โหลด Foundation เวอร์ชันนี้ได้หากต้องการมีทุกอย่างในเฟรมเวิร์กเช่น vanilla CSS และ JS
Download Essentials - จะดาวน์โหลดเวอร์ชันง่าย ๆ ซึ่งรวมถึงกริดปุ่มตัวอักษรและอื่น ๆ
Custom Download - สิ่งนี้จะดาวน์โหลดไลบรารีที่กำหนดเองสำหรับ Foundation ซึ่งรวมถึงองค์ประกอบและกำหนดขนาดของคอลัมน์ขนาดตัวอักษรสี ฯลฯ
Install via SCSS - จะนำคุณไปยังหน้าเอกสารเพื่อติดตั้ง Foundation for sites

คุณสามารถคลิกไฟล์ Download Everythingปุ่มเพื่อรับทุกอย่างในกรอบเช่น CSS และ JS เนื่องจากไฟล์ประกอบด้วยทุกสิ่งในเฟรมเวิร์กดังนั้นทุกครั้งที่คุณไม่จำเป็นต้องรวมไฟล์แยกต่างหากสำหรับแต่ละฟังก์ชัน ในขณะที่เขียนบทช่วยสอนนี้ได้ดาวน์โหลดเวอร์ชันล่าสุด (Foundation 6)

โครงสร้างไฟล์

เมื่อดาวน์โหลด Foundation แล้วให้แตกไฟล์ ZIP และคุณจะเห็นโครงสร้างไฟล์ / ไดเร็กทอรีต่อไปนี้ -

อย่างที่คุณเห็นมี CSS และ JS ที่คอมไพล์แล้ว (foundation. *) รวมถึง CSS และ JS ที่คอมไพล์แล้วและย่อขนาด (foundation.min. *)

เรากำลังใช้ไลบรารีเวอร์ชัน CDN ตลอดบทช่วยสอนนี้

เทมเพลต HTML

เทมเพลต HTML พื้นฐานโดยใช้ Foundation ดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

ส่วนต่อไปนี้อธิบายรหัสข้างต้นโดยละเอียด

ประเภท HTML5

Foundation ประกอบด้วยองค์ประกอบ HTML และคุณสมบัติ CSS บางอย่างที่ต้องใช้หลักประเภท HTML5 ดังนั้นควรรวมรหัสต่อไปนี้สำหรับ HTML5 Doctype ไว้ที่จุดเริ่มต้นของโครงการทั้งหมดของคุณโดยใช้ Foundation

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

ช่วยให้ตอบสนองต่ออุปกรณ์เคลื่อนที่ คุณต้องรวมไฟล์viewport meta tag ไปยังองค์ประกอบ <head> เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและการซูมด้วยการสัมผัสบนอุปกรณ์เคลื่อนที่

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

คุณสมบัติความกว้างควบคุมความกว้างของอุปกรณ์ การตั้งค่าเป็นความกว้างของอุปกรณ์จะทำให้แน่ใจว่าแสดงผลในอุปกรณ์ต่างๆ (โทรศัพท์มือถือเดสก์ท็อปแท็บเล็ต ... ) อย่างถูกต้อง
initial-scale = 1.0ช่วยให้มั่นใจได้ว่าเมื่อโหลดแล้วหน้าเว็บของคุณจะแสดงผลที่มาตราส่วน 1: 1 และจะไม่มีการซูมออกนอกกรอบ

การเริ่มต้นส่วนประกอบ

จำเป็นต้องใช้สคริปต์ jQuery ใน Foundation สำหรับคอมโพเนนต์เช่น modals และ dropdown

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

เอาต์พุต

ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -

บันทึกรหัส html ที่กำหนดไว้ข้างต้น firstexample.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์จะแสดงดังที่แสดงด้านล่าง

คุณสามารถเริ่มต้นด้วยการพัฒนาโครงการของคุณด้วยเทมเพลตที่มีอยู่ซึ่งสามารถติดตั้งผ่านYeti LaunchหรือFoundation CLI. คุณสามารถเริ่มต้นด้วยโครงการใหม่โดยใช้เทมเพลตเหล่านี้โดยใช้ระบบGulp build สำหรับการประมวลผล Sass, JavaScript, การคัดลอกไฟล์เป็นต้น

เทมเพลตพื้นฐาน

เทมเพลตพื้นฐานคือเทมเพลต SASS ซึ่งรวมถึงโครงสร้างไดเรกทอรีแบบแบนและรวบรวมเฉพาะไฟล์ SASS และเป็นการดีที่จะมีเทมเพลตแบบง่ายนี้ในขณะที่ใช้ SASS เท่านั้น คุณสามารถใช้แม่แบบพื้นฐานได้โดยใช้ Yeti Launch หรือใช้ Foundation CLI โดยใช้คำสั่งต่อไปนี้ -

$ foundation new --framework sites --template basic

การตั้งค่านี้เป็นครั้งแรกเรียกใช้NPM ติดตั้ง , ซุ้มติดตั้งและใช้งานเริ่มต้น NPMคำสั่งเพื่อเรียกใช้งาน นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์แม่แบบจากGithub

เทมเพลต ZURB

เป็นการผสมผสานระหว่าง CSS / SCSS, JavaScript, เทมเพลต Handlebars, โครงสร้างมาร์กอัป, การบีบอัดภาพและใช้การประมวลผล SASS คุณสามารถใช้เทมเพลต ZURB โดยใช้Yeti Launchหรือใช้Foundation CLIโดยใช้คำสั่งด้านล่าง -

$ foundation new --framework sites --template zurb

ในการเรียกใช้เทมเพลตนี้ให้ทำตามขั้นตอนเดียวกับที่ระบุในเทมเพลตพื้นฐาน นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์แม่แบบจากGithub

การคัดลอกเนื้อหา

คุณสามารถคัดลอกเนื้อหาในโฟลเดอร์src / assetsโดยใช้Gulpซึ่งเนื้อหาจะเป็นโฟลเดอร์โครงการของคุณ สิ่งสำคัญคือไฟล์ SASS ไฟล์ JavaScript และรูปภาพจะไม่อยู่ในขั้นตอนการคัดลอกเนื้อหานี้เนื่องจากจะมีกระบวนการของตนเองในการคัดลอกเนื้อหา

การรวบรวมเพจ

คุณสามารถสร้างหน้าเว็บ HTML ภายใต้สามโฟลเดอร์คือหน้า , รูปแบบและpartialsซึ่งอยู่ภายในsrc /ไดเรกทอรี คุณสามารถใช้คอมไพเลอร์ไฟล์ Flat Paniniที่สร้างเลย์เอาต์สำหรับเพจโดยใช้เทมเพลตเพจบางส่วน HTML กระบวนการนี้สามารถทำได้โดยใช้ภาษาเท็มเพลตของ Handlebars

การรวบรวม SASS

คุณสามารถคอมไพล์ SASS เป็น CSS โดยใช้Libsassและไฟล์ SASS หลักจะถูกเก็บไว้ในsrc / assets / scss / app.scssและส่วน SASS ที่สร้างขึ้นใหม่จะถูกเก็บไว้ในโฟลเดอร์นี้เอง ผลลัพธ์ของ CSS จะเหมือนกับ CSS ปกติซึ่งอยู่ในลักษณะซ้อนกัน คุณสามารถบีบอัด CSS กับการทำความสะอาด CSSและลบ CSS ไม่ได้ใช้จากสไตล์การใช้UnCSS

การคอมไพล์ JavaScript

ไฟล์ JavaScript จะถูกเก็บไว้ในโฟลเดอร์src / assets / jsพร้อมกับ Foundation และการอ้างอิงทั้งหมดจะเชื่อมโยงเข้าด้วยกันเป็นไฟล์app.js ไฟล์จะถูกผูกเข้าด้วยกันตามที่ระบุไว้ในลำดับด้านล่าง -

การพึ่งพามูลนิธิ
ไฟล์จะถูกเก็บไว้ในโฟลเดอร์src / assets / js
ไฟล์จะถูกรวมเข้าไว้ในแฟ้มเรียกว่าเป็นหนึ่งapp.js

การบีบอัดภาพ

ตามค่าเริ่มต้นรูปภาพทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์assets / imgภายใต้โฟลเดอร์dist คุณสามารถบีบอัดรูปภาพในขณะที่สร้างสำหรับการผลิตโดยใช้gulp-imageminซึ่งรองรับไฟล์ JPEG, PNG, SVG และ GIF

BrowserSync

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

คำอธิบาย

ประกอบด้วยองค์ประกอบพื้นฐานเพื่อให้ทำงานกับเว็บแอปพลิเคชันได้อย่างราบรื่น ตารางต่อไปนี้แสดงส่วนประกอบของมูลนิธิ -

ซีเนียร์	ส่วนประกอบและคำอธิบาย
1	หีบเพลง Accordions มีแท็บแนวตั้งซึ่งใช้ในเว็บไซต์เพื่อขยายและยุบข้อมูลจำนวนมาก
2	เมนูหีบเพลง จะแสดงเมนูที่ยุบได้พร้อมเอฟเฟกต์หีบเพลง
3	ตรา ป้ายจะคล้ายกับป้ายกำกับซึ่งใช้เพื่อเน้นข้อมูลเช่นบันทึกย่อและข้อความที่สำคัญ
4	เกล็ดขนมปัง ระบุตำแหน่งปัจจุบันสำหรับไซต์ภายในลำดับชั้นการนำทาง
5	ปุ่มต่างๆ Foundation รองรับปุ่มมาตรฐานที่มีสไตล์แตกต่างกัน
6	โทรออก คำบรรยายภาพเป็นองค์ประกอบที่สามารถใช้เพื่อวางเนื้อหาภายใน
7	ปุ่มปิด ใช้เพื่อปิดกล่องแจ้งเตือน
8	เมนูเจาะลึก เมนูเจาะลึกเปลี่ยนรายการที่ซ้อนกันเป็นเมนูเจาะลึกแนวตั้ง
9	เมนูแบบเลื่อนลง เมนูแบบเลื่อนลงใช้สำหรับแสดงลิงก์ในรูปแบบรายการ
10	บานหน้าต่างแบบเลื่อนลง บานหน้าต่างแบบเลื่อนลงจะแสดงเนื้อหาเมื่อคุณคลิกปุ่ม
11	วิดีโอแบบยืดหยุ่น ใช้เพื่อสร้างออบเจ็กต์วิดีโอในหน้าเว็บ
12	ชั้นลอย ใช้เพื่อเพิ่มคลาสยูทิลิตี้ให้กับองค์ประกอบ HTML
13	แบบฟอร์ม ใช้เพื่อสร้างเค้าโครงฟอร์มเพื่อรวบรวมอินพุตของผู้ใช้
14	ฉลาก ป้ายกำกับเป็นรูปแบบอินไลน์ซึ่งกำหนดป้ายกำกับสำหรับองค์ประกอบอินพุต
15	วัตถุสื่อ ใช้เพื่อเพิ่มวัตถุสื่อเช่นรูปภาพวิดีโอบล็อกความคิดเห็นเป็นต้นซึ่งสามารถวางไว้ทางซ้ายหรือขวาของบล็อกเนื้อหา
16	เมนู ให้การเข้าถึงโหมดต่างๆในเว็บไซต์
17	เลขหน้า เป็นการนำทางประเภทหนึ่งที่แบ่งเนื้อหาออกเป็นชุดของหน้าที่เกี่ยวข้อง
18	ตัวเลื่อน ระบุช่วงของค่าโดยการลากที่จับ
19	สวิตซ์ ใช้เพื่อสลับระหว่างสถานะเปิดและปิด
20	ตาราง แสดงข้อมูลในรูปแบบแถวและคอลัมน์
21	แท็บ เป็นแท็บตามการนำทางที่แสดงเนื้อหาในบานหน้าต่างต่างๆโดยไม่ต้องออกจากหน้า
22	ภาพขนาดย่อ จัดรูปแบบภาพในรูปขนาดย่อ
23	แถบชื่อเรื่อง ใช้เพื่อแสดงหน้าจอปัจจุบันที่ผู้ใช้ใช้กับรายการเมนูอื่น ๆ
24	คำแนะนำเครื่องมือ เป็นกล่องป๊อปอัปขนาดเล็กที่อธิบายข้อมูลเมื่อคุณวางเมาส์บนลิงก์
25	ท็อปบาร์ ใช้เพื่อสร้างส่วนหัวการนำทางในเว็บไซต์
26	วงโคจร มันเป็นตัวเลื่อนที่ง่ายและทรงพลังที่กวาดองค์ประกอบโดยใช้คลาสวงโคจร

ในบทนี้เราจะศึกษาเกี่ยวกับรูปแบบทั่วโลก เฟรมเวิร์ก 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

SASS ช่วยให้โค้ดมีความยืดหยุ่นและปรับแต่งได้มากขึ้นใน Foundation

ความเข้ากันได้

ในการติดตั้งเวอร์ชันที่ใช้ SASS สำหรับรากฐานควรติดตั้ง Ruby บน Windows มูลนิธิสามารถรวบรวมด้วย Ruby SASS และ libsass เราแนะนำnode-sass 3.4.2+ เวอร์ชันเพื่อรวบรวม SASS

จำเป็นต้องใช้ Autoprefixer

Autoprefixer จัดการไฟล์ SASS gulp-autoprefixerใช้ในการสร้างกระบวนการ การตั้งค่า autoprefixer ต่อไปนี้ใช้เพื่อรับการสนับสนุนเบราว์เซอร์ที่เหมาะสม

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

กำลังโหลด Framework

เราสามารถติดตั้งไฟล์เฟรมเวิร์กโดยใช้ NPM ด้วยการใช้อินเตอร์เฟสบรรทัดคำสั่ง (CLI) เราสามารถคอมไพล์ไฟล์ Sass ต่อไปนี้เป็นคำสั่งในการโหลดกรอบงาน -

npm install foundation-sites --save

หลังจากเรียกใช้รหัสบรรทัดคำสั่งด้านบนคุณจะได้รับบรรทัดต่อไปนี้ -

รวบรวมด้วยตนเอง

ไฟล์เฟรมเวิร์กสามารถเพิ่มเป็นพา ธ การนำเข้าได้ขึ้นอยู่กับกระบวนการสร้างของคุณ แต่พา ธ จะเป็นแพ็กเกจ _ โฟลเดอร์ / ฐานราก - ไซต์ / scssเดียวกัน @importงบรวมอยู่ที่ด้านบนของมูลนิธิ sites.scssไฟล์ บรรทัดถัดไปในรหัสที่กำหนดจะอธิบายไว้ในไฟล์Adjusting CSS Output มาตรา.

@import 'foundation';
@include foundation-everything;

ใช้คอมไพล์ CSS

คุณสามารถรวมไฟล์ CSS ที่คอมไพล์ไว้ล่วงหน้า ไฟล์ CSS มีสองประเภท ได้แก่ แบบย่อขนาดและแบบรวม Minified version ใช้สำหรับการผลิตและเวอร์ชัน unminified ใช้เพื่อแก้ไข CSS ของเฟรมเวิร์กโดยตรง

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

การปรับเอาต์พุต CSS

สำหรับส่วนประกอบต่างๆผลลัพธ์ของ Foundation ประกอบด้วยหลายคลาส ใช้เพื่อควบคุมเอาต์พุต CSS ของเฟรมเวิร์ก เพิ่มโค้ดบรรทัดเดียวต่อไปนี้เพื่อรวมส่วนประกอบทั้งหมดพร้อมกัน

@include foundation-everything;

ต่อไปนี้เป็นรายการส่วนประกอบที่นำเข้าเมื่อคุณเขียนโค้ดด้านบนในไฟล์ scss ของคุณ ส่วนประกอบที่ไม่จำเป็นสามารถแสดงความคิดเห็นได้ คุณสามารถดูด้านล่างได้รับสายรหัสในYour_folder_name / node_modules / มูลนิธิไซต์ / SCSS / foundation.scssไฟล์

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

ไฟล์การตั้งค่า

ตั้งค่าที่ไฟล์จะรวมอยู่ในโครงการรากฐานคือ_settings.scss หากคุณใช้ Yeti Launch หรือ CLI เพื่อสร้างโครงการ Foundation for Sites คุณจะพบไฟล์การตั้งค่าใน src / assets / scss /

เราได้ติดตั้งมูลนิธิใช้ NPM เพราะฉะนั้นคุณสามารถพบการตั้งค่าไฟล์รวมภายใต้your_folder_name / node_modules / มูลนิธิเว็บไซต์ / SCSS / การตั้งค่า / _settings.scss คุณสามารถย้ายสิ่งนี้ไปไว้ในไฟล์ Sass ของคุณเองเพื่อใช้งานได้

คุณสามารถเขียน CSS ของคุณเองได้หากคุณไม่สามารถปรับแต่งด้วยตัวแปรได้ ต่อไปนี้เป็นชุดของตัวแปรซึ่งจะเปลี่ยนรูปแบบเริ่มต้นของปุ่ม

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

ในบทนี้เราจะศึกษาเกี่ยวกับJavaScript ง่ายต่อการตั้งค่า JavaScript ใน Foundation สิ่งเดียวที่คุณต้องการคือ jQuery

การติดตั้ง JavaScript

คุณสามารถใช้การดาวน์โหลด ZIP, ตัวจัดการแพ็คเกจหรือ CDN เพื่อรับไฟล์ Foundation JavaScript ในโค้ดของคุณคุณสามารถระบุลิงก์ไปยัง jQuery และ Foundation เป็นแท็ก <script> โดยวางไว้หน้า <body> ปิดและตรวจสอบว่า Foundation โหลดหลังจาก jQuery สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

โครงสร้างไฟล์

เมื่อคุณติดตั้ง Foundation ผ่านทางบรรทัดคำสั่งปลั๊กอิน Foundation จะดาวน์โหลดเป็นไฟล์แต่ละไฟล์เช่นfoundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.jsเป็นต้น ไฟล์ทั้งหมดเหล่านี้รวมกันเป็นfoundation.jsซึ่งมีปลั๊กอินทั้งหมดในคราวเดียว หากคุณต้องการใช้ปลั๊กอินบางตัวควรโหลดfoundation.core.jsก่อน

ตัวอย่างเช่น -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

ปลั๊กอินบางตัวอาจต้องการไลบรารียูทิลิตี้เฉพาะซึ่งมาพร้อมกับการติดตั้งพื้นฐาน คุณสามารถศึกษารายละเอียดเกี่ยวกับความต้องการที่เฉพาะเจาะจงปลั๊กอินในบทต่อไปสาธารณูปโภค JavaScript

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

กำลังเริ่มต้น

ฟังก์ชันFoundation ()ใช้เพื่อเริ่มต้นปลั๊กอิน Foundation ทั้งหมดในครั้งเดียว

ตัวอย่างเช่น -

(document).foundation();

การใช้ปลั๊กอิน

การใช้แอตทริบิวต์ข้อมูลปลั๊กอินจะเชื่อมต่อกับองค์ประกอบ HTML เนื่องจากตรงกับชื่อของปลั๊กอิน องค์ประกอบ HTML เดียวสามารถมีปลั๊กอินได้ครั้งละหนึ่งรายการแม้ว่าปลั๊กอินส่วนใหญ่สามารถซ้อนอยู่ภายในปลั๊กอินอื่น ๆ ได้ ยกตัวอย่างเช่นการเชื่อมโยงคำแนะนำเครื่องมือที่ถูกสร้างขึ้นโดยการเพิ่มข้อมูลคำแนะนำเครื่องมือ สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

การกำหนดค่าปลั๊กอิน

ปลั๊กอินสามารถปรับแต่งได้โดยใช้การตั้งค่าการกำหนดค่า ตัวอย่างเช่นคุณสามารถตั้งค่าความเร็วของหีบเพลงที่เลื่อนขึ้นและลง การตั้งค่าปลั๊กอินสามารถเปลี่ยนแปลงได้ทั่วโลกโดยใช้ปลั๊กอินDEFAULTSทรัพย์สิน. สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

การเพิ่มปลั๊กอินหลังจากโหลดหน้า

เมื่อเพิ่ม HTML ใหม่ลงใน DOM ปลั๊กอินใด ๆ ในองค์ประกอบเหล่านั้นจะไม่เริ่มต้นตามค่าเริ่มต้น คุณสามารถตรวจสอบปลั๊กอินใหม่ได้โดยเรียกใช้ฟังก์ชัน. fundation ()อีกครั้ง

ตัวอย่างเช่น -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

การใช้งานแบบเป็นโปรแกรม

ใน JavaScript สามารถสร้างปลั๊กอินได้โดยใช้โปรแกรมและแต่ละปลั๊กอินเป็นคลาสของอ็อบเจ็กต์พื้นฐานระดับโลกโดยมีตัวสร้างซึ่งรับสองพารามิเตอร์เช่นองค์ประกอบและอ็อบเจ็กต์

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

ปลั๊กอินส่วนใหญ่มาพร้อมกับ API สาธารณะซึ่งให้คุณจัดการผ่าน JavaScript คุณสามารถดูเอกสารประกอบของปลั๊กอินเพื่อศึกษาฟังก์ชันและวิธีการที่มีอยู่สามารถเรียกใช้ได้อย่างง่ายดาย

ตัวอย่างเช่น -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

คุณได้รับอนุญาตให้เลือกตัวเลือก jQuery ใด ๆ และหากตัวเลือกมีปลั๊กอินหลายตัวพวกเขาทั้งหมดจะมีวิธีการที่เลือกเหมือนกันที่เรียกว่า
อาร์กิวเมนต์สามารถส่งผ่านได้เช่นเดียวกับการส่งอาร์กิวเมนต์ไปยัง JavaScript
เมธอดที่ขึ้นต้นด้วยขีดล่าง (_)ถือเป็นส่วนหนึ่งของ API ภายในซึ่งหมายความว่าหากไม่มีการเตือนว่าอาจแตกเปลี่ยนแปลงหรือหายไปได้

เหตุการณ์

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

ตัวอย่างเช่น -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation ประกอบด้วยยูทิลิตี้ JavaScript ที่ใช้เพื่อเพิ่มฟังก์ชันทั่วไป มีประโยชน์มากและใช้งานง่าย ไลบรารียูทิลิตี้ JavaScript นี้สามารถพบได้ในโฟลเดอร์Your_folder_name / node_modules / foundation-sites / js

กล่อง

ห้องสมุดFoundation.Boxประกอบด้วยสองวิธี
js/foundation.util.box.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
วัตถุ jQuery หรือองค์ประกอบ JavaScript ธรรมดาสามารถส่งผ่านไปยังทั้งสองวิธีได้

var dims = Foundation.Box.GetDimensions(element);

อ็อบเจ็กต์ที่ส่งคืนระบุขนาดขององค์ประกอบเป็น -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

ฟังก์ชันImNotTouchingYouรวมอยู่ด้วย
ตามองค์ประกอบที่ส่งผ่านค่าบูลีนจะถูกส่งกลับซึ่งอาจขัดแย้งกับขอบของหน้าต่างหรือทางเลือกหรือองค์ประกอบหลัก
สองตัวเลือกที่ระบุในบรรทัดด้านล่างคือ leftAndRightOnly, topAndBottomOnly ถูกใช้เพื่อระบุการชนกันบนแกนเดียวเท่านั้น

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

คีย์บอร์ด

มีหลายวิธีในFoundation.Keyboardซึ่งช่วยให้การโต้ตอบกับเหตุการณ์ของแป้นพิมพ์เป็นเรื่องง่าย
js/foundation.util.keyboard.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
วัตถุFoundation.Keyboard.keysประกอบด้วยคู่คีย์ / ค่าซึ่งคีย์จะถูกใช้ในกรอบงานบ่อยกว่า
เมื่อใดก็ตามที่กดปุ่มFoundation.Keyboard.parseKeyจะถูกเรียกเพื่อรับสตริง สิ่งนี้ช่วยในการจัดการอินพุตคีย์บอร์ดของคุณเอง

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

var focusable = Foundation.Keyboard.findFocusable($('#content'));

handleKeyฟังก์ชั่นเป็นหน้าที่หลักของห้องสมุดนี้
วิธีนี้ใช้เพื่อจัดการกับเหตุการณ์แป้นพิมพ์ สามารถเรียกใช้ได้ทุกครั้งที่ลงทะเบียนปลั๊กอินกับยูทิลิตี้

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.registerฟังก์ชั่นสามารถเรียกได้ว่าเมื่อคุณต้องการที่จะใช้ผูกที่สำคัญของคุณเอง

MediaQuery

ไลบรารีMediaQueryเป็นหัวใจสำคัญของเทคนิค CSS ที่ตอบสนองทั้งหมด
js/foundation.util.mediaQuery.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
Foundation.MediaQuery.atLeast (ขนาดใหญ่)จะใช้ในการตรวจสอบว่าหน้าจอเป็นอย่างน้อยที่กว้างเป็นเบรกพอยต์
Foundation.MediaQuery.get (กลาง)ได้รับการสอบถามสื่อของเบรกพอยต์
Foundation.MediaQuery.queriesมีอาร์เรย์ของคำสั่งสื่อมูลนิธิใช้สำหรับจุดพัก
Foundation.MediaQuery.currentคือสตริงขนาดเบรกพอยต์ในปัจจุบัน

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

รหัสต่อไปนี้เผยแพร่การเปลี่ยนแปลงคิวรีสื่อบนหน้าต่าง

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

การเคลื่อนไหวและการเคลื่อนไหว

Foundation.Motion javascript คล้ายกับไลบรารี Motion UI ซึ่งรวมอยู่ใน Foundation 6 ใช้เพื่อสร้างการเปลี่ยน CSS และภาพเคลื่อนไหวที่กำหนดเอง
js/foundation.util.motion.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
Foundation.Moveใช้เพื่อทำให้แอนิเมชั่นที่สนับสนุน CSS3 เรียบง่ายและสง่างาม
requestAnimationFrame();วิธีการบอกให้เบราว์เซอร์แสดงภาพเคลื่อนไหว จะร้องขอให้เรียกใช้ฟังก์ชันภาพเคลื่อนไหวของคุณก่อนที่เบราว์เซอร์จะทำการทาสีใหม่ครั้งต่อไป

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

เมื่อสร้างภาพเคลื่อนไหวเสร็จแล้ว finished.zf.animateจะเริ่มทำงาน

โหลดตัวจับเวลาและรูปภาพแล้ว

Orbit ใช้ทั้งตัวจับเวลาฟังก์ชันและรูปภาพที่โหลด js/foundation.util.timerAndImageLoader.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

วิธีการโหลดรูปภาพจะเรียกใช้ฟังก์ชันการเรียกกลับในคอลเลกชัน jQuery ของคุณเมื่อโหลดรูปภาพเสร็จสมบูรณ์

Foundation.onImagesLoaded($images, callback);

สัมผัส

วิธีการนี้ใช้สำหรับการเพิ่มเหตุการณ์การลากหลอกและปัดไปที่องค์ประกอบ
js/foundation.util.touch.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
addTouchวิธีการที่ใช้ในการผูกองค์ประกอบที่จะสัมผัสเหตุการณ์ในปลั๊กอิน Slider สำหรับอุปกรณ์มือถือ
spotSwipeวิธีการผูกองค์ประกอบที่จะรูดเหตุการณ์ในวงโคจรปลั๊กอินสำหรับอุปกรณ์มือถือ

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

ทริกเกอร์

ทริกเกอร์เหตุการณ์ที่ระบุสำหรับองค์ประกอบที่เลือก
js/foundation.util.triggers.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
ทริกเกอร์ถูกใช้ในปลั๊กอิน Foundation จำนวนมาก

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

สองวิธีต่อไปนี้ใช้ในไลบรารีนี้คือปรับขนาดและเลื่อน

วิธีresize ()ทริกเกอร์เหตุการณ์การปรับขนาดเมื่อเกิดเหตุการณ์การปรับขนาด
วิธีการเลื่อน ()เรียกเหตุการณ์การเลื่อนเมื่อเหตุการณ์เลื่อนเกิดขึ้น

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

เบ็ดเตล็ด

Foundation มีคุณสมบัติบางอย่างในไลบรารีหลักซึ่งใช้ในหลาย ๆ ที่
js/foundation.core.js คือชื่อไฟล์สคริปต์ซึ่งสามารถรวมได้ขณะเขียนโค้ด
Foundation.GetYoDigits ([number, namespace])ส่งคืน uid ฐาน -36 แบบสุ่มพร้อมเนมสเปซ จะคืนค่าความยาวสตริง 6 อักขระตามค่าเริ่มต้น
Foundation.getFnName (fn)ส่งคืนชื่อฟังก์ชัน JavaScript
Foundation.transitionendเกิดขึ้นเมื่อการเปลี่ยน CSS เสร็จสิ้น

คิวรีสื่อคือโมดูล CSS3 ที่มีคุณสมบัติของสื่อเช่นความกว้างความสูงสีและแสดงเนื้อหาตามความละเอียดหน้าจอที่ระบุ

Foundation ใช้คิวรีสื่อต่อไปนี้เพื่อสร้างช่วงรายละเอียด -

Small - ใช้สำหรับหน้าจอใดก็ได้
Medium - ใช้สำหรับหน้าจอ 640 พิกเซลและกว้างขึ้น
Large - ใช้สำหรับหน้าจอ 1024 พิกเซลและกว้างกว่า

คุณสามารถเปลี่ยนขนาดหน้าจอโดยใช้การเรียนเบรกพอยต์ ตัวอย่างเช่นคุณสามารถใช้. small -6 class สำหรับหน้าจอขนาดเล็กและ. medium-4สำหรับหน้าจอขนาดกลางดังที่แสดงในข้อมูลโค้ดต่อไปนี้ -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

การเปลี่ยนเบรกพอยต์

คุณสามารถเปลี่ยนจุดพักได้หากแอปพลิเคชันของคุณใช้ Foundation เวอร์ชัน SASS คุณสามารถวางชื่อเบรกพอยท์ไว้ใต้ตัวแปร$ breakpointsในไฟล์การตั้งค่าดังที่แสดงด้านล่าง -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

คุณสามารถเปลี่ยนคลาสเบรกพอยต์ในไฟล์การตั้งค่าได้โดยแก้ไขตัวแปร$ เบรกพอยต์คลาส หากคุณต้องการใช้. large class ใน CSS ให้เพิ่มไปที่ท้ายรายการตามที่แสดงด้านล่าง -

$breakpoints-classes: (small medium large);

สมมติว่าคุณต้องการใช้. xlarge class ใน CSS จากนั้นเพิ่มคลาสนี้ที่ท้ายรายการตามที่แสดงด้านล่าง -

$breakpoints-classes: (small medium large xlarge);

SASS

ส่วนผสมของเบรกพอยต์

คุณสามารถเขียนคำสั่งสื่อโดยใช้เบรกพอยต์ () mixin พร้อมกับ@include
ใช้คีย์เวิร์ดลงหรือเฉพาะพร้อมกับค่าเบรกพอยต์เพื่อเปลี่ยนลักษณะการทำงานของคิวรีสื่อดังที่แสดงในรูปแบบโค้ดต่อไปนี้ -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

คุณสามารถใช้คำสั่งสามสื่อแนวตั้ง , แนวนอนและจอประสาทตาสำหรับการวางแนวอุปกรณ์หรือความหนาแน่นของพิกเซลและพวกเขาจะไม่ได้ความกว้างตามคำสั่งสื่อ

ฟังก์ชันเบรกพอยต์

คุณสามารถใช้ฟังก์ชันของเบรกพอยต์ ()มิกซ์อินได้โดยใช้ฟังก์ชันภายใน
ฟังก์ชันเบรกพอยต์ ()สามารถใช้เพื่อเขียนคิวรีสื่อของตัวเองได้โดยตรง -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

การทำงานกับ Media Queries

Foundation JavaScript จัดเตรียมฟังก์ชันMediaQuery.currentเพื่อเข้าถึงชื่อเบรกพอยต์ปัจจุบันบนวัตถุFoundation.MediaQueryตามที่ระบุด้านล่าง -

Foundation.MediaQuery.current

MediaQuery.currentฟังก์ชั่นการแสดงขนาดเล็ก , กลาง , ใหญ่ชื่อเบรกพอยต์ในปัจจุบัน
คุณสามารถรับแบบสอบถามสื่อของเบรกพอยต์โดยใช้ฟังก์ชันMediaQuery.getดังที่แสดงด้านล่าง -

Foundation.MediaQuery.get('small')

การอ้างอิง Sass

ตัวแปร

ตารางต่อไปนี้แสดงรายการตัวแปร SASS ซึ่งสามารถใช้เพื่อปรับแต่งรูปแบบเริ่มต้นของส่วนประกอบ -

ซีเนียร์	ชื่อและคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$breakpoints เป็นชื่อเบรกพอยต์ที่สามารถใช้เขียนคิวรีสื่อโดยใช้เบรกพอยต์ ()มิกซ์อิน	แผนที่	เล็ก: 0px กลาง: 640px ใหญ่: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes คุณสามารถเปลี่ยนเอาต์พุตคลาส CSS ได้โดยแก้ไขตัวแปร$ breakpoint-class	รายการ	เล็กกลางใหญ่

มิกซ์

Mixins สร้างกลุ่มสไตล์เพื่อสร้างโครงสร้างคลาส CSS ของคุณสำหรับคอมโพเนนต์ Foundation

BREAKPOINT

ใช้เบรกพอยต์ ()มิกซ์อินเพื่อสร้างคิวรีสื่อและรวมถึงกิจกรรมต่อไปนี้ -

หากมีการส่งสตริงมิกซินจะค้นหาสตริงในแมป$ breakpointsและสร้างคิวรีสื่อ
หากคุณกำลังใช้ค่าพิกเซลแล้วแปลงเป็นค่าใช้ em $ REM ฐาน
ถ้าส่งค่า rem ก็จะเปลี่ยนหน่วยเป็น em
หากคุณกำลังใช้ค่า em ก็สามารถใช้ได้ตามที่เป็นอยู่

ตารางต่อไปนี้ระบุพารามิเตอร์ที่ใช้โดยเบรกพอยต์ -

ซีเนียร์	ชื่อและคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$value เป็นการประมวลผลค่าโดยใช้ชื่อเบรกพอยต์ค่า px, rem หรือ em	คำหลักหรือตัวเลข	ไม่มี

ฟังก์ชั่น

BREAKPOINT

ใช้เบรกพอยต์ ()มิกซ์อินเพื่อสร้างคิวรีสื่อที่มีค่าอินพุตที่ตรงกัน

ตารางต่อไปนี้ระบุค่าอินพุตที่เป็นไปได้ที่ใช้โดยเบรกพอยต์ -

ซีเนียร์	ชื่อและคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val ประมวลผลค่าโดยใช้ชื่อเบรกพอยต์ค่า px, rem หรือ em	คำหลักหรือตัวเลข	เล็ก

การอ้างอิง JavaScript

ฟังก์ชั่น

มีฟังก์ชันสองประเภท -

.atLeast- ตรวจสอบหน้าจอ ต้องกว้างเป็นจุดพักเป็นอย่างน้อย
.get - ใช้เพื่อรับแบบสอบถามสื่อของเบรกพอยต์

ตารางต่อไปนี้ระบุพารามิเตอร์ที่ใช้โดยฟังก์ชันข้างต้น -

ซีเนียร์	ชื่อและคำอธิบาย	ประเภท
1	size ตรวจสอบและรับชื่อของเบรกพอยต์สำหรับฟังก์ชันที่ระบุตามลำดับ	สตริง

คำอธิบาย

ระบบกริดฐานรากปรับขนาดได้ถึง 12 คอลัมน์ในหน้า ระบบกริดใช้เพื่อสร้างเค้าโครงหน้าผ่านชุดแถวและคอลัมน์ที่เก็บเนื้อหาของคุณ

ตัวเลือกกริด

ตารางต่อไปนี้จะบอกสั้น ๆ เกี่ยวกับการทำงานของระบบกริดพื้นฐานในอุปกรณ์หลายเครื่อง

	โทรศัพท์ขนาดเล็ก (<640px)	แท็บเล็ตอุปกรณ์ขนาดกลาง (> = 640px)	อุปกรณ์ขนาดใหญ่แล็ปท็อปและเดสก์ท็อป (> = 1200px)
พฤติกรรมกริด	แนวนอนตลอดเวลา	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก
คำนำหน้าชั้นเรียน	.small- *	.medium- *	.ใหญ่-*
จำนวนคอลัมน์	12	12	12
Nestable	ใช่	ใช่	ใช่
ออฟเซ็ต	ใช่	ใช่	ใช่
ลำดับคอลัมน์	ใช่	ใช่	ใช่

โครงสร้างพื้นฐานของ Foundation Grid

ต่อไปนี้เป็นโครงสร้างพื้นฐานของกริดรากฐาน -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

ขั้นแรกสร้างคลาสแถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน
ควรวางเนื้อหาไว้ในคอลัมน์และมีเพียงคอลัมน์เดียวเท่านั้นที่สามารถเป็นลูกของแถวได้
คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่สิบสองคอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่นสำหรับสี่คอลัมน์ที่เท่ากันเราจะใช้ . large-3

ต่อไปนี้เป็นสามคลาสที่ใช้ในระบบกริดพื้นฐาน -

ซีเนียร์	คลาส Grid พื้นฐานและคำอธิบาย
1	ใหญ่ * ขนาดใหญ่ชั้นเรียนจะใช้สำหรับอุปกรณ์ขนาดใหญ่
2	ปานกลาง กลาง *ชั้นถูกนำมาใช้สำหรับอุปกรณ์ขนาดกลาง
3	เล็ก small- * class ใช้สำหรับอุปกรณ์ขนาดเล็ก

กริดขั้นสูง

ต่อไปนี้เป็นรูปแบบกริดขั้นสูงที่ใช้ใน Foundation

ซีเนียร์	กริดขั้นสูงและคำอธิบาย
1	คอลัมน์ / แถวรวม คอลัมน์และแถวที่เรียนถูกนำมาใช้ในองค์ประกอบเดียวที่จะได้รับคอลัมน์เต็มความกว้างที่จะใช้เป็นภาชนะ
2	การทำรัง เราสามารถซ้อนคอลัมน์กริดภายในคอลัมน์อื่นได้
3	ออฟเซ็ต การใช้คลาสlarge-offset- หรือsmall-offset- คุณสามารถย้ายคอลัมน์ไปทางขวา
4	แถวที่ไม่สมบูรณ์ ฐานรากจะลอยองค์ประกอบสุดท้ายไปทางขวาโดยอัตโนมัติเมื่อแถวไม่รวมคอลัมน์ถึง 12
5	ยุบ / ไม่ยุบแถว การใช้ขนาดคิวรีสื่อคลาสการยุบและยกเลิกการยุบจะรวมอยู่ในองค์ประกอบแถวเพื่อแสดงการพาย
6	คอลัมน์กึ่งกลาง การรวมคลาสที่มีขนาดเล็กเป็นศูนย์กลางในคอลัมน์ทำให้คุณสามารถทำให้คอลัมน์อยู่ตรงกลางได้
7	การสั่งซื้อแหล่งที่มา คลาสการสั่งซอร์สใช้เพื่อเลื่อนคอลัมน์ระหว่างเบรกพอยต์
8	บล็อกกริด Block-grid ใช้เพื่อแยกเนื้อหา

การสร้างความหมาย

การใช้ชุดของ SASS mixins จะสร้างตาราง CSS ซึ่งใช้ในการสร้างตารางความหมายของคุณเอง สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

การอ้างอิง SASS

ต่อไปนี้เป็นข้อมูลอ้างอิง SASS สำหรับกริดที่ใช้ใน Foundation

ซีเนียร์	กริดพื้นฐานและคำอธิบาย
1	ตัวแปร การใช้ตัวแปร sass เราสามารถปรับเปลี่ยนรูปแบบเริ่มต้นของส่วนประกอบนี้ได้
2	มิกซ์ ผลลัพธ์สุดท้ายของ CSS คือการสร้างโดยใช้ mixin

ตารางขึ้นอยู่กับคุณสมบัติการแสดงผลแบบยืดหยุ่น ประกอบด้วยคุณสมบัติหลายประการที่มีให้ใน Flexbox เช่นการเรียงซ้อนอัตโนมัติการสั่งซื้อแหล่งที่มาการจัดตำแหน่งแนวตั้งและการจัดแนวแนวนอน

รองรับเบราว์เซอร์

ตารางดิ้นได้รับการสนับสนุนใน Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ และ iOS 7+

ตารางต่อไปนี้อธิบายคุณสมบัติของ Flex Grid พร้อมกับคำอธิบาย

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	กำลังนำเข้า รวมถึงมิกซ์อินการส่งออกสำหรับตารางดิ้นเพื่อใช้ CSS เริ่มต้น
2	พื้นฐาน โครงสร้าง Flex grid นั้นคล้ายกับโครงกริดลอย
3	การปรับขนาดขั้นสูง ถ้าคลาสการปรับขนาดไม่รวมอยู่ในคอลัมน์มันจะขยายตัวเองและเติมช่องว่างที่เหลือในคอลัมน์
4	การปรับเปลี่ยนที่ตอบสนอง หากไม่ได้กำหนดขนาดที่ชัดเจนของคอลัมน์ในเฟล็กซ์กริดก็จะปรับขนาดคอลัมน์โดยอัตโนมัติ
5	การจัดแนวคอลัมน์ คอลัมน์ตารางดิ้นสามารถจัดแนวแกนแนวนอนหรือแนวตั้งในแถวหลักได้
6	การสั่งซื้อแหล่งที่มา การจัดลำดับแหล่งที่มาช่วยในการจัดเรียงคอลัมน์ใหม่ในหน้าจอขนาดต่างๆ
7	การอ้างอิง Sass SASS (Syntactically Awesome Stylesheet) เป็นตัวประมวลผลล่วงหน้า CSS ซึ่งช่วยลดการทำซ้ำด้วย CSS และประหยัดเวลา

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

ตารางต่อไปนี้แสดงองค์ประกอบฟอร์มที่ใช้ใน Foundation

ซีเนียร์	องค์ประกอบแบบฟอร์มและคำอธิบาย
1	พื้นฐานของฟอร์ม การสร้างแบบฟอร์มทำได้ง่ายและยืดหยุ่นมากซึ่งสร้างขึ้นด้วยการผสมผสานระหว่างองค์ประกอบฟอร์มมาตรฐานและระบบกริดที่มีประสิทธิภาพ
2	ข้อความช่วยเหลือ ใช้เพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับวัตถุประสงค์ขององค์ประกอบและโดยปกติจะวางไว้ด้านล่างฟิลด์
3	ตำแหน่งฉลาก คุณสามารถวางป้ายกำกับของคุณทางซ้ายหรือขวาของอินพุตของคุณ
4	ป้ายกำกับและปุ่มแบบอินไลน์ สามารถแนบข้อความหรือส่วนควบคุมเพิ่มเติมที่ด้านซ้าย / ขวาของช่องป้อนข้อมูล
5	การควบคุมแบบกำหนดเอง การควบคุมแบบกำหนดเองเช่นตัวเลือกวันที่สวิตช์หรือแถบเลื่อนต้องให้ความสนใจในการเข้าถึง
6	การอ้างอิง SASS คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ SASS Reference

คำอธิบาย

Foundation ใช้คลาสการมองเห็นเพื่อแสดงหรือซ่อนองค์ประกอบตามการวางแนวอุปกรณ์ (แนวตั้งและแนวนอน) หรือขนาดหน้าจอ (หน้าจอเล็กกลางใหญ่หรือใหญ่)
อนุญาตให้ผู้ใช้ใช้องค์ประกอบตามสภาพแวดล้อมการท่องเว็บ

ตารางต่อไปนี้แสดงรายการระดับการมองเห็นของ Foundation ซึ่งควบคุมองค์ประกอบตามสภาพแวดล้อมการเรียกดู -

ซีเนียร์	ระดับการมองเห็นและคำอธิบาย
1	แสดงตามขนาดหน้าจอ มันแสดงองค์ประกอบตามอุปกรณ์โดยใช้. show class
2	ซ่อนตามขนาดหน้าจอ มันซ่อนองค์ประกอบตามอุปกรณ์โดยใช้. hidden class

Foundation รองรับบางคลาสที่คุณสามารถซ่อนเนื้อหาได้โดยใช้คลาส. hiddenและ . invisibleและไม่แสดงอะไรบนเพจ

การตรวจจับการวางแนว

อุปกรณ์สามารถกำหนดทิศทางที่แตกต่างกันได้โดยใช้ฟังก์ชันแนวนอนและแนวตั้ง อุปกรณ์มือถือเช่นโทรศัพท์มือถือจะระบุทิศทางที่แตกต่างกันเมื่อคุณหมุน สำหรับเดสก์ท็อปการวางแนวจะเป็นแนวนอนเสมอ

การเข้าถึง

ตารางต่อไปนี้แสดงรายการเทคนิคการช่วยการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอซึ่งซ่อนเนื้อหาไว้ในขณะที่ทำให้โปรแกรมอ่านหน้าจอสามารถอ่านได้ -

ซีเนียร์	คลาสการช่วยสำหรับการเข้าถึงและคำอธิบาย
1	แสดงสำหรับโปรแกรมอ่านหน้าจอ ใช้คลาสshow-for-srเพื่อซ่อนเนื้อหาในขณะที่ป้องกันโปรแกรมอ่านหน้าจอไม่ให้อ่าน
2	ซ่อนสำหรับโปรแกรมอ่านหน้าจอ ใช้แอตทริบิวต์aria-hiddenซึ่งทำให้มองเห็นข้อความได้ แต่โปรแกรมอ่านหน้าจอไม่สามารถอ่านได้
3	การสร้างข้ามลิงค์ โปรแกรมอ่านหน้าจอจะสร้างลิงก์ข้ามเพื่อรับการนำทางไปยังเนื้อหาของไซต์ของคุณ

การอ้างอิง Sass

Foundation ใช้มิกซ์อินต่อไปนี้เพื่อแสดงเอาต์พุต CSS ซึ่งช่วยให้สร้างโครงสร้างคลาสของตัวเองสำหรับส่วนประกอบ

ซีเนียร์	Mixin & คำอธิบาย	พารามิเตอร์	ประเภท
1	show-for โดยค่าเริ่มต้นจะซ่อนองค์ประกอบและแสดงเหนือขนาดหน้าจอที่กำหนด	ขนาด $	คำสำคัญ
2	show-for-only โดยค่าเริ่มต้นจะซ่อนองค์ประกอบและแสดงภายในเบรกพอยต์	ขนาด $	คำสำคัญ
3	hide-for โดยค่าเริ่มต้นจะแสดงองค์ประกอบและซ่อนไว้เหนือขนาดหน้าจอที่กำหนด	ขนาด $	คำสำคัญ
4	hide-for-only โดยค่าเริ่มต้นจะแสดงองค์ประกอบและซ่อนไว้เหนือขนาดหน้าจอที่กำหนด	ขนาด $	คำสำคัญ

ค่าเริ่มต้นของทุก mixins เหล่านี้จะถูกตั้งค่าไม่มี

คำอธิบาย

วิชาการพิมพ์ใน Foundation กำหนดหัวเรื่องย่อหน้ารายการและองค์ประกอบแบบอินไลน์อื่น ๆ ซึ่งสร้างรูปแบบเริ่มต้นที่น่าสนใจและเรียบง่ายสำหรับองค์ประกอบ

ตารางต่อไปนี้แสดงประเภทการพิมพ์ต่างๆที่ใช้ใน Foundation -

ซีเนียร์	วิชาการพิมพ์และคำอธิบาย
1	ย่อหน้า ย่อหน้าคือกลุ่มของประโยคที่กำหนดด้วยขนาดตัวอักษรที่แตกต่างกันคำที่เน้นความสูงของบรรทัดเป็นต้น
2	หัวข้อ กำหนดหัวเรื่อง HTML ตั้งแต่ h1 ถึง h6
3	ลิงค์ สร้างไฮเปอร์ลิงก์ที่เปิดเอกสารอื่นเมื่อคุณคลิกที่ข้อความหรือรูปภาพ
4	วงเวียน ใช้เพื่อแบ่งส่วนระหว่างส่วนต่างๆโดยใช้แท็ก <hr>
5	รายการสั่งซื้อและไม่เรียงลำดับ มูลนิธิสนับสนุนรายการสั่งซื้อรายการที่ไม่เรียงลำดับเพื่อแสดงรายการสิ่งต่างๆ
6	รายการคำจำกัดความ รายการนิยามใช้เพื่อแสดงคู่ค่าของชื่อ
7	Blockquotes แสดงถึงบล็อกของข้อความซึ่งกำหนดให้ใหญ่กว่าปกติมาก
8	ตัวย่อและรหัส ตัวย่อกำหนดระยะสั้นของคำหรือวลีและรหัสหมายถึงส่วนของรหัส
9	การกดแป้นพิมพ์ ใช้เพื่อทำหน้าที่เฉพาะ
10	การเข้าถึง Foundation มีหลักเกณฑ์บางประการในการเข้าถึงเนื้อหาของเพจ

การอ้างอิง Sass

คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ตัวแปร SASS ต่อไปนี้ตามรายการในตาราง

ด้านล่างเป็นรูปแบบของส่วนประกอบโดยใช้ตัวแปร SASS ต่อไปนี้

ซีเนียร์	ชื่อและคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$header-font-family ระบุตระกูลฟอนต์สำหรับองค์ประกอบส่วนหัว	สตริงหรือรายการ	$ body-font-family
2	$header-font-weight ระบุน้ำหนักแบบอักษรของส่วนหัว	สตริง	$ global-weight-normal
3	$header-font-style จัดเตรียมรูปแบบตัวอักษรของส่วนหัว	สตริง	ปกติ
4	$font-family-monospace Font stack ที่ใช้สำหรับองค์ประกอบที่ใช้ชนิด monospaced เช่นตัวอย่างโค้ด	สตริงหรือรายการ	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes กำหนดขนาดหน้าจอของส่วนหัวและแต่ละคีย์คือเบรกพอยต์และแต่ละค่าคือแผนที่ของขนาดส่วนหัว	แผนที่	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color ให้สีของส่วนหัว	สี	สืบทอด
7	$header-lineheight กำหนดความสูงบรรทัดของส่วนหัว	จำนวน	1.4
8	$header-margin-bottom จัดเตรียมขอบด้านล่างของส่วนหัว	จำนวน	0.5rem
9	$header-text-rendering กำหนดวิธีการสำหรับการแสดงผลข้อความ	สตริง	optimizeLegibility
10	$small-font-size ระบุขนาดฟอนต์สำหรับอิลิเมนต์ <small>	จำนวน	80%
11	$paragraph-margin-bottom ระบุขอบล่างของย่อหน้า	จำนวน	1rem
12	$paragraph-text-rendering วิธีการแสดงข้อความย่อหน้า	สตริง	optimizeLegibility
13	$code-color แสดงสีข้อความให้กับตัวอย่างโค้ด	สี	$ ดำ
14	$code-font-family จัดเตรียมตระกูลฟอนต์ให้กับตัวอย่างโค้ด	สตริงหรือรายการ	$ font-family-monospace
15	$code-border ระบุเส้นขอบรอบรหัส	รายการ	1px solid $ กลาง - เทา
16	$code-padding ระบุช่องว่างรอบ ๆ ข้อความ	หมายเลขหรือรายการ	รี - แคล (2 5 1)
17	$anchor-color สีเริ่มต้นสำหรับลิงก์	สี	$ หลักสี
18	$anchor-color-hover ระบุสีเริ่มต้นสำหรับลิงก์บนโฮเวอร์	สี	ขนาดสี ($ anchor-color, $ lightness: -14%)
19	$anchor-text-decoration การตกแต่งข้อความเริ่มต้นสำหรับลิงก์	สตริง	ไม่มี
20	$anchor-text-decoration-hover การตกแต่งข้อความเริ่มต้นสำหรับลิงก์ที่วางเมาส์เหนือ	สตริง	ไม่มี
21	$hr-width กำหนดความกว้างสูงสุดของตัวแบ่ง	จำนวน	$ global-width
22	$hr-border ระบุเส้นขอบเริ่มต้นสำหรับตัวแบ่ง	รายการ	1px solid $ กลาง - เทา
23	$hr-margin ระยะขอบเริ่มต้นสำหรับตัวแบ่ง	หมายเลขหรือรายการ	rem-calc (20) อัตโนมัติ
24	$list-lineheight เป็นการกำหนดความสูงของบรรทัดสำหรับรายการในรายการ	จำนวน	$ ย่อหน้า
25	$list-style-type ระบุประเภทสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการที่ไม่ได้เรียงลำดับ	สตริง	ดิสก์
26	$list-style-position เป็นการกำหนดตำแหน่งสำหรับสัญลักษณ์แสดงหัวข้อย่อยในรายการที่ไม่เรียงลำดับ	สตริง	ข้างนอก
27	$list-side-margin กำหนดระยะขอบด้านซ้าย (หรือขวา)	จำนวน	1.25rem
28	$defnlist-term-weight ให้น้ำหนักแบบอักษรสำหรับองค์ประกอบ <dt>	สตริง	$ global-weight-bold
29	$defnlist-term-margin-bottom จัดเตรียมระยะห่างระหว่างองค์ประกอบ <dt> และ <dd>	จำนวน	0.3rem
30	$blockquote-color ใช้สีข้อความขององค์ประกอบ <blockquote>	สี	เทาเข้ม
31	$blockquote-padding จัดเตรียมช่องว่างภายในองค์ประกอบ <blockquote>	หมายเลขหรือรายการ	รี - แคล (9 20 0 19)
32	$blockquote-border มันให้เส้นขอบด้านข้างสำหรับองค์ประกอบ <blockquote>	รายการ	1px solid $ กลาง - เทา
33	$cite-font-size กำหนดขนาดฟอนต์สำหรับองค์ประกอบ <cite>	จำนวน	รี - แคล (13)
34	$cite-color ให้สีข้อความสำหรับ`<cite>`องค์ประกอบ	สี	เทาเข้ม
35	$keystroke-font กำหนดตระกูลฟอนต์สำหรับองค์ประกอบ <kbd>	สตริงหรือรายการ	$ font-family-monospace
36	$keystroke-color กำหนดสีข้อความสำหรับองค์ประกอบ <kbd>	สี	$ ดำ
37	$keystroke-background ให้สีพื้นหลังสำหรับองค์ประกอบ <kbd>	สี	$ สีเทาอ่อน
38	$keystroke-padding ระบุช่องว่างภายในสำหรับองค์ประกอบ <kbd>	หมายเลขหรือรายการ	รี - แคล (2 4 0)
39	$keystroke-radius แสดงรัศมีเส้นขอบสำหรับองค์ประกอบ <kbd>	หมายเลขหรือรายการ	$ global-radius
40	$abbr-underline จัดเตรียมสไตล์เส้นขอบด้านล่างสำหรับองค์ประกอบ <abbr>	รายการ	1px ขีด $ ดำ

ในบทนี้เราจะศึกษาเกี่ยวกับ 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

ในบทนี้เราจะศึกษาเกี่ยวกับ basic controls. มูลนิธิให้การควบคุมขั้นพื้นฐานเช่นปุ่ม , เลื่อนและสวิทช์

ตารางต่อไปนี้แสดงการควบคุมพื้นฐานที่ใช้ใน Foundation

ซีเนียร์	การควบคุมและคำอธิบายพื้นฐาน
1	ปุ่ม Foundation รองรับรูปแบบปุ่มมากมายที่สามารถปรับแต่งได้ตามความต้องการของคุณ
2	กลุ่มปุ่ม เป็นคอนเทนเนอร์สำหรับองค์ประกอบการดำเนินการที่สอดคล้องกัน ทำงานได้ดีเมื่อมีการแสดงกลุ่มการกระทำในแถบ
3	ปุ่มปิด ปุ่มปิดใช้เมื่อคุณต้องการให้บางสิ่งบางอย่างหายไปโดยคลิกที่มัน
4	ตัวเลื่อน แถบเลื่อนมีประโยชน์มากสำหรับการตั้งค่าบางอย่างภายในช่วง
5	สวิตซ์ ช่วยให้คุณสามารถปิดหรือเปิดสวิตช์ได้โดยคลิกที่สวิตช์

คำอธิบาย

Foundation มีตัวเลือกที่แตกต่างกันเล็กน้อยสำหรับการจัดแต่งทรงผมองค์ประกอบการนำทาง รูปแบบการนำทางที่เรียบง่ายมากมายรวมอยู่ด้วย สามารถผสานรวมในรูปแบบสำหรับโซลูชันการนำทางที่ตอบสนองได้ดี

ตารางต่อไปนี้อธิบายการนำทางประเภทต่างๆพร้อมกับคำอธิบาย

ซีเนียร์	ประเภทและคำอธิบาย
1	ภาพรวมการนำทาง การนำทางมีลิงก์ไปยังส่วนอื่น ๆ และประกอบด้วยรูปแบบการนำทางมากมาย
2	เมนู เมนูใช้ในการสร้างส่วนประกอบการนำทางมากมาย
3	เมนูแบบเลื่อนลง ปลั๊กอินเมนูแบบเลื่อนลงใช้เพื่อสร้างเมนูย่อยด้านล่างเมนูหลัก
4	เมนูเจาะลึก ปลั๊กอินเมนูเจาะลึกใช้เพื่อสร้างเมนูย่อยในเมนูหลักในรูปแบบแถบเลื่อน
5	เมนูหีบเพลง จะแสดงเมนูที่ยุบได้พร้อมเอฟเฟกต์หีบเพลงและรองรับการยุบอัตโนมัติโดยใช้ปลั๊กอิน Accordion Menu
6	ท็อปบาร์ แถบด้านบนช่วยให้แสดงแถบนำทางที่ซับซ้อนได้อย่างง่ายดายบนหน้าจอขนาดต่างๆ
7	การนำทางที่ตอบสนอง ปลั๊กอินเมนูที่ตอบสนองจะจัดสรรเมนูในขนาดต่างๆของหน้าจอ
8	แมกเจลแลน Magellan สร้างการนำทางซึ่งอยู่ในตำแหน่งคงที่ จะติดตามรายการการนำทางบนหน้าโดยอัตโนมัติตามตำแหน่งการเลื่อน
9	เลขหน้า การแบ่งหน้ารายการที่ไม่เรียงลำดับจะถูกจัดการโดย Bootstrap เหมือนกับองค์ประกอบอินเทอร์เฟซอื่น ๆ
10	เกล็ดขนมปัง เบรดครัมบ์ระบุตำแหน่งปัจจุบันสำหรับไซต์ภายในลำดับชั้นการนำทาง

คอนเทนเนอร์พื้นฐานถูกใช้เพื่อสร้างความกว้างเต็มของเบราว์เซอร์ตลอดเวลาสำหรับไซต์และรวมเนื้อหาของไซต์

ตารางต่อไปนี้แสดงรายการคอนเทนเนอร์บางส่วนที่ใช้ใน Foundation -

ซีเนียร์	คอนเทนเนอร์และคำอธิบาย
1	หีบเพลง Accordions มีแท็บแนวตั้งซึ่งใช้ในเว็บไซต์เพื่อขยายและยุบข้อมูลจำนวนมาก
2	โทรออก วางเนื้อหาไว้ในคอมโพเนนต์
3	เลื่อนลงบานหน้าต่าง จะแสดงเนื้อหาเมื่อคุณคลิกปุ่ม
4	วัตถุสื่อ เพิ่มวัตถุสื่อเช่นรูปภาพวิดีโอความคิดเห็นของบล็อก ฯลฯ พร้อมกับเนื้อหาบางส่วน
5	ออฟแคนวาส ตั้งค่าเมนูการนำทางจากพื้นที่ที่มองเห็นได้และแสดงเนื้อหาหลัก
6	เปิดเผย - กิริยา Foundation อนุญาตให้สร้างไดอะล็อกโมดอลหรือหน้าต่างป๊อปอัปโดยใช้คลาสเปิดเผย
7	ตาราง Foundation จัดเตรียมเค้าโครงสำหรับการแสดงข้อมูลในรูปแบบตาราง
8	แท็บ เป็นแท็บตามการนำทางที่แสดงเนื้อหาในบานหน้าต่างต่างๆโดยไม่ต้องออกจากหน้า

ในบทนี้เราจะศึกษาเกี่ยวกับสื่อใน Foundation มูลนิธิประกอบด้วยสื่อประเภทต่างๆเช่นFlex วิดีโอ , ฉลาก , วงโคจร , แถบความคืบหน้าและคำแนะนำเครื่องมือ ตารางต่อไปนี้แสดงรายการประเภทสื่อทั้งหมด

ซีเนียร์	ประเภทสื่อและคำอธิบาย
1	วิดีโอแบบยืดหยุ่น ใช้เพื่อฝังวิดีโอในคอนเทนเนอร์วิดีโอแบบยืดหยุ่นเพื่อรักษาอัตราส่วนที่เหมาะสมแม้จะมีขนาดหน้าจอก็ตาม
2	ฉลาก สามารถใช้สำหรับการจัดแต่งทรงผมแบบอินไลน์ซึ่งสามารถใส่ลงในเนื้อความเพื่อเรียกส่วนเฉพาะหรือแนบข้อมูลเมตา
3	วงโคจร เป็นแถบเลื่อนที่มีประสิทธิภาพและตอบสนองช่วยให้ผู้ใช้สามารถปัดบนอุปกรณ์หน้าจอสัมผัสได้
4	แถบความคืบหน้า ใช้เพื่อแสดงความคืบหน้าของคุณและสามารถเพิ่มลงในเค้าโครงของคุณได้
5	คำแนะนำเครื่องมือ ใช้เพื่อแสดงข้อมูลเพิ่มเติมสำหรับคำศัพท์หรือการดำเนินการบนเพจ

คำอธิบาย

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

ตารางต่อไปนี้อธิบายประเภทต่างๆของ Plugins พร้อมกับคำอธิบาย

ซีเนียร์	ประเภทและคำอธิบาย
1	ปฏิบัติตาม Abide ถูกใช้ในไลบรารีการตรวจสอบความถูกต้องของฟอร์ม HTML5 พร้อม API ดั้งเดิมโดยใช้แอตทริบิวต์และรูปแบบที่ต้องการ
2	อีควอไลเซอร์ อีควอไลเซอร์เป็นวิธีการสร้างเนื้อหาหลายรายการที่มีความสูงเท่ากันบนเพจของคุณ
3	อินเตอร์เชนจ์ ใช้เพื่อโหลดเนื้อหาที่ตอบสนองตามอุปกรณ์ของผู้ใช้
4	Toggler Toggle ใช้เพื่อเปลี่ยนจากการตั้งค่าหนึ่งไปเป็นอีกแบบหนึ่ง
5	เหนียว ปลั๊กอิน Sticky ใช้เพื่อสร้างเนื้อหาหรือรูปภาพที่คงที่ในเว็บไซต์

Foundation มีชุดฟังก์ชันยูทิลิตี้ SASS ซึ่งสามารถใช้ได้กับutil , color , selector , unit , valueและอื่น ๆ อีกมากมาย

คุณสามารถนำเข้าไฟล์ยูทิลิตี้ทั้งหมดได้พร้อมกันโดยใช้โค้ดบรรทัดต่อไปนี้ -

@import 'util/util';

คุณยังสามารถนำเข้าไฟล์ยูทิลิตี้แต่ละไฟล์ได้ตามที่แสดงด้านล่าง -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

การอ้างอิง Sass

คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ฟังก์ชัน SASS ต่อไปนี้

เบื้องหน้า

ให้สีพื้นหน้าให้กับองค์ประกอบตามสีพื้นหลัง ใช้รูปแบบต่อไปนี้ในการกำหนดพารามิเตอร์ประเภทต่างๆ -

foreground($color, $yes, $no, $threshold)

พารามิเตอร์ข้างต้นระบุไว้ในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color ตรวจสอบความสว่างของสี	สี	ไม่มี
2	$yes หากสีอ่อนแสดงว่าจะส่งคืนเป็นสี$ yes	สี	$ ดำ
3	$no หากสีเข้มแสดงว่าไม่มีสี	สี	สีขาว
4	$threshold แสดงถึงขีด จำกัด ของความสว่าง	เปอร์เซ็นต์	60%

สมาร์ทสเกล

ให้สีที่เหมาะสมสำหรับองค์ประกอบตามความสว่าง ใช้รูปแบบต่อไปนี้เพื่อระบุสีที่เหมาะสม -

smart-scale($color, $scale, $threshold)

พารามิเตอร์ที่กำหนดข้างต้นระบุไว้ในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color ใช้เพื่อปรับขนาดสี	สี	ไม่มี
2	$scale ระบุเปอร์เซ็นต์ที่จะปรับขนาดขึ้นหรือลง	เปอร์เซ็นต์	5%
3	$threshold แสดงถึงขีด จำกัด ของความสว่าง	เปอร์เซ็นต์	40%

อินพุตข้อความ

สร้างตัวเลือกในขณะที่ใช้ประเภทการป้อนข้อความ ใช้รูปแบบต่อไปนี้เพื่อระบุประเภทอินพุต -

text-inputs($types)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$types มีประเภทการป้อนข้อความจำนวนมากสำหรับการสร้างตัวเลือก	สี	-

แถบ - หน่วย

มันลบหน่วยออกจากค่าและส่งกลับเฉพาะตัวเลข ใช้รูปแบบต่อไปนี้สำหรับการลบหน่วยออกจากค่า -

strip-unit($num)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$num ระบุหมายเลขเมื่อคุณลบหน่วยออกจากค่า	สี	ไม่มี

rem-calc

มันเปลี่ยนค่าพิกเซลให้ตรงกับค่า rem ใช้รูปแบบต่อไปนี้สำหรับการแปลงค่าพิกเซลเป็นค่า rem -

rem-calc($values, $base)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$values จะแปลงค่าพิกเซลเป็นค่า rem และแยกโดยใช้ช่องว่าง หากคุณกำลังแปลงรายการที่คั่นด้วยจุลภาคให้ตัดรายการในวงเล็บ	หมายเลขหรือรายการ	ไม่มี
2	$base ให้ค่าพื้นฐานในขณะที่แปลงพิกเซลเป็นค่า rem หากมีค่า null สำหรับฐานฟังก์ชันจะใช้ตัวแปร$ base-font-sizeเป็นฐาน	จำนวน	โมฆะ

มีค่า

ระบุค่าหากไม่เป็นเท็จ ค่าเท็จรวมค่าว่างไม่มี 0 หรือรายการว่าง ใช้รูปแบบต่อไปนี้เพื่อระบุค่า -

has-value($val)

ใช้พารามิเตอร์ตามที่ระบุในตารางต่อไปนี้ -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val ตรวจสอบค่าที่ระบุ	ผสม	ไม่มี

รับด้าน

ระบุด้านข้างของค่าและกำหนดค่าด้านบน / ขวา / ล่าง / ซ้ายบนช่องว่างระยะขอบ ฯลฯ โดยใช้รูปแบบต่อไปนี้เพื่อระบุด้านของค่า -

has-value($val)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val ระบุด้านข้างของค่า	รายการหรือหมายเลข	ไม่มี
2	$side กำหนดว่าด้านใดที่ค่า (บน / ขวา / ล่าง / ซ้าย) ควรกลับมา	คำสำคัญ	ไม่มี

รับชายแดนมูลค่า

กำหนดค่าเส้นขอบขององค์ประกอบ ใช้รูปแบบต่อไปนี้สำหรับการระบุค่าเส้นขอบ -

get-border-value($val, $elem)

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$val พบค่าเฉพาะของเส้นขอบ	รายการ	ไม่มี
2	$elem ใช้เพื่อแยกองค์ประกอบเส้นขอบ	คำสำคัญ	ไม่มี

กำลังนำเข้า

นำเข้าเนื้อหาของ mixins SASS ซึ่งจะอยู่ภายใต้การSCSS / util / _mixins.scssไฟล์ คุณสามารถนำเข้ามิกซ์อิน SASS ได้โดยใช้โค้ดบรรทัดต่อไปนี้ -

@import 'util/mixins';

การอ้างอิง Sass

คุณสามารถเปลี่ยนรูปแบบของส่วนประกอบได้โดยใช้ฟังก์ชัน SASS

มิกซ์

คุณสามารถใช้มิกซ์อินต่อไปนี้เพื่อสร้างโครงสร้างคลาส CSS สำหรับคอมโพเนนต์ของคุณ

CSS-TRIANGLE

ใช้สำหรับสร้างลูกศรแบบเลื่อนลงจุดแบบหล่นลงและอื่น ๆ อีกมากมาย โดยใช้ตัวเลือก <i> & :: before </i> หรือ <i> & :: after </i> สำหรับติดสามเหลี่ยมเข้ากับองค์ประกอบที่มีอยู่ ใช้รูปแบบต่อไปนี้ -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$triangle-size เป็นการกำหนดความกว้างของสามเหลี่ยม	จำนวน	ไม่มี
2	$triangle-color เป็นการกำหนดสีของสามเหลี่ยม	สี	ไม่มี
3	$triangle-direction เป็นการกำหนดทิศทางของรูปสามเหลี่ยมเช่นขึ้นขวาลงหรือซ้าย	คำสำคัญ	ไม่มี

HAMBURGER

ใช้สำหรับสร้างไอคอนเมนูที่มีความกว้างความสูงจำนวนแถบและสี ใช้รูปแบบต่อไปนี้ -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color กำหนดสีสำหรับไอคอน	สี	ไม่มี
2	$color-hover จะกำหนดสีเมื่อคุณวางเมาส์บนไอคอน	สี	ไม่มี
3	$width เป็นการกำหนดความกว้างของไอคอน	จำนวน	ไม่มี
4	$height เป็นการกำหนดความสูงของไอคอน	จำนวน	ไม่มี
5	$weight เป็นการกำหนดน้ำหนักของแต่ละแท่งในไอคอน	จำนวน	ไม่มี
6	$bars จะกำหนดจำนวนแถบในไอคอน	จำนวน	ไม่มี

BACKGROUND-TRIANGLE

ใช้สำหรับระบุภาพพื้นหลังให้กับองค์ประกอบ ใช้รูปแบบต่อไปนี้ -

@include background-triangle($color);

ใช้พารามิเตอร์ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$color เป็นการกำหนดสีสำหรับสามเหลี่ยม	สี	$ ดำ

CLEARFIX

มิกซ์อินนี้จะล้างองค์ประกอบลูกโดยอัตโนมัติเพื่อไม่ต้องมีมาร์กอัปเพิ่มเติม ใช้รูปแบบต่อไปนี้ -

@include clearfix;

AUTO-WIDTH

โดยจะปรับขนาดองค์ประกอบโดยอัตโนมัติตามจำนวนองค์ประกอบที่มีอยู่ในคอนเทนเนอร์ ใช้รูปแบบต่อไปนี้ -

@include auto-width($max, $elem);

ใช้พารามิเตอร์ต่อไปนี้ตามที่ระบุในตาราง -

ซีเนียร์	พารามิเตอร์และคำอธิบาย	ประเภท	ค่าเริ่มต้น
1	$max ระบุจำนวนรายการสูงสุดในคอนเทนเนอร์	จำนวน	ไม่มี
2	$elem ใช้แท็กสำหรับตัวเลือกพี่น้อง	คำสำคัญ	ลี้

DISABLE-MOUSE-OUTLINE

ใช้เพื่อปิดใช้งานโครงร่างรอบ ๆ องค์ประกอบเมื่อระบุการดำเนินการป้อนข้อมูลของเมาส์ ใช้รูปแบบต่อไปนี้ -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

ใช้เพื่อซ่อนองค์ประกอบและสามารถใช้ได้กับคีย์บอร์ดและอุปกรณ์อื่น ๆ ใช้รูปแบบต่อไปนี้ -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

ใช้เพื่อลบองค์ประกอบที่มองไม่เห็นและย้อนกลับเอาต์พุต CSS โดยใช้องค์ประกอบที่มองไม่เห็น () mixin ใช้รูปแบบต่อไปนี้ -

@include element-invisible-off;

VERTICAL-CENTER

ใช้เพื่อวางองค์ประกอบในแนวตั้งเป็นศูนย์กลางภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include vertical-center;

HORIZONTAL-CENTER

ใช้เพื่อวางองค์ประกอบในแนวนอนเป็นศูนย์กลางภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include horizontal-center;

ABSOLUTE-CENTER

ใช้เพื่อวางองค์ประกอบที่อยู่กึ่งกลางอย่างแน่นอนภายในองค์ประกอบหลักที่ไม่คงที่โดยใช้รูปแบบต่อไปนี้ -

@include absolute-center;

มูลนิธิให้ห้องสมุดเคลื่อนไหว UI สำหรับการสร้างการเปลี่ยน UI และภาพเคลื่อนไหวและถูกใช้โดยส่วนประกอบมูลนิธิเช่นToggler , เปิดเผยและวงโคจร

การติดตั้ง Motion UI

คุณสามารถติดตั้งไลบรารี Motion UI ในโปรเจ็กต์ของคุณได้โดยใช้ npm หรือ bower ดังที่แสดงในโค้ดบรรทัดต่อไปนี้ -

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

คุณสามารถเพิ่มเส้นทางสำหรับไลบรารี Motion UI ในเข็มทิศโดยใช้config.rbดังที่แสดงในโค้ดบรรทัดต่อไปนี้ -

add_import_path 'node_modules/motion-ui/src'

คุณสามารถรวมเส้นทางไว้ในgulp-sassโดยใช้โค้ดบรรทัดต่อไปนี้ -

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

นำเข้าไลบรารี Motion UI ในไฟล์ SASS โดยใช้รหัสต่อไปนี้ -

@import 'motion-ui'

การเปลี่ยนในตัว

Foundation ให้เอฟเฟกต์การเปลี่ยนแปลงโดยใช้คลาสการเปลี่ยนซึ่งสร้างโดยไลบรารี Motion UI ให้เราสร้างตัวอย่างง่ายๆโดยใช้เอฟเฟกต์การเปลี่ยนแปลง

การเปลี่ยนแบบกำหนดเอง

คุณสามารถตั้งค่าคลาสการเปลี่ยนแบบกำหนดเองได้โดยใช้ไลบรารี Motion UI ตัวอย่างเช่นเราจะตั้งค่าคลาสที่กำหนดเองสำหรับการเปลี่ยนmui-hinge ()ซึ่งจะหมุนองค์ประกอบ -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

ภาพเคลื่อนไหว

คุณสามารถใช้เอฟเฟ็กต์การเปลี่ยน Motion UI สำหรับการสร้างภาพเคลื่อนไหว CSS คลิกลิงก์นี้เพื่อตรวจสอบการทำงานของแอนิเมชั่นบนโมดอลโดยใช้คลาสdata-animation