Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting started with CSS frameworks using Zurb foundation

45,959 views

Published on

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

Published in: Technology, Design

Getting started with CSS frameworks using Zurb foundation

  1. 1. GETTING STARTED WITH CSS FRAMEWORKS using Foundation by ZURB “Foundation” and the Yeti mascot © ZURB
  2. 2. SOME METADATA• Women Who Code Twitter hashtag: #wwcodeSlideshare URL: http://tinyurl.com/zurb-preso 2
  3. 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. 4. AND YOU ARE...•Avisual or interaction designer wanting to make Webprototypes in markup•Aback-end developer who learned a little about CSS, notreally enough to make your life easier•ACSS pro! A stylesheet guru! And you’re sick of re-inventingthe wheel 4
  5. 5. ASSUMPTIONS• You’ve worked a little with CSS and HTML before• You’ve downloaded the Foundation Framework... errrrh, hmm.... 5
  6. 6. DOWNLOAD THE FRAMEWORK• theFoundation Website foundation.zurb.com/• GitHub github.com/zurb/foundation 6
  7. 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. 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. 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. 10. WHAT’S FOUNDATION?1. a package of CSS, JavaScript, and image files created by ZURB2. a quick way to create a flexible layout for a Web page, using the principles of responsive design 10
  11. 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. 12. WHAT’S RESPONSIVE DESIGN?Responsive Design is developing your Web application so thatit is usable on a variety of devices and screen sizes.The term “responsive design” was first popularized by EthanMarcotte in his 2010 article for A List Apart. 12
  13. 13. LET’S GET STARTEDWhat we’re building: a two-column layout. Header, footer,side menu, main content area. 13
  14. 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. 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. 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. 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. 18. LOOK AT THE TEMPLATE IN THE BROWSER• inyour Web browser, open index.html• check out all this helpful default content 18
  19. 19. LOOK AT THE HTMLIn your editing software, open index.html 19
  20. 20. LOOK AT THE CSSIn your editing software, open stylesheets/foundation.css 20
  21. 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. 22. LOOK AT THE TEMPLATE (AGAIN)• In your Web browser, open index.html• What changed? 22
  23. 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. 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. 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. 26. LOOK AT THE TEMPLATE (AGAIN)• In your Web browser, open index.html• What changed? 26
  27. 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. 28. FIX IT 28
  29. 29. ET VOILÀ!Here’s your layout! 29
  30. 30. EXTRA CREDIT: ADDING YOUR OWN STYLES• Add your styles to app.css• Do NOT edit foundation.css 30
  31. 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. 32. THANKS• Sasha Laundy, for suggesting I do this presentation• Michael Knowles, for tolerating my rehearsal of it 32
  33. 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

×