zurb foundation presentation
DESCRIPTION
Getting started with Zurb Foundation CSS front-end frameworkTRANSCRIPT
![Page 1: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/1.jpg)
GETTING STARTED WITH CSS FRAMEWORKS
using Foundation by ZURB
“Foundation” and the Yeti mascot © ZURB
![Page 2: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/2.jpg)
SOME METADATA
• Women Who Code Twitter hashtag: #wwcode
Slideshare URL: http://tinyurl.com/zurb-preso
���2
![Page 3: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/3.jpg)
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
![Page 4: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/4.jpg)
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
![Page 5: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/5.jpg)
ASSUMPTIONS
• You’ve worked a little with CSS and HTML before
• You’ve downloaded the Foundation Framework...errrrh, hmm....
���5
![Page 6: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/6.jpg)
DOWNLOAD THE FRAMEWORK
• the Foundation Websitefoundation.zurb.com/
• GitHubgithub.com/zurb/foundation
���6
![Page 7: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/7.jpg)
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
![Page 8: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/8.jpg)
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
![Page 9: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/9.jpg)
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
![Page 10: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/10.jpg)
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
![Page 11: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/11.jpg)
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”
![Page 12: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/12.jpg)
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
![Page 13: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/13.jpg)
LET’S GET STARTED
What we’re building: a two-column layout. Header, footer, side menu, main content area.
���13
![Page 14: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/14.jpg)
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
![Page 15: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/15.jpg)
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
![Page 16: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/16.jpg)
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
![Page 17: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/17.jpg)
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
![Page 18: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/18.jpg)
LOOK AT THE TEMPLATE IN THE BROWSER
• in your Web browser, open index.html
• check out all this helpful default content
���18
![Page 19: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/19.jpg)
LOOK AT THE HTML
In your editing software, open index.html
!
!
���19
![Page 20: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/20.jpg)
LOOK AT THE CSS
In your editing software, open stylesheets/foundation.css
���20
![Page 21: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/21.jpg)
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
![Page 22: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/22.jpg)
LOOK AT THE TEMPLATE (AGAIN)
• In your Web browser, open index.html
• What changed?
���22
![Page 23: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/23.jpg)
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
![Page 24: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/24.jpg)
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
![Page 25: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/25.jpg)
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
![Page 26: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/26.jpg)
LOOK AT THE TEMPLATE (AGAIN)
• In your Web browser, open index.html
• What changed?
���26
![Page 27: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/27.jpg)
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
![Page 28: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/28.jpg)
FIX IT
���28
![Page 29: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/29.jpg)
ET VOILÀ!Here’s your layout!
���29
![Page 30: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/30.jpg)
EXTRA CREDIT: ADDING YOUR OWN STYLES
• Add your styles to app.css
• Do NOT edit foundation.css
���30
![Page 31: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/31.jpg)
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
![Page 32: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/32.jpg)
THANKS
• Sasha Laundy, for suggesting I do this presentation
• Michael Knowles, for tolerating my rehearsal of it
���32
![Page 33: Zurb Foundation Presentation](https://reader033.vdocuments.us/reader033/viewer/2022042820/55cf9ae6550346d033a3eeef/html5/thumbnails/33.jpg)
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