

Here you can add rows, change the width of columns or combine columns with the simple click of a button. These rows and columns are managed on the Layout pane. The rows and columns provide an organizational framework that helps to create order in the way information is presented.
COFFEECUP RESPONSIVE SITE DESIGNER SERIES
Grid-based layouts consist of a series of rows and columns, very similar to a spreadsheet. These will later be styled to a nice website heading and large cover image. In this first step, I drag in a Heading 1 into the first column at the top, and place a Picture element into the second row, first column. Simply click on the Elements tab on the right, and drag & drop any element you fancy into one of the empty columns. This way, you can start adding page elements like paragraphs and buttons right away. An empty grid with two rows and a few columns automatically opens when the app starts. RSD uses a grid system to make sure the page elements are neatly aligned at every possible display width.

But.if you like it and find it useful I am glad I did it! Please send me your feedback or virtual high-fives on Twitter. I totally had not expected to be making this 5-step article or 8-video tutorial following that rainy Oct 3rd Saturday. To do this, click the Toggle Breakpoints icon in the top menu and select Disable All Breakpoints from the dropdown list. We suggest that you toggle the breakpoints so that you can follow along with the steps. If you are using RSD V2, Bootstrap or Foundation then the workflow is reversed (mobile-first). This tutorial was written using RSD V1's Coffeegrinder desktop-down workflow.
