---

\\n\\n## What is Foundation?\\n\\n* Foundation is a free front-end framework for rapid development.\\n* Foundation includes HTML and CSS design templates, providing various Web UI components, such as forms, buttons, Tabs, etc. It also provides a variety of JavaScript plugins.\\n* Foundation is mobile-first and can create responsive web pages.\\n* Foundation is suitable for both beginners and professionals.\\n* Foundation has been used by Facebook, eBay, Samsung, Amazon, Disney, and others.\\n\\n|  | **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.). |\\n| --- |\\n\\n

---

\\n\\n## Where to download Foundation?\\n\\nYou can get Foundation in the following two ways:\\n\\n1. Download the latest version from the official website: [http://foundation.zurb.com/](http://foundation.zurb.com/).\\n\\n2. Use the CDN provided by Staticfile (recommended):\\n\\n\\nThe static CDN on this site is based on Alibaba Cloud services.\\n\\n|  | **Advantages of using Foundation CDN:** Using a CDN for Foundation improves the access speed of enterprise sites (especially those with a large number of images and static pages), and greatly enhances the stability of such sites. **Why use modernizr?** Some Foundation components use cutting-edge HTML5 and CSS3 features, but not all browsers support them. Modernizr is a JavaScript library used to detect the HTML5 and CSS3 features of the user's browser - allowing components to run normally on all browsers. |\\n| --- |\\n\\n

---

\\n\\n## Creating a Page with Foundation\\n\\n**1. Add HTML5 doctype**\\n\\nFoundation uses HTML elements and CSS properties, so you need to add the HTML5 doctype document type declaration.\\n\\nAt the same time, we can set the document's language attribute lang and character encoding:\\n\\n**2. Foundation 5 Mobile First**\\n\\nFoundation 5 is designed for responsive design on mobile devices. The core of the framework is mobile-first.\\n\\nTo ensure the page can be freely scaled, you can add the following `` tag inside the `` element:\\n\\n* width: Controls the size of the viewport. You can specify a value, such as 600, or a special value like device-width, which represents the width of the device (in CSS pixels when scaled to 100%).\\n* initial-scale: The initial zoom level, which is the zoom ratio when the page first loads.\\n\\n**3. Initialize Components**\\n\\nSome Foundation components are developed based on jQuery, such as modals, dropdown menus, etc. You can use the following script to initialize the components:\\n\\n$(document).ready(function() {\\n\\n $(document).foundation();\\n\\n})\\n\\n

---

\\n\\n## Basic Foundation Page\\n\\nHow to create a basic Foundation page:\\n\\n### Foundation Instance\\n\\n\\n\\n[Try it out »](#)