Zurb Foundation Presentation
-
Upload
caroline-artz -
Category
Documents
-
view
47 -
download
0
description
Transcript of Zurb Foundation Presentation
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