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

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 ต่อไปนี้ตามรายการในตาราง

ซีเนียร์ ชื่อและคำอธิบาย ประเภท ค่าเริ่มต้น
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