Responsive Layout Maker (RLM) automatically opens with the default or last used grid system and two empty rows. If you want, you can start adding page elements right away.

Go ahead, give it a shot with the empty row below:

Click the Elements Pane on the right, and drag any Element you fancy into one of the 3 empty columns. Feeling addicted yet? Good, keep on reading and become an RLM master in no time!

One thing that makes RLM a unique app is the use of a number of customizable CSS Grid Systems. A grid system makes sure the page elements are neatly aligned at every possible display width. Grid systems come in a number of flavors and RLM supports over 5 different systems that can be selected from the File > New dialog. Grid customizations can be made in the Configure Grid area on the Layout Pane. You can check the 'Show' box to see the grid guidelines. Changes to the Columns and Gutter, however, should preferably be made at the start of a new project, so let's save that for later.

This template uses a 12 column grid. This means that each row can hold up to 12 content columns as seen below for screens over 600px wide. On smaller screens (< 600px), these columns will become too small to hold any content. Therefore, each content column is instructed to take up 2 grid columns, pushing half of them to the next line, but still neatly aligned. This is one of the many powers a grid system offers. You can use the slider to see the effect and read more about the mechanics of this below.

As we saw, content columns can span more than a single grid column, up to the maximum number of columns the grid allows. This structure, rows with each a number of content columns, is what forms the skeleton of the layout. Rows can be added and deleted and moved up and down with the Move Grid Item tool, all located on the Layout Pane. For Column Management one of the most frequently used tools is the 'span drop down'. The number selected determines how much of the row space each column takes up. In the row below there are 3 content columns; their span width can be viewed by clicking on them and looking at the number in the span drop down (although in this case the actual content shows the span as well).

Together they take up the full width of the grid, 12 columns. If that number is exceeded, the last column won't fit and is automatically pushed down and positioned below the first column. This is often referred to as The Stack — one of the most frequently used responsive actions. This is visualized in the next row where the columns exceed the grid span by taking up over 12 columns. The first 2 elements take up 7 columns, not leaving enough room for the third element. This element is now stacked under the first element. Note that we did not adjust the span width for this example for smaller screens as we did above. Use the slider to see the problem at smaller screens and correct it with the span drop down.

Adjust column spans and add rows as you tell the story of your business, promotion, team, life, and anything else that deserves a responsive web presence. If your story is not fully ready yet, Layout Maker offers a great playground to prototype ideas and tinker with flows. Elements — content components — can be easily tried and rearranged. For customizations to the elements, including the rows and columns, select the Properties Pane.

To construct your page, to build your message and design, simply drag the relevant items from the Elements Pane onto the content columns. Choose from image elements, paragraphs, headings, combined elements, logos and other placeholders, even input elements! Click the arrow to select a variation of an element, as, for example, an Ordered List instead of an Unordered List.

The top area of the Properties Pane can be used to customize the HTML and content of the selected element. The Selector Area allows for customizing Classes and IDs. The Style Properties can be applied to one specific element (ID), elements that share the same Class and elements of the same Type. Apply the style changes to the element type or class when possible. The 3 elements in the example below share the same class; edits to, for example, the background color apply to all elements. A specific change to the height for the right element is done using an ID. Please consult the Layout Maker manual for more information about working with CSS Selectors.

The top area of the Properties Pane can be used to customize the HTML and content of the selected element. The Selector Area allows for customizing Classes and IDs. The Style Properties can be applied to one specific element (ID), elements that share the same Class and elements of the same Type. Apply the style changes to the element type or class when possible. The 3 elements in the example below share the same class; edits to, for example, the background color apply to all elements. A specific change to the height for the right element is done using an ID. Please consult the Layout Maker manual for more information about working with CSS Selectors.

Property controls for adjusting styles like background colors, font-family and -size, text-alignment and so on, are self-explanatory. Adjustments will (almost) always have the expected outcome. Layout related controls such as max-width, margin, min-width, float and display may — depending on the CSS familiarity of the user — need a little more time to get used to. However, with Layout Maker a bunch of cool layouts can be built with no or minimal use of these property controls. And over time you will learn that Layout Maker also offers a great environment to gain a better understanding of these CSS properties and how they relate to responsive layout changes. On this page, the use of these layout related properties is limited, and the use of subgrids is omitted entirely.

To create the core of this layout design we first removed the width constraints on all rows (Select a Row and do: Apply To > Type > Max-width > None). This makes the rows — and everything in it — stretch all the way. The text (hero) elements were put in a container for which the width was limited to 1200px, and that was centered by checking margin : auto. Lastly the text (hero) elements were given a width of 49% and positioned next to each other with the float property. The demo sections use different settings. Here the row is constrained to a max-width of 1400px, the orange example elements don't stretch beyond that. This becomes really clear if you still have the 'Show Gridlines' checked and stretch the page beyond 1400px. On the next page, we added a bunch of examples for designing layouts with detailed explanations about the use of spans, subgrids, and widths, including their responsive behavior. But first...

6.1 A brief explanation.

Breakpoints are an important ingredient in any responsive design. Short and concise, breakpoints can be defined as “design adjustments with style rules that are specific to certain defined screen resolution ranges”. They make it possible to present the same content in optimal form across the entire range of device sizes and screen widths. But despite that fact, there are very few apps that offer proper breakpoint management. With Layout Maker adding breakpoints and using them for big or small design adjustments is easy. Simply grab the slider and move it untill you become unhappy with the looks of your design. Hit the plus sign to add the breakpoint and change widths, font-sizes, layout constructs and everything else you want to make the layout design presentable again. The only thing you can not change is the content itself — these changes will take effect accross the board. Breakpoints are actually fun to tinker with! We will have more advanced examples and explanations on the next page, but in step 6.2 you find a summary of what we did to make this page look good all the way (except where we let it up to you to fix it for exercise purposes).

6.2 Responsifying the default layout.

The 1st breakpoint (from right to left) is the advanced page, we can skip that for now. (Note: breakpoints are shared across a project because 2 pages can have the same content section). The 1st active breakpoint for this page — the 2nd from the right — is set at 872px and works on the colorful demo. You can click the breakpoint to move the slider under it. This breakpoint is used to increase the width of the sections. Go on and make them stack and swap the background color. Yep, that does look better. :) The 2nd active breakpoint was set at 731px. This breakpoint was chosen because, at that width, the welcome text started to wrap. This breakpoint was used for a bunch of other adjustments: (1.) the font sizes for most elements were decreased (no need for ginormous fonts on small screens that are held up close); (2.) all text (hero) elements are instructed to now take up 100% of the width (just one edit for all, thanks to the use of classes!) and use less left margin; (3.) the elements in the 1st demo take up more width because their span number was increased; and (4.) we switched the order of the 'story page elements' with the Pull & Push control and increased the span width. If that sounds overwhelming, it totally is not... Seriously, if you study and play with these sections, you will find responsive design a piece of cake after just a couple of tries. Just click on the 600px breakpoint and see for yourself!