Designing for a Responsive Grid 1.2

Designing for a Responsive 960 GridTechnical Guidelines for a 16-Column

960px Responsive GridBased on the Skeleton and Bootstrap Frameworks

http://www.getskeleton.com/ http://twitter.github.com/bootstrap/

The content area is divided into 12 or 16 columns, and is 940 pixels wide.

Standard Responsive 960 Grid

Content blocks each occupy a fixed number of columns, and can move around thepage. Because they can move, they should only contain graphics internal to theblock, and never graphics related to the page.


Any padding, margins, or graphics outside of the content columns add to the totalwidth, making the final result larger than 960 pixels.

The content has exactly 10 pixels of margin on both sides, for a total of 960 pixels


As the viewing device changes size, the grid columns also change size, while alsoreorganizing. They always retain a 10 pixel outer margin, and a 20 pixel gutter between columns. Additional wrapping graphics can change size if needed.

This is critical to maintain a responsive grid.

Content blocks can change the number of columns they occupy, in this case switching from 6 to 12. This should be done sparingly.

On phones in portrait and landscape mode, all blocks become 100% width, regardless of how many columns they occupy.

Understanding the How and Why

A B C

The width of the grid is created by the content blocks. This is true no matter what the page looks like.

This means the layout of the page is driven by the grid, not the other way around. It is possible to have elements violate the grid, but the costs and consequences must be understood.

When the width of the page changes, the order and placement of the columns also change. The inner gutter of column B becomes the outer gutter of the page.

This means gutters and outer padding must remain consistent, or they will break when the page changes size.

A B

C

This was half ofan inner gutter.

The columns change in two important ways when the screen size changes:

1. Their order stays the same (from left to right and top to bottom, like a typewriter. C is always after B, which is always after A), but their arrangement shuffles so the column order becomes vertical instead of horizontal.

2. Their size is fluid and matches the device being used. This means they may be any size, because we cannot know what screen size they might appear on.

Because ordering of blocks can change, the margins and paddings of blocks must stay the same on all screens.

A

B

C The column changeswidth, the gutter staysthe same.

The Rope Model

A B C

AB

C

B A

C

B

One way to envision the ordering of blocks is to imagine they have a rope running through them.

You can position the blocks anywhere on the page, as long as the rope only enters a block on the top or left side, and only exits on the bottom or right, and the rope never crosses a block out of order.

The metaphor isn’t perfect, since you can’t curl blocks back up or to the left.

Just remember the next block must always be either to the right or down from the one before it.

The Problem with Floats

A B C

A

C

B

Moving from a many-column layout in a wide screen to a lower-column layout in a small screen can cause alignment issues.

Left-floated elements find the first vertical open space after the previous element, then the first left space. If elements A and B are of different lengths, this leads to unexpected layouts.

D

D

A

C

B

D

C moves under B, which forces it to be in the right column. D starts on the next open line after C.

C is under B, and moves to the left. D starts on the same line as C, it cannot move higher than C.

Fixing Floats

A B C

A

D

C

To fix this, always use a vertical layout within each column, so that element B is below element A, not to the side of it.

D

B

A B C

Examples of Breaking the Grid (Do NOT Do This)

Extra margin insidethe outer columns

This design adds an outer margin inside the area occupied by the columns. This willbreak the responsiveness of the grid.

AB

C


Does not have theextra margin, pageis now broken.


A

B

C





A B C

To create a larger band around the outside of the columns without breaking responsiveness, put the extra padding/border/margin on the inside of an element that wraps around all the columns.

20px Wrapper + 10px padding = 30px outer band 10px padding = 20px gutter

A

B

C

20px Wrapper + 10px padding = 30px outer band 10px padding,

No gutter

Best Practices• Content blocks can have backgrounds, borders, and graphics

as long as they stay inside the block.• The interior of a block doesn’t need to follow the grid.• Horizontal navigation should become vertical navigation on

small screens.• Design for fluid widths. Images that are content, rather than

decorative, should scale up or down to fit their block.• Sixteen columns have greater flexibility than twelve.

Examples of 960 Grids

Content

Wrapper



Content

Wrapper

Wrapper

Content


Examples of Responsive 960 Grids



Documents

Designing for a Responsive Grid 1.2