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ục và phầ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ết và nú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> và <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 và -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ảnh và võ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ột và hà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 và .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 quan và châ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 đồ | |
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 |
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ữa và că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ượt và cô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ình và chú 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 , Reveal và Orbit .
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 .