SlideShare a Scribd company logo

Using a CSS Framework

Download as PPT, PDF
Gareth Saunders
Gareth Saunders

The document discusses using CSS frameworks to speed up web development by avoiding having to repeatedly write CSS resets and layout code. It describes the Blueprint CSS framework, including how it provides a grid system, typography styles, and other components out of the box. The author explains how using a framework like Blueprint CSS can save significant time over building sites from scratch each time.

Design
1 of 102
Downloaded 776 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
< Using a CSS Framework > Gareth J M Saunders, Scottish Web Folk, 17 April 2009 [email_address]
or
How to spend more time building sites and fewer days debugging IE
Outline The problem we had About CSS Frameworks About Blueprint CSS Our experience
Problem I realised that every new project I began, I was beginning from scratch
Problem Global reset of all browsers to reduce browser inconsistencies . Setup the page layout Setup the typography , images , forms , general HTML tags, etc.
Problem Sometimes, I'd recycle code from previous projects.
Problem … but often I wouldn't .
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/
After launch After months of development, the day after you've launched a new site invariably …
The client says… &quot;But we wanted a 3 column layout !&quot;
The client says… &quot;Well, you never told us that …!&quot;
The client says… &quot;We need one, like … right now !&quot;
The client says… &quot;OK, but it'll take a couple of hours to code it up…&quot;
Problem It was not an efficient way to work.
Problem No standards No continuity No flexibility Coding took too long
Problem Debugging took even longer
Search I went looking for a solution…
Search I went looking for a solution…
Solution: Frameworks I'd been looking into JavaScript and PHP frameworks ...
Solution: Frameworks I wonder if there any available for CSS ?
Solution: CSS Frameworks Oh, yes!
Solution: CSS Frameworks http://tinyurl.com/dcf7sa
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
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
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
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/
Types of CSS Framework Preset-layouts Grid-layouts Content with Style Yahoo! UI Grids 960 Grid System Blueprint CSS YAML
Preset-layouts: Content with Style Vertical navigation Horizontal navigation
Grid-layouts: Blueprint CSS 24 columns
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
Advantages Cross-browse r support Faster development time Well-structured, modular code Visual design cohesion Helps beginners learn
Disadvantages Often non-semantic Bloated code Limited — a lack of flexibility You inherit other people's bugs Can take time to learn
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.
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.
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/
Disadvantage #2: Bloated code (2/3) Dust-Me Selectors www.sitepoint.com/dustmeselectors/
Disadvantage #2: Bloated code (3/3) And/or compress the code code.google.com/p/minify/ Minify! YUI! Compressor developer.yahoo.com/yui/ compressor
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.
Blueprint CSS http:// www.blueprintcss.org
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
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 .
Blueprint CSS: The grid: 24 columns 24 columns
Blueprint CSS: .span-24 <div class=&quot; span-24 &quot;>
Blueprint CSS: .span-24 .last <div class=&quot; span-24 last &quot;>
Blueprint CSS: 12 columns 12 columns 12 columns
Blueprint CSS: .span-12 .last <div class=&quot; span-12 &quot;> <div class=&quot; span-12 last &quot;>
Blueprint CSS: blank columns after 6 columns + 1 blank 6 columns + 2 blank 6 columns + 3 blank
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;
Blueprint CSS: blank columns before 1 blank + 6 columns 2 blank + 6 columns 3 blank + 6 columns
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;
Blueprint CSS: Cheatsheet http://blueprintcss.org/media/BlueprintV0.8byGJMS.pdf http:// tinyurl.com/c5ppms
Blueprint CSS: Let's create … Header Sidebar Content Footer
Blueprint CSS: Get the code Download Blueprint CSS files http:// www.blueprintcss.org / Unzip files into your project folder
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
Blueprint CSS: Coding (1/5) Create the CONTAINER <div id=&quot;container&quot; class=&quot;container&quot;> </div>
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>
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>
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>
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>
Blueprint CSS: Preview in Firefox3
Blueprint CSS: Preview in Firefox3 That's the future of Web 3.0 !
Blueprint CSS: Preview in IE7
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>
Blueprint CSS: Preview in Firefox3
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; }
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>
Blueprint CSS: Preview in Firefox3
Blueprint CSS: Add columns Let's add two columns to #content
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>
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>
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>
Blueprint CSS: Preview in Firefox3
Blueprint CSS: Refresh
Blueprint CSS: Preview in IE6
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.
Blueprint CSS: Refresh
Blueprint CSS: Preview in IE6
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>
Blueprint CSS: Preview in Firefox 3
Blueprint CSS: Enlarged
Blueprint CSS: Preview in IE6
Blueprint CSS: Boks on Adobe AIR http://toki-woki.net/p/Boks/
Blueprint CSS: Boks on Adobe AIR http://toki-woki.net/p/Boks/
Our experience I like!
Our experience Coding standards Continuity across sites Flexible and maintainable Fast , great for 'sketching' ideas
From this:
To this ... in about 1 hour
Our setup: common files framework.css style.css
Our setup: audience external.css internal.css students.css pgstudents.css staff.css
Our setup: layouts external_home.css internal_home.css layout4.css layout5.css layout3.css layout2.css
Example: External layout 2 framework.css style.css layout2.css external.css
Example: Internal Staff layout 2 framework.css style.css layout2.css internal.css staff.css
Example: Internal Students layout 2 framework.css style.css layout2.css internal.css students.css
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
Example: multiple columns .column1of1-23 .column2of1-23
Example: multiple columns .column1of1-23 .column2of1-23
Middle of the presentation Time for half-time oranges
Conclusion Get things done much faster Continuity across sites Standard way of doing things Flexible and maintainable
< / Using a CSS Framework > Gareth J M Saunders, Scottish Web Folk, 17 April 2009
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
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]

