1. THEMING WITH CSS
FRAMEWORKS
grid based design

2. INTRO TO CSS FRAMEWORKS

3. INTRO TO CSS FRAMEWORKS
what is a css framework?

4. INTRO TO CSS FRAMEWORKS
what is a 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 ”

5. INTRO TO CSS FRAMEWORKS
what is a 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 ”
• drupal is a cms framework
• jQuery is a javascript framework
• benefits
- helps for team work — eg standardised class names
- css reset

6. INTRO TO CSS FRAMEWORKS
What is a css framework?
• need to be pragmatic about frameworks — they should exist to make
your life easier not harder

7. GRID BASED DESIGN
What is grid-based design?
• As a designer, it is paramount to organize and present information to
the reader in its clearest and most meaningful way. By establishing a
hierarchy of information within the visual proportions of a page, a
reader can more easily understand the message.
• Using contrast in size and weight are good ways to do this, but spatial
manipulation (proximity and alignment) on the page offer the best and
most versatile way to organize information.
• Grid systems have been in use for a long time and are strictly adhered to
in the magazine and newspaper publishing industry
• useful for breaking out of the typical blog-like site layouts with 2 side
columns and a main content column

8. GRID BASED DESIGN
What is grid-based design?

9. GRID BASED DESIGN
What is grid-based design?

10. GRID BASED DESIGN
What is grid-based design?

11. GRID BASED DESIGN
What is grid-based design?

12. GRID BASED DESIGN
What is grid-based design?

13. GRID BASED DESIGN
What is a grid-based css framework?
• essentially a prebuilt set of classes which easily achieve a grid-based
layout
• example from 960.gs

14. GRID BASED DESIGN
What is a grid-based css framework?
• Mark Boulton http://markboulton.co.uk/
• redesigning drupal.org: interesting to watch how he integrates grid-
based design
• his site is not artistic, but certainly on a grid — important: grids don't
impose this look

15. GRID BASED DESIGN
Design implications of grid based layout
advantages

16. GRID BASED DESIGN
Design implications of grid based layout
advantages
“Many have said grid systems can stifle creativity, but I disagree. Grid
systems can facilitate creativity by providing a framework and
already answer some designers questions such as 'where should the
folios go', 'how wide should the measure be?' etc. A well designed
grid system will go some way to answer these questions and more.
- Mark Boulton ”

17. GRID BASED DESIGN
Design implications of grid based layout
advantages
• conventions are important to user experience; people expect certain
page elements to always be in certain places; grid based design ensures
this type of comfortable site layouts — it would be very rare for us to be
commissioned professionally to push the artistic/design
boundaries... for the most part, clients want safe

18. GRID BASED DESIGN
Design implications of grid based layout
disadvantages
• bad for search engine optimization
• very imposing, especially for designers with natural eye eg gaps between
columns WILL BE 20px

19. THE BLUEPRINT FRAMEWORK
http://www.blueprintcss.org

20. THE BLUEPRINT FRAMEWORK
http://www.blueprintcss.org
Our opinion:
• its attempts to maintain a vertical typographic grid ended up being
fairly heavy-handed
• horizontal grid of 24 columns only - works for 3 equal cols
• the gap between columns is only 10px which we felt was too close for
most of our designs

21. THE 960GS FRAMEWORK
http://960.gs/

22. THE 960GS FRAMEWORK
http://960.gs/
• has no vertical grid
• easier to work with, less quot;purequot; typographically
• we can't tell how big someone's browser window will be thus will
almost never see the whole page, wasting the effort for vertical purity
• comes in both 12 and 16 col variants: good for covering various design
requirements

23. THE 960GS FRAMEWORK
disadvantages
• margins are a no go zone so a simple vertical rule between columns is
very difficult

24. THE 960GS FRAMEWORK
disadvantages
• margins are a no go zone so a simple vertical rule between columns is
very difficult
Our opinion:
• the 960gs seemed easier to work with

25. WORKING WITH 960GS
demo in CSSEdit

26. WORKING WITH 960GS
drupal implications
• can’t use it out of the box, need to override a bit of stuff
• eg tab unordered list padding

27. WORKING WITH 960GS
Using 960gs with Panels 2
advantages
• seems a completely natural fit, and it is more-so if you can build your
own panel layouts to take advantage of the special grid_x classes
disadvantages
• it is tricky to get the wrapper DIVs (eg div.grid_12) needed by 960gs
appearing when they should (because some pages will be panels layouts
but there will always be some which are not eg user login)
• had issues with the admin pages because they are not grid-based, but
panels admin pages were using the grid-based layouts