Implementing 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 using the push and pull classes
    • dynamic block width based on content
    • debugging tools and grid visualization
    • language support from right to left



    Content Oriented Markup


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

    The push and pull classes


    In NS, content is initially displayed by “pushing” a 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 block width:
    .push-X and .pull-X
    The push and pull values ​​must match the width of the draggable blocks:
    image
    before push and pull are
    image
    added : after push and pull are added :
    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, markup 3-6-3 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
    • X, Y, and Z are width values
    • class can be grid, prefix, suffix, push, or pull
    • $ region can be any topic region
    • any number of pairs can be used


    Ns () application


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

    NineSixty in action


    By visiting ninesixty.fkdemos.com you can see how NineSixty ...
    • uses push and pull to create “content-oriented markup”;
    • dynamically assigns the width of the cells depending on the content;
    • used to create various site layouts

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

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

    Share who, how it uses and whether it applies at all to Drupal.

    Also popular now: