Presentation at Women Who Code, San Francisco, Feb. 1, 2012.

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

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

3. 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

4. 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

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

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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

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

14. 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

15. 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

16. 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

17. 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

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

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

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

21. 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

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

23. 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

24. 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

25. 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

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

27. 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

28. FIX IT
28

29. ET VOILÀ!
Here’s your layout!
29

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

31. 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

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

33. 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