Please refer to the responsive section ↗ of the Digital Foundations documentation for an introduction to designing responsively.
Note on Grid & Breakpoints
The grid and breakpoints laid out here were designed specifically for the wework.com product. This responsive setup was designed for the content, but could easily be applied to other designs. It may be that a different grid and breakpoints are more suitable for other products. The grid and breakpoints can change to be anything, but the system components are universal.
Rivendell uses a 12 column grid. Each column has a % width (of its container). Each gutter (between columns) has a fixed 30px width. The gutters have a fixed px width, as opposed to also being %, to retain ample spacing between elements at any browser width.
Breakpoints are a designated point (often brower width, but can also be landscape or portrait orientation) where the CSS styles change. Below are the responsive breakpoints:
The full extent of a template. The only restriction should be a max-width on the container to stop content filling too much of the width of large desktop screens, for a comfortable scan of content and reading width. The responsive grid will adapt to any max-width, to suit the project. For example, wework.com is set to 1200px max-width.
Breakpoint 1 (bp1)
The first relief from desktop. Breaks at 1090px browser width, to cover tablet portrait screens. Allows for small changes to desktop designs, for relief for more 'complicated' content-heavy templates containing tables, or multiple tiles/card patterns.
Breakpoint 2 (bp2)
Breaks at 790px browser width, to cover tablet portrait screens. By and large, all templates should be designed to work down to at least 790px width without any major changes. At this breakpoint, templates should prioritize tablet and mobile.
Breakpoint 3 (bp3)
CSS specifically targeted at mobile. Breaks at 490px browser width, to cover the vast majority of mobile screen sizes.
The download below is a good starting point for designing new templates with the Rivendell design system. This particular example is from wework.com, with the desktop max-width set to 1200px. The grid and 4 core artboards for each breakpoint are set up and ready to start populating, and stress-test how your template will work at different browser sizes. The smaller artboard to the left is ‘above the fold’ on a highly trafficked 1440x800px desktop browser window.