Foundation - Hướng dẫn nhanh

Foundation là gì?

Foundation là một trong những framework front-end tiên tiến để thiết kế các trang web đáp ứng đẹp. Nó hoạt động trên tất cả các loại thiết bị và cung cấp cho bạn các plugin HTML, CSS và JavaScript.

Foundation bắt đầu như một hướng dẫn phong cách nội bộ, do ZURB xây dựng vào năm 2008. ZURB là một công ty thiết kế sản phẩm ở Campbell, California. Nó đã phát hành Foundation 2.0 dưới dạng mã nguồn mở vào tháng 10 năm 2011. Phiên bản mới nhất của Foundation là 6.1.1, được phát hành vào tháng 12 năm 2015.

Tại sao sử dụng Foundation?

  • Nó cung cấp sự phát triển nhanh hơn bằng cách sử dụng trình biên dịch Sass, hoạt động nhanh hơn nhiều so với trình biên dịch mặc định.

  • Nó làm phong phú thêm trang web của bạn với bảng định giá, công tắc, joyride, thanh trượt phạm vi, hộp đèn và nhiều thứ khác.

  • Nó đi kèm với gói phát triển như Grunt và Libsass để mã hóa và kiểm soát nhanh hơn.

  • Foundation cho các trang web cung cấp cho bạn HTML, CSS và JS để nhanh chóng xây dựng các trang web.

  • Khung email cung cấp cho bạn các email HTML đáp ứng, có thể đọc được trên mọi thiết bị.

  • Foundation for Apps cho phép bạn xây dựng các ứng dụng web hoàn toàn đáp ứng.

Đặc trưng

  • Nó có hệ thống lưới mạnh mẽ và một số thành phần giao diện người dùng hữu ích và các plugin JavaScript thú vị.

  • Nó cung cấp thiết kế đáp ứng, phục vụ tất cả các loại thiết bị.

  • Nó được tối ưu hóa cho các thiết bị di động và thực sự hỗ trợ cách tiếp cận đầu tiên trên thiết bị di động.

  • Nó cung cấp các mẫu HTML, có thể tùy chỉnh và mở rộng.

Ưu điểm

  • Nó rất dễ học, khi bạn đã hiểu cơ bản về HTML và CSS.

  • Bạn có thể sử dụng Foundation một cách thoải mái vì nó là một mã nguồn mở.

  • Nó cung cấp cho bạn một loạt các mẫu, giúp bạn bắt đầu phát triển trang web ngay lập tức.

  • Foundation hỗ trợ các bộ tiền xử lý như SASS và Compass, giúp phát triển nhanh hơn.

Nhược điểm

  • Vì sự phổ biến của Twitter Bootstrap, sự hỗ trợ của cộng đồng dành cho Twitter Bootstrap tốt hơn Foundation.

  • Có thể mất một thời gian để người mới bắt đầu tìm hiểu và tận dụng sự hỗ trợ của bộ xử lý trước.

  • Thiếu sự hỗ trợ rộng rãi hơn như các trang web QA và diễn đàn để khắc phục sự cố.

  • Foundation có ít chủ đề hơn so với những người khác.

Trong chương này, chúng ta sẽ thảo luận về cách cài đặt và sử dụng Foundation trên trang web.

Tải xuống Foundation

Khi bạn mở liên kết foundation.zurb.com , bạn sẽ thấy một màn hình như hình dưới đây:

Nhấn vào Download Foundation 6 , bạn sẽ được chuyển hướng đến một trang khác.

Ở đây bạn có thể thấy bốn nút -

  • Download Everything - Bạn có thể tải xuống phiên bản Foundation này, nếu bạn muốn có tất cả mọi thứ trong khuôn khổ, tức là vanilla CSS và JS.

  • Download Essentials - Nó sẽ tải xuống phiên bản đơn giản bao gồm lưới, nút, kiểu chữ, v.v.

  • Custom Download - Điều này sẽ tải xuống thư viện tùy chỉnh cho Foundation, nó bao gồm các phần tử và xác định kích thước của cột, cỡ chữ, màu sắc, v.v.

  • Install via SCSS - Thao tác này sẽ chuyển hướng bạn đến trang tài liệu để cài đặt Foundation cho các trang web.

Bạn có thể nhấp vào Download Everythingđể lấy mọi thứ trong khuôn khổ, tức là CSS và JS. Vì các tệp bao gồm tất cả mọi thứ trong khuôn khổ nên mọi lúc bạn không cần phải bao gồm các tệp riêng biệt cho chức năng riêng lẻ. Tại thời điểm viết hướng dẫn này, phiên bản mới nhất (Foundation 6) đã được tải xuống.

Cấu trúc tệp

Sau khi Foundation được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp / thư mục sau:

Như bạn có thể thấy, có CSS ​​và JS đã biên dịch (foundation. *), Cũng như CSS và JS được biên dịch và rút gọn (foundation.min. *).

Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này.

Mẫu HTML

Một mẫu HTML cơ bản sử dụng Foundation như được hiển thị bên dưới:

<!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>

Các phần sau đây mô tả chi tiết đoạn mã trên.

Loại tài liệu HTML5

Foundation bao gồm một số phần tử HTML và thuộc tính CSS yêu cầu sử dụng loại tài liệu HTML5. Do đó, mã sau cho loại tài liệu HTML5 nên được bao gồm ở đầu tất cả các dự án của bạn bằng Foundation.

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

Di động đầu tiên

Nó giúp đáp ứng các thiết bị di động. Bạn cần bao gồmviewport meta tag vào phần tử <head>, để đảm bảo kết xuất phù hợp và phóng to chạm trên thiết bị di động.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • thuộc tính width kiểm soát chiều rộng của thiết bị. Đặt nó thành chiều rộng thiết bị sẽ đảm bảo rằng nó được hiển thị trên các thiết bị khác nhau (điện thoại di động, máy tính để bàn, máy tính bảng ...) đúng cách.

  • ban đầu-scale = 1.0 đảm bảo rằng khi được tải, trang web của bạn sẽ được hiển thị ở tỷ lệ 1: 1 và không áp dụng phóng to ra khỏi hộp.

Khởi tạo các thành phần

Tập lệnh jQuery là bắt buộc trong Foundation cho các thành phần như modals và 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>

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

  • Lưu mã html đã cho ở trên firstexample.html tập tin.

  • Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.

Bạn có thể bắt đầu phát triển dự án của mình với một số mẫu có sẵn có thể được cài đặt thông qua Yeti Launch hoặcFoundation CLI. Bạn có thể bắt đầu với dự án mới bằng cách sử dụng các mẫu này bằng cách sử dụng hệ thống xây dựng Gulp để xử lý Sass, JavaScript, sao chép tệp, v.v.

Mẫu cơ bản

Mẫu cơ bản giống như mẫu SASS, bao gồm cấu trúc thư mục phẳng và chỉ biên dịch các tệp SASS và rất tốt nếu có mẫu đơn giản này trong khi chỉ sử dụng SASS. Bạn có thể sử dụng mẫu cơ bản bằng cách sử dụng Yeti Launch hoặc sử dụng Foundation CLI bằng lệnh sau:

$ foundation new --framework sites --template basic

Để thiết lập điều này, trước tiên hãy chạy npm install , bower install và sử dụng lệnh npm start để chạy nó. Bạn cũng có thể tải xuống các tệp mẫu từ Github .

Mẫu ZURB

Nó là sự kết hợp của CSS / SCSS, JavaScript, mẫu Handlebars, cấu trúc đánh dấu, nén hình ảnh và sử dụng xử lý SASS. Bạn có thể sử dụng mẫu ZURB bằng cách sử dụng Yeti Launch hoặc sử dụng Foundation CLI bằng lệnh dưới đây:

$ foundation new --framework sites --template zurb

Để chạy mẫu này, hãy làm theo các bước tương tự được chỉ định trong mẫu cơ bản. Bạn cũng có thể tải xuống các tệp mẫu từ Github .

Sao chép tài sản

Bạn có thể sao chép nội dung trong src / tài sản thư mục sử dụng Gulp trong đó tài sản sẽ được thư mục dự án của bạn. Điều quan trọng ở đây là, các tệp SASS, tệp JavaScript và hình ảnh sẽ không thuộc quy trình sao chép nội dung này, vì chúng sẽ có quy trình riêng để sao chép nội dung.

Tổng hợp trang

Bạn có thể tạo các trang HTML trong ba thư mục cụ thể là trang , bố cụcphần nằm bên trong thư mục src / . Bạn có thể sử dụng trình biên dịch tệp phẳng Panini để tạo bố cục cho các trang bằng cách sử dụng các mẫu, trang, phân đoạn HTML. Quá trình này có thể được thực hiện bằng cách sử dụng ngôn ngữ tạo khuôn mẫu của Handlebars .

Biên dịch SASS

Bạn có thể biên dịch SASS thành CSS bằng Libsass và tệp SASS chính sẽ được lưu trữ trong src / asset / scss / app.scss và các phần SASS mới được tạo cũng sẽ được lưu trong chính thư mục này. Đầu ra của CSS sẽ giống như CSS bình thường, theo kiểu lồng nhau. Bạn có thể nén CSS bằng clean-css và xóa CSS không sử dụng khỏi biểu định kiểu bằng UnCSS .

