drupal theming with css frameworks (960grid)
DESCRIPTION
TRANSCRIPT
THEMING WITH CSS FRAMEWORKS
grid based design
INTRO TO CSS FRAMEWORKS
INTRO TO CSS FRAMEWORKS
what is a css framework?
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
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
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
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 grid-based design?
GRID BASED DESIGN
What is grid-based design?
GRID BASED DESIGN
What is grid-based design?
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
GRID BASED DESIGN
Design implications of grid based layoutadvantages
GRID BASED DESIGN
Design implications of grid based layoutadvantages
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
Design implications of grid based layoutadvantages
• 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
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
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
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