Drupal 960 grid system based theming

Drupal theming via 960.gs BY: Gaurav Mishra

Introduction about 960.gs – A CSS framework CSS frameworks are “ 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.“ -Jef Croft

Benefits of CSS framework
Make your life easier NOT HARDER
Do not repeat yourself methodology
Scaleable and Maintenance
Based upon Grids
Eg. 960.gs, Blueprint, YUI Grids

Basics First - Grid-based design
Established them in magazine and news paper industry
Present information in structured, meaningful and visually distinct way
Hierarchical information is cleanly represented

Grid-based design

What is Grid-based css framework and the WHY ?
essentially a prebuilt set of classes which easily achieve a grid-based Layout
Grids - 16 years after the invention of the web, we are finally embracing a century-old design philosophy That is still so POWER FULL
well defined css files splits into organized structure based upon their FUNCTION

Back to 960.Gs (by Nathan Smith) download it from http://960.gs
based on a width of 960 pixels.
two variants: 12 and 16 columns
reduce common headaches
saves your time === money
Handle non compliant browser with care (most beloved IE 6)
both a prototyping and development framework

960.gs grids anatomy (12 col)
12 column grid is divided into portions that are 60 pixels wide
Each column is 60 px wide

960.gs grids anatomy (16 col)
The 16-column grid width is 40 px.
Rest is same as 12-column grid

How grid based layout looks like ?

Layout A: Content left, sidebar right (12 col)

Layout B: Content left, sidebar right

Layout C: Content with two left sidebars (12 col based)

Lets get REAL
Subtraction - wordpress theme by Khoi Vinh

Layout C: Content with two left sidebars (12 col based)

Say Hello to smart classes
.grid-1, .grid-2 ….grid-16 and there width depend upon top container enclosing it
that is either .container-12 or .container-16
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)

Say Hello to smart classes… in progress
alpha margin-left: 0;
omega margin-right:0;

Say Hello to smart classes… in progress
prefix class add padding to left
suffix class add padding to right
If you want to leave space between columns, use a prefix or suffix class Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)

Implementing Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)

The NineSixty theme Download from http://drupal.org/project/ninesixty

The ns() function – get Speed
X,Y and Z are width values
$region refers to theme region
class can be grid, prefix, suffix, push or pull

LOOking in Page.tpl.php Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)

<div id=main> @page.tpl.php Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)

Question O_O pleaseZzz / Feedback Do have fun  with theming

Drupal 960 grid system based theming

by Gaurav Mishra on Oct 30, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 16

Statistics

Drupal 960 grid system based theming — Presentation Transcript