Biên dịch JavaScript

Các tệp JavaScript sẽ được lưu trữ trong thư mục src / asset / js cùng với Foundation và tất cả các tệp phụ thuộc được gắn với nhau thành tệp app.js. Các tệp sẽ được gắn với nhau theo thứ tự dưới đây -

  • Sự phụ thuộc của Foundation.
  • Các tập tin sẽ được lưu trữ trong thư mục src / asset / js .
  • Các tập tin được đóng gói thành một tập tin gọi là app.js .

Nén hình ảnh

Theo mặc định, tất cả hình ảnh sẽ được lưu trữ trong thư mục tài sản / img trong thư mục dist . Bạn có thể nén hình ảnh trong khi xây dựng để sản xuất bằng cách sử dụng gulp-imagemin hỗ trợ các tệp JPEG, PNG, SVG và GIF.

BrowserSync

Bạn có thể tạo một máy chủ BrowserSync để kiểm tra trình duyệt được đồng bộ hóa có sẵn tạihttp://localhost:8000và có thể xem các mẫu đã biên dịch bằng URL này. Trong khi máy chủ của bạn đang chạy, trang sẽ tự động làm mới khi bạn lưu tệp và bạn có thể thấy các thay đổi được thực hiện đối với trang trong thời gian thực khi bạn làm việc.

Sự miêu tả

Nó bao gồm các yếu tố Nền tảng để hoạt động trơn tru với các ứng dụng web. Bảng sau liệt kê một số thành phần của Foundation:

Sr.No. Thành phần & Mô tả
1 Accordion

Accordions chứa các tab dọc được sử dụng trên các trang web để mở rộng và thu gọn lượng lớn dữ liệu.

2 Menu Accordion

Nó hiển thị menu có thể thu gọn với các hiệu ứng đàn accordion.

3 Huy hiệu

Huy hiệu tương tự như nhãn, được sử dụng để làm nổi bật thông tin như ghi chú và thông điệp quan trọng.

4 Breadcrumbs

Nó chỉ định vị trí hiện tại cho một trang web trong phân cấp điều hướng.

5 nút

Foundation hỗ trợ các nút tiêu chuẩn với các phong cách khác nhau.

6 Gọi ra

Chú thích là một phần tử, có thể được sử dụng để đặt nội dung bên trong.

7 Nút đóng

Nó được sử dụng để loại bỏ hộp cảnh báo.

số 8 Menu chi tiết

Menu chi tiết thay đổi các danh sách lồng nhau thành menu chi tiết dọc.

9 Trình đơn thả xuống

Menu thả xuống được sử dụng để hiển thị các liên kết ở định dạng danh sách.

10 Ngăn thả xuống

Ngăn thả xuống hiển thị nội dung khi bạn nhấp vào nút.

11 Video Flex

Nó được sử dụng để tạo các đối tượng video trong các trang web.

12 Lớp Phao

Nó được sử dụng để thêm các lớp tiện ích vào các phần tử HTML.

13 Các hình thức

Nó được sử dụng để tạo bố cục biểu mẫu để thu thập thông tin đầu vào của người dùng.

14 Nhãn

Nhãn là kiểu nội tuyến, xác định nhãn cho một phần tử đầu vào.

15 Đối tượng phương tiện

Nó được sử dụng để thêm các đối tượng media như hình ảnh, video, bình luận blog, v.v. Có thể được đặt bên trái hoặc bên phải của khối nội dung.

16 Thực đơn

Nó cung cấp quyền truy cập vào các chế độ khác nhau trong trang web.

17 Phân trang

Nó là một loại điều hướng chia nội dung thành một loạt các trang liên quan.

18 Thanh trượt

Nó chỉ định phạm vi giá trị bằng cách kéo một chốt.

19 Công tắc điện

Nó được sử dụng để chuyển đổi giữa trạng thái bật và tắt.

20 Bàn

Nó đại diện cho dữ liệu ở định dạng hàng và cột.

21 Các tab

Đây là một tab dựa trên điều hướng hiển thị nội dung thành các ngăn khác nhau mà không cần rời khỏi trang.

22 Hình nhỏ

Nó tạo kiểu cho các hình ảnh ở dạng hình thu nhỏ.

23 Thanh tiêu đề

Nó được sử dụng để hiển thị màn hình hiện tại được người dùng sử dụng cùng với các mục menu khác.

24 Chú giải công cụ

Đó là hộp bật lên nhỏ mô tả thông tin khi bạn di chuột vào liên kết.

25 Thanh trên cùng

Nó được sử dụng để tạo tiêu đề điều hướng trong trang web.

26 Quỹ đạo

Nó là một thanh trượt dễ dàng và mạnh mẽ để vuốt các phần tử bằng cách sử dụng lớp quỹ đạo .

Trong chương này, chúng ta sẽ nghiên cứu về Phong cách toàn cầu . Khung CSS toàn cầu của Foundation bao gồm các thiết lập lại hữu ích giúp đảm bảo kiểu dáng nhất quán trên các trình duyệt.

Định cỡ phông chữ

Kích thước phông chữ của biểu định kiểu trình duyệt được đặt thành 100% theo mặc định. Kích thước phông chữ mặc định được đặt thành 16 pixel. Tùy thuộc vào kích thước phông chữ, kích thước lưới được tính toán. Để có kích thước phông chữ cơ sở riêng biệt và các điểm ngắt lưới không bị ảnh hưởng, hãy đặt giá trị $ rem-base thành $ global-font-size , giá trị này phải bằng pixel.

Màu sắc

Các phần tử tương tác như liên kếtnút sử dụng màu xanh lam mặc định đến từ biến SASS $ primary-color . Các thành phần cũng có thể có các màu như: thứ cấp, cảnh báo, thành công và cảnh báo . Để biết thêm thông tin kiểm tra tại đây .

Tham chiếu SASS

Biến

Bảng sau liệt kê các biến SASS, được sử dụng để tùy chỉnh kiểu mặc định của các thành phần trong dự án _settings.scss của bạn .

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$global-width

Nó thể hiện chiều rộng toàn cầu của trang web. Được sử dụng để xác định chiều rộng hàng của lưới.

Con số rem-calc (1200)
2

$global-font-size

Nó đại diện cho kích thước phông chữ được áp dụng cho <html><body> . Nó được đặt 100% theo mặc định và giá trị cài đặt trình duyệt của người dùng sẽ được kế thừa.

Con số 100%
3

$global-lineheight

Nó đại diện cho tất cả các loại chiều cao dòng mặc định. $ global-lineheight là 24px trong khi $ global-font-size được đặt thành 16px.

Con số 1,5
4

$primary-color

Nó mang lại màu sắc cho các thành phần tương tác như liên kết và nút.

Màu sắc # 2199e8
5

$secondary-color

Nó được sử dụng với các thành phần hỗ trợ lớp .secondary .

Màu sắc # 777
6

$success-color

Nó đại diện cho trạng thái hoặc hành động tích cực khi được sử dụng với lớp .success .

Màu sắc # 3adb76
7

$warning-color

Nó thể hiện trạng thái hoặc hành động thận trọng khi được sử dụng với lớp .warning .

Màu sắc # ffae00
số 8

$alert-color

Nó thể hiện một trạng thái hoặc hành động tiêu cực khi được sử dụng với lớp .alert .

Màu sắc # ec5840
9

$light-gray

Nó được sử dụng cho các mục giao diện người dùng màu xám nhạt.

Màu sắc # e6e6e6
10

$medium-gray

Nó được sử dụng cho các mục giao diện người dùng màu xám trung bình.

Màu sắc #cacaca
11

$dark-gray

Nó được sử dụng cho các mục giao diện người dùng màu xám đậm.

Màu sắc # 8a8a8a
12

$black

Nó được sử dụng cho các mục giao diện người dùng màu đen.

Màu sắc # 0a0a0a
13

$white

Nó được sử dụng cho các mục giao diện người dùng màu trắng.

Màu sắc #fefefe
14

$body-background

Nó đại diện cho màu nền của cơ thể.

Màu sắc $ trắng
15

$body-font-color

Nó thể hiện màu văn bản của phần thân.

Màu sắc $ đen
16

$body-font-family

Nó đại diện cho danh sách các phông chữ của phần thân.

Danh sách 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17

$body-antialiased

Loại chống răng cưa được bật bằng cách đặt thuộc tính này thành true bằng cách sử dụng các thuộc tính CSS -webkit-font-smoothing-moz-osx-font-smoothing .

Boolean thật
18

$global-margin

Nó đại diện cho giá trị ký quỹ toàn cầu trên các thành phần.

Con số 1rem
19

$global-padding

Nó đại diện cho giá trị đệm toàn cầu trên các thành phần.

Con số 1rem
20

$global-margin

Nó đại diện cho giá trị ký quỹ toàn cầu được sử dụng giữa các thành phần.

Con số 1rem
21

$global-weight-normal

Nó đại diện cho trọng lượng phông chữ toàn cầu cho loại bình thường.

Từ khoá hoặc Số bình thường
22

$global-weight-bold

Nó đại diện cho trọng lượng phông chữ toàn cầu cho kiểu in đậm.

Từ khoá hoặc Số Dũng cảm
23

$global-radius

Nó đại diện cho giá trị toàn cầu của tất cả các phần tử có bán kính đường viền.