More Related Content

What's hot (20)

PDF
Web Design Primer Sample - HTML CSS JS
Bootstrap Creative
 
PPTX
Doing More with LESS for CSS
Todd Anglin
 
PDF
Use atomic design ftw
GiantJohnPepper
 
PDF
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Cedric Spillebeen
 
PDF
The Server Side of Responsive Web Design
Dave Olsen
 
PDF
A Beginner's Guide to WordPress - WordCamp New York City 2012
Kathryn Presner
 
PDF
Understand front end developer
Hsuan Fu Lien
 
PDF
React Storybook, Atomic Design, and ITCSS
Trevor Pierce
 
PPTX
Bootstrap 5 ppt
Mallikarjuna G D
 
PDF
Resume zaur aliyev
spiderzaur
 
PDF
Style Guides, Pattern Libraries, Design Systems and other amenities.
Cristiano Rastelli
 
PDF
Modern Front-End Development
mwrather
 
PPTX
Bootstrap Introduction
Andrea Tarr
 
PPT
Lecture 6 Data Driven Design
Sur College of Applied Sciences
 
PPTX
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
David Wesst
 
PDF
ACSS: Rethinking CSS Best Practices
Renato Iwashima
 
PPTX
Bootstrap ppt
Ishtdeep Hora
 
PDF
Web Design
nelsoniscool
 
PDF
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
FortySeven Media
 
PDF
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
Web Design Primer Sample - HTML CSS JS
Bootstrap Creative
 
Doing More with LESS for CSS
Todd Anglin
 
Use atomic design ftw
GiantJohnPepper
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Cedric Spillebeen
 
The Server Side of Responsive Web Design
Dave Olsen
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
Kathryn Presner
 
Understand front end developer
Hsuan Fu Lien
 
React Storybook, Atomic Design, and ITCSS
Trevor Pierce
 
Bootstrap 5 ppt
Mallikarjuna G D
 
Resume zaur aliyev
spiderzaur
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
Cristiano Rastelli
 
Modern Front-End Development
mwrather
 
Bootstrap Introduction
Andrea Tarr
 
Lecture 6 Data Driven Design
Sur College of Applied Sciences
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
David Wesst
 
ACSS: Rethinking CSS Best Practices
Renato Iwashima
 
Bootstrap ppt
Ishtdeep Hora
 
Web Design
nelsoniscool
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
FortySeven Media
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 

Similar to Using a CSS Framework (20)

PPT
An Introduction to CSS Frameworks
Adrian Westlake
 
PPTX
Blueprint css framework
Techsailor
 
PPT
CSS Frameworks: Faster Layout, Consistent Results
Steve Hong
 
PDF
CSS Frameworks
zerok
 
PPT
2009_09_11_Grid960
LightSpeed
 
ODP
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
PDF
Think Vitamin CSS
Nathan Smith
 
PPTX
Css, xhtml, javascript
Trần Khải Hoàng
 
PPT
Using a CSS Framework
eby
 
PDF
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
PDF
CSS Systems
Natalie Downe
 
PPT
Html & CSS - Best practices 2-hour-workshop
Vero Rebagliatte
 
PDF
The Future of CSS
elliando dias
 
PDF
Web I - 07 - CSS Frameworks
Randy Connolly
 
PPT
Web design-workflow
Peter Kaizer
 
PDF
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
PDF
CSS: a rapidly changing world
Russ Weakley
 
PPTX
CSS framework
Anjan Bhattrai
 
KEY
CSS Framework + Progressive Enhacements
Mario Hernandez
 
ODP
Creating Web Sites with HTML and CSS
BG Java EE Course
 
An Introduction to CSS Frameworks
Adrian Westlake
 
