Latest web development tutorials

Foundation started

What is the Foundation?

  • Foundation is a free front-end framework for rapid development.
  • Foundation contains HTML and CSS design templates, offers a variety of UI components on the Web, such as forms, buttons, Tabs, and so on. JavaScript also provides a variety of plug-ins.
  • Foundation mobile first, you can create responsive Web pages.
  • Foundation for beginners and professionals.
  • Foundation has been used in Facebook, eBay, Samsung, Amazon, Disney and so on.

NoteWhat is responsive web design?
Responsive Web Design (Responsive Web design) philosophy is: the design and development of the page should be an appropriate response and adjust based on user behavior and device environment (platform, screen size, screen orientation, etc.).

Download Foundation Where?

You can be two ways to get the Foundation:

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

2, use this tutorial official website provides CDN (recommended): 

<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

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

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

<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

Ali cloud-based CDN static site service.

NoteFoundation uses CDN advantages:
Foundation uses CDN improve the corporate site (in particular, contains a lot of pictures and static pages site) access speed, and greatly improve the stability of the above nature of the site

Why modernizr?
Some Foundation component uses cutting-edge HTML5 and CSS3 features compared before, but not all browsers support. Modernizr is used to detect a user's browser HTML5 and CSS3 features of JavaScript libraries - allows components to run properly on all browsers.

Creating pages using Foundation

1. Add the HTML5 doctype

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

Meanwhile, we can set the language and character encoding attributes lang document:

<! DOCTYPE html>
<Html lang = "zh-cn ">
<Head>
<Meta charset = "utf-8 ">
</ Head>
</ Html>

2. Foundation 5 mobile first

Foundation 5 for mobile devices responsive design. The priority is to move the core framework.

To ensure the pages free to zoom in <head> add the following elements in the <meta> tag:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • width: control the size of the viewport, a value can be specified, if 600, or special value, such as device-width of the device width (in pixels CSS scaled to 100% of the time).
  • initial-scale: the initial scale, that is, when the first page load time scale.

3. Initialize Components

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

<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Basic Foundation page

How to create a basic foundation page: 

<!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.w3big.com/assets/foundation-5.5.3/foundation.min.css">

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

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

  <!-- modernizr 文件 -->
  <script src="http://static.w3big.com/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>

try it"