Day 1

Case Study

Zurb's Foundation framework is a flexible, scalable solution for both rapid prototyping as well as development / deployment. The markup is very simple to execute, and the amount of styling provided is just awesome. Not only is this going to serve as our first case study, but we will also be using this framework for the duration of the week to exercise our own CSS skills.

Flexible - Zurb is very proud of their framework, and rightfully so. They make the claim that it is "Flexible", but what does that mean?

For the purpose of this course, we can understand flexibility as a behavior that allows for little to no modification to the essential framework in order to develop or deploy.

Mouthful huh? What this means in general terms, is that we can do just about whatever we want with the technology, and aren't really locked in to making sites that

all look the same. Foundation is based on a grid system, but it is very easy to break out of the traditional grid look. More on this later...

Scalable - Zurb also makes the claim that their framework is Scalable (which it is). What does this mean?

It might be easy to confuse scalable with flexible, or at least interchange the words at times. But they are different things in terms of web design.

The scalability of Foundation is derived from the ability to develop a single site, and deploy to mobile and tablet devices. This was very much a dream even a year ago.

Frameworks like Foundation make this a reality. By basing the measurements and fundamental styles on percentages rather on fixed pixel values, the objects

on the screen can scale to an appropriate size in regards to the device the user is viewing the site on. To take this a step further, with the development of technology

that compiles mobile applications from the HTML markup language, you can very quickly develop a page based application using Foundation, or other frameworks.

Rapid Prototyping / Development - Zurb's other big claim is that this can create a super fast work flow. This is more obvious, but still deserves an explanation.

Because so many styles are written for you, if you are comfortable enough with basic markup, you can "write" out a site in very little time. For anyone who can

visualize a grid and a hierarchy of containers, it really is rapid. And the naming structure in the framework is nice too, and common sense. For example, if you want

an element to be six columns wide (which is half the standard width since the framework is based off of a 12 column layout), then you simply type "six columns" in the

tag element's class. For those of you familiar with HTML, that likely made some sense. If you're new to this, get ready for a crash course in HTML.

Resources

HTML

CSS

Web Design

Tools

Assignment

For your first assignment, you are to completely style the template I've provided using the principles that we've discussed in today's class. There may or may not be any time to work on this in class, so be prepared to go home, download one of the HTML editors suggested and get to work. We will look at these tomorrow.