Con số 0
24

$global-text-direction

Nó đặt hướng văn bản của CSS thành ltr hoặc rtl

ltr

SASS giúp làm cho mã linh hoạt hơn và có thể tùy chỉnh trong Foundation.

Khả năng tương thích

Để cài đặt phiên bản dựa trên SASS cho nền tảng, Ruby nên được cài đặt trên Windows. Foundation có thể được biên dịch bằng Ruby SASS và libsass. Chúng tôi đề nghịnode-sass 3.4.2+ phiên bản để biên dịch SASS.

Yêu cầu trình sửa lỗi tự động

Trình sửa lỗi tự động xử lý các tệp SASS. gulp-autoprefixer được sử dụng để xây dựng quy trình. Cài đặt trình sửa lỗi tự động sau được sử dụng để nhận hỗ trợ trình duyệt thích hợp.

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

Đang tải khung

Chúng tôi có thể cài đặt các tệp khung bằng NPM. Sử dụng giao diện dòng lệnh (CLI), chúng ta có thể biên dịch các tệp Sass. Sau đây là lệnh để tải khuôn khổ:

npm install foundation-sites --save

Sau khi chạy mã dòng lệnh trên, bạn sẽ nhận được các dòng sau:

Biên dịch thủ công

Các tệp khung có thể được thêm vào dưới dạng một đường dẫn nhập tùy thuộc vào quá trình xây dựng của bạn, nhưng đường dẫn sẽ giống như các gói_thư mục / foundation-sites / scss . Câu lệnh @import được bao gồm ở đầu tệp foundation-sites.scss . Dòng tiếp theo trong mã đã cho được giải thích trongAdjusting CSS Output phần.

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

Sử dụng CSS đã biên dịch

Bạn có thể bao gồm các tệp CSS đã được biên dịch trước. Có hai loại tệp CSS, tức là được rút gọn và không được hợp nhất. Phiên bản thu nhỏ được sử dụng để sản xuất và phiên bản chưa hợp nhất được sử dụng để chỉnh sửa trực tiếp CSS khung.

<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">

Điều chỉnh đầu ra CSS

Đối với các thành phần khác nhau, đầu ra của Foundation bao gồm nhiều lớp. Nó được sử dụng để kiểm soát đầu ra CSS của khung. Thêm một dòng mã sau để bao gồm tất cả các thành phần cùng một lúc.

@include foundation-everything;

Sau đây là danh sách các thành phần được nhập khi bạn viết đoạn mã trên vào tệp scss của mình. Những thành phần không cần thiết có thể được bình luận. Bạn có thể xem các dòng mã đã cho dưới đây trong tệp Your_folder_name / node_modules / foundation-sites / 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....

Tệp cài đặt

Tệp cài đặt được bao gồm trong toàn bộ dự án nền tảng, tức là _settings.scss . Nếu bạn đang sử dụng Yeti Launch hoặc CLI để tạo dự án Foundation for Sites, bạn có thể tìm thấy tệp cài đặt trong src / asset / scss /.

Chúng tôi đã cài đặt Foundation bằng npm, do đó bạn có thể tìm thấy tệp cài đặt được bao gồm trong your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Bạn có thể chuyển tệp này vào tệp Sass của riêng bạn để làm việc.

Bạn có thể viết CSS của riêng mình, nếu bạn không thể tùy chỉnh bằng các biến. Sau đây là một tập hợp các biến, thay đổi kiểu mặc định của các nút.

$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;

Trong chương này, chúng ta sẽ nghiên cứu về JavaScript . Thật dễ dàng để thiết lập JavaScript trong Foundation; điều duy nhất bạn yêu cầu là jQuery.

Cài đặt JavaScript

Bạn có thể sử dụng tải xuống ZIP, trình quản lý gói hoặc CDN để lấy tệp Foundation JavaScript. Trong mã của bạn, bạn có thể cung cấp các liên kết đến jQuery và Foundation dưới dạng thẻ <script>, được đặt trước <body> đóng và kiểm tra xem Foundation có được tải sau jQuery hay không. Để biết thêm thông tin bấm vào đây .

Cấu trúc tệp

Khi bạn cài đặt Foundation thông qua dòng lệnh, các plugin Foundation sẽ tải xuống dưới dạng các tệp riêng lẻ như foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , v.v. Tất cả các tệp này được kết hợp thành foundation.js , cung cấp tất cả các plugin cùng một lúc. Nếu bạn muốn sử dụng một số plugin, đầu tiên nên tải foundation.core.js .

Ví dụ -

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

Một số plugin nhất định có thể yêu cầu các thư viện tiện ích cụ thể, đi kèm với cài đặt Foundation. Bạn có thể nghiên cứu chi tiết về các yêu cầu plugin cụ thể trong chương tiếp theo Các tiện ích JavaScript .

Tải các tệp riêng lẻ tạo ra chi phí mạng, đặc biệt cho người dùng di động. Để tải trang nhanh hơn, nên sử dụng grunt hoặc gulp .

Khởi tạo

Hàm foundation () được sử dụng để khởi tạo tất cả plugin Foundation cùng một lúc.

Ví dụ -

(document).foundation();

Sử dụng plugin

Sử dụng thuộc tính dữ liệu, các plugin được kết nối với các phần tử HTML khi chúng khớp với tên của plugin. Một phần tử HTML duy nhất có thể chỉ có một plugin tại một thời điểm, mặc dù phần lớn các plugin có thể được lồng trong các plugin khác. Ví dụ: liên kết chú giải công cụ được tạo bằng cách thêm chú giải công cụ dữ liệu . Để biết thêm thông tin bấm vào đây .

Định cấu hình các plugin

Các plugin có thể được tùy chỉnh bằng cách sử dụng cài đặt cấu hình của nó. Ví dụ, bạn có thể đặt tốc độ trượt của đàn accordion lên và xuống. Cài đặt plugin có thể được thay đổi toàn cầu bằng cách sử dụngDEFAULTSbất động sản. Để biết thêm thông tin bấm vào đây .

Thêm plugin sau khi tải trang

Khi HTML mới được thêm vào DOM, bất kỳ plugin nào trên các phần tử đó sẽ không được khởi tạo theo mặc định. Bạn có thể kiểm tra các plugin mới bằng cách gọi lại hàm .foundation () .

Ví dụ -

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

Sử dụng có lập trình

Trong JavaScript, các plugin có thể được tạo theo chương trình và mỗi plugin là lớp của đối tượng Foundation toàn cầu , với một hàm tạo nhận hai tham số như một phần tử và một đối tượng.

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

Phần lớn các plugin được cung cấp API công khai, cho phép bạn thao tác với nó thông qua JavaScript. Bạn có thể xem qua các tài liệu của plugin để nghiên cứu các chức năng có sẵn và các phương thức có thể được gọi dễ dàng.

Ví dụ -

$('.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.
  • Bạn được phép chọn bất kỳ bộ chọn jQuery nào và nếu bộ chọn chứa nhiều plugin, thì tất cả chúng sẽ có phương thức đã chọn giống hệt nhau được gọi.

  • Đối số có thể được chuyển giống như truyền đối số sang JavaScript.

  • Các phương thức có tiền tố là dấu gạch dưới (_) được coi là một phần của API nội bộ, có nghĩa là, nếu không có cảnh báo, chúng có thể bị hỏng, thay đổi hoặc thậm chí biến mất.

Sự kiện

Bất cứ khi nào một chức năng cụ thể kết thúc, DOM sẽ kích hoạt một sự kiện. Ví dụ: bất cứ khi nào các tab được thay đổi, nó có thể được lắng nghe và tạo phản hồi cho nó. Mỗi plugin có thể kích hoạt danh sách các sự kiện, sẽ được ghi lại trong tài liệu của plugin. Trong Foundation 6, các plugin gọi lại bị loại bỏ và phải được sử dụng làm trình xử lý sự kiện.

Ví dụ -

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

Foundation bao gồm các tiện ích JavaScript được sử dụng để thêm các chức năng phổ biến. Nó rất hữu ích và dễ sử dụng. Thư viện tiện ích JavaScript này có thể được tìm thấy trong thư mục Your_folder_name / node_modules / foundation-sites / js

Cái hộp

  • Thư viện Foundation.Box bao gồm một số phương thức.

  • Các js/foundation.util.box.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Có thể chuyển các đối tượng jQuery hoặc các phần tử JavaScript thuần túy cho cả hai phương thức.

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

Đối tượng trả về chỉ định thứ nguyên của phần tử là:

{
   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: ...
   }
}
  • Chức năng ImNotTouchingYou được bao gồm.

  • Dựa trên phần tử được truyền, giá trị Boolean được trả về, giá trị này là xung đột với cạnh cửa sổ hoặc tùy chọn hoặc phần tử mẹ.

  • Hai tùy chọn được chỉ định trong dòng được đưa ra bên dưới tức là leftAndRightOnly, topAndBottomOnly được sử dụng để xác định va chạm chỉ trên một trục.

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

