GETTING STARTED WITH CSS
FRAMEWORKS
using Foundation by ZURB
“Foundation” and the Yeti mascot © ZURB

SOME METADATA
• Women Who Code Twitter hashtag: #wwcode
Slideshare URL: http://tinyurl.com/zurb-preso
2

I AM...
• Melanie Archer, @mejarc
•afront-end Web developer (the HTML/CSS/JavaScript
person)
• anemployee of Sungevity, Inc., “bringing affordable solar power
to the people one home at a time”
3

AND YOU ARE...
•Avisual or interaction designer wanting to make Web
prototypes in markup
•Aback-end developer who learned a little about CSS, not
really enough to make your life easier
•ACSS pro! A stylesheet guru! And you’re sick of re-inventing
the wheel
4

ASSUMPTIONS
• You’ve worked a little with CSS and HTML before
• You’ve downloaded the Foundation Framework...
errrrh, hmm....
5

DOWNLOAD THE
FRAMEWORK
• theFoundation Website
foundation.zurb.com/
• GitHub
github.com/zurb/foundation
6

WHAT’S A CSS FRAMEWORK?
•a collection of prefab stylesheets, HTML, and even JavaScript
files that apply a set design to your Web page
• can
provide ornate visual styles (a blog theme), or utilitarian
ones (jQuery UI)
7

WHY USE A CSS
FRAMEWORK?
• Takes over a very tedious aspect of front-end development
• Lets
people with varying levels of CSS skill work on the same
templates
• Tested in browsers/usage situations you might not have access
to, such as mobile
8

HOW DOES A CSS
FRAMEWORK DO ITS THING?
•a framework requires that you put certain class names on
HTML elements
• It’s
like: LEGO blocks. You’re given blocks of a certain size to
construct your page
9

WHAT’S FOUNDATION?
1. a package of CSS, JavaScript, and image files
created by ZURB
2. a quick way to create a flexible layout for a
Web page, using the principles of
responsive design
10

WHO’S ZURB?*
“A team of T-shaped interaction designers and
design strategists who help grow businesses”
* No, I don’t work for them
11

WHAT’S RESPONSIVE DESIGN?
Responsive Design is developing your Web application so that
it is usable on a variety of devices and screen sizes.
The term “responsive design” was first popularized by Ethan
Marcotte in his 2010 article for A List Apart.
12

LET’S GET STARTED
What we’re building: a two-
column layout. Header, footer,
side menu, main content area.
13

OUR TOOLS
• A Web browser, such as Chrome, Firefox,
Safari...even Internet Explorer
• Text or code editor. For example, TextEdit
(Mac), Notepad (Windows), Dreamweaver, vi,
Emacs
14

OBTAINING YOUR CONTENT
• Go to http://cupcakeipsum.com/
• Generatecontent for your page: 3-5
paragraphs
• Copy the content to a new text file
in your favorite text editor
15

INSTALL FOUNDATION
• Go to where you’ve placed
the Foundation download
• Keep it there, or move the
archive to your working
folder
• Unzip the archive
16

WHAT IS ALL THIS STUFF?
• robots.txt
• humans.txt
• like
a rolling credits screen, or acknowledgements page, for a
Web site
• asset folders for styles, JavaScripts, and images
• HTML template
17

LOOK AT THE TEMPLATE IN
THE BROWSER
• inyour Web browser, open
index.html
• check out all this helpful
default content
18

LOOK AT THE HTML
In your editing software, open index.html
19

LOOK AT THE CSS
In your editing software, open stylesheets/foundation.css
20

BUILDING THE GRID: ADDING
ROWS
• Inyour editing software, open
index.html
• Add three rows inside
div.container to correspond to
the Header, Main Content
Area, and Footer
• Save your changes
21

LOOK AT THE TEMPLATE
(AGAIN)
• In
your Web browser,
open index.html
• What changed?
22

BUILDING THE GRID: HEADER
• Inyour editing software, open
index.html
• Add one div with the class
values twelve columns inside the
first div.row
• Cut& paste a paragraph from
your content file into this div
23

BUILDING THE GRID: MAIN
CONTENT AREA
• Now add 2 divs inside the next
div.row
• Giveone div the class values of eight
columns. Give the next div the class
values of four columns
• Cut and paste content into these
divs
24

BUILDING THE GRID: FOOTER
• Inyour editing software, open
index.html
• Add one div with the class
values twelve columns inside the
last div.row
• Cut& paste a paragraph from
your content file into this div
25

LOOK AT THE TEMPLATE
(AGAIN)
• In your Web browser, open index.html
• What changed?
26

BREAK SOMETHING
• Change the class name on one of the HTML elements. For
example: <div class=”Row”>, or <div class=”for columns”>
• Look at it in the browser. What changed?
27

FIX IT
28

ET VOILÀ!
Here’s your layout!
29

EXTRA CREDIT: ADDING
YOUR OWN STYLES
• Add your styles to app.css
• Do NOT edit foundation.css
30

EXTRA CREDIT: USING
FOUNDATION WITH OTHER
CSS FRAMEWORKS
• Other grid systems. Example: Blueprint
• Other “foundation” frameworks. Example: HTML5 Boilerplate
• Other user interface libraries. Example: jQuery UI
31

THANKS
• Sasha Laundy, for suggesting I do this presentation
• Michael Knowles, for tolerating my rehearsal of it
32

FURTHER READING
• Foundation Docs
foundation.zurb.com/docs/
• W3C Web Standards Curriculum: CSS
www.w3.org/wiki/Web_Standards_Curriculum#CSS
• Design By Grid: yet more CSS frameworks for layout
www.designbygrid.com
• Dev Opera: Grid Design Basics
tinyurl.com/grid-design-basics
• InstaCSS: search for CSS properties
instacss.com
• “Responsive Web Design,” by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
• Beginner’s Guide to Responsive Web Design
thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
33