All of New Zealand is at Alert Level 1. Please read the guidance.

COVID-19: implications for our practice

Page URL: https://practice.orangatamariki.govt.nz/practice-centre-style-and-content-guide/digital-styles/grid-and-responsive-design/
Printed: 28/11/2020
Printed pages may be out of date. Please check this information is current before using it in your practice.

Last updated: 01/04/2019

Grid and responsive design

This page outlines the grid system that underlies the Practice Centre page templates. It should be kept in mind for any future design and development.

Grid overview

A 12 column grid sets the layout rules for all pages across all screen sizes. Topic and policy pages use a 9:3 column layout for the content and sidebar.

Image showing the 12 column grid overview and examples of 12 and 9:3 column layouts.

View full size image (JPG 148 KB) Download image (JPG 148 KB)

Responsive breakpoints

The breakpoints of the Practice Centre determine where the layout and design change to better suit various screen sizes.  

  • Extra small / small: less than 768px
  • Medium: 768px to 991px 
  • Large: 992px to 1199px 
  • Extra large: 1200px and above

Container

The Practice Centre uses 'container-fluid' which allows for a fluid layout within these breakpoints to most efficiently use the width of the browser.