Drupal Theming with CSS Frameworks (960grid)

6,759 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,759
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
169
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Drupal Theming with CSS Frameworks (960grid)

  1. 1. THEMING WITH CSS FRAMEWORKS grid based design
  2. 2. INTRO TO CSS FRAMEWORKS
  3. 3. INTRO TO CSS FRAMEWORKS what is a css framework?
  4. 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. 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. 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. 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. 8. GRID BASED DESIGN What is grid-based design?
  9. 9. GRID BASED DESIGN What is grid-based design?
  10. 10. GRID BASED DESIGN What is grid-based design?
  11. 11. GRID BASED DESIGN What is grid-based design?
  12. 12. GRID BASED DESIGN What is grid-based design?
  13. 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. 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. 15. GRID BASED DESIGN Design implications of grid based layout advantages
  16. 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. 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. 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. 19. THE BLUEPRINT FRAMEWORK http://www.blueprintcss.org
  20. 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. 21. THE 960GS FRAMEWORK http://960.gs/
  22. 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. 23. THE 960GS FRAMEWORK disadvantages • margins are a no go zone so a simple vertical rule between columns is very difficult
  24. 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. 25. WORKING WITH 960GS demo in CSSEdit
  26. 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. 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

×