J960

This is an example page captured from Joomla! using the J960 template. There are no live demo servers due to security considerations - I simply do not have the time to keep patching a demo Joomla! site.

The Information Area

At the bottom of this template there is an information area - this is to help you get started with your custom Joomla! template using the 960 Grid System. You will probably want to remove this from your template at some point, in the mean time it is possible to hide this area using the template parameters.

J960

Welcome to the J960 project.

J960 is an open source project that aims to bring the power of the 960 Grid System - a flexible layout orientated CSS Framework - to the Joomla! templating community. This project has one product, a Joomla! 1.5 template (we'll look into Joomla! 1.6 when it arrives in a more stable form). The tenplate is not a complete product, it a template for a template.

You can use this template to rapidly create your own Joomla! templates. But remember to check out the licenses before you get too far :)

Download

If you want to start creating your own Joomla! template based on this 960 Grid System template download the latest Build or SVN code

User Position 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis est tellus, molestie ut scelerisque ut, tempus quis metus. Fusce ullamcorper rutrum magna.

User Position 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit nulla iaculis lacus cursus nec interdum sapien lacinia. Pellentesque quis quam et arcu tempor dignissim.

User Position 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at metus augue. Morbi iaculis orci ut leo luctus pretium. Aenean nisl mi, facilisis id molestie id, feugiat vel leo.

User Position 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu est ante, quis volutpat sem. Aliquam sit amet leo quis massa vestibulum semper at non leo. Curabitur adipiscing sapien id erat ultrices pretium. Ut interdum leo quam. Vivamus non dapibus sapien. Pellentesque tincidunt orci eu mi blandit id tincidunt turpis aliquet. Praesent eu mattis magna. Donec mollis urna viverra nunc suscipit viverra.

What's it for

The 960 Grid System is a CSS framework that allows designers to quickly produce complex layouts. This template is for Joomla! 1.5, it includes the 960 Grid System and the basics of a normal Joomla! template. You can use this template to create your own Joomla! templates using the 960 Grid System.

How it works

The 960 Grid System uses containers consisting of either 12 or 16 columns. In the 12 column containers, columns are a total of 80 pixels wide, this consists of 60px of content area and 10 pixels either side of margin area. The 16 column containers, columns are 60 pixels wide, this consists of 40 pixels of content area and 10 pixels either side of margin. Within the containers we can define <div> elements that span one or more columns. For example, this content exists inside a 12 column container and spans a total of 7 columns.

Prototyping With The Grid 960 CSS Framework

A Detailed Look at the 960 CSS Framework

Joomla! Template Positions

Positions are used in Joomla! to allow us to place content in different positions on the page. Positions are defined on a per template basis. The positions used by this template are shown in the image to the right. Note that user positions 2 and 3 will automatically align to the left should there be no content in user positions 1 and 2 respectively.

Licenses

960 Grid System GNU GPL and MIT
PHP GNU GPL
Addtional CSS GNU GPL
Header Image Royalty Free

License Notes

The 960 Grid System is covered by two licenses, for more information refer to the official website. All of the PHP code is derived from existing GNU GPL templates and is therefore also covered by the GNU GPL license. All additional CSS is new (i.e. is not derived from existing code) and is released uncder the GNU GPL license. The header image is a royalty free stock image available from stock.xchang, please be aware that some restrictions apply to the usage of this iamge.

940px

60px

860px

140px

780px

220px

700px

300px

620px

380px

540px

460px

60px

380px

220px

60px

380px

940px

40px

880px

100px

820px

160px

760px

220px

700px

280px

640px

340px

580px

400px

520px

460px

40px

400px

220px

40px

400px

960 for Joomla!

The Information Area

J960

Download

User Position 1

User Position 2

User Position 3

User Position 4

Information

What's it for

How it works

Joomla! Template Positions

Licenses

License Notes

12 Column Grid

16 Column Grid