More Related Content

Getting started with CSS frameworks using Zurb foundation

  1. GETTING STARTED WITH CSS FRAMEWORKS using Foundation by ZURB “Foundation” and the Yeti mascot © ZURB
  2. SOME METADATA • Women Who Code Twitter hashtag: #wwcode Slideshare URL: 2
  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. AND YOU ARE... •Avisual or interaction designer wanting to make Web prototypes in markup •Aback-end developer who learned a little about CSS, not really enough to make your life easier •ACSS pro! A stylesheet guru! And you’re sick of re-inventing the wheel 4
  5. ASSUMPTIONS • You’ve worked a little with CSS and HTML before • You’ve downloaded the Foundation Framework... errrrh, hmm.... 5
  6. DOWNLOAD THE FRAMEWORK • theFoundation Website • GitHub 6
  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. 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. 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. 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 10
  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. 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
  13. LET’S GET STARTED What we’re building: a two- column layout. Header, footer, side menu, main content area. 13
  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. OBTAINING YOUR CONTENT • Go to • Generatecontent for your page: 3-5 paragraphs • Copy the content to a new text file in your favorite text editor 15
  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. 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. LOOK AT THE TEMPLATE IN THE BROWSER • inyour Web browser, open index.html • check out all this helpful default content 18
  19. LOOK AT THE HTML In your editing software, open index.html 19
  20. LOOK AT THE CSS In your editing software, open stylesheets/foundation.css 20
  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. LOOK AT THE TEMPLATE (AGAIN) • In your Web browser, open index.html • What changed? 22
  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. 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. 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. LOOK AT THE TEMPLATE (AGAIN) • In your Web browser, open index.html • What changed? 26
  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. FIX IT 28
  29. ET VOILÀ! Here’s your layout! 29
  30. EXTRA CREDIT: ADDING YOUR OWN STYLES • Add your styles to app.css • Do NOT edit foundation.css 30
  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. THANKS • Sasha Laundy, for suggesting I do this presentation • Michael Knowles, for tolerating my rehearsal of it 32
  33. FURTHER READING • Foundation Docs • W3C Web Standards Curriculum: CSS • Design By Grid: yet more CSS frameworks for layout • Dev Opera: Grid Design Basics • InstaCSS: search for CSS properties • “Responsive Web Design,” by Ethan Marcotte • Beginner’s Guide to Responsive Web Design 33

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. Wikipedia:\nThe concept of T-shaped skills, or T-shaped persons is a metaphor used in job recruitment to describe the abilities of persons in the workforce. The vertical bar on the Trepresents the depth of related skills as expertise in a same field, whereas the horizontal bar is the ability to collaborate across disciplines with experts in other areas, and to apply knowledge in areas of expertise other than their own.\n\nCampbell, CA\n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. note links to stylesheets, comments--explain Html and CSS comments\n
  20. \n
  21. \n(notice that we haven&apos;t changed the css)\n\n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. The point being: case sensitivity matters. spelling matters\n
  28. \n
  29. \n
  30. Point: you&amp;#x2019;ll get an updated version which&amp;#x2019;ll wipe out your changes\n
  31. No: blueprint; Yes, boilerplate. Qualified yes, jQuery UI.\n
  32. \n
  33. \n