Style sheet breakpoints
For pages that respond to different screen widths
A 'breakpoint' is a width defined in a style sheet at which the page behaves differently than when it was wider or narrower (as the case may be). This is so the page design 'degrades gracefully' by collapsing or expanding when a user moves from wide to narrower or narrow to wider. Breakpoints cover the whole range of screen widths, from a large desktop screen to a small mobile phone screen, the main issues being readability and no horizontal scrollbars at any width.
The principle of 'cascading style sheets' (CSS) is to put all the main styles in a separate .css document that informs the HTML 'body' of a page how to behave. Style rules can also be put in the invisible HTML 'head' and 'inline' styles can be put in the HTML of the visible page. That's the cascade: style sheet » document head » inline in the HTML.
Basic structure
A <div> is HTML for a block of content. Works Unit has three 'principal' blocks: header, main and footer. The block 'main' has two IDs: #content 700 pixels wide and #wide 1024 pixels wide. The two 'parent' blocks (or <div>) can contain other 'child' blocks but those are constrained by whichever 'parent' block they are in. The child blocks become parents to other child blocks, and so on.
Breakpoints
The Works Unit theme has the following breakpoints:
Over 1101px wide: main#content and main#wide centred at 700px and 1024px respectively, main#full-width 100% width, header 100% width not centred, footer centred with no width specified.
Breakpoint 1 max-width: 1101px: main#wide (1024px) centred with width auto and 30px side margins.
Breakpoint 2 max-width: 777px: main#content (700px) and main#wide (1024px) centered with width auto and 20px side margins. Nothing at less than 777px wide has a fixed with.
Breakpoint 3 max-width: 600px: centres the header.
Breakpoint 4 max-width: 480px: is essentially as guess at mobile portrait and continues to alter text sizes etc.
max-width means anything less than or equal to the specified dimension.
The breakpoints are set to suit the column width + side margins + scrollbar. For a 700 pixel wide column the breakpoint is 700 + 30 + 30 + 17 = 777 pixels. For a screen width below the breakpoint the side margins reduce to 20 pixels and the column and its content shrink with it. Similarly for a 1024 pixel wide column the breakpoint is 1024 + 30 + 30 + 17 = 1101 pixels.
The style sheets also use the same breakpoints as, eg:
Breakpoint 3 min-width: 601px for style rules that apply to any screen width over 600 pixels.
Just over a third of the visits to my websites are on a screen 1920 pixels wide and the rest on a screen width of 1152 pixels or less, right down to mobile phones.
Category: Theme Features
