We modify our usual social work practice approach in the context of a measles or whooping cough outbreak to prevent the transmission of the viruses. Measles, whooping cough and immunisation

Page URL: https://practice.orangatamariki.govt.nz/practice-centre-style-and-content-guide/digital-styles/grid-and-responsive-design/
Printed: 04/12/2024
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.

Share the link to this page Print page