❮ Foundation Input Sizing Foundation Alerts ❯

Foundation Start

What is Foundation?

Foundation is a free front-end framework for rapid web development.
Foundation includes design templates for HTML and CSS, providing various UI components for the web such as forms, buttons, tabs, and more. It also offers multiple JavaScript plugins.
Foundation is mobile-first, allowing the creation of responsive web pages.
Foundation is suitable for beginners and professionals.
Foundation has been used by Facebook, eBay, Samsung, Amazon, Disney, and more.

| | What is responsive web design? Responsive Web Design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. | | --- | --- |

Where to download Foundation?

You can obtain Foundation through the following methods:

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

Use the CDN provided by tutorialpro.org (recommended):

<!-- CSS file -->
<link rel="stylesheet" href="http://cdn.static.tutorialpro.org/libs/foundation/5.5.3/css/foundation.min.css">

<!-- jQuery library -->
<script src="http://cdn.static.tutorialpro.org/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- JavaScript file -->
<script src="http://cdn.static.tutorialpro.org/libs/foundation/5.5.3/js/foundation.min.js"></script>

<!-- modernizr.js file -->
<script src="http://cdn.static.tutorialpro.org/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

This site's static CDN is based on Alibaba Cloud services.

| | Advantages of using CDN with Foundation: Using CDN with 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? Foundation components use 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 user browsers, ensuring components work across all browsers. | | --- | --- |

Creating a Page with Foundation

1. Add HTML5 doctype

Foundation uses HTML elements and CSS properties, so an HTML5 doctype declaration is required.

You can also set the document's language attribute and character encoding:

<!DOCTYPE html><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 scale freely, add the following <meta> tag within the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

width: Controls the size of the viewport, which can be a specified value, such as 600, or a special value like device-width, which is the width of the device (in CSS pixels at 100% zoom).
initial-scale: The initial zoom level when the page is first loaded.

3. Initialize Components

Some Foundation components are developed based on jQuery, such as modals and dropdown menus. You can initialize these components with the following script:

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

Basic Foundation Page

How to create a basic Foundation page:

Foundation Example

<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation Page</h1>
      <p>Resize the window to see the effect!</p>
      <button type="button" class="button small">I'm a button!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>tutorialpro.org</h3>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
  <div class="medium-4 columns">
    <h3>tutorialpro.org</h3>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
  <div class="medium-4 columns">
    <h3>tutorialpro.org</h3>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
</div>

❮ Foundation Input Sizing Foundation Alerts ❯