SlideShare a Scribd company logo

Getting started with CSS frameworks using Zurb foundation

•Download as KEY, PDF•
•
Melanie Archer
Melanie Archer

This document provides an introduction to using the Foundation CSS framework. It discusses downloading and installing Foundation, which is a collection of stylesheets, HTML, and JavaScript files that can be used to quickly create flexible web page layouts using responsive design principles. The document walks through building a basic two-column layout with Foundation, adding rows, columns, and sample content to the header, main content area, and footer sections. It also covers making changes to the framework's styling and integrating other CSS frameworks.

Related slideshows

Node.js 101
Node.js 101 Node.js 101
Node.js 101
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
 
Learn Bootstrap 4
Learn Bootstrap 4Learn Bootstrap 4
Learn Bootstrap 4
 
1 of 33
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 •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
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
ASSUMPTIONS • You’ve worked a little with CSS and HTML before • You’ve downloaded the Foundation Framework... errrrh, hmm.... 5
DOWNLOAD THE FRAMEWORK • theFoundation Website foundation.zurb.com/ • GitHub github.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 10
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
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/ • Generatecontent 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 17
LOOK AT THE TEMPLATE IN THE BROWSER • inyour 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 • 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
LOOK AT THE TEMPLATE (AGAIN) • In your Web browser, open index.html • What changed? 22
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
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
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
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 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

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: http://tinyurl.com/zurb-preso 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 foundation.zurb.com/ • GitHub github.com/zurb/foundation 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 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. 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
  • 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 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

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