Bàn phím

  • Có nhiều phương pháp trong Foundation.Keyboard , giúp tương tác sự kiện bàn phím dễ dàng.

  • Các js/foundation.util.keyboard.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Đối tượng Foundation.Keyboard.keys bao gồm các cặp khóa / giá trị, những khóa nào được sử dụng trong khuôn khổ thường xuyên hơn.

  • Bất cứ khi nào phím được nhấn thì Foundation.Keyboard.parseKey được gọi để lấy một chuỗi. Điều này giúp quản lý đầu vào bàn phím của riêng bạn.

Đoạn mã sau được sử dụng để tìm tất cả các phần tử có thể lấy tiêu điểm trong phần tử $ đã cho . Do đó, bạn không cần viết bất kỳ hàm và bộ chọn nào.

var focusable = Foundation.Keyboard.findFocusable($('#content'));
  • Hàm handleKey là một hàm chính của thư viện này.

  • Phương pháp này được sử dụng để xử lý sự kiện bàn phím; nó có thể được gọi bất cứ khi nào bất kỳ plugin nào được đăng ký với tiện ích.

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

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

Có thể gọi hàm Foundation.Keyboard.register khi bạn muốn sử dụng các ràng buộc khóa của riêng mình.

MediaQuery

  • Thư viện MediaQuery là xương sống của tất cả các kỹ thuật CSS đáp ứng.

  • Các js/foundation.util.mediaQuery.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Các Foundation.MediaQuery.atLeast ( 'lớn') được sử dụng để kiểm tra xem màn hình ít nhất là rộng như một breakpoint.

  • Các Foundation.MediaQuery.get ( 'vừa') được truy vấn phương tiện truyền thông của một breakpoint.

  • Các Foundation.MediaQuery.queries là một mảng của các truy vấn phương tiện truyền thông, Quỹ sử dụng cho breakpoint.

  • Các Foundation.MediaQuery.current là một chuỗi các kích thước breakpoint hiện hành.

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

Đoạn mã sau truyền phát thay đổi truy vấn phương tiện trên cửa sổ.

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

Chuyển động & Di chuyển

  • Foundation.Motion javascript tương tự như thư viện Motion UI, được bao gồm trong Foundation 6. Nó được sử dụng để tạo chuyển tiếp CSS tùy chỉnh và hoạt ảnh.

  • Các js/foundation.util.motion.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Foundation.Move được sử dụng để làm cho hoạt ảnh được hỗ trợ bởi CSS3 trở nên đơn giản và trang nhã.

  • requestAnimationFrame();phương thức yêu cầu trình duyệt thực hiện một hoạt ảnh; nó yêu cầu hàm hoạt ảnh của bạn được gọi trước khi trình duyệt thực hiện lần sơn lại tiếp theo.

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

Khi hoạt ảnh hoàn tất, finish.zf.animate được kích hoạt.

Hẹn giờ & hình ảnh đã tải

Quỹ đạo sử dụng cả hai, bộ đếm thời gian chức năng và hình ảnh được tải. Cácjs/foundation.util.timerAndImageLoader.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

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

Phương thức tải hình ảnh chạy một hàm gọi lại trong bộ sưu tập jQuery của bạn khi hình ảnh được tải hoàn toàn.

Foundation.onImagesLoaded($images, callback);

Chạm

  • Các phương pháp được sử dụng để thêm các sự kiện kéo giả và vuốt đến các phần tử.

  • Các js/foundation.util.touch.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Các addTouch phương pháp được sử dụng để các yếu tố ràng buộc để chạm vào các sự kiện trong các plugin Slider cho các thiết bị di động.

  • Các spotSwipe phương pháp liên kết các yếu tố với các sự kiện hãy vuốt bằng plugin Orbit cho các thiết bị di động.

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

Gây nên

  • Nó kích hoạt sự kiện được chỉ định cho các phần tử đã chọn.

  • Các js/foundation.util.triggers.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Các trình kích hoạt được sử dụng trong nhiều plugin Foundation.

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

Hai phương pháp sau được sử dụng trong thư viện này tức là thay đổi kích thước và cuộn.

  • Phương thức resize () kích hoạt sự kiện thay đổi kích thước khi sự kiện thay đổi kích thước xảy ra.

  • Phương thức scroll () kích hoạt sự kiện cuộn khi một sự kiện cuộn xảy ra.

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

Điều khoản khác

  • Foundation chứa ít tính năng trong thư viện cốt lõi, được sử dụng ở nhiều nơi.

  • Các js/foundation.core.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.

  • Foundation.GetYoDigits ([số, không gian tên]) trả về một uid cơ sở-36 ngẫu nhiên với không gian tên. Nó trả về độ dài chuỗi dài 6 ký tự theo mặc định.

  • Foundation.getFnName (fn) trả về tên hàm JavaScript.

  • Foundation.transitionend xảy ra khi quá trình chuyển đổi CSS hoàn tất.

Truy vấn phương tiện là mô-đun CSS3 bao gồm các tính năng phương tiện như chiều rộng, chiều cao, màu sắc và hiển thị nội dung theo độ phân giải màn hình được chỉ định.

Foundation sử dụng các truy vấn phương tiện sau để tạo phạm vi phân tích:

  • Small - Dùng cho mọi màn hình.

  • Medium - Nó được sử dụng cho màn hình 640 pixel và rộng hơn.

  • Large - Nó được sử dụng cho màn hình 1024 pixel và rộng hơn.

Bạn có thể thay đổi kích thước màn hình bằng cách sử dụng các lớp điểm ngắt . Ví dụ: bạn có thể sử dụng lớp .small-6 cho màn hình có kích thước nhỏ và lớp .medium-4 cho màn hình có kích thước trung bình như được hiển thị trong đoạn mã sau:

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

Thay đổi các điểm ngắt

Bạn có thể thay đổi các điểm ngắt, nếu ứng dụng của bạn sử dụng phiên bản SASS của Foundation. Bạn có thể đặt tên điểm ngắt dưới biến $ breakpoints trong tệp cài đặt như hình dưới đây -

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

Bạn có thể thay đổi các lớp điểm ngắt trong tệp cài đặt bằng cách sửa đổi biến $ breakpoint-class . Nếu bạn muốn sử dụng lớp .large trong CSS, hãy thêm nó vào cuối danh sách như hình dưới đây:

$breakpoints-classes: (small medium large);

Giả sử, bạn muốn sử dụng lớp .xlarge trong CSS, sau đó thêm lớp này vào cuối danh sách như hình dưới đây:

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

SASS

Mixin Breakpoint

  • Bạn có thể viết các truy vấn phương tiện bằng cách sử dụng breakpoint () mixin cùng với @include .

  • Sử dụng từ khóa giảm hoặc chỉ từ khóa cùng với giá trị điểm ngắt để thay đổi hành vi của truy vấn phương tiện như được hiển thị trong định dạng mã sau:

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

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

Bạn có thể sử dụng ba phương tiện truyền thông truy vấn chân dung , phong cảnhvõng mạc cho hướng thiết bị hoặc mật độ điểm ảnh và họ không được chiều rộng dựa truy vấn phương tiện truyền thông.

Chức năng điểm ngắt

  • Bạn có thể sử dụng chức năng của breakpoint () mixin bằng cách sử dụng hàm nội bộ.

  • Các breakpoint () chức năng có thể được sử dụng trực tiếp viết các truy vấn phương tiện truyền thông riêng -

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

JavaScript

Làm việc với Truy vấn Phương tiện

  • Foundation JavaScript cung cấp hàm MediaQuery.current để truy cập tên điểm ngắt hiện tại trên đối tượng Foundation.MediaQuery như được chỉ định bên dưới:

Foundation.MediaQuery.current
  • Hàm MediaQuery.current hiển thị tên điểm ngắt nhỏ , trung bình , lớn như hiện tại.

  • Bạn có thể nhận được truy vấn phương tiện của breakpoint bằng cách sử dụng hàm MediaQuery.get như hình dưới đây -

Foundation.MediaQuery.get('small')

Tham khảo Sass

Biến

Bảng sau liệt kê các biến SASS, có thể được sử dụng để tùy chỉnh các kiểu mặc định của thành phần:

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$breakpoints

Nó là một tên điểm ngắt có thể được sử dụng để viết các truy vấn phương tiện bằng cách sử dụng breakpoint () mixin.

Bản đồ

nhỏ: 0px

trung bình: 640px

lớn: 1024px

xlarge: 1200px

xxlarge: 1440px

2

$breakpoint-classes

Bạn có thể thay đổi đầu ra của lớp CSS bằng cách sửa đổi biến $ breakpoint-class .

Danh sách nhỏ vừa lớn

Mixin

Mixins tạo một nhóm các kiểu để xây dựng cấu trúc lớp CSS của bạn cho các thành phần Foundation.

BREAKPOINT

Nó sử dụng breakpoint () mixin để tạo các truy vấn phương tiện và bao gồm các hoạt động sau:

  • Nếu chuỗi được chuyển, thì mixin tìm kiếm chuỗi trong bản đồ $ breakpoints và tạo truy vấn phương tiện.

  • Nếu bạn đang sử dụng giá trị pixel, thì hãy chuyển đổi nó thành giá trị em bằng cách sử dụng $ rem-base .

  • Nếu giá trị rem được chuyển, thì nó sẽ thay đổi đơn vị của nó thành em.

  • Nếu bạn đang sử dụng giá trị em, thì nó có thể được sử dụng như hiện tại.

Bảng sau chỉ định tham số được sử dụng bởi điểm ngắt:

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$value

