Foundation - An Introduction to the CSS Framework

CSS Framework Foundation

Foundation is an open-source, mobile first CSS framework created by Zurb.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and JavaScript for the Foundation library.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Foundation Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
      </body>
    </html>

This example makes use of a CDN that loads the default settings. (You can always find the latest versions at cdnjs.com) If you’d like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation download page.

Learning Resources

  1. Foundation Documentation
  2. List of Foundation Tutorials
  3. Foundation Source Files on GitHub
  4. DevTips YouTube Series on Foundation Grid

I hope this is not unwanted advertising but i have set up a german Foundation learning site with a 30 chapter free Foundation course under:
http://foundation-tutorials-deutsch.de

Maybe this is interesting for some users :slight_smile: