Features Videos Help About Updates
Menu Buy Now

Zurb Foundation

First Steps:
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps:
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Know:
CodeKit + Git
Troubleshooting
License Recovery
PostCSS Tools:
Autoprefixer
PurgeCSS
Custom PostCSS Plugins
Other Tools:
npm
Babel — (JS Transpiler)
Terser — (JS Minifier)
Rollup — (JS Bundler)
Cache-Buster
HTML-Minifier
LightningCSS
Bless
Languages:
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug
Haml
Slim
Kit
Markdown
JSON
Image Optimizers:
WebP
PNG
JPEG
SVG
GIF
Frameworks:
CodeKit Frameworks
Tailwind
Bootstrap
Bourbon
Bitters
Zurb Foundation
Susy
Nib
Jeet
Syntax Checkers:
ESLint
Advanced:
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins:
Nova
Atom
Sublime Text
Coda 2
More
Read-Only Mode
Upgrading From 2.0
FAQ
The Zurb Foundation logo

Foundation is an advanced, responsive front-end framework. It includes a fully customizable, responsive grid, a large library of Sass mixins, commonly used JavaScript plugins, and full accessibility support.

With one click, you get a fully-functional website. Start customizing the design and content from there.


Creating A Foundation Project

A screenshot of the New Zurb Foundation Project menu command

Choose File > New Zurb Foundation Project from CodeKit's menubar.

In the window that appears, choose an empty folder.

CodeKit adds that folder as a Project and opens the Zurb Foundation category of Project Settings:

a screenshot of the Zurb Foundation category of Project Settings in CodeKit
One-Click Install

Click the Install Foundation button. CodeKit will download the latest version of Foundation from the web and configure options appropriately. After the download completes, CodeKit will automatically compile some files.

Hit the Preview button in CodeKit to see the initial template, then start customizing.


Updating Foundation

Once Foundation is installed in your Project, you can update it by opening the Assets area. The installed and latest versions of Foundation are shown in the list:

A screenshot of the Assets area in the CodeKit Window showing how to update Foundation

Select the foundation-sites component and click Update to update Foundation and all its dependencies to their latest versions.

Note: Foundation may install older versions of some dependencies. That's correct behavior. The exact versions that get installed are defined by the Zurb Foundation team.


Foundation 5

CodeKit can, optionally, install legacy releases of Foundation 5. You should not use version 5 for new projects, however, as it hasn't been actively developed in years.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy