Grid & PSD Files
This style guide is a tool to assist in the design and development of hbs.edu web properties. All HBS sites are designed and coded responsively.
The rules and guidelines prescribed here for desktop and mobile were arrived at through careful consideration and collaboration across departments, and should be maintained and upheld by every designer, developer, writer, and project owner to ensure consistency of the Harvard Business School voice and brand.
HBS.edu is based on a 12-column desktop grid system. Desktop columns are 60 px wide with 24 px gutters between.
An 8-px baseline grid establishes a vertical rhythm and acts as an aid for designers and developers to eliminate indecision when crafting new desktop components.
Responsive Breakpoints & Column Widths
Breakpoints in responsive design are the width of a browser where layout and styles change to adapt for a new screen size. The breakpoints for HBS templates are 1000px and 600px. To accommodate standard device sizes, each template has three different layouts. The changes in these layouts are represented by wireframed thumbnails. Below is an example of these thumbnails and what screen size each represents.
Also included in each template description is the ratio of the layout's columns. To figure out how wide a column is at a specific screen size, apply the ratio of the column to the screen size. Example: To find the width of the first column of a 4:4:4 template at 1000px screen size first find the percent the first column is of the whole layout ( 4/12 = 0.3333 ). Therefore the first column is 33.33% of whole width. If the screen size was 1000px, the first column would be 341px wide (1000 x 0.3333 = 341.2992).
4:4:4 three-column grid with optional right rail extended through color field.
1000px and up: 6:3:3 three-column grid.
Between 1000px and 600px: 9:3 two-column grid.
1000px and up: 2:6:4 three-column grid with local navigation, secondary color band.
Between 1000px and 600px: 6:6 two-column grid.
1000px and up: 3:3:3:3 four-column grid.
Between 1000px and 600px: 4:4:4 three-column grid.
1000px and up: 2:7:3 three-column grid. Can be adjusted to 9:3 two-column grid without local navigation.
Between 1000px and 600px: 2:10 two-column grid.
1000px and up: Stacked bands on a 9:3 two-column grid.
Between 1000px and 600px: One column that spans the full width.