Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 practice...
Benefits of CSS framework <ul><li>Make your life easier NOT HARDER </li></ul><ul><li>Do not repeat yourself methodology </...
Basics First  - Grid-based design <ul><li>Established them in magazine and news paper industry </li></ul><ul><li>Present i...
Grid-based design
Grid-based design
Grid-based design
What is Grid-based css framework and the WHY ? <ul><li>essentially a prebuilt set of classes which easily achieve a grid-b...
Back to 960.Gs (by Nathan Smith) download it from http://960.gs <ul><li>based on a width of 960 pixels.  </li></ul><ul><li...
960.gs grids anatomy (12 col) <ul><li>12 column  grid is divided into portions that are 60 pixels wide </li></ul><ul><li>E...
960.gs grids anatomy (16 col) <ul><li>The 16-column grid width is 40 px. </li></ul><ul><li>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 <ul><li>Subtraction - wordpress theme by Khoi Vinh </li></ul>
Layout C: Content with two left sidebars (12 col based)
Say Hello to smart classes <ul><li>.grid-1, .grid-2 ….grid-16  and there width depend upon top container enclosing it </li...
Say Hello to smart classes… in progress <ul><li>alpha  margin-left: 0; </li></ul><ul><li>omega margin-right:0; </li></ul>C...
Say Hello to smart classes… in progress <ul><li>prefix class add padding to left </li></ul><ul><li>suffix class add paddin...
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 <ul><li>X,Y and Z are width values </li></ul><ul><li>$region refers to theme region </li></u...
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
Upcoming SlideShare
Loading in …5
×

of

Drupal 960 grid system based theming  Slide 1 Drupal 960 grid system based theming  Slide 2 Drupal 960 grid system based theming  Slide 3 Drupal 960 grid system based theming  Slide 4 Drupal 960 grid system based theming  Slide 5 Drupal 960 grid system based theming  Slide 6 Drupal 960 grid system based theming  Slide 7 Drupal 960 grid system based theming  Slide 8 Drupal 960 grid system based theming  Slide 9 Drupal 960 grid system based theming  Slide 10 Drupal 960 grid system based theming  Slide 11 Drupal 960 grid system based theming  Slide 12 Drupal 960 grid system based theming  Slide 13 Drupal 960 grid system based theming  Slide 14 Drupal 960 grid system based theming  Slide 15 Drupal 960 grid system based theming  Slide 16 Drupal 960 grid system based theming  Slide 17 Drupal 960 grid system based theming  Slide 18 Drupal 960 grid system based theming  Slide 19 Drupal 960 grid system based theming  Slide 20 Drupal 960 grid system based theming  Slide 21 Drupal 960 grid system based theming  Slide 22 Drupal 960 grid system based theming  Slide 23 Drupal 960 grid system based theming  Slide 24 Drupal 960 grid system based theming  Slide 25 Drupal 960 grid system based theming  Slide 26
Upcoming SlideShare
EHNC Monthly Roundup Sep 09
Next
Download to read offline and view in fullscreen.

4 Likes

Share

Download to read offline

Drupal 960 grid system based theming

Download to read offline

Drupal 960 grid system based theming
Drupal Sprint 30-31 Oct 2009, Pune India

http://drupalindia2009.plug.org.in/talk/drupal-theming-960-grid-system

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Drupal 960 grid system based theming

  1. 1. Drupal theming via 960.gs BY: Gaurav Mishra
  2. 2. 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
  3. 3. Benefits of CSS framework <ul><li>Make your life easier NOT HARDER </li></ul><ul><li>Do not repeat yourself methodology </li></ul><ul><li>Scaleable and Maintenance </li></ul><ul><li>Based upon Grids </li></ul><ul><li>Eg. 960.gs, Blueprint, YUI Grids </li></ul>
  4. 4. Basics First - Grid-based design <ul><li>Established them in magazine and news paper industry </li></ul><ul><li>Present information in structured, meaningful and visually distinct way </li></ul><ul><li>Hierarchical information is cleanly represented </li></ul>
  5. 5. Grid-based design
  6. 6. Grid-based design
  7. 7. Grid-based design
  8. 8. What is Grid-based css framework and the WHY ? <ul><li>essentially a prebuilt set of classes which easily achieve a grid-based Layout </li></ul><ul><li>Grids - 16 years after the invention of the web, we are finally embracing a century-old design philosophy That is still so POWER FULL </li></ul><ul><li>well defined css files splits into organized structure based upon their FUNCTION </li></ul>
  9. 9. Back to 960.Gs (by Nathan Smith) download it from http://960.gs <ul><li>based on a width of 960 pixels. </li></ul><ul><li>two variants: 12 and 16 columns </li></ul><ul><li>reduce common headaches </li></ul><ul><li>saves your time === money </li></ul><ul><li>Handle non compliant browser with care (most beloved IE 6) </li></ul><ul><li>both a prototyping and development framework </li></ul>
  10. 10. 960.gs grids anatomy (12 col) <ul><li>12 column grid is divided into portions that are 60 pixels wide </li></ul><ul><li>Each column is 60 px wide </li></ul>
  11. 11. 960.gs grids anatomy (16 col) <ul><li>The 16-column grid width is 40 px. </li></ul><ul><li>Rest is same as 12-column grid </li></ul>
  12. 12. How grid based layout looks like ?
  13. 13. Layout A: Content left, sidebar right (12 col)
  14. 14. Layout B: Content left, sidebar right
  15. 15. Layout C: Content with two left sidebars (12 col based)
  16. 16. Lets get REAL <ul><li>Subtraction - wordpress theme by Khoi Vinh </li></ul>
  17. 17. Layout C: Content with two left sidebars (12 col based)
  18. 18. Say Hello to smart classes <ul><li>.grid-1, .grid-2 ….grid-16 and there width depend upon top container enclosing it </li></ul><ul><li>that is either .container-12 or .container-16 </li></ul>Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  19. 19. Say Hello to smart classes… in progress <ul><li>alpha margin-left: 0; </li></ul><ul><li>omega margin-right:0; </li></ul>Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  20. 20. Say Hello to smart classes… in progress <ul><li>prefix class add padding to left </li></ul><ul><li>suffix class add padding to right </li></ul>If you want to leave space between columns, use a prefix or suffix class Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  21. 21. Implementing Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  22. 22. The NineSixty theme Download from http://drupal.org/project/ninesixty
  23. 23. The ns() function – get Speed <ul><li>X,Y and Z are width values </li></ul><ul><li>$region refers to theme region </li></ul><ul><li>class can be grid, prefix, suffix, push or pull </li></ul>Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  24. 24. LOOking in Page.tpl.php Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  25. 25. <div id=main> @page.tpl.php Credits Screenshots - Accelerated grid theming using NineSixty (Drupal DesignCamp Boston)
  26. 26. Question O_O pleaseZzz / Feedback Do have fun  with theming
  • banakadah

    Aug. 13, 2016
  • mohammadrimawi

    Nov. 2, 2011
  • kamapreet

    Nov. 1, 2011
  • philpool

    Nov. 24, 2009

Drupal 960 grid system based theming Drupal Sprint 30-31 Oct 2009, Pune India http://drupalindia2009.plug.org.in/talk/drupal-theming-960-grid-system

Views

Total views

4,254

On Slideshare

0

From embeds

0

Number of embeds

59

Actions

Downloads

100

Shares

0

Comments

0

Likes

4

×