Drupal 960 grid system based theming
-
Upload
gaurav-mishra -
Category
Design
-
view
117 -
download
0
description
Transcript of Drupal 960 grid system based theming
![Page 1: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/1.jpg)
Drupal theming via 960.gs
BY: Gaurav Mishra
![Page 2: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/2.jpg)
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
![Page 3: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/3.jpg)
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
![Page 4: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/4.jpg)
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
![Page 5: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/5.jpg)
Grid-based design
![Page 6: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/6.jpg)
Grid-based design
![Page 7: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/7.jpg)
Grid-based design
![Page 8: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/8.jpg)
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
![Page 9: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/9.jpg)
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
![Page 10: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/10.jpg)
960.gs grids anatomy (12 col)
• 12 column grid is divided into portions that are 60 pixels wide
• Each column is 60 px wide
![Page 11: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/11.jpg)
960.gs grids anatomy (16 col)
• The 16-column grid width is 40 px.
• Rest is same as 12-column grid
![Page 12: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/12.jpg)
How grid based layout looks like ?
![Page 13: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/13.jpg)
Layout A: Content left, sidebar right (12 col)
![Page 14: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/14.jpg)
Layout B: Content left, sidebar right
![Page 15: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/15.jpg)
Layout C: Content with two left sidebars (12 col based)
![Page 16: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/16.jpg)
Lets get REAL
• Subtraction - wordpress theme by Khoi Vinh
![Page 17: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/17.jpg)
Layout C: Content with two left sidebars (12 col based)
![Page 18: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/18.jpg)
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)
![Page 19: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/19.jpg)
Say Hello to smart classes… in progress
• alpha margin-left: 0;
• omega margin-right:0;
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
![Page 20: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/20.jpg)
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)
![Page 21: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/21.jpg)
Implementing
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
![Page 22: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/22.jpg)
The NineSixty theme
Download from http://drupal.org/project/ninesixty
![Page 23: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/23.jpg)
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
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
![Page 24: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/24.jpg)
LOOking in Page.tpl.php
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
![Page 25: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/25.jpg)
<div id=main> @page.tpl.php
Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
![Page 26: Drupal 960 grid system based theming](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c828be4a7959691a8b459d/html5/thumbnails/26.jpg)
Question O_O pleaseZzz / Feedback
Do have fun with theming