Nó xử lý các giá trị bằng cách sử dụng tên điểm ngắt, giá trị px, rem hoặc em.

từ khóa hoặc số không ai

Chức năng

BREAKPOINT

Nó sử dụng breakpoint () mixin để tạo các truy vấn phương tiện với giá trị đầu vào phù hợp.

Bảng sau chỉ định giá trị đầu vào có thể được sử dụng bởi điểm ngắt:

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$val

Nó xử lý các giá trị bằng cách sử dụng tên điểm ngắt, giá trị px, rem hoặc em.

từ khóa hoặc số nhỏ

Tham chiếu JavaScript

Chức năng

Có hai loại chức năng -

  • .atLeast- Nó kiểm tra màn hình. Nó phải rộng ít nhất là một điểm ngắt.

  • .get - Nó được sử dụng để lấy truy vấn phương tiện của điểm ngắt.

Bảng sau chỉ định tham số được sử dụng bởi các hàm trên:

Sr.No. Tên & Mô tả Kiểu
1

size

Nó kiểm tra và lấy tên của điểm ngắt cho các chức năng được chỉ định tương ứng.

Chuỗi

Sự miêu tả

Hệ thống lưới móng quy mô lên đến 12 cột thông qua trang. Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn.

Tùy chọn lưới

Bảng sau đây cho biết ngắn gọn về cách thức hoạt động của hệ thống lưới Foundation trong nhiều thiết bị.

Thiết bị nhỏ Điện thoại (<640px) Thiết bị trung bình Máy tính bảng (> = 640px) Thiết bị lớn Máy tính xách tay & Máy tính để bàn (> = 1200px)
Hành vi lưới Ngang mọi lúc Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt
Tiền tố lớp .nhỏ-* .Trung bình-* .large- *
Số cột 12 12 12
Lồng được Đúng Đúng Đúng
Bù đắp Đúng Đúng Đúng
Thứ tự cột Đúng Đúng Đúng

Cấu trúc cơ bản của lưới nền tảng

Sau đây là cấu trúc cơ bản của lưới Foundation -

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

<div class = "row">
   ...
</div>
  • Đầu tiên, tạo một lớp hàng để tạo các nhóm cột theo chiều ngang.

  • Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.

  • Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: đối với bốn cột bằng nhau, chúng tôi sẽ sử dụng .large-3

Sau đây là ba lớp được sử dụng trong hệ thống lưới Foundation -

Sr.No. Mô tả & lớp Lưới cơ bản
1 Lớn

Các lớp Large- * được sử dụng cho các thiết bị lớn.

2 Trung bình

Lớp medium- * được sử dụng cho các thiết bị trung bình.

3 Nhỏ

lớp small- * được sử dụng cho các thiết bị nhỏ.

Lưới nâng cao

Sau đây là các định dạng lưới nâng cao được sử dụng trong Foundation.

Sr.No. Mô tả & Lưới nâng cao
1 Cột / Hàng kết hợp

Các lớp cộthàng được sử dụng trên cùng một phần tử để lấy cột có chiều rộng đầy đủ để sử dụng làm vùng chứa.

2 Làm tổ

Chúng ta có thể lồng các cột lưới bên trong các cột khác.

3 Bù đắp

Sử dụng lớp lớn-offset- * hoặc nhỏ-offset- * , bạn có thể di chuyển các cột sang bên phải.

4 Hàng không đầy đủ

Foundation sẽ tự động di chuyển phần tử cuối cùng sang bên phải khi các hàng không bao gồm cột tối đa 12.

5 Thu gọn / Bỏ thu gọn hàng

Sử dụng kích thước truy vấn phương tiện, các lớp thu gọn và thu gọn được đưa vào phần tử hàng để hiển thị các phần đệm.

6 Các cột ở giữa

Bằng cách bao gồm lớp nhỏ ở giữa trong cột, bạn có thể tạo cột ở giữa.

7 Đặt hàng nguồn

Lớp sắp xếp nguồn được sử dụng để chuyển các cột giữa các điểm ngắt.

số 8 Lưới khối

Lưới khối được sử dụng để chia nhỏ nội dung.

Xây dựng theo ngữ nghĩa

Sử dụng bộ hỗn hợp SASS, một CSS lưới được tạo ra, được sử dụng để xây dựng lưới ngữ nghĩa của riêng bạn. Để biết thêm thông tin bấm vào đây

Tham chiếu SASS

Sau đây là tham chiếu SASS cho lưới được sử dụng trong Foundation.

Sr.No. Mô tả & Lưới cơ bản
1 Biến

Sử dụng các biến sass, chúng ta có thể sửa đổi các kiểu mặc định của thành phần này.

2 Mixin

Đầu ra CSS cuối cùng được xây dựng bằng cách sử dụng mixin.

Lưới phụ thuộc vào thuộc tính hiển thị linh hoạt . Nó bao gồm một số tính năng có sẵn với flexbox, như tự động xếp chồng, sắp xếp nguồn, căn chỉnh dọc và căn chỉnh ngang.

Hỗ trợ trình duyệt

Lưới linh hoạt được hỗ trợ trong Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ và iOS 7+.

Bảng sau mô tả các tính năng của Flex Grid cùng với mô tả.

Sr.No. Tính năng & Mô tả
1 Nhập khẩu

Nó bao gồm kết hợp xuất khẩu cho lưới linh hoạt để sử dụng CSS mặc định.

2 Khái niệm cơ bản

Cấu trúc lưới Flex tương tự như cấu trúc lưới nổi.

3 Định cỡ nâng cao

Nếu lớp định cỡ không được bao gồm trong cột, thì nó sẽ tự mở rộng và lấp đầy khoảng trống còn lại trong cột.

4 Điều chỉnh đáp ứng

Nếu kích thước rõ ràng của cột trong lưới flex không được cung cấp, thì nó sẽ tự động điều chỉnh kích thước các cột

5 Căn chỉnh cột

Các cột lưới linh hoạt có thể được căn chỉnh theo trục ngang hoặc trục dọc trong hàng mẹ.

6 Đặt hàng nguồn

Việc sắp xếp nguồn giúp sắp xếp lại cột theo các kích thước màn hình khác nhau.

7 Tham khảo Sass

SASS (Biểu định kiểu tuyệt vời cú pháp) là một trình xử lý trước CSS giúp giảm sự lặp lại với CSS và tiết kiệm thời gian.

Trong chương này, chúng ta sẽ nghiên cứu về Forms. Foundation cung cấp hệ thống bố cục mạnh mẽ, dễ dàng và linh hoạt cho Biểu mẫu , kết hợp các kiểu biểu mẫu và hỗ trợ lưới.

Bảng sau đây liệt kê các phần tử biểu mẫu được sử dụng trong Foundation.

Sr.No. Phần tử biểu mẫu & Mô tả
1 Kiến thức cơ bản về biểu mẫu

Việc tạo biểu mẫu rất dễ dàng và rất linh hoạt, được xây dựng với sự kết hợp của các yếu tố biểu mẫu được tiêu chuẩn hóa và hệ thống lưới mạnh mẽ.

2 Văn bản trợ giúp

Nó được sử dụng để thông báo cho người dùng về mục đích của phần tử và thường được đặt bên dưới một trường.

3 Định vị nhãn

Bạn có thể định vị nhãn của mình ở bên trái hoặc bên phải của đầu vào.

4 Nhãn và nút nội tuyến

Văn bản hoặc điều khiển bổ sung có thể được gắn vào bên trái / bên phải của trường nhập liệu.

5 Kiểm soát tùy chỉnh

Các điều khiển tùy chỉnh như bộ chọn ngày, công tắc hoặc thanh trượt yêu cầu một số chú ý để truy cập nó.

6 Tham chiếu SASS

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng SASS Reference.

Sự miêu tả

  • Foundation sử dụng các lớp khả năng hiển thị để hiển thị hoặc ẩn các phần tử dựa trên hướng thiết bị (dọc và ngang) hoặc kích thước màn hình (màn hình nhỏ, vừa, lớn hoặc phóng to).

  • Nó cho phép người dùng sử dụng các phần tử dựa trên môi trường duyệt web.

Bảng sau liệt kê các lớp khả năng hiển thị của Foundation, các lớp này kiểm soát các phần tử dựa trên môi trường duyệt của chúng -

Sr.No. Lớp hiển thị & Mô tả
1 Hiển thị theo kích thước màn hình

Nó hiển thị các phần tử dựa trên thiết bị bằng cách sử dụng lớp .show .

2 Ẩn theo kích thước màn hình

Nó ẩn các phần tử dựa trên thiết bị bằng cách sử dụng lớp .hide .

Foundation hỗ trợ một số lớp mà bạn có thể ẩn nội dung bằng cách sử dụng các lớp .hide.invisible và không hiển thị gì trên trang.

Phát hiện định hướng

Các thiết bị có thể xác định phương hướng khác nhau bằng cách sử dụng cảnh quanchân dung chức năng. Các thiết bị cầm tay như điện thoại di động chỉ định các hướng khác nhau khi bạn xoay chúng. Đối với máy tính để bàn, hướng sẽ luôn là ngang.

Khả năng tiếp cận

Bảng sau liệt kê các kỹ thuật trợ năng cho trình đọc màn hình, ẩn nội dung trong khi vẫn làm cho trình đọc màn hình có thể đọc được -

