Layout

Responsive web design

All DCC websites or applications should be built to be fully responsive and allow for a full range of device or screen sizes.

Frameworks

Where possible it is preferred that Foundation 6 is used for any new website or application builds. If another framework is to be considered then this will need to be authorised by the Digital Delivery Team first.

Download Foundation 6

Page width and content width

Foundation 6 will allow a site to fill the full width of a screen but also allows for content to have a max width based on the media queries below. It is recommended that written content should not expand beyond the ‘Large’ screen size unless you are specifically creating content for TV screens (see more on content layouts in the typography section). Slideshows, Images, scrollers and other presentation / layout effects can however fill the full screen width if required.

Screen sizes and media queries

For the majority of websites, Foundation 6’s standard media queries should be used which are as follows:

Screen sizeWidths in emsWidths in pixels
Small0 – 40em0 – 640px
Medium40.063em – 64em641 – 1024px
Large64.063em – 90em1025 – 1440px
XLarge90.063em – 120em1441 – 1920px

See a more detailed breakdown and how to reference in SASS here:

http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html

In some cases, it may be necessary to consider further media query break points to improve the user experience on certain devices or screen sizes. Where needed, we would recommend using the following approach detailed here:

https://zurb.com/expo/lessons/beyond-small-medium-and-large-foundation-breakpoint-crash-course

Spacing

To ensure content is easy to read and sections have clearly defined areas, a suitable amount of spacing or guttering should be used. Foundation 6 by default allows for the following guttering out of the box, however, you should not rely on this default if your content cramped or harder to read.

BreakpointGutter size
small20px
medium30px

Below are some useful resources about how ‘white space’ or ‘negative space’ should be used to improve your website’s design:

Grids

Depending on which framework you are using, guttering and spacing should use the framework’s default to avoid issues with future upgrades.

Foundation 6

http://foundation.zurb.com/sites/docs/grid.html

Legacy grids

Below are grid references for previous versions of framework that may still exist in some DCC websites. The below are for reference only and should not be used on any new site developments.

Further considerations

When using a grid frame work, avoid images/sections automatically filling the whole screen on tablet / larger mobile screen sizes. Where possible, consider having two or more columns before going to a full width layout.