using a css framework
DESCRIPTION
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.TRANSCRIPT
![Page 2: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/2.jpg)
or
![Page 3: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/3.jpg)
How to spend more time building sites and fewer days debugging IE
![Page 4: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/4.jpg)
Outline
The problem we had
About CSS Frameworks
About Blueprint CSS
Our experience
![Page 5: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/5.jpg)
Problem
I realised thatevery new projectI began, I was beginning from scratch
![Page 6: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/6.jpg)
Problem
Global reset of all browsersto reduce browser inconsistencies.
Setup the page layout
Setup the typography, images, forms, general HTML tags, etc.
![Page 7: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/7.jpg)
Problem
Sometimes, I'drecycle codefrom previousprojects.
![Page 8: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/8.jpg)
Problem
… but oftenI wouldn't.
![Page 9: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/9.jpg)
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/
![Page 10: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/10.jpg)
After launch
After monthsof development, the day after you've launched a new site invariably …
![Page 11: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/11.jpg)
The client says…
"But we wanted a 3 column layout!"
![Page 12: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/12.jpg)
The client says…
"Well, you never told us that …!"
![Page 13: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/13.jpg)
The client says…
"We need one,like … right now!"
![Page 14: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/14.jpg)
The client says…
"OK, but it'll take a couple of hours to code it up…"
![Page 15: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/15.jpg)
Problem
It wasnot an efficientway to work.
![Page 16: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/16.jpg)
Problem
No standards
No continuity
No flexibility
Coding took too long
![Page 17: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/17.jpg)
Problem
Debugging tookeven longer
![Page 20: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/20.jpg)
Solution: Frameworks
I'd been looking into JavaScript and PHP frameworks ...
![Page 21: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/21.jpg)
Solution: Frameworks
I wonder if there any available for CSS?
![Page 22: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/22.jpg)
Solution: CSS Frameworks
Oh, yes!
![Page 23: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/23.jpg)
Solution: CSS Frameworks
http://tinyurl.com/dcf7sa
![Page 24: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/24.jpg)
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
![Page 25: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/25.jpg)
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.”
— Wikipediahttp://en.wikipedia.org/wiki/CSS_framework
![Page 26: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/26.jpg)
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
![Page 27: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/27.jpg)
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/
![Page 28: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/28.jpg)
Types of CSS Framework
Preset-layouts Grid-layouts
Content with StyleYahoo! UI Grids
960 Grid SystemBlueprint CSSYAML
![Page 29: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/29.jpg)
Preset-layouts: Content with StyleVertical navigationHorizontal navigation
![Page 30: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/30.jpg)
Grid-layouts: Blueprint CSS24 columns
![Page 31: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/31.jpg)
Elements of a CSS Framework
Global reset of all browsersto reduce browser inconsistencies.
Setup the page layout
Setup the typography, images, forms, etc.
Modular
Optional plugins
![Page 32: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/32.jpg)
Advantages
Cross-browser support
Faster development time
Well-structured, modular code
Visual design cohesion
Helps beginners learn
![Page 33: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/33.jpg)
Disadvantages
Often non-semantic
Bloated code
Limited — a lack of flexibility
You inherit other people's bugs
Can take time to learn
![Page 34: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/34.jpg)
Disadvantage #1: Non-semantic (1/2)
Often get non-semantic classes such as:
<div class="column span-4">
Either add an ID to
<div id="logo" class="column span-4">
And/or copy the code for these non-semantic classes into your CSS code for #logo once you're happy with the design.
![Page 35: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/35.jpg)
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.
![Page 36: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/36.jpg)
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/
![Page 37: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/37.jpg)
Disadvantage #2: Bloated code (2/3)
Dust-Me Selectorswww.sitepoint.com/dustmeselectors/
![Page 38: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/38.jpg)
Disadvantage #2: Bloated code (3/3)
And/or compress the code
code.google.com/p/minify/
Minify! YUI! Compressor
developer.yahoo.com/yui/compressor
![Page 39: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/39.jpg)
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.
![Page 40: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/40.jpg)
Blueprint CSS
http://www.blueprintcss.org
![Page 41: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/41.jpg)
Blueprint CSS
http://www.blueprintcss.org
MIT licenseuse, copy, modify, publish, sell, etc ...
24 columns30px + 10px right-margin = 40pxLast column has no right-margin
Total width =(24 x 40px) - 10px [last] = 950px
![Page 42: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/42.jpg)
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.
![Page 43: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/43.jpg)
Blueprint CSS: The grid: 24 columns
24 columns
![Page 44: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/44.jpg)
Blueprint CSS: .span-24
<div class="span-24">
![Page 45: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/45.jpg)
Blueprint CSS: .span-24 .last
<div class="span-24 last">
![Page 46: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/46.jpg)
Blueprint CSS: 12 columns
12 columns 12 columns
![Page 47: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/47.jpg)
Blueprint CSS: .span-12 .last
<div class="span-12"> <div class="span-12 last">
![Page 48: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/48.jpg)
Blueprint CSS: blank columns after
6 columns+ 1 blank
6 columns+ 2 blank
6 columns+ 3 blank
![Page 49: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/49.jpg)
Blueprint CSS: append-x
<div class="span-6 append-1"
<div class="span-6 append-2"
<div class="span-6 append-3 last"
![Page 50: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/50.jpg)
Blueprint CSS: blank columns before
1 blank +6 columns
2 blank +6 columns
3 blank +6 columns
![Page 51: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/51.jpg)
Blueprint CSS: prepend-x
<div class="span-6 prepend-1"
<div class="span-6 prepend-2"
<div class="span-6 prepend-3 last"
![Page 52: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/52.jpg)
Blueprint CSS: Cheatsheet
http://blueprintcss.org/media/BlueprintV0.8byGJMS.pdf
http://tinyurl.com/c5ppms
![Page 53: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/53.jpg)
Blueprint CSS: Let's create …
Header
Sidebar Content
Footer
![Page 54: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/54.jpg)
Blueprint CSS: Get the code
Download Blueprint CSS fileshttp://www.blueprintcss.org/
Unzip files into your project folder
![Page 55: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/55.jpg)
Blueprint CSS: Link
Link to the files<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen" />
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
11 KB
2 KB
2 KB
![Page 56: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/56.jpg)
Blueprint CSS: Coding (1/5)
Create the CONTAINER<div id="container" class="container">
</div>
![Page 57: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/57.jpg)
Blueprint CSS: Coding (2/5)
Create the HEADER<div id="container" class="container">
<div id="header" class="span-24"> <h1>Header</h1> </div>
</div>
![Page 58: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/58.jpg)
Blueprint CSS: Coding (3/5)
Create the SIDEBAR<div id="container" class="container">
<div id="header" class="span-24"> <h1>Header</h1> </div> <div id="sidebar" class="span-8"> <p>Sidebar</p> </div>
</div>
![Page 59: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/59.jpg)
Blueprint CSS: Coding (4/5)
Create the CONTENT<div id="container" class="container">
<div id="header" class="span-24"> <h1>Header</h1> </div> <div id="sidebar" class="span-8"> <p>Sidebar</p> </div> <div id="content" class="span-16 last"> <h2>Content</h2> </div></div>
![Page 60: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/60.jpg)
Blueprint CSS: Coding (5/5)
Create the FOOTER<div id="container" class="container">
<div id="header" class="span-24"> <h1>Header</h1> </div> <div id="sidebar" class="span-8"> <p>Sidebar</p> </div> <div id="content" class="span-16 last"> <h2>Content</h2> </div> <div id="footer" class="span-24"> <p>©2009 SWF</p> </div></div>
![Page 62: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/62.jpg)
Blueprint CSS: Preview in Firefox3
That's the future of Web 3.0!
![Page 64: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/64.jpg)
Blueprint CSS: .showgrid
Show the grid<div id="container" class="container showgrid">
<div id="header" class="span-24"> <h1>Header</h1> </div> <div id="sidebar" class="span-8"> <p>Sidebar</p> </div> <div id="content" class="span-16 last"> <h2>Content</h2> </div> <div id="footer" class="span-24"> <p>©2009 SWF</p> </div></div>
![Page 66: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/66.jpg)
Blueprint CSS: Custom CSS
<link rel="stylesheet" href="blueprint/custom.css" type="text/css" media="screen" />
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; }
![Page 67: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/67.jpg)
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>
![Page 69: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/69.jpg)
Blueprint CSS: Add columns
Let's add two columns to #content
![Page 70: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/70.jpg)
Blueprint CSS: Add columns
Locate the CONTENT div<div id="content" class="span-16 last"> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p></div>
![Page 71: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/71.jpg)
Blueprint CSS: Add columns
Add first column …<div id="content" class="span-16 last"> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p> <div id="column1" class="span-8"> <h3>Column 1</h3> <p>Lorem ipsum sit amet ...</p> </div></div>
![Page 72: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/72.jpg)
Blueprint CSS: Add columns
Add second column …<div id="content" class="span-16 last"> <h2>Content</h2> <p>Lorem ipsum sit amet ...</p> <div id="column1" class="span-8"> <h3>Column 1</h3> <p>Lorem ipsum sit amet ...</p> </div> <div id="column2" class="span-8 last"> <h3>Column 2</h3> <p>Lorem ipsum sit amet ...</p> </div> </div>
![Page 73: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/73.jpg)
Blueprint CSS: Preview in Firefox3
![Page 76: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/76.jpg)
Blueprint CSS: notice
Add a notice box<div id="content" class="span-16 last"> <h2>Content</h2> <div class="notice"> <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.
![Page 79: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/79.jpg)
Blueprint CSS: Plug-ins
Add the link icons plug-in<link rel="stylesheet" href="blueprint/plugins/link-icons/screen.css" type="text/css" media="screen" />
Add links to files<li><a href="file.pdf">April meeting agenda</a></li><li><a href="file.doc">April meeting agenda</a></li><li><a href="file.xls">April meeting agenda</a></li>
![Page 82: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/82.jpg)
Blueprint CSS: Preview in IE6
![Page 83: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/83.jpg)
Blueprint CSS: Boks on Adobe AIR
http://toki-woki.net/p/Boks/
![Page 84: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/84.jpg)
Blueprint CSS: Boks on Adobe AIR
http://toki-woki.net/p/Boks/
![Page 85: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/85.jpg)
Our experience
I like!
![Page 86: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/86.jpg)
Our experience
Coding standards
Continuity across sites
Flexible and maintainable
Fast, great for 'sketching' ideas
![Page 87: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/87.jpg)
From this:
![Page 88: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/88.jpg)
To this ... in about 1 hour
![Page 89: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/89.jpg)
Our setup: common files
framework.css style.css
![Page 90: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/90.jpg)
Our setup: audience
external.css internal.css
students.css pgstudents.cssstaff.css
![Page 91: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/91.jpg)
Our setup: layouts
external_home.css internal_home.css
layout4.css layout5.csslayout3.csslayout2.css
![Page 92: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/92.jpg)
Example: External layout 2
framework.css
style.css
layout2.css
external.css
![Page 93: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/93.jpg)
Example: Internal Staff layout 2
framework.css
style.css
layout2.css
internal.css
staff.css
![Page 94: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/94.jpg)
Example: Internal Students layout 2
framework.css
style.css
layout2.css
internal.css
students.css
![Page 95: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/95.jpg)
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
![Page 96: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/96.jpg)
Example: multiple columns
.column1of1-23 .column2of1-23
![Page 97: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/97.jpg)
Example: multiple columns
.column1of1-23 .column2of1-23
![Page 98: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/98.jpg)
Middle of the presentation
Time for half-time oranges
![Page 99: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/99.jpg)
Conclusion
Get things done much faster
Continuity across sites
Standard way of doing things
Flexible and maintainable
![Page 100: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/100.jpg)
< / Using a CSS Framework >
Gareth J M Saunders, Scottish Web Folk, 17 April 2009
![Page 101: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/101.jpg)
Image credits
Framework photograph by budesignshttp://www.sxc.hu/photo/13538
Iconshttp://www.iconlook.com
IE with pinshttp://www.sajithmr.com/wp-content/uploads/2008/10/internet-explorer-logo-with-pins.jpg
Firefox eats IEhttp://www.bbspot.com/Images/News_Features/2008/06/firefox-eating-ie.jpg
Bike with triangluar wheelshttp://www.dev102.com/2008/11/25/10-ways-to-programaticly-shoot-yourself-in-the-foot-part-b/
Borat with thumbs-uphttp://img371.imageshack.us/img371/3194/thumbsupag3.jpg
Oranges by chris27http://www.sxc.hu/photo/1149135http://www.sxc.hu/photo/1149134
![Page 102: Using a CSS Framework](https://reader031.vdocuments.mx/reader031/viewer/2022020122/53f125d68d7f72104c8b472e/html5/thumbnails/102.jpg)
Creative Commons licence
Attribution-Share Alike 2.5 UK: Scotland
You are free:to copy, distribute, display and perform the workto 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 [email protected]