Sr.No. Mô tả & Lớp trợ năng
1 Hiển thị cho người đọc màn hình

Nó sử dụng lớp show-for-sr để ẩn nội dung trong khi ngăn trình đọc màn hình đọc nó.

2 Ẩn cho trình đọc màn hình

Nó sử dụng thuộc tính aria-hidden giúp hiển thị văn bản nhưng trình đọc màn hình không thể đọc được.

3 Tạo Liên kết Bỏ qua

Trình đọc màn hình sẽ tạo một liên kết bỏ qua để điều hướng đến nội dung trang web của bạn.

Tham khảo Sass

Foundation sử dụng các mixin sau để hiển thị đầu ra CSS, cho phép xây dựng cấu trúc lớp riêng cho các thành phần của bạn -

Sr.No. Mixin & Mô tả Tham số Kiểu
1

show-for

Theo mặc định, nó ẩn một phần tử và hiển thị nó trên kích thước màn hình nhất định.

kích thước $ Từ khóa
2

show-for-only

Theo mặc định, nó ẩn một phần tử và hiển thị nó trong breakpoint.

kích thước $ Từ khóa
3

hide-for

Theo mặc định, nó hiển thị một phần tử và ẩn nó trên một kích thước màn hình nhất định.

kích thước $ Từ khóa
4

hide-for-only

Theo mặc định, nó hiển thị một phần tử và ẩn nó trên một kích thước màn hình nhất định.

kích thước $ Từ khóa

Giá trị mặc định của tất cả các mixin này sẽ được đặt thành không .

Sự miêu tả

Typography trong Foundation xác định các tiêu đề, đoạn văn, danh sách và các phần tử nội dòng khác tạo ra các kiểu mặc định hấp dẫn và đơn giản cho các phần tử.

Bảng sau liệt kê các kiểu chữ khác nhau được sử dụng trong Foundation -

Sr.No. Kiểu chữ & Mô tả
1 Đoạn văn

Đoạn văn là một nhóm các câu được xác định với kích thước phông chữ khác nhau, các từ được đánh dấu, chiều cao dòng, v.v.

2 Tiêu đề

Nó xác định các tiêu đề HTML từ h1 đến h6.

3 Liên kết

Nó tạo ra một siêu liên kết mở ra một tài liệu khác khi bạn bấm vào văn bản hoặc hình ảnh.

4 Ngăn cách

Nó được sử dụng để ngắt quãng giữa các phần bằng cách sử dụng thẻ <hr>.

5 Danh sách có thứ tự và không có thứ tự

Foundation hỗ trợ danh sách có thứ tự, danh sách không có thứ tự để liệt kê những thứ.

6 Danh sách Định nghĩa

Định nghĩa Danh sách được sử dụng để hiển thị các cặp giá trị tên.

7 Những câu chuyện cổ tích

Nó đại diện cho khối văn bản, định nghĩa lớn hơn nhiều so với bình thường.

số 8 Viết tắt và mã

Viết tắt xác định một thuật ngữ rút gọn của từ hoặc cụm từ và mã đại diện cho một đoạn mã.

9 Tổ hợp phím

Nó được sử dụng để thực hiện một chức năng cụ thể.

10 Khả năng tiếp cận

Foundation cung cấp một số hướng dẫn để truy cập nội dung của trang.

Tham khảo Sass

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng các biến SASS sau đây như được liệt kê trong bảng.

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$header-font-family

Chỉ định họ phông chữ cho các phần tử tiêu đề.

Chuỗi hoặc danh sách $ body-font-family
2

$header-font-weight

Chỉ định trọng lượng phông chữ của tiêu đề.

Chuỗi $ global-weight-normal
3

$header-font-style

Cung cấp kiểu phông chữ của tiêu đề.

Chuỗi bình thường
4

$font-family-monospace

Ngăn xếp phông chữ được sử dụng cho các phần tử sử dụng kiểu monospaced, chẳng hạn như mẫu mã.

Chuỗi hoặc danh sách Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

Xác định kích thước màn hình của tiêu đề và mỗi khóa là một điểm ngắt và mỗi giá trị là một bản đồ của kích thước tiêu đề.

Bản đồ
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

Cung cấp màu sắc của tiêu đề.

Màu sắc thừa kế
7

$header-lineheight

Xác định chiều cao dòng của tiêu đề.

Con số 1,4
số 8

$header-margin-bottom

Cung cấp lề dưới của tiêu đề.

Con số 0,5rem
9

$header-text-rendering

Xác định phương pháp kết xuất văn bản.

Chuỗi tối ưu hóa
10

$small-font-size

Chỉ định kích thước phông chữ cho các phần tử <small>.

Con số 80%
11

$paragraph-margin-bottom

Chỉ định lề dưới của đoạn văn.

Con số 1rem
12

$paragraph-text-rendering

Các phương pháp kết xuất đoạn văn bản.

Chuỗi tối ưu hóa
13

$code-color

Cung cấp màu văn bản cho các mẫu mã.

Màu sắc $ đen
14

$code-font-family

Cung cấp họ phông chữ cho các mẫu mã.

Chuỗi hoặc danh sách $ font-family-monospace
15

$code-border

Chỉ định đường viền xung quanh mã.

Danh sách 1px đặc $ vừa xám
16

$code-padding

Chỉ định phần đệm xung quanh văn bản.

Số hoặc Danh sách rem-calc (2 5 1)
17

$anchor-color

Màu mặc định cho các liên kết.

Màu sắc $ màu chính
18

$anchor-color-hover

Chỉ định màu mặc định cho các liên kết khi di chuột.

Màu sắc scale-color ($ anchor-color, $ light: -14%)
19

$anchor-text-decoration

Trang trí văn bản mặc định cho các liên kết.

Chuỗi không ai
20

$anchor-text-decoration-hover

Trang trí văn bản mặc định cho các liên kết khi di chuột.

Chuỗi không ai
21

$hr-width

Xác định chiều rộng tối đa của một dải phân cách.

Con số $ global-width
22

$hr-border

Chỉ định đường viền mặc định cho một dải phân cách.

Danh sách 1px đặc $ vừa xám
23

$hr-margin

Lề mặc định cho một dải phân cách.

Số hoặc Danh sách rem-calc (20) tự động
24

$list-lineheight

Nó xác định chiều cao dòng cho các mục trong danh sách.

Con số $ paragraph-lineheight
25

$list-style-type

Cung cấp loại dấu đầu dòng cho danh sách không có thứ tự.

Chuỗi đĩa
26

$list-style-position

Nó xác định vị trí cho các dấu đầu dòng trên danh sách không có thứ tự.

Chuỗi ở ngoài
27

$list-side-margin

Xác định lề bên trái (hoặc bên phải).

Con số 1,25rem
28

$defnlist-term-weight

Cung cấp độ đậm phông chữ cho các phần tử <dt>.

Chuỗi $ global-weight-bold
29

$defnlist-term-margin-bottom

Cung cấp khoảng cách giữa các phần tử <dt> và <dd>.

Con số 0,3rem
30

$blockquote-color

Nó áp dụng màu văn bản của các phần tử <blockquote>.

Màu sắc $ xám đen
31

$blockquote-padding

Cung cấp phần đệm bên trong các phần tử <blockquote>.

Số hoặc Danh sách rem-calc (9 20 0 19)
32

$blockquote-border

Nó cung cấp đường viền bên cho các phần tử <blockquote>.

Danh sách 1px đặc $ vừa xám
33

$cite-font-size

Xác định kích thước phông chữ cho các phần tử <cite>.

Con số rem-calc (13)
34

$cite-color

Cung cấp màu văn bản cho <cite>các phần tử.

Màu sắc $ xám đen
35

$keystroke-font

Xác định họ phông chữ cho các phần tử <kbd>.

Chuỗi hoặc danh sách $ font-family-monospace
36

$keystroke-color

Xác định màu văn bản cho các phần tử <kbd>.

Màu sắc $ đen
37

$keystroke-background

Cung cấp màu nền cho các phần tử <kbd>.

Màu sắc $ xám nhạt
38

$keystroke-padding

Chỉ định đệm cho các phần tử <kbd>.

Số hoặc Danh sách rem-calc (2 4 0)
39

$keystroke-radius

Hiển thị bán kính đường viền cho các phần tử <kbd>.

Số hoặc Danh sách $ global-radius
40

$abbr-underline

Cung cấp kiểu đường viền dưới cùng cho các phần tử <abbr>.

Danh sách 1px chấm $ đen

Trong chương này, chúng ta sẽ nghiên cứu về Typography Helpers. Trình trợ giúp về kiểu chữ được sử dụng để định dạng văn bản của bạn theo những cách phù hợp về mặt ngữ nghĩa. Các lớp trợ giúp trong Foundation cho phép bạn tạo ra một số kiểu chữ nhanh hơn.

Bảng sau liệt kê các Trợ giúp về Kiểu chữ , được sử dụng trong Foundation.

Sr.No. Trình trợ giúp & Mô tả kiểu chữ
1 Căn chỉnh văn bản

Nó giúp thay đổi căn chỉnh văn bản của phần tử như trái , phải , giữacăn đều .

2 Tiêu đề phụ

