Welcome to part 2 of our Zero to Website series! Now that you have a basic understanding of HTML, CSS, and the tools you’ll need to create a website, we’ll move into what makes up the Foundation Framework.

Frameworks are a great resource to start with when building your site because they include a boilerplate, a CSS reset, a grid and pre-built UI components. We will go over the Foundation file structure, how to add pages, how to overwrite our premade CSS, and direct you to some great resources to help you code faster!

What’s in the Box?

First we’ll explain how the files are structured and then go into detail of each file’s content. There are three main categories in your root directory: index.html, CSS folder and JavaScript folder.

1. The index.html is your homepage. It also serves as your boilerplate which you’ll use on each page.
2. There is a CSS folder which houses our 2 Foundation CSS files and an app.css file - which is where you will add your custom CSS.
3. The JaveScript folder has an app.js file for your custom JavaScript and a vendor folder with several Foundations JS and JQuery files.

Let’s Dive into each file individually - starting with the HTML!

The Index.html file is the home page of your website. It has a head and body section which contains some example code.

The head is where all your metadata, stylesheets and web font links are contained. The head is more for information about the site itself while the body encapsulates the contents of the document.

The Head Features:

• HTML doctype opening bracket: which tells your browser what language it’s reading or needing to render. Currently we are on HTML5, which is the latest version of HTML and allows for more semantic naming of sections.
• Viewport meta tag: which reports the user's visible area of a web page called the viewport. This is the brains of responsive design, telling the media queries what size the viewport is. From there your media queries know whether to change the CSS or not. Do Not Delete this tag or else all of reality will come to a crashing halt.. Oh and your responsive design won’t work.
• CSS stylesheet links: which are referencing the Foundation.css and app.css files. You can add more stylesheets as needed here, making sure app.css is the last one listed. Remember, stylesheets are cascading so whatever is last will override everything before it. When you’re ready for production you would switch that foundation.css file to the foundation.min.css file because it’s a smaller file size and will load faster.

The Body is where all your custom HTML lives. This is the code that the browser renders for all to see! The Body tag section is where you’ll write your HTML for the page content. The Foundation download comes with sample content which should be deleted.

There are also links to the Javascript at the very bottom, right before the closing body tag. Putting JavaScript at the end of the body lets the browser lay out everything before processing the JavaScript. This gives the illusion of loading a page that looks complete faster. Make sure you do not delete these JS links when removing the sample content from the body tags, otherwise your JS won’t work.

The CSS Folder

The Foundation CSS folder has 2 default Foundation.css files along with the app.css file. You won’t change or edit anything on the Foundation.css files since your custom CSS will be written in the given app.css file provided.

• Foundation.css file: is what’s linked up to your pages by default. This file has all the CSS that comes with Foundation. This is where you can find what the default styling is for any component.
• Foundation.min.css file: is a minified version of Foundation CSS - meaning all the white space and tabbing, that makes it easy for a human to read, has been taken out. The only time you will be using this file is when replace the Foundation.css link on your HTML page right before production.
• App.css file: This is where you would add any new or custom CSS styles or to override the Foundation.css file’s content. This file is linked in the head of your HTML, after the Foundation.css file because it allows you to override the default Foundation styles. This is called “cascading”, which means that the CSS files are read in order from top to bottom. If two CSS properties conflict or are the same, the latter one will override what was first.

Note: If you’re adding more CSS and need to import CSS from other libraries, components, fonts or icon fonts you can link them in the head after Foundation.css and before app.css. This way the app.css file can override those extra CSS files too - allowing you to style them appropriately.

The JavaScript Folder

The JavaScript folder contains an app.js file and a Vendor folder. This Vendor Folder is where the default JavaScript files are housed.

The Vendor Folder features:

• Foundation.js: which is your unminified production level file. It has all the JS of Foundation and is linked up by default. If you need to see the default JS with Foundation you will find it here.
• Foundation.min.js: which is the minified version of the Foundation.js file which has been uglified (meaning whitespace and tabs spaces removed). This is what you would use again for production because it is a smaller file size that loads faster.
• jQuery.js file: which is a dependency of Foundation (meaning Foundation needs jQuery included to function). jQuery is a fast, small, and feature-rich JavaScript library which we use to manipulate the HTML elements on your page after they're rendered by the browser. This creates the interactivity when you hover or click on components.
• What-input.js file: is an accessibility JavaScript plugin that visually hides the blue border around elements until a keyboard is used.

Finally, outside of the vendor folder is the App.js file. This is where you would put your custom JavaScript. You will see this $(document).foundation(), aka Foundation, which is being initialized at the top of this document. You would add any of your custom JavaScript or jQuery below the initialization code in this file.

Best Practice: JS is not in head because it affects performance and load time. These JS interaction links should be the last thing to load on the page because you want the other visual content to be accessible before the JS fully loads.

How to start working in the Foundation Files

We have a few basics to go over so you know how to start building your first site on Foundation.

To add additional HTML pages:

1. In the sidebar of your code editor - right click the project name and add a new file.
2. In the sidebar of your code editor - right click the project name and add a new file.

Now you have a 2nd page to your site where you can add new content!

If your editor doesn’t allow this, you can also simply locate the project folder on your computer and add the file there.

>

How to view your page content in the browser:

1. Right Click in the index.html file and select “Open in browser”. You will see all of the example content we provide on the page.
2. When you edit this document and save, you will then need to refresh the web page to see your edits in the browser.

Changing a CSS default style:

1. Locate the component default style in the Foundation.css file that you want to customize.
2. Once you find the CSS you want to change, you can copy the selector over to app.css and change the styles.
3. After you add your desired custom CSS styles and check to see the results in your refreshed browser!

Resources to Build Faster

We have some awesome resources on the Foundation Docs website that will help you build your website faster.

• Kitchen Sink: shows you all the premade styles and components available in our docs - all contained on one page so you can scroll through and see what we have to offer!
• Building Blocks: these are smaller bits of HTML, CSS, and sometimes JS that you can use to build your site. They help you build faster and get certain custom interactions that would be challenging to create on your own. Building Blocks are modular, meaning they can be plugged into your existing project without affecting your existing styles
• Templates: These are fully laid out pages that you can use as is or modify to fit your own needs. Think of these as a structure and functionality that you can customize with CSS. Each of these responsive HTML templates were built with the same techniques and principles we teach in our Introduction to Foundation 6 Course to build your website upon.
• Themes: The terminology is broad here - they can be pre-styled templates that include functionality with JS or can be starter themes that are blank but provide you the structure to build on top of another system, like a CMS (content management system).

---