Websites need to work on a web server so when you want to develop locally, you need to mimic the live environment on your machine.
I use MAMP to do this and it’s available for both Mac and Windows. It’s super easy to install and then you get all the benefits of a live environment with an Apache web server and PHP support.
For now though, it’s just going to be used primitively as a server to display an HTML version of the new website.
MAMP
Once installed, boot it up and hit start servers.
Once running, your default browser should open with the MAMP landing page. From here, you can access PHPMyAdmin to set up a local database, we’ll cover that on a later post.
For this project, we’re going to install a local version of Foundation. We’ll opt for the CSS version at the moment because this is a beginner guide and I still don’t know what I’m doing with the SASS version.
Get Foundation
To get Foundation, you literally visit get.foundation and click the big ol’ Download Foundation button.
There are some more advanced options where you can customise the download or set your variables including colours but we don’t need that for now. If you want to do that, visit the sites downloads.
Take your Foundation download and drag it into the htdocs folder of MAMP. This folder is where your websites will sit.
At this point, you can rename your folder, for easy access in the browser bar. Alternatively, copy the folder name, paste it at the root directory you can access from the start page of MAMP.
Depending on when you read this, your version of Foundation may be different, but here in the COVID-19 lockdown of 2020, we’re currently on version 6.6.3.
http://localhost:8888/Foundation-Sites-6.6.3-CSS/Make a note of the version you’re using so you know at a later date. Just put this in a text file in your directory, it’s quicker and easier to access than the comments in your CSS file.
Tip!
The team at Foundation are nice enough to give you a template from which to play around with.
So fire up the index.html in your favourite IDE (mine is Sublime) and you’re away.
I won’t be teaching you the mechanics of any frameworks, they cover it all themselves on their own sites.
For example, on Foundation, you can:
The next post will show how I take the HTML framework and combine it with my design from Sketch to start the foundations of my own Foundation.