Tiêu đề con có thể được thêm vào bất kỳ phần tử tiêu đề nào bằng cách sử dụng lớp .subheader .

3 Đoạn đầu

Đây là khối văn bản lớn hơn đáng kể so với văn bản bình thường, có thể được sử dụng cho quảng cáo hoặc văn bản mô tả khác.

4 Danh sách không có dấu đầu dòng

Theo mặc định, <ul> là một danh sách có dấu đầu dòng trong Foundation. Để loại bỏ các viên đạn, bạn có thể sử dụng lớp .no-bullet .

5 Số liệu thống kê

Bất cứ khi nào bạn xử lý bảng điều khiển, bạn cần đánh dấu một số con số quan trọng. Bạn có thể đạt được điều này bằng cách sử dụng lớp .stat .

Tham khảo Sass

Biến

Bảng sau đây liệt kê các biến SASS trong tệp cài đặt của dự án làm cho các kiểu mặc định của thành phần được tùy chỉnh.

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$lead-font-size

Kích thước phông chữ cho các đoạn dẫn theo mặc định.

Con số $ global-font-size * 1.25
2

$lead-lineheight

Chiều cao dòng cho đoạn dẫn theo mặc định.

Chuỗi 1,6
3

$subheader-lineheight

Chiều cao dòng mặc định của tiêu đề phụ.

Con số 1,4
4

$subheader-color

Màu phông chữ mặc định của tiêu đề phụ.

Màu sắc $ xám đen
5

$subheader-font-weight

Trọng lượng phông chữ mặc định của tiêu đề phụ.

Chuỗi $ global-weight-normal
6

$subheader-margin-top

Lề trên mặc định của Subheader.

Con số 0,2rem
7

$subheader-margin-bottom

Lề dưới mặc định của tiêu đề phụ.

Con số 0,5rem
số 8

$stat-font-size

Kích thước phông chữ mặc định của số tĩnh

Con số 2,5rem

Trong chương này, chúng ta sẽ nghiên cứu về basic controls. Foundation cung cấp các điều khiển cơ bản như nút , thanh trượtcông tắc .

Bảng sau liệt kê các điều khiển cơ bản được sử dụng trong Foundation.

Sr.No. Kiểm soát và mô tả cơ bản
1 Cái nút

Foundation hỗ trợ nhiều kiểu nút có thể được tùy chỉnh theo nhu cầu của bạn.

2 Nhóm nút

Chúng là vùng chứa cho các phần tử hành động tương ứng. Nó hoạt động tốt khi nhóm hành động được hiển thị trong một thanh.

3 Nút đóng

Nút Close được sử dụng khi bạn muốn thứ gì đó biến mất bằng cách nhấp vào nó.

4 Thanh trượt

Thanh trượt rất hữu ích để đặt các giá trị nhất định bên trong một phạm vi.

5 Công tắc điện

Nó cho phép bạn tắt hoặc bật công tắc bằng cách nhấp vào nó.

Sự miêu tả

Foundation cung cấp một vài tùy chọn khác nhau để tạo kiểu cho các phần tử điều hướng. Nhiều mẫu điều hướng đơn giản được đóng gói; nó có thể được tích hợp trong biểu mẫu cho giải pháp điều hướng đáp ứng mạnh mẽ.

Bảng sau mô tả các loại điều hướng khác nhau cùng với mô tả.

Sr.No. Loại & Mô tả
1 Tổng quan về điều hướng

Điều hướng chứa các liên kết đến phần khác và bao gồm nhiều mẫu điều hướng.

2 Thực đơn

Menu được sử dụng để xây dựng nhiều thành phần điều hướng.

3 Trình đơn thả xuống

Plugin trình đơn thả xuống được sử dụng để tạo các menu con bên dưới menu chính.

4 Menu chi tiết

Plugin menu chi tiết được sử dụng để tạo menu con trong menu chính ở định dạng thanh trượt.

5 Menu Accordion

Nó hiển thị menu có thể thu gọn với các hiệu ứng accordion và cung cấp hỗ trợ tự động thu gọn bằng cách sử dụng plugin Accordion Menu.

6 Thanh trên cùng

Thanh trên cùng giúp hiển thị thanh điều hướng phức tạp dễ dàng trên các kích thước khác nhau của màn hình.

7 Điều hướng đáp ứng

Plugin trình đơn đáp ứng phân bổ trình đơn ở các kích thước khác nhau của màn hình.

số 8 Magellan

Magellan tạo điều hướng ở một vị trí cố định; nó tự động theo dõi danh sách điều hướng trên một trang, dựa trên vị trí cuộn.

9 Phân trang

Việc phân trang, một danh sách không có thứ tự được Bootstrap xử lý giống như nhiều phần tử giao diện khác.

10 Breadcrumbs

Một breadcrumb chỉ định vị trí hiện tại cho một trang web trong phân cấp điều hướng.

Vùng chứa nền tảng được sử dụng để tạo toàn bộ chiều rộng của trình duyệt mọi lúc cho trang web và bao bọc nội dung trang web.

Bảng sau liệt kê một số vùng chứa được sử dụng trong Foundation -

Sr.No. Vùng chứa & Mô tả
1 Accordion

Accordions chứa các tab dọc được sử dụng trên các trang web để mở rộng và thu gọn lượng lớn dữ liệu.

2 Gọi ra

Nó đặt nội dung bên trong thành phần.

3 Ngăn thả xuống

Nó hiển thị nội dung khi bạn nhấp vào nút.

4 Đối tượng phương tiện

Nó thêm các đối tượng phương tiện như hình ảnh, video, bình luận blog, v.v. cùng với một số nội dung.

5 Off-canvas

Nó đặt menu điều hướng khỏi khu vực hiển thị và hiển thị nội dung chính.

6 Reveal-Modal

Foundation cho phép tạo hộp thoại phương thức hoặc cửa sổ bật lên bằng cách sử dụng lớp tiết lộ .

7 Những cái bàn

Foundation cung cấp các bố cục để hiển thị dữ liệu ở dạng bảng.

số 8 Các tab

Đây là một tab dựa trên điều hướng hiển thị nội dung thành các ngăn khác nhau mà không cần rời khỏi trang.

Trong chương này, chúng ta sẽ nghiên cứu về phương tiện trong Foundation. Nền tảng bao gồm một số loại phương tiện như Flex Video , Nhãn , quỹ đạo , thanh tiến trìnhchú giải công cụ . Bảng sau liệt kê tất cả các loại phương tiện.

Sr.No. Loại & Mô tả Phương tiện
1 Video Flex

Nó được sử dụng để nhúng video vào vùng chứa video linh hoạt để giữ đúng tỷ lệ khung hình bất chấp kích thước màn hình.

2 Nhãn

Nó có thể được sử dụng để tạo kiểu nội tuyến có thể được đưa vào nội dung để gọi phần cụ thể hoặc để đính kèm siêu dữ liệu.

3 Quỹ đạo

Đây là một thanh trượt mạnh mẽ và nhạy, cho phép người dùng vuốt trên các thiết bị màn hình cảm ứng.

4 Thanh tiến trình

Nó được sử dụng để hiển thị tiến trình của bạn và có thể được thêm vào bố cục của bạn.

5 Chú giải công cụ

Nó được sử dụng để hiển thị thông tin bổ sung cho một thuật ngữ hoặc hành động trên một trang.

Sự miêu tả

Plugin là một phần mềm cung cấp chức năng bổ sung mà ban đầu chưa được hoàn thiện bởi chức năng cốt lõi của Foundation. Các plugin Foundation có thể được tải lên để mở rộng chức năng của trang web. Các plugin được sử dụng để giúp công việc của bạn dễ dàng hơn.

Bảng sau mô tả các loại Plugin khác nhau cùng với mô tả.

Sr.No. Loại & Mô tả
1 Chịu đựng

Abide được sử dụng trong thư viện xác thực biểu mẫu HTML5 với API gốc bằng cách sử dụng các thuộc tính và mẫu bắt buộc.

2 Bộ chỉnh âm

Bộ chỉnh âm là một cách để tạo nhiều nội dung có chiều cao bằng nhau trên trang của bạn.

3 Trao đổi

Nó được sử dụng để tải nội dung đáp ứng theo thiết bị của người dùng.

4 Người chuyển đổi

Toggle được sử dụng để chuyển từ cài đặt này sang cài đặt khác.

5 Dính

Plugin cố định được sử dụng để tạo nội dung hoặc hình ảnh không đổi trong trang web.

Foundation cung cấp một tập hợp các hàm tiện ích Sass, có thể được sử dụng với util , màu , chọn , đơn vị , giá trị và nhiều hơn nữa.

Bạn có thể nhập tất cả các tệp tiện ích cùng một lúc bằng cách sử dụng dòng mã sau:

@import 'util/util';

Bạn cũng có thể nhập các tệp tiện ích riêng lẻ như được hiển thị bên dưới -

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

Tham khảo Sass

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng các hàm SASS sau đây.

vấn đề xung quanh

Nó cung cấp màu nền trước cho các phần tử dựa trên màu nền. Nó sử dụng định dạng sau để gán các loại tham số khác nhau:

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

Các thông số trên được quy định trong bảng sau:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó kiểm tra độ đậm nhạt của màu sắc.

Màu sắc không ai
2

