HW 2
Due: before class, Tuesday, January 31, 2017
Develop a Foundation website.
Requirements:
Install components for Foundation and create an initial website that
- is responsive
- has a sidebar
- includes at least 3 sections in the main content portion
- includes images and text (stock photos and lorem impsum code is text is fine)
Background
To set up your computer to use Foundation, you need to do more than just
download css and js files.
The reason for this is that Foundation makes use of SASS - which generates the css.
This article
explains a little bit about this process, although it is for version 5
and version 6 is easier.
The other part of the story is using
node js and npm.
npm is a system designed to support sharing and reuse of javascript code, and node js
is a javascript runtime environment.
Basic Strategy for installing Foundation
Foundation Installation
- Install
Git,
Github desktop
- Install Node js
- Download Foundation 6
- Restart computer
- Open Git Shell (or Command Prompt) and start Foundation cli
- $ npm install --global foundation-cli
- Start new project in Git Shell (or Command Prompt window)
- foundation new
- What are you building? "A website (Foundation for Sites)"
- What's the project called? "test1"
- Which template? "Basic Template includes a Sass compiler"
(This takes a while the first time.)
- When finished, run foundation watch while inside the test1 folder.
- When done, can go to test1 folder and edit index.html directly.
Location of test1 is folder where you executed the "foundation new" command.
- Go through
Intro to the Foundation Grid tutorial
Upload Website
Upload your webiste to your individual folder in the class store.
You only need to upload your html, images, js and css files/folders.