• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting started with CSS frameworks using Zurb foundation
 

Getting started with CSS frameworks using Zurb foundation

on

  • 41,086 views

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

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

Statistics

Views

Total Views
41,086
Views on SlideShare
40,934
Embed Views
152

Actions

Likes
17
Downloads
442
Comments
9

10 Embeds 152

http://hire.chrisjlee.net 71
http://linkthing.co 41
https://twitter.com 20
http://www.linkedin.com 5
http://a0.twimg.com 4
http://us-w1.rockmelt.com 3
http://www.pinterest.com 3
http://www.jeffreypucaputan.com 2
http://pinterest.com 2
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

19 of 9 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Getting started with CSS frameworks using Zurb foundation Presentation Transcript

  • GETTING STARTED WITH CSS FRAMEWORKS using Foundation by ZURB “Foundation” and the Yeti mascot © ZURB
  • SOME METADATA• Women Who Code Twitter hashtag: #wwcodeSlideshare 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 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
  • 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 ZURB2. 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 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
  • LET’S GET STARTEDWhat 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 HTMLIn your editing software, open index.html 19
  • LOOK AT THE CSSIn 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