$yes

Nếu màu sáng, thì nó trả về màu $ yes .

Màu sắc $ đen
3

$no

Nếu màu tối, thì nó trả về $ no color.

Màu sắc $ trắng
4

$threshold

Nó đại diện cho ngưỡng của sự nhẹ nhàng.

Phần trăm 60%

quy mô thông minh

Nó cung cấp màu sắc thích hợp cho các yếu tố theo độ đậm nhạt của nó. Nó sử dụng định dạng sau để chỉ định màu thích hợp:

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

Các tham số đã cho ở trên được chỉ định trong bảng sau:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó được sử dụng để chia tỷ lệ màu.

Màu sắc không ai
2

$scale

Nó chỉ định tỷ lệ phần trăm để tăng hoặc giảm quy mô.

Phần trăm 5%
3

$threshold

Nó đại diện cho ngưỡng của sự nhẹ nhàng.

Phần trăm 40%

đầu vào văn bản

Nó tạo ra một bộ chọn trong khi sử dụng kiểu nhập văn bản. Nó sử dụng định dạng sau để chỉ định các loại đầu vào:

text-inputs($types)

Nó sử dụng tham số như được chỉ định trong bảng sau:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$types

Nó cung cấp một số kiểu nhập văn bản để tạo bộ chọn.

Màu sắc -

đơn vị dải

Nó loại bỏ đơn vị khỏi giá trị và chỉ trả về số. Nó sử dụng định dạng sau để xóa đơn vị khỏi giá trị:

strip-unit($num)

Nó sử dụng tham số như được chỉ định trong bảng sau:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$num

Nó chỉ định số khi bạn xóa đơn vị khỏi giá trị.

Màu sắc không ai

rem-calc

Nó thay đổi giá trị pixel để phù hợp với các giá trị rem. Nó sử dụng định dạng sau để chuyển đổi giá trị pixel thành giá trị rem:

rem-calc($values, $base)

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$values

Nó chuyển đổi các giá trị pixel thành các giá trị rem và phân tách chúng bằng cách sử dụng dấu cách. Nếu bạn đang chuyển đổi danh sách được phân tách bằng dấu phẩy, thì hãy bọc danh sách trong dấu ngoặc đơn.

Số hoặc Danh sách không ai
2

$base

Nó cung cấp giá trị cơ bản trong khi chuyển đổi pixel thành giá trị rem. Nếu có giá trị null cho cơ sở, thì hàm sử dụng biến $ base-font-size làm cơ sở.

Con số vô giá trị

có giá trị

Nó chỉ định giá trị nếu nó không phải là false. Các giá trị sai bao gồm null, không, 0 hoặc danh sách trống. Nó sử dụng định dạng sau để chỉ định giá trị:

has-value($val)

Nó sử dụng tham số như được chỉ định trong bảng sau:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$val

Nó kiểm tra giá trị được chỉ định.

Trộn không ai

bên cạnh

Nó chỉ định cạnh của một giá trị và xác định các giá trị trên cùng / phải / dưới cùng / trái trên phần đệm, lề, v.v. Nó sử dụng định dạng sau để chỉ định cạnh của giá trị:

has-value($val)

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$val

Nó chỉ định mặt của một giá trị.

Danh sách hoặc Số không ai
2

$side

Nó xác định giá trị (trên / phải / dưới / trái) sẽ trả về phía nào.

Từ khóa không ai

get-border-value

Nó xác định giá trị đường viền của một phần tử. Nó sử dụng định dạng sau để chỉ định giá trị đường viền:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$val

Nó tìm thấy một giá trị cụ thể của đường viền.

Danh sách không ai
2

$elem

Nó được sử dụng để trích xuất thành phần đường viền.

Từ khóa không ai

Nhập khẩu

Nó nhập nội dung của hỗn hợp SASS được đặt trong tệp scss / use / _mixins.scss . Bạn có thể nhập hỗn hợp SASS bằng cách sử dụng dòng mã sau:

@import 'util/mixins';

Tham khảo Sass

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng các hàm SASS.

Mixin

Bạn có thể sử dụng các mixin sau để xây dựng cấu trúc lớp CSS cho các thành phần của mình.

CSS-TRIANGLE

Nó được sử dụng để tạo mũi tên thả xuống, pips thả xuống và nhiều hơn nữa. Nó sử dụng bộ chọn <i> & :: before </i> hoặc <i> & :: after </i> để gắn một hình tam giác vào một phần tử hiện có. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$triangle-size

Nó xác định chiều rộng của hình tam giác.

Con số không ai
2

$triangle-color

Nó xác định màu sắc của hình tam giác.

Màu sắc không ai
3

$triangle-direction

Nó xác định hướng của tam giác như lên, phải, xuống hoặc trái.

Từ khóa không ai

HAMBURGER

Nó được sử dụng để tạo biểu tượng menu với chiều rộng, chiều cao, số thanh và màu sắc. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó xác định màu sắc cho biểu tượng.

Màu sắc không ai
2

$color-hover

Nó xác định màu khi bạn di chuột vào biểu tượng.

Màu sắc không ai
3

$width

Nó xác định chiều rộng của biểu tượng.

Con số không ai
4

$height

Nó xác định chiều cao của biểu tượng.

Con số không ai
5

$weight

Nó xác định trọng lượng của các thanh riêng lẻ trong biểu tượng.

Con số không ai
6

$bars

Nó xác định số lượng thanh trong biểu tượng.

Con số không ai

BACKGROUND-TRIANGLE

Nó được sử dụng để chỉ định hình nền cho một phần tử. Nó sử dụng định dạng sau:

@include background-triangle($color);

Nó sử dụng tham số như được chỉ định trong bảng -

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$color

Nó xác định màu cho hình tam giác.

Màu sắc $ đen

CLEARFIX

Mixin này tự động xóa các phần tử con, do đó không cần đánh dấu bổ sung. Nó sử dụng định dạng sau:

@include clearfix;

AUTO-WIDTH

Nó tự động định kích thước các phần tử dựa trên số phần tử có trong vùng chứa. Nó sử dụng định dạng sau:

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

Nó sử dụng các tham số sau như được chỉ định trong bảng:

Sr.No. Mô tả về Thông Số Kiểu Giá trị mặc định
1

$max

Nó xác định số lượng tối đa các mục trong vùng chứa.

Con số không ai
2

$elem

Nó sử dụng một thẻ cho các bộ chọn anh chị em.

Từ khóa li

DISABLE-MOUSE-OUTLINE

Nó được sử dụng để vô hiệu hóa đường viền xung quanh phần tử khi nó xác định hành động nhập chuột. Nó sử dụng định dạng sau:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Nó được sử dụng để ẩn các phần tử và có thể khả dụng với bàn phím và các thiết bị khác. Nó sử dụng định dạng sau:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Nó được sử dụng để loại bỏ các phần tử vô hình và đảo ngược đầu ra CSS bằng cách sử dụng mixin phần tử vô hình () . Nó sử dụng định dạng sau:

@include element-invisible-off;

VERTICAL-CENTER

Nó được sử dụng để đặt các phần tử căn giữa theo chiều dọc bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include vertical-center;

HORIZONTAL-CENTER

Nó được sử dụng để đặt các phần tử căn giữa theo chiều ngang bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include horizontal-center;

ABSOLUTE-CENTER

Nó được sử dụng để đặt các phần tử được căn giữa tuyệt đối bên trong phần tử mẹ không tĩnh bằng cách sử dụng định dạng sau:

@include absolute-center;

Foundation cung cấp thư viện Motion UI để tạo chuyển tiếp và hoạt ảnh UI và được sử dụng bởi các thành phần Foundation như Toggler , RevealOrbit .

Cài đặt giao diện người dùng chuyển động

Bạn có thể cài đặt thư viện Motion UI trong dự án của mình bằng cách sử dụng npm hoặc bower như được hiển thị trong dòng mã sau:

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

Bạn có thể thêm một đường dẫn cho thư viện Motion UI trong La bàn bằng cách sử dụng config.rb như được hiển thị trong dòng mã sau:

add_import_path 'node_modules/motion-ui/src'

Bạn có thể bao gồm đường dẫn trong gulp-sass bằng cách sử dụng các dòng mã sau:

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

Nhập thư viện giao diện người dùng chuyển động trong tệp SASS bằng mã sau:

@import 'motion-ui'

Chuyển tiếp tích hợp

Foundation cung cấp các hiệu ứng chuyển tiếp bằng cách sử dụng các lớp chuyển tiếp được tạo bởi thư viện Motion UI. Hãy để chúng tôi tạo một ví dụ đơn giản bằng cách sử dụng các hiệu ứng chuyển tiếp.

Chuyển đổi tùy chỉnh

Bạn có thể đặt các lớp chuyển tiếp tùy chỉnh bằng thư viện Motion UI. Ví dụ: chúng tôi sẽ đặt các lớp tùy chỉnh cho quá trình chuyển đổi mui-hinge () , sẽ xoay phần tử -

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

Hoạt hình

Bạn có thể sử dụng các hiệu ứng chuyển tiếp Motion UI để tạo hoạt ảnh CSS. Nhấp vào liên kết này để kiểm tra cách hoạt ảnh hoạt động trên phương thức sử dụng lớp hoạt ảnh dữ liệu .