An Introduction to CSS Frameworks

An Introduction to CSS Frameworks

• 1.
  CSS Frameworks
• 2.
  Introduction The frustrationswith CSS development About CSS Frameworks Overview of available frameworks Advantages Case Study – Blueprint Case Study – 960gs Case Study – CSS Scaffold Disadvantages Summary
• 3.
  The Frustrations ofCSS development Code Reuse Too many wheels getting re-invented Most CSS development time is spent debugging That damn IE6! No standards We’re not talking W3C here Coding takes too long Each design is very bespoke to each project Very difficult to achieve pixel perfection How can we think smarter?
• 4.
  CSS Framework? “a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. 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 , A LIST APART
• 5.
  What’s out there?
• 6.
  Advantages of CSSFrameworks Increase productivity Reduce errors Consistency of code Better team workflow Helps to create well structured, browser-compatible code. Clean, pixel-perfect designs
• 7.
  Consists of severalCSS files: reset.css : This file resets CSS values that browsers tend to set for you. grid.css : This file sets up the grid (it’s true). It has a lot of classes you apply to divs to set up any sort of column-based grid. typography.css : This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text. forms.css : Includes some minimal styling of forms. print.css : This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page. ie.css : Includes every hack for our beloved IE6 and 7. These files are then compressed and merged into three main files to include in your site: screen.css : This is for viewing on screen print.css : This is for correct print display ie.css : This contains specific IE workarounds
• 8.
  The default gridpattern of Blueprint consists of 24 columns, each of 30px wide and 10px margin. Total width of container element is 950px. ((24 * 40)-10) Simple HTML syntax <div class=&quot;container&quot;> <div class=&quot;span-24 last&quot;> Header </div> <div class=&quot;span-4&quot;> Left sidebar </div> <div class=&quot;span-14&quot;> Main content </div> <div class=&quot;span-4 last&quot;> Right sidebar </div> </div> Modify columns and widths with CSS generators such as http://bluecalc.groupion.com/index.php (or manually create using ruby script) The grid
• 9.
   
• 10.
  24 column layoutmain area 17 cols Sidebar 6 cols Main area split into 2 Blocks of 8 cols each
• 11.
  Based on 960width using either 16 or 12 column variants Alternative of 24 column grid also available. More obscure class names such as omega and alpha Not as mature
• 12.
  Scaffold is a dynamic CSS framework using CSS-like syntax to extend CSS root functionality Uses a .htaccess file to redirect queries for CSS files through a PHP processor Features include: Constants Mixins Compressed, Cached and Gzipped on-the-fly Nested Selectors Perform PHP operations Image replace text by just linking to the image file Plus easily add your own functionality using the plugin system
• 13.
  Constants @constants { normal_color:#eee; } body { color:!normal_color; }
• 14.
  Expressions #id { padding:#[10 * !constant]px; }
• 15.
  Iterations @for !ifrom 1 to 12 { .columns-!i { width: !ipx; } }
• 16.
  Mixins =box(!color) { padding:10px; border:1px solid !color; color:!color; } =error { +box(red); background:red; } =alert { +error; background:yellow; }
• 17.
  Disadvantages of FrameworksNot Semantic <div class=“span-3”>, <div class=“span-19”> Ids can be attached Bloated code Learning curve Creates design restrictions Written by other people “I don’t like magic. I like knowing how something works. I don’t like taking things for granted because if magic breaks, unless it’s your own trick, you don’t know how to fix it.” Sean Inman Build your own? Lack of support and documentation if developer leaves/on holiday Learning curve for other people
• 18.
  Summary CSS Frameworkshelp by Speeding up the development process Helping improve designs and final output Reduce bugs Encourage reuse of code and separation of styles If nothing else can be used as a rapid prototyping tool CSS Frameworks provide Grid based layouts Reset, Base, Print, and Typography styles Browser-specific bug fixes (IE6) Dynamic Content (CSScaffold) CSS Frameworks are not perfect Unsemantic Not your own code Could try building your own – has further complications
• 19.
  Resources Blueprint - www.blueprintcss.org Blueprint showcase – www.blueprintsites.com 960gs and showcase – www.960.gs Scaffold – www.anthonyshort.com.au/scaffold Grid design showcase - www.designbygrid.com Grid designer – http://grid.mindplay.dk
• 20.
  Questions?