Using a CSS Framework
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using a CSS Framework

on

  • 11,012 views

Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.

Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.

Statistics

Views

Total Views
11,012
Views on SlideShare
9,305
Embed Views
1,707

Actions

Likes
52
Downloads
756
Comments
6

14 Embeds 1,707

http://blog.dreamcss.com 1175
http://scottishwebfolk.wordpress.com 454
http://www.slideshare.net 28
http://mcgivrer.fr 12
https://scottishwebfolk.wordpress.com 11
http://core.traackr.com 8
http://127.0.0.1 5
http://localhost:8080 4
http://onlyou95.cafe24.com 3
http://translate.googleusercontent.com 3
http://www.brijj.com 1
http://onwebdev.blogspot.com 1
url_unknown 1
http://wcmwd.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

15 of 6 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Boa apresentação sobre Bluerpint e sobre desenvolvimento.
    Are you sure you want to
    Your message goes here
    Processing…
  • very good presentation, thx
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation. Very well explained (and a clean look, too!).
    I have been coding from scratch for years and have been wanting to start using frameworks, while being worried about things like bloated code and non-semantic markup. Very happy to see you address these issues with solutions...

    Plus, clear explanations with examples about using Blueprint! Yay!

    I can't wait to start a new project, now. :D
    Are you sure you want to
    Your message goes here
    Processing…
  • Great job! I'm going to using the css frameworks.
    Are you sure you want to
    Your message goes here
    Processing…
  • very nice explained!
    thanks for sharing the experience
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using a CSS Framework Presentation Transcript

  • 1. < Using a CSS Framework > Gareth J M Saunders, Scottish Web Folk, 17 April 2009 [email_address]
  • 2. or
  • 3. How to spend more time building sites and fewer days debugging IE
  • 4. Outline The problem we had About CSS Frameworks About Blueprint CSS Our experience
  • 5. Problem I realised that every new project I began, I was beginning from scratch
  • 6. Problem Global reset of all browsers to reduce browser inconsistencies . Setup the page layout Setup the typography , images , forms , general HTML tags, etc.
  • 7. Problem Sometimes, I'd recycle code from previous projects.
  • 8. Problem … but often I wouldn't .
  • 9. Problem Reinventing the wheel doesn't always lead to reliable results. http://www.dev102.com/2008/11/25/10-ways-to-programaticly-shoot-yourself-in-the-foot-part-b/
  • 10. After launch After months of development, the day after you've launched a new site invariably …
  • 11. The client says… &quot;But we wanted a 3 column layout !&quot;
  • 12. The client says… &quot;Well, you never told us that …!&quot;
  • 13. The client says… &quot;We need one, like … right now !&quot;
  • 14. The client says… &quot;OK, but it'll take a couple of hours to code it up…&quot;
  • 15. Problem It was not an efficient way to work.
  • 16. Problem No standards No continuity No flexibility Coding took too long
  • 17. Problem Debugging took even longer
  • 18. Search I went looking for a solution…
  • 19. Search I went looking for a solution…
  • 20. Solution: Frameworks I'd been looking into JavaScript and PHP frameworks ...
  • 21. Solution: Frameworks I wonder if there any available for CSS ?
  • 22. Solution: CSS Frameworks Oh, yes!
  • 23. Solution: CSS Frameworks http://tinyurl.com/dcf7sa
  • 24. What a Framework is “ A set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused .” — Jeff Croft http://www.alistapart.com/articles/frameworksfordesigners
  • 25. What a CSS Framework is “ A library that is meant to allow for easier , more standards-compliant styling of a webpage using the Cascading Style Sheets language.” — Wikipedia http://en.wikipedia.org/wiki/CSS_framework
  • 26. What a CSS Framework is “ The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” — Jeff Croft http://www.alistapart.com/articles/frameworksfordesigners
  • 27. Problem And we remember how that looked! http://www.dev102.com/2008/11/25/10-ways-to-programaticly-shoot-yourself-in-the-foot-part-b/
  • 28. Types of CSS Framework Preset-layouts Grid-layouts Content with Style Yahoo! UI Grids 960 Grid System Blueprint CSS YAML
  • 29. Preset-layouts: Content with Style Vertical navigation Horizontal navigation
  • 30. Grid-layouts: Blueprint CSS 24 columns
  • 31. Elements of a CSS Framework Global reset of all browsers to reduce browser inconsistencies . Setup the page layout Setup the typography , images , forms , etc. Modular Optional plugins
  • 32. Advantages Cross-browse r support Faster development time Well-structured, modular code Visual design cohesion Helps beginners learn
  • 33. Disadvantages Often non-semantic Bloated code Limited — a lack of flexibility You inherit other people's bugs Can take time to learn
  • 34. Disadvantage #1: Non-semantic (1/2) Often get non-semantic classes such as: <div class=&quot;column span-4&quot;> Either add an ID to <div id=&quot;logo&quot; class=&quot;column span-4&quot;> And/or copy the code for these non-semantic classes into your CSS code for #logo once you're happy with the design.
  • 35. Disadvantage #1: Non-semantic (2/2) Custom CSS #logo { background-color: black; float: left; margin-right: 10px; width: 150px; } Declarations from .column and .span-4 in framework.
  • 36. Disadvantage #2: Bloated code (1/3) CSS Frameworks generally try to cover every eventuality . Unlikely you'll need to use every declaration in every project. Blueprint CSS is only 15 KB compressed including print.css and ie.css . Use Firefox plugin Dust-Me Selectors to identify unused selectors in your CSS files. www.sitepoint.com/dustmeselectors/
  • 37. Disadvantage #2: Bloated code (2/3) Dust-Me Selectors www.sitepoint.com/dustmeselectors/
  • 38. Disadvantage #2: Bloated code (3/3) And/or compress the code code.google.com/p/minify/ Minify! YUI! Compressor developer.yahoo.com/yui/ compressor
  • 39. Disadvantages: Limited CSS Frameworks can be limited to the needs of the author, lacking flexibility. Many frameworks have MIT or GPL licences allowing you to adapt them. Most frameworks are modular , so just write your own plugins to extend them.
  • 40. Blueprint CSS http:// www.blueprintcss.org
  • 41. Blueprint CSS http:// www.blueprintcss.org MIT license use, copy, modify, publish, sell, etc ... 24 columns 30px + 10px right-margin = 40px Last column has no right-margin Total width = (24 x 40px) - 10px [last] = 950px
  • 42. Blueprint CSS: Elements File Purpose reset.css Resets default browser CSS. grid.css Easy to use grid of 24 columns . typography.css Sets up some sensible default typography: headings, text elements, lists, tables, misc. classes. forms.css Default styling for forms plus classes to enhance your forms. ie.css Contains every hack required for IE . print.css Sensible styles for printing pages .
  • 43. Blueprint CSS: The grid: 24 columns 24 columns
  • 44. Blueprint CSS: .span-24 <div class=&quot; span-24 &quot;>
  • 45. Blueprint CSS: .span-24 .last <div class=&quot; span-24 last &quot;>
  • 46. Blueprint CSS: 12 columns 12 columns 12 columns
  • 47. Blueprint CSS: .span-12 .last <div class=&quot; span-12 &quot;> <div class=&quot; span-12 last &quot;>
  • 48. Blueprint CSS: blank columns after 6 columns + 1 blank 6 columns + 2 blank 6 columns + 3 blank
  • 49. Blueprint CSS: append-x <div class=&quot; span-6 append-1 &quot; <div class=&quot; span-6 append-2 &quot; <div class=&quot; span-6 append-3 last &quot;
  • 50. Blueprint CSS: blank columns before 1 blank + 6 columns 2 blank + 6 columns 3 blank + 6 columns
  • 51. Blueprint CSS: prepend-x <div class=&quot; span-6 prepend-1 &quot; <div class=&quot; span-6 prepend-2 &quot; <div class=&quot; span-6 prepend-3 last &quot;
  • 52. Blueprint CSS: Cheatsheet http://blueprintcss.org/media/BlueprintV0.8byGJMS.pdf http:// tinyurl.com/c5ppms
  • 53. Blueprint CSS: Let's create … Header Sidebar Content Footer
  • 54. Blueprint CSS: Get the code Download Blueprint CSS files http:// www.blueprintcss.org / Unzip files into your project folder
  • 55. Blueprint CSS: Link Link to the files <link rel=&quot;stylesheet&quot; href=&quot; blueprint/screen.css &quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> <!--[if lt IE 8]> <link rel=&quot;stylesheet&quot; href=&quot; blueprint/ie.css &quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> <![endif]--> <link rel=&quot;stylesheet&quot; href=&quot; blueprint/print.css &quot; type=&quot;text/css&quot; media=&quot;print&quot; /> 11 KB 2 KB 2 KB
  • 56. Blueprint CSS: Coding (1/5) Create the CONTAINER <div id=&quot;container&quot; class=&quot;container&quot;> </div>
  • 57. Blueprint CSS: Coding (2/5) Create the HEADER <div id=&quot;container&quot; class=&quot;container&quot;> <div id=&quot;header&quot; class=&quot;span-24&quot;> <h1>Header</h1> </div> </div>
  • 58. Blueprint CSS: Coding (3/5) Create the SIDEBAR <div id=&quot;container&quot; class=&quot;container&quot;> <div id=&quot;header&quot; class=&quot;span-24&quot;> <h1>Header</h1> </div> <div id=&quot;sidebar&quot; class=&quot;span-8&quot;> <p>Sidebar</p> </div> </div>
  • 59. Blueprint CSS: Coding (4/5) Create the CONTENT <div id=&quot;container&quot; class=&quot;container&quot;> <div id=&quot;header&quot; class=&quot;span-24&quot;> <h1>Header</h1> </div> <div id=&quot;sidebar&quot; class=&quot;span-8&quot;> <p>Sidebar</p> </div> <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> </div> </div>
  • 60. Blueprint CSS: Coding (5/5) Create the FOOTER <div id=&quot;container&quot; class=&quot;container&quot;> <div id=&quot;header&quot; class=&quot;span-24&quot;> <h1>Header</h1> </div> <div id=&quot;sidebar&quot; class=&quot;span-8&quot;> <p>Sidebar</p> </div> <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> </div> <div id=&quot;footer&quot; class=&quot;span-24&quot;> <p>&copy;2009 SWF</p> </div> </div>
  • 61. Blueprint CSS: Preview in Firefox3
  • 62. Blueprint CSS: Preview in Firefox3 That's the future of Web 3.0 !
  • 63. Blueprint CSS: Preview in IE7
  • 64. Blueprint CSS: .showgrid Show the grid <div id=&quot;container&quot; class=&quot;container showgrid &quot;> <div id=&quot;header&quot; class=&quot;span-24&quot;> <h1>Header</h1> </div> <div id=&quot;sidebar&quot; class=&quot;span-8&quot;> <p>Sidebar</p> </div> <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> </div> <div id=&quot;footer&quot; class=&quot;span-24&quot;> <p>&copy;2009 SWF</p> </div> </div>
  • 65. Blueprint CSS: Preview in Firefox3
  • 66. Blueprint CSS: Custom CSS <link rel=&quot;stylesheet&quot; href=&quot; blueprint/custom.css &quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> Add a custom stylesheet #header { background-color: #000080; height: 100px; } #footer { background-color: #000080; color: #fff; height: 30px; } #footer p { line-height: 30px; padding-left: 10px; } h1 { color: #fff; line-height: 100px; padding-left: 10px; }
  • 67. Blueprint CSS: Tweak the content Add some random text to #content <p>Lorum ipsum sit dolor amet, consectetuer adipiscing elit...</p> Here's one I made earlier ... Add an unordered-list to the #sidebar <ul> <li>Lorum ipsum sit dolor amet</li> <li>Consectetuer adipiscing elit</li> ... </ul>
  • 68. Blueprint CSS: Preview in Firefox3
  • 69. Blueprint CSS: Add columns Let's add two columns to #content
  • 70. Blueprint CSS: Add columns Locate the CONTENT div <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p> </div>
  • 71. Blueprint CSS: Add columns Add first column … <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p> <div id=&quot;column1&quot; class=&quot;span-8&quot;> <h3>Column 1</h3> <p>Lorem ipsum sit amet ...</p> </div> </div>
  • 72. Blueprint CSS: Add columns Add second column … <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p> <div id=&quot;column1&quot; class=&quot;span-8&quot;> <h3>Column 1</h3> <p>Lorem ipsum sit amet ...</p> </div> <div id=&quot;column2&quot; class=&quot;span-8 last&quot;> <h3>Column 2</h3> <p>Lorem ipsum sit amet ...</p> </div> </div>
  • 73. Blueprint CSS: Preview in Firefox3
  • 74. Blueprint CSS: Refresh
  • 75. Blueprint CSS: Preview in IE6
  • 76. Blueprint CSS: notice Add a notice box <div id=&quot;content&quot; class=&quot;span-16 last&quot;> <h2>Content</h2> <div class=&quot;notice&quot;> <h3>Next meeting</h3> <p>University of Strathclyde, Glasgow on Friday 17 April 2009.</p> </div> <p>Lorem ipsum sit amet ...</p> ... </div> ... we'll also remove showgrid from the container div.
  • 77. Blueprint CSS: Refresh
  • 78. Blueprint CSS: Preview in IE6
  • 79. Blueprint CSS: Plug-ins Add the link icons plug-in <link rel=&quot;stylesheet&quot; href=&quot; blueprint/plugins/link-icons/screen.css &quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> Add links to files <li><a href=&quot; file.pdf &quot;>April meeting agenda</a></li> <li><a href=&quot;file .doc &quot;>April meeting agenda</a></li> <li><a href=&quot;file .xls &quot;>April meeting agenda</a></li>
  • 80. Blueprint CSS: Preview in Firefox 3
  • 81. Blueprint CSS: Enlarged
  • 82. Blueprint CSS: Preview in IE6
  • 83. Blueprint CSS: Boks on Adobe AIR http://toki-woki.net/p/Boks/
  • 84. Blueprint CSS: Boks on Adobe AIR http://toki-woki.net/p/Boks/
  • 85. Our experience I like!
  • 86. Our experience Coding standards Continuity across sites Flexible and maintainable Fast , great for 'sketching' ideas
  • 87. From this:
  • 88. To this ... in about 1 hour
  • 89. Our setup: common files framework.css style.css
  • 90. Our setup: audience external.css internal.css students.css pgstudents.css staff.css
  • 91. Our setup: layouts external_home.css internal_home.css layout4.css layout5.css layout3.css layout2.css
  • 92. Example: External layout 2 framework.css style.css layout2.css external.css
  • 93. Example: Internal Staff layout 2 framework.css style.css layout2.css internal.css staff.css
  • 94. Example: Internal Students layout 2 framework.css style.css layout2.css internal.css students.css
  • 95. Our setup: columns within content Each layout has custom classes for columns .column1of2 .column2of2 .column1of3 .column2of3 .column3of3 .column1of4 .column2of4 .column3of4 .column4of4 .column1of1-23 .column2of1-23 .column1of12-3 .column2of12-3 .column1of1-234 .column2of1-234 .column1of123-4 .column2of123-4
  • 96. Example: multiple columns .column1of1-23 .column2of1-23
  • 97. Example: multiple columns .column1of1-23 .column2of1-23
  • 98. Middle of the presentation Time for half-time oranges
  • 99. Conclusion Get things done much faster Continuity across sites Standard way of doing things Flexible and maintainable
  • 100. < / Using a CSS Framework > Gareth J M Saunders, Scottish Web Folk, 17 April 2009
  • 101. Image credits Framework photograph by budesigns http://www.sxc.hu/photo/13538 Icons http://www.iconlook.com IE with pins http://www.sajithmr.com/wp-content/uploads/2008/10/internet-explorer-logo-with-pins.jpg Firefox eats IE http://www.bbspot.com/Images/News_Features/2008/06/firefox-eating-ie.jpg Bike with triangluar wheels http://www.dev102.com/2008/11/25/10-ways-to-programaticly-shoot-yourself-in-the-foot-part-b/ Borat with thumbs-up http://img371.imageshack.us/img371/3194/thumbsupag3.jpg Oranges by chris27 http://www.sxc.hu/photo/1149135 http://www.sxc.hu/photo/1149134
  • 102. Creative Commons licence Attribution-Share Alike 2.5 UK: Scotland You are free: to copy, distribute, display and perform the work to make derivative works Under the following conditions: Attribution: You must give the original author credit. Share Alike: If you alter, transform, or build upon this work, you may distribute the resulting work only under a licence identical to this one. For any reuse or distribution, you must make clear to others the licence terms of this work. Any of these conditions can be waived if you get permission from the copyright holder. Nothing in this license impairs or restricts the author's moral rights. Gareth J M Saunders [email_address]