📜 ⬆️ ⬇️

Implementation of 960gs in Drupal (NineSixty theme)

About NineSixty


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

NS benefits:





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:
image
before adding push and pull:
image
after adding push and pull:
image

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


image


Application ns ()


from page.tpl.php:
image
from #main
image
from # sidebar-left:
image

NineSixty in action


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

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.

Source: https://habr.com/ru/post/80987/


All Articles