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 on the Web, such as forms, buttons, Tabs, etc. A variety of JavaScript plug-ins are also provided.

  • Foundation is mobile-first to create responsive web pages.

  • Foundation is suitable for both beginners and professionals.

  • Foundation has been used by Facebook, eBay, Samsung, Amazon, Disney, etc.


Note##What is responsive web design?
The concept of responsive Web design (Responsive Web design) is: The design and development of the page should respond and adjust accordingly based on user behavior and device environment (system platform, screen size, screen orientation, etc.).
Where to download Foundation?

You can get Foundation in the following two ways:

1. From the official website Download the latest version: http://foundation.zurb.com/.

2. Use the CDN provided by the official website of php Chinese website (recommended):

<!-- css file -->
<link rel="stylesheet " href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery library -->
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript file -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr file -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"> </script>
This site’s static CDN is based on Alibaba Cloud services.

Create a page using Foundation

1. Add HTML5 doctype

Foundation uses HTML elements and CSS attributes, so you need to add the HTML5 doctype document type declaration.

At the same time, we can set the language attribute lang and character encoding of the document:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>

##2. Foundation 5 Mobile First

Foundation 5 is responsive design for mobile devices. At its core, the framework is mobile-first.

To ensure that the page can be freely scaled, the following

<meta> tag can be added to the <head> element:

< ;meta name="viewport" content="width=device-width, initial-scale=1">
  • width: Control the size of the viewport, one that can be specified Value, if 600, or a special value, such as device-width 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 loaded for the first time.

3. Initialize components

Some Foundation components are based on jQuery, such as modal boxes, drop-down menus, etc. You can use the following script to initialize the component:

<script>$(document).ready (function() {
$(document).foundation();
})

</script>
Basic Foundation page

How to create a basic foundation page

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css 文件 -->
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
 
<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation 页面</h1>
      <p>重置窗口大小，查看效果！</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
</div>

</body>
</html>

Running instance»Click the "Run Instance" button to view the online instance

←
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
NoteFoundation Advantages of using CDN: Foundation Using CDN improves corporate sites (especially those containing a large number of images and static page sites), and greatly improve the stability of the above properties


Why use modernizr?Some Foundation's components use cutting-edge HTML5 and CSS3 features, but not all browsers support them. Modernizr is a JavaScript library for detecting HTML5 and CSS3 features of a user's browser - allowing components to work correctly on all browsers.