Blueprint css framework
Techsailor
 
CSS Frameworks: Faster Layout, Consistent Results
Steve Hong
 
CSS Frameworks
zerok
 
2009_09_11_Grid960
LightSpeed
 
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
Think Vitamin CSS
Nathan Smith
 
Css, xhtml, javascript
Trần Khải Hoàng
 
Using a CSS Framework
eby
 
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
CSS Systems
Natalie Downe
 
Html & CSS - Best practices 2-hour-workshop
Vero Rebagliatte
 
The Future of CSS
elliando dias
 
Web I - 07 - CSS Frameworks
Randy Connolly
 
Web design-workflow
Peter Kaizer
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
CSS: a rapidly changing world
Russ Weakley
 
CSS framework
Anjan Bhattrai
 
CSS Framework + Progressive Enhacements
Mario Hernandez
 
Creating Web Sites with HTML and CSS
BG Java EE Course
 
Ad

Recently uploaded (20)

PPTX
In the sweet by and by, We shall meet on that beautiful shore; In the sweet b...
kuysniya14
 
PPTX
feminist gnsudnshxujenduxhsixisjxuu.pptx
rowvinafujimoto
 
PPTX
BMC S6 M3 P1 building mATERIALS AND CONSTRUCTION.pptx
RizwanAlavi
 
PDF
Presentation of design made by power point
habibikuw002
 
PPTX
Urban design is a huge concept when it comes to planning.
IshikaPanchal11
 
PPTX
(2) Cell Wall Inhibitors_Cephalosporins others.pptx
mkurdi133
 
PPTX
Types of post tensioning methods (2).pptx
RizwanAlavi
 
PPTX
slidesgo-s-story-of-zara-a-strategi.pptx
Ehsan63
 
PPTX
the very teaching plan extra ordinary.pptx
PamelaOdibeli1
 
PDF
Case Study on good and bad acoustics in auditorium
Disha Agrawal
 
PPTX
DIASS-DIAGNOSTIC-TEST.pptxnjkhbuyygygccd
mcsprima2023
 
PPTX
Exploring Types of Rocks Educational Presentation rock forming james harold r...
jamescarllfelomino6
 
PPTX
英国硕士毕业证伦敦城市大学学位证书City毕业完成信办理
Taqyea
 
PDF
CRAC- Adobe Photoshop CC 2016 (32 64Bit) Crack
utfefguu
 
PDF
Uber Driver Hackday Sprint Solving Ride Cancellations
YellowSlice1
 
PDF
BeeNexus Stall Design, Fabrication, and Branding in India
Beenexus
 
DOCX
Ai vehicle traffic signal detector research proposal.docx
DavidNameza
 
PDF
Design Social Change Creating Social Change
Eduardo Corrêa
 
PDF
The Role of Logos as Identity Shapers (IFIC Logo)
Md. Mehedi Hasan Asif
 
PPTX
hall ppt 1 it for basic tamolet .pptx
ashishbehera64
 
In the sweet by and by, We shall meet on that beautiful shore; In the sweet b...
kuysniya14
 
feminist gnsudnshxujenduxhsixisjxuu.pptx
rowvinafujimoto
 
BMC S6 M3 P1 building mATERIALS AND CONSTRUCTION.pptx
RizwanAlavi
 
Presentation of design made by power point
habibikuw002
 
Urban design is a huge concept when it comes to planning.
IshikaPanchal11
 
(2) Cell Wall Inhibitors_Cephalosporins others.pptx
mkurdi133
 
Types of post tensioning methods (2).pptx
RizwanAlavi
 
slidesgo-s-story-of-zara-a-strategi.pptx
Ehsan63
 
the very teaching plan extra ordinary.pptx
PamelaOdibeli1
 
Case Study on good and bad acoustics in auditorium
Disha Agrawal
 
DIASS-DIAGNOSTIC-TEST.pptxnjkhbuyygygccd
mcsprima2023
 
Exploring Types of Rocks Educational Presentation rock forming james harold r...
jamescarllfelomino6
 
英国硕士毕业证伦敦城市大学学位证书City毕业完成信办理
Taqyea
 
CRAC- Adobe Photoshop CC 2016 (32 64Bit) Crack
utfefguu
 
Uber Driver Hackday Sprint Solving Ride Cancellations
YellowSlice1
 
BeeNexus Stall Design, Fabrication, and Branding in India
Beenexus
 
Ai vehicle traffic signal detector research proposal.docx
DavidNameza
 
Design Social Change Creating Social Change
Eduardo Corrêa
 
The Role of Logos as Identity Shapers (IFIC Logo)
Md. Mehedi Hasan Asif
 
hall ppt 1 it for basic tamolet .pptx
ashishbehera64
 
Ad

Using a CSS Framework

  • 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]