menu
» Web style guide » Responsive classes Responsive classes
How your layout will adapt to the screen size
In responsive design, the layout breaks into another arrangement at certain break points. For example, the default layout described above has four grid columns evenly spaced within a 960 pixel box – navigation on the left, and then three possible grid columns to the right. When viewed with a device that has a screen width of only 320 pixels, the navigation column will be replaced by a 'menu' link, then each of the three proceeding columns will be aligned underneath each other in a single column. In this way, the webpage does not 'shrink' or 'zoom', and the content remains readable with a standard font size.
We have determined a number of break points based on common devices and compatibility with our existing grid.
One column at 320 pixels wide
- Any resolution less than 320px has a single column of content.
- Navigation is collapsed to a drop-down list
- All content grid containers have equal width. (maximum of one narrow grid column)
Two columns at 480 pixels wide
- Navigation is collapsed to a drop-down list
- All content grid containers flow over one or two columns – depending on functionality of the page. (maximum of two narrow grid columns)
Three columns at 600 pixels wide
- Navigation is collapsed to a drop-down list
- All content grid containers flow over three columns – maintaining the current content space (maximum of three narrow grid columns).
Four columns at 960+ pixels wide
- All grid containers flow over four columns – maintaining the current content space (maximum of four narrow grid columns, includes full content in left-hand menu column).
Troubleshooting responsive layouts
There are a number of styles created to address some of the issues that occur when certain layouts are forced into one and two column design spaces.
Showing or hiding divs
- show-rsp1
- Any <div> that has this class will only display when the screen width is between 320 and 480 pixels
ie 320 pixel breakpoint (1 column). - show-rsp2
- Any <div> that has this class will only display when the screen width is between 480 and 600 pixels
ie 480 pixel breakpoint (2 column). - show-rsp3
- Any <div> that has this class will only display when the screen width is between 600 and 960 pixels
ie 600 pixel breakpoint (3 column). - show-rsp4
- Any <div> that has this class will only display when the screen width is 960 pixels or greater (4 column).
Tip: To show a <div> in multiple column modes, use multiple classes. For example, if you want the <div> to display in one and two column modes, use class="show-rsp1 show-rsp2".
- show-rsp
- Any <div> that has this class will only display when the screen width is less than 960 pixels.
- hide-rsp
- Any <div> that has this class will only display when the screen width is 960 pixels or greater.
Note: Don't use the show-rsp or hide-rsp classes on the same <div> as show-rsp1, show-rsp2, show-rsp3 or show-rsp4.
Stretching to full width
- anu-col-right
Any <div> that has this class will display at 100 per cent width when the screen width is less than 600 pixels.
You would typically use this class if you were dividing your content into three narrow columns. In this layout the third column would wrap underneath the first two columns at the 480 pixel break point, leaving an empty space to the right of the third column – assigning anu-col-right to the last column would make that column 100 per cent width (overriding the narrow class). You could also assign anu-col-right to the first column, or to all three columns to make them all full width.
Right-aligning divs
- anu-right-swap1
- Any <div> that has this class will be right aligned when the screen width is 480 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 480 pixels.
ie 320 pixel breakpoint (1 column). - anu-right-swap2
- Any <div> that has this class will be right aligned when the screen width is 600 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 600 pixels.
ie 480 pixel breakpoint (2 column). - anu-right-swap3
- Any <div> that has this class will be right aligned when the screen width is 960 pixels or greater, but will 'swap' alignment to the left when the screen width is less than 960 pixels.
ie 600 pixel breakpoint (3 column).
Left-aligning divs
- anu-left-swap1
- Any <div>that has this class will be left aligned when the screen width is 480 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 480 pixels.
ie 320 pixel breakpoint (1 column). - anu-left-swap2
- Any <div>that has this class will be left aligned when the screen width is 600 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 600 pixels.
ie 480 pixel breakpoint (2 columns). - anu-left-swap3
- Any <div>that has this class will be left aligned when the screen width is 960 pixels or greater, but will 'swap' alignment to the right when the screen width is less than 960 pixels.
ie 600 pixel breakpoint (3 columns).
