960 Grid tool designed to streamline web development workflow in Divine Elemente: definition, rules of usage and 960 Grid examples are considered in this tutorial.

Related: Best practices
[divineAds]

960 Grid tool represents universal dimensions to arrange web page elements in the most consistent way, and it gives your web pages a professional look & feel. The 960 Grid PSD template is used more and more often in the web development as a standard.

Use: 960 Grid examples

Use: 960 Grid examples

960 px width is universal solution for setting a web page width that all modern devices and browsers available on the market can display correctly.


How to use 960 Grid tool in Divine Elemente

As mentioned above the 960 Grid is a template tool to aid aligning and arranging elements in Divine Elemente. Since it is a tool, it was decided to place it as a separate item in PS menu (“Elemente > 960 Grid tool”). The basic steps of working with the 960 Grid tool are shown below.

Step 1. Launch 960 Grid tool.

Open a PSD template and select the “960 Grid Tool” item in Divine Elemente menu.

Launch of 960 Grid tool

Launch of 960 Grid tool

Step 2. Set layout grid parameters.

In most cases, enter 12 or 16 or 24 columns to suit your design tasks, or in few cases, change column or gutter’s width if required, and press “Apply”.

Selection of layout grid parameters

Selection of layout grid parameters

Step 3. Arrange all elements in the layout grid.

Elements arrangement

Elements arrangement

Note: Additional layers created are not taken into account when the theme is being published because Divine Elemente switches them off when analyzing the document.


Conclusion

As this tutorial shows, the use of 960 Grid tool is easy to use in Divine Elemente and hopefully will be useful for creating a design and making 960 Grid PSD as it helps a lot with headaches regarding layouts and their structure.

External links

  1. 960 Grid


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • Will
    I have a developer copy of Divine. It would be great if features found in frameworks such as the semantic grid system http://semantic.gs/ could be incorporated. All my clients want responsive and fluid layouts… the basic 960 grid just doesn’t cut the mustard any more. Divine truly would be awesome with the inclusion of LESS, SCSS, or Stylus, and a highly flexible structure. Look forward to an update :)