What You Get with Foundation Sass
We've put together all of the pieces you need in one package, let's see what's inside.
Everything Inside
Need a deeper look into what all the Foundation Sass files do? We've got you covered. Or if you simply need a file listing, check here.
Customization
- Changes made here are preserved during update.
- _settings.scss
All of Foundation's Sass variables can be found and modified here to help you customize your version of Foundation.
- app.scss
Here you can determine what stylings will be in your project. By default all of Foundation is imported, but you can deactivate and select specific components you want to import or add your custom Sass here.
- stylesheets folder
We include a stylesheets folder where your HTML can refer to the CSS files. When your SCSS files compile, the resulting CSS files are saved here. It is important to not make an changes to files here as they may be overwritten. You can, however, simply write Vanilla CSS inside your SCSS file and it will be compiled just fine.
JavaScript
- app.js
We initialize Foundation's javascript components here. This is also a great place to add in your own custom javascript.
- jquery.min.js
A minified jQuery file which is required for many Foundation components to work.
- The following JS files will be linked up right before the closing
</body>tag. This ensures that your styles and page loads first without having to wait for all the JS to load:<script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/foundation/js/foundation.min.js"></script> <script src="js/app.js"></script> </body>
Bower Components
- The recommended install uses Bower to package up all the Foundation components and manage any updates. Bower manages the contents of this folder so don't change anything in this folder.
- fastclick.js
Fastclick gets rid of the ~300ms delay that mobile users expericing when "tapping" on a button. It's not a Foundation requirement, but makes your site feel faster.
- foundation folder
This is where we keep all the files that make foundation work. Any CSS and SCSS partials and javascript live here. Including the components here allows you to easily update your project with
bower updatecommand. - jquery
We've included jQuery in here because anytime there is an update to jQuery with a Foundation release it will be updated as well.
- jquery.cookie
This is included in Foundation for our Joyride feature. It allows the browser to create a cookie specifically for the option to not show the Joyride tour a second time.
- modernizr
This acts as a shim for HTML5 elements that older browsers may not recognize, and provides detection for mobile devices. It also helps provide touch support on mobile devices with various browsers.
- normalize.scss
We've included a copy of Normalize here to give you the option to remove quirks in browsers so that all webpages render elements consistently. We recommend you use this because some Foundation styles are dependant on it.
Pre-Packaged Essentials
- index.html
This is an example index file which contains some sample markup (the grid, buttons, etc) as well as the basic structure of a responsive Foundation page. Feel free to change or destroy this file as you see fit, just bear in mind that some of the document
<head>is required for the page to work including the CSS/JS that is linked up at the end of the document. - humans.txt
Located in the site root just next to the robots.txt file. You don't have to use if you don't want. You can mention the developer, the designer, the copywriter, the webmaster, the SEO, SEM or SMO. Name as many people who helped make the site, or not.
- robots.txt
Website owners use the robots.txt file to give instructions about their site to web-crawling robots (also known as Web Wanderers, Crawlers, or Spiders); this is called The Robots Exclusion Protocol. Adding this page allows you to block web robots from indexing parts of your site. You can read more about it here.
- bower.json
Bower helps you to download JS/SCSS/CSS files to your project folder for popular projects like Foundation and jQuery. It also allows you to easily update those files when a library is updated. Bower keeps track of these packages in a manifest file, bower.json. You can make it work for you and your workflow. You can target what version to update your project to here.
- config.rb (compass project only)
This is a Compass configuration file. It allows you to specify how to compile your Sass files (i.e. should the CSS be compressed or not) and also where to place the compiled CSS files (default is in the stylesheets/ directory). You can read more about Compass best practices here.
Foundation File List
Our Foundation Sass file structure will look just like this after you complete the download.
- bower_components
- js
- app.js
- scss
- _settings.scss
- app.scss
- stylesheets
- app.css
- bower.json
- config.rb
- humans.txt
- index.html
- robots.txt
What to know how to properly modify your files? Check out how to use Foundation Sass →
HTML Page Markup
As you'll see in our index.html sample, Foundation pages have some specific markup required for them to work. This code block is a simple boilerplate for content-free Foundation pages that we hope comes in handy. Go ahead and copy/paste this in when creating a new page.
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<!-- if you remove this meta tag, the NSA will spy on you through your Xbox Kinect camera -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>