Getting started with CSS frameworks using Zurb foundation


Published on

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

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • note links to stylesheets, comments--explain Html and CSS comments\n
  • \n
  • \n(notice that we haven't changed the css)\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The point being: case sensitivity matters. spelling matters\n
  • \n
  • \n
  • Point: you’ll get an updated version which’ll wipe out your changes\n
  • No: blueprint; Yes, boilerplate. Qualified yes, jQuery UI.\n
  • \n
  • \n
  • 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: 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• GitHub 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• 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• 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