Now that you are HTML experts, CSS ninjas, and SASS stars, we're moving right along…
Of course there is still tons more to learn, and you will pick up what you need to from me, from the Internet, and from your classmates. But we are shifting gears to discuss some of the features of the web development framework we will be using this year. Zurb Foundation is an incredibly powerful set of features that simplifies many aspects of website development. We'll talk about it a little bit here, and you can learn a lot more from the official documentation.
What is a Web Framework?
A "framework" is a set of tools, bundled together, that create a coherent environment for web design, with alignment and co-operation between the various elements. Foundation is one of two very popular such frameworks, the other of which is Twitter Bootstrap. It provides:
- a carefully developed set of classes that make it easy to build stylistically coherent websites, and also to design arbitarily complex layouts
- a very cool way to customize all of the design element
- and as a bonus, careful attention to responsive design
How is Foundation organized?
Foundation is many things, but the simplest way to think of it is as a grid of 12 columns, that move and flow as units when you move from one size of screen to another. Inside the grid there are various kinds of components that you can use, all of which have been pretty carefully sized and matched in relation to each other. These include buttons, menus, panels, and dynamic elements such as tabs, image lightboxes and sliders, cool "modal" elements that drop down from the top, etc.
Getting started with the grid & semantic classes
Take a look at this image:
Foundation takes the space on your screen and
- allots itself a certain portion of it – by default, 980px – as usable space. On a big screen, you will see wide margins around that space.
- divides the usable space into rows of 12 columns.
When you're working with Foundation, you structure the webpage with <div> elements using their special semantic classes, e.g.:
<div class="row"> <div class="large-8 small-4 columns"></div> <div class="large-4 small-4 columns"></div> </div>
You can also put rows inside these columns, like this (note: the simple SASS example we used last week would not have allowed this row "nesting"):
<div class="row"> <div class="large-8 small-4 columns"> <div class="row"> <div class="large-8 small-4 columns"></div> <div class="large-4 small-4 columns"></div> </div> </div> <div class="large-4 small-4 columns"></div> </div>
So, rather than futzing with layout details yourself, you use the expertise of the Foundation designers and just take what they've given you.
As you might imagine, we also get to use SASS to customize our sites. To do this, though, we need to take the next step in editing: downloading a real text editor. Let's do this all together in class:
Komodo Edit is a free cross-platform text editor. Click on the download link and download the appropriate version for your computer.
Once it's working, we need to set up a new server under
Preferences --> Servers. I'll give you the login info in class, but the other info is:
- Server Type
- Default Path
Hint: We'll be opening a bunch of files in class – it will be easier to open them all up if you create a project at the end. (
Projects --> New Project) This will open up all your files for you when you restart the project.
Foundation is the engine inside the WordPress themes you'll be using for your class projects; the more you know about them, the better off you'll be.