• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal Theming with CSS Frameworks (960grid)
 

Drupal Theming with CSS Frameworks (960grid)

on

  • 7,961 views

 

Statistics

Views

Total Views
7,961
Views on SlideShare
7,942
Embed Views
19

Actions

Likes
6
Downloads
165
Comments
0

2 Embeds 19

http://www.slideshare.net 15
http://www.opensoul.de 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Drupal Theming with CSS Frameworks (960grid) Drupal Theming with CSS Frameworks (960grid) Presentation 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 layout advantages
    • 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 ”
    • 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
    • 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
    • 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/
    • 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
    • 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