Embed Size (px)
DESCRIPTION
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
Citation preview
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 thatevery new projectI began, I was beginning from scratch
Problem
Global reset of all browsersto reduce browser inconsistencies.
Setup the page layout
Setup the typography, images, forms, general HTML tags, etc.
Problem
Sometimes, I'drecycle codefrom previousprojects.
Problem
… but oftenI 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 monthsof development, the day after you've launched a new site invariably …
The client says…
"But we wanted a 3 column layout!"
The client says…
"Well, you never told us that …!"
The client says…
"We need one,like … right now!"
The client says…
"OK, but it'll take a couple of hours to code it up…"
Problem
It wasnot an efficientway to work.
Problem
No standards
No continuity
No flexibility
Coding took too long
Problem
Debugging tookeven longer
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.”
— Wikipediahttp://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 StyleYahoo! UI Grids
960 Grid SystemBlueprint CSSYAML
Preset-layouts: Content with StyleVertical navigationHorizontal navigation
Grid-layouts: Blueprint CSS24 columns
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
Advantages
Cross-browser 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="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.
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 Selectorswww.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 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
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="span-24">
Blueprint CSS: .span-24 .last
<div class="span-24 last">
Blueprint CSS: 12 columns
12 columns 12 columns
Blueprint CSS: .span-12 .last
<div class="span-12"> <div class="span-12 last">
Blueprint CSS: blank columns after
6 columns+ 1 blank
6 columns+ 2 blank
6 columns+ 3 blank
Blueprint CSS: append-x
<div class="span-6 append-1"
<div class="span-6 append-2"
<div class="span-6 append-3 last"
Blueprint CSS: blank columns before
1 blank +6 columns
2 blank +6 columns
3 blank +6 columns
Blueprint CSS: prepend-x
<div class="span-6 prepend-1"
<div class="span-6 prepend-2"
<div class="span-6 prepend-3 last"
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 fileshttp://www.blueprintcss.org/
Unzip files into your project folder
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
Blueprint CSS: Coding (1/5)
Create the CONTAINER<div id="container" class="container">
</div>
Blueprint CSS: Coding (2/5)
Create the HEADER<div id="container" class="container">
<div id="header" class="span-24"> <h1>Header</h1> </div>
</div>
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>
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>
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>
Blueprint CSS: Preview in Firefox3
That's the future of Web 3.0!
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>
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; }
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: Add columns
Let's add two columns to #content
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>
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>
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>
Blueprint CSS: Preview in Firefox3
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.
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>
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.cssstaff.css
Our setup: layouts
external_home.css internal_home.css
layout4.css layout5.csslayout3.csslayout2.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 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
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]
