Implementation of 960gs in Drupal (NineSixty theme)

About NineSixty

NineSixty is a 960gs based Drupal theme designed to be used as a base theme.

NS benefits:

• content-oriented markup using the “push” and “pull” classes
• dynamic block width depending on content
• tools for debugging and mesh visualization
• right to left language support

Content Oriented Markup

This is an approach to design in which content is displayed as close as possible to the top of the markup. Content should be displayed before all side blocks. Some designers believe that it should be displayed even before the main navigation of the site. This is difficult to achieve on sites with one or more left columns.

')

Classes "push" and "pull"

In NS, content is initially displayed by pushing the block with content to the right and pulling the side blocks to the left. These classes use the same format as .grid-X, .prefix-X, and .suffix-X, where X is the width of the block:

.push-X and .pull-X

The values ​​of push and pull must match the width of the dragged blocks:



before adding push and pull:



after adding push and pull:

Dynamic column width

In some cases, it may be necessary for the columns to change width when the adjacent area is not filled. For example, a 3-6-3 markup may turn into 3-9 when the right column is empty. Dynamic width is controlled by the ns () function defined in template.php

Ns () structure

• X, Y and Z - widths
• A class can be grid, prefix, suffix, push, or pull.
• $ region can be any topic region
• you can use any number of pairs

Application ns ()

from page.tpl.php:



from #main



from # sidebar-left:

NineSixty in action

Visiting ninesixty.fkdemos.com can be seen as NineSixty ...

• uses push and pull to create "content-oriented markup";
• dynamically assigns the width of the cells depending on the content;
• used to create different site layouts

Actually familiarity with NineSixty is over. On the Drupal website, you can read about creating a NinteSixty-based sub- topic - drupal.org/node/441088 .



Translation of Drupal theming using the 960.gs grid system (slides 56 to 69) Previously, there is a general description of frameworks in web design and grids in design in general, and after the link and examples of how this theme works.



Share who uses and applies this theme in Drupal.