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)

• an employee of Sungevity, Inc., “bringing affordable solar power to the people one home at a time”

���3

AND YOU ARE...

• A visual or interaction designer wanting to make Web prototypes in markup

• A back-end developer who learned a little about CSS, not really enough to make your life easier

• A CSS 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

• the Foundation Websitefoundation.zurb.com/

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

!

!

* According to ZURB, the mascot is a Yeti.

���10

WHO’S ZURB?*

!

!

!

!

!

* No, I don’t work for them���11

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

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/

• Generate content 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

!

• index.html

• javascripts

• robots.txt

• stylesheets

���17

LOOK AT THE TEMPLATE IN THE BROWSER

• in your 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

• In your 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

• In your 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

• Give one 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

• In your 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 layoutwww.designbygrid.com

• Dev Opera: Grid Design Basics tinyurl.com/grid-design-basics

• InstaCSS: search for CSS propertiesinstacss.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