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.


← Back to Getting Started

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 update command.

  • 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>
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »