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! a

front-end Web developer (the HTML/CSS/JavaScript person)! employee of Sungevity, Inc., bringing affordable solar power to the people one home at a time

an

"3

AND YOU ARE...

A

visual or interaction designer wanting to make Web prototypes in markup! back-end developer who learned a little about CSS, not really enough to make your life easier! CSS pro! A stylesheet guru! And youre sick of re-inventing the wheel
"4

ASSUMPTIONS

Youve Youve

worked a little with CSS and HTML before!

downloaded the Foundation Framework...! errrrh, hmm....

"5

DOWNLOAD THE FRAMEWORK

the

Foundation Website! foundation.zurb.com/! github.com/zurb/foundation

GitHub!

"6

WHATS A CSS FRAMEWORK?

collection of prefab stylesheets, HTML, and even JavaScript les that apply a set design to your Web page! provide ornate visual styles (a blog theme), or utilitarian ones (jQuery UI)

can

"7

WHY USE A CSS FRAMEWORK?!

Takes Lets

over a very tedious aspect of front-end development!

people with varying levels of CSS skill work on the same templates! in browsers/usage situations you might not have access to, such as mobile

Tested

"8

HOW DOES A CSS FRAMEWORK DO ITS THING?

a

framework requires that you put certain class names on HTML elements! like: LEGO blocks. Youre given blocks of a certain size to construct your page

Its

"9

WHATS FOUNDATION?
1. a package of CSS, JavaScript, and image les created by ZURB ! 2. a quick way to create a exible layout for a Web page, using the principles of responsive design !
! !

* According to ZURB, the mascot is a Yeti.!

"10

WHOS ZURB?*
! ! ! ! !

A team of T-shaped interaction designers and design strategists who help grow businesses

* No, I dont work for them

"11

WHATS 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 rst popularized by Ethan Marcotte in his 2010 article for A List Apart.!
!

"12

LETS GET STARTED

What were building: a twocolumn 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/!

Generate

content for your page: 3-5 paragraphs! the content to a new text le in your favorite text editor

Copy

"15

INSTALL FOUNDATION
Go

to where youve placed the Foundation download! it there, or move the archive to your working folder! the archive
"16

Keep

Unzip

WHAT IS ALL THIS STUFF?

robots.txt! humans.txt! like asset

a rolling credits screen, or acknowledgements page, for a Web site!

folders for styles, JavaScripts, and images! template!

HTML

!
index.html! javascripts! robots.txt! stylesheets
"17

LOOK AT THE TEMPLATE IN THE BROWSER

in

your Web browser, open index.html! out all this helpful default content

check

"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

In

your editing software, open index.html! three rows inside div.container to correspond to the Header, Main Content Area, and Footer! your changes
"21

Add

Save

LOOK AT THE TEMPLATE (AGAIN)

In

your Web browser, open index.html! changed?

What

"22

BUILDING THE GRID: HEADER

In

your editing software, open index.html! one div with the class values twelve columns inside the rst div.row! & paste a paragraph from your content le into this div
"23

Add

Cut

BUILDING THE GRID: MAIN CONTENT AREA

Now

add 2 divs inside the next div.row! one div the class values of eight columns. Give the next div the class values of four columns! divs and paste content into these

Give

Cut

"24

BUILDING THE GRID: FOOTER

In

your editing software, open index.html! one div with the class values twelve columns inside the last div.row! & paste a paragraph from your content le into this div
"25

Add

Cut

LOOK AT THE TEMPLATE (AGAIN)

In

your Web browser, open index.html! changed?

What

"26

BREAK SOMETHING
Change the class name on one of the HTML elements. For
example: <div class=Row>, or <div class=for columns>! What changed?

Look at it in the browser.

"27

FIX IT

"28

ET VOIL!
Heres your layout!

"29

EXTRA CREDIT: ADDING YOUR OWN STYLES

Add Do

your styles to app.css !

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! Knowles, for tolerating my rehearsal of it

Michael

"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/! Beginners Guide to Responsive Web Design! thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
"33