Foundation Getting Started
What is Foundation?
- Foundation is a free front-end framework for rapid development.
- Foundation includes HTML and CSS design templates, providing a variety of UI components for the Web, such as forms, buttons, Tabs, and more. It also provides a variety of JavaScript plugins.
- Foundation is mobile-first and can create responsive web pages.
- Foundation is suitable for both beginners and professionals.
- Foundation has been used at Facebook, eBay, Samsung, Amazon, Disney, etc.
 |
What is responsive web design? The concept of Responsive Web design is: The design and development of a page should respond and adjust accordingly based on user behavior and the device environment (system platform, screen size, screen orientation, etc.). |
|---|
Where to download Foundation?
You can obtain Foundation in the following two ways:
1. Download the latest version from the official website:http://foundation.zurb.com/。
2. Use the CDN provided by Staticfile (recommended):
<!-- css 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.net/foundation/5.5.3/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/jquery.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/foundation.min.js"></script> <!-- modernizr.js 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/modernizr.js"></script>
This site's static CDN is based on Alibaba Cloud services.
|
Advantages of using CDN for Foundation: Foundation's use of CDN improves the access speed of enterprise sites (especially sites containing a large number of images and static pages), and greatly improves the stability of sites with the above characteristics. Why use modernizr? Some Foundation components use relatively cutting-edge HTML5 and CSS3 features, but not all browsers support them. Modernizr is a JavaScript library used to detect HTML5 and CSS3 features in the user's browser, allowing the components to run properly across all browsers. |
|---|
Creating pages with Foundation
1. Add HTML5 doctype
Foundation uses HTML elements and CSS properties, so you need to add the HTML5 doctype declaration.
At the same time, we can set the document's language attribute lang and character encoding:
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
2. Foundation 5 mobile-first
Foundation 5 is designed for responsive design on mobile devices. The core of the framework is mobile-first.
To ensure the page can be freely scaled, you can<head>Add the following to the element<meta>Labels:
- width: controls the size of the viewport, which can be set to a specific value, such as 600, or a special value, such as device-width, which is the width of the device (in CSS pixels when scaled to 100%).
- initial-scale: the initial scaling ratio, that is, the scaling ratio when the page is first loaded.
3. Initialize components
Some Foundation components are developed based on jQuery, such as: modals, dropdown menus, etc. You can use the following script to initialize components:
$(document).ready(function() {
$(document).foundation();
})
</script>
Basic Foundation page
How to create a basic Foundation page:
Foundation Examples
Try it Yourself »