It's straightforward to take the standard grids and make them responsive. In this example, we want all the grid blocks to stack at narrow widths. Above 40em (640 pixels) wide, we want the normal multi-column style grids.
We normally recommend writing breakpoints using min-width breakpoints to progressively layer styles over multiple breakpoints, from the smallest to widest screens.
However, in this situation since we just want to override the floats and widths of the standard grid styles below a single breakpoint it's simpler to add a max-width breakpoint that will only apply the stacked styling below a certain width. This allows us to take advantage of all the default grid styles above that breakpoint width.
To make this all work, add a class (my-breakpoint) to the grid container to scope the stacked styles for each block class within the breakpoint's media query. The styles within the breakpoint to make all the blocks stack are really concise:
/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
That's all the code it takes to write a custom breakpoint to make all the various grid types responsive. From this basic start, you can customize the appearance further or even add additional breakpoints.