Drupal Theming with CSS Frameworks (960grid)

THEMING WITH CSS FRAMEWORKS

grid based design

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



...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


What is a css framework?

• need to be pragmatic about frameworks — they should exist to make your life easier not harder

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

GRID BASED DESIGN

What is grid-based design?

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

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

http://markboulton.co.uk

http://markboulton.co.uk

GRID BASED DESIGN

Design implications of grid based layoutadvantages

GRID BASED DESIGN


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

GRID BASED DESIGN


• 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

GRID BASED DESIGN

Design implications of grid based layoutdisadvantages

• bad for search engine optimization• very imposing, especially for designers with natural eye eg gaps between

columns WILL BE 20px

THE BLUEPRINT FRAMEWORK

http://www.blueprintcss.org



THE BLUEPRINT FRAMEWORK


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



THE 960GS FRAMEWORK

http://960.gs/

http://960.gs

http://960.gs

THE 960GS FRAMEWORK

http://960.gs/

• has no vertical grid• easier to work with, less "pure" 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

http://960.gs

http://960.gs

THE 960GS FRAMEWORK

disadvantages

• margins are a no go zone so a simple vertical rule between columns is very difficult

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

WORKING WITH 960GS

demo in CSSEdit

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

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

Drupal Theming with CSS Frameworks (960grid)

Technology

Transcript of Drupal Theming with CSS Frameworks (960grid)