an introduction to css frameworks

CSS Frameworks

Introduction

● The frustrations with CSS development● About CSS Frameworks● Overview of available frameworks● Advantages● Case Study – Blueprint● Case Study – 960gs● Case Study – CSS Scaffold● Disadvantages● Summary

The Frustrations of CSS 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?

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

What’s out there?

Advantages of CSS Frameworks

● Increase productivity● Reduce errors● Consistency of code● Better team workflow● Helps to create well structured, browser-compatible code.● Clean, pixel-perfect designs

● Consists of several CSS 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

● The default grid pattern 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="container">

<div class="span-24 last"> Header </div>

<div class="span-4"> Left sidebar </div>

<div class="span-14"> Main content </div>

<div class="span-4 last"> 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

24 column layout

main area 17 colsSidebar 6 cols

Main area split into 2Blocks of 8 cols each

● Based on 960 width 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

● 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

Constants

@constants {

normal_color:#eee;

}

body

{

color:!normal_color;

}

Expressions

#id

{

padding:#[10 * !constant]px;

}

Iterations

@for !i from 1 to 12

{

.columns-!i {

width: !ipx;

}

}

Mixins● =box(!color)

{

padding:10px;

border:1px solid !color;

color:!color;

}

=error

{

+box(red);

background:red;

}

=alert

{

+error;

background:yellow;

}

Disadvantages of Frameworks

● Not 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

Summary

● CSS Frameworks help 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

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

Questions?