SlideShare a Scribd company logo
1 of 102
Download to read offline
  < 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

Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSBootstrap Creative
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012Kathryn Presner
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developerHsuan Fu Lien
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
Resume zaur aliyev
Resume zaur aliyevResume zaur aliyev
Resume zaur aliyevspiderzaur
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.Cristiano Rastelli
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap IntroductionAndrea Tarr
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentFortySeven Media
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 

What's hot (20)

Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JS
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developer
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Resume zaur aliyev
Resume zaur aliyevResume zaur aliyev
Resume zaur aliyev
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
Lecture 6 Data Driven Design
Lecture 6  Data Driven DesignLecture 6  Data Driven Design
Lecture 6 Data Driven Design
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Web Design
Web DesignWeb Design
Web Design
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 

Similar to Using a CSS Framework

Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingManuel Garcia
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)Future Insights
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5dharshyamal
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css frameworkTechsailor
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass bookPhoenix
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeEnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeMarcel Birkner
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By PalashPalashBajpai
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 

Similar to Using a CSS Framework (20)

6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)CSS Audits: Take Back Control of your CSS (Susan Robertson)
CSS Audits: Take Back Control of your CSS (Susan Robertson)
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Advance Css
Advance CssAdvance Css
Advance Css
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css framework
 
Team styles
Team stylesTeam styles
Team styles
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
CSS Best practices
CSS Best practicesCSS Best practices
CSS Best practices
 
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeEnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend Code
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 

Recently uploaded

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Recently uploaded (19)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

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]