Welcome to Foundation
The Most Advanced Front-end Framework in the World!

Foundation is the most advanced front-end framework in the world. This site serves as a showcase of the framework's features, documentation for it, and my own personal commentary. If you find it useful, please consider making a small donation to my paypal (Link not ready) to help fund projects like this.

Installation

There are many ways to install Foundation, here are the main methods I use:

Install as CLI

  npm install --global foundation-cli
  foundation new --framework sites --template zurb/basic
  cd project/path && npm start

Install as Package

npm install --save foundation-sites

Features

Foundation uses a modern and complex developer build process to provide a modern, efficient, and exemplary end-product. Here are the main feature's highlights:

  • Asset Copying

    Asset Copying

    Gulp copies everything from src/assets/ to dist/assets/

  • Page Compilation

    Page Compilation

    Use pages/, partials/, and layouts in src/ to dynamically build pages out using Panini/Handlebars

  • Sass Compilation

    Sass Compilation

    Customize every inch of the framework, add component based partials and have it all compiled with Libsass into a single tidy app.css file

  • JavaScript Compilation

    JavaScript Compilation

    JS is transpiled using Babel using ES2015 features, bundled by webpack, also compiled into a single tidy app.js file

  • Image Compression

    Image Compression

    Images are copied as-is from assets/img to dist/, and ran through gulp-imagin to compress during a production build

  • BrowerSync

    BrowerSync

    Automagically refresh any browser viewing localhost:8000 whenever specified files are changed

  • Style Guide Creation

    Style Guide Creation

    Foundation includes an autmatic styleguide creator using their Style Sherpa plugin & only 2 files in src/styleguide/

Additional Libraries

Foundation is awesome, but it can't do everything! Listed here are a few useful libraries either used on this site or the many client sites I develop(ed):

  • prism.js: An amazing code highlighter, it's usage is highly recommended if you display more than a small amount of code throughout a site. Prism Docs

Example of PrismJS

  {
    "presets": ["@babel/preset-env"],
    "compact": false,
    "plugins": [
      [
        "prismjs",
        {
          "languages": ["javascript", "css", "markup"],
          "plugins": ["line-numbers", "file-highlight"],
          "theme": "okaidia",
          "css": true
        }
      ]
    ]
  }
  

Snippets

Default Section Layout
section#name.name>div.grid-container>div.cell>h2+p

HTML needs to be escaped!
 <span></span> 

CDN Links
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.1/dist/css/foundation.min.css" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>