zurb-foundation Getting started with zurb-foundation


This section provides an overview of what zurb-foundation is, and why a developer might want to use it.

It should also mention any large subjects within zurb-foundation, and link out to the related topics. Since the Documentation for zurb-foundation is new, you may need to create initial versions of those related topics.

Installation or Setup


You can download Foundation from Foundation download page

Or install it using bower

bower install foundation-sites

or npm

npm install foundation-sites 

You can also include foundation in your webpages using a cdn

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>


Within your HTML page, include Foundation's CSS, JS, and the dependency of jQuery.

You can either include the locally download css and javascript or use a cdn.

A basic foundation document looks like this:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your page title </title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>