1. Go to the design pane

Double-clicking the placeholder image will automatically launch the Design pane. You can also click on the pane tab directly or right-click on the image.

2. Select your picture

Use the Picture dropdown to choose a source. For online images you can simply paste the link.

Local pictures can be added to the project resources and will be included in the export or upload.

The element will take the dimensions of the new image, unless different styles have been specified.

3. Choose the styles

Scroll down to the Style section. One of the first adjustments made is often the max-width value under Dimensions.

A whole variety of other design controls is available further below.

Pictures can also be changed at breakpoints — serving smaller size images to mobile users increases the performance and makes them happy!

1. Right-click on a text element

The text editor can be activated with a right-click and choosing Edit Text option. You can also triple-click the element or use the Edit Text button (below the ID input box on the Design pane).

2. Add a link and format text

You can select portions of the texts to add Links or format them differently from the unselected text.

These (inline) styles can be given a Class name for easy reuse and updating.

We also have a comprehensive article and video tutorial that describes the various linking options in more detail.

3. Format & state controls

Use the Typography controls on the Design pane to style the text of the entire element.

The formatting tools look and work the same but only affect the selected text (and the previous selections that have been given the same class name).

1. Understanding the grid

Each row can be divided in a number of content columns. The maximum number depends on the grid configuration. The default is 12 columns, which will work fine in almost all cases.

The example above has 4 rows. The 1st two rows both have 2 content columns.That means each content column will take up 6 grid columns (out of 12).

2. Managing the layout

The Layout pane has a bunch of tools for managing and configuring the grid. Columns can be added, merged and Span widths can be adjusted.

When the total span of the columns in a row exceeds the maximum, they will stack. This can be used to make layout changes at breakpoints.

3. Stacking columns

In the above example the span widths of the columns in row 3 have been adjusted past the breakpoint. (The white dot with black filling on the top right)

Column 1 and 2 now use a span of 6 (out of 12 — half of the width). This made the 3rd column stack. The span width for the 3rd column has been set to the maximum number of 12 so it takes up the full width.

1. Start with element Type

Class is the default option in the dropdown but mainly used at later stages of the design. The most efficient workflow is to first define styles for element types.

Choose the Type selector from the Apply to dropdown before using the design controls further below. Styles applied to the type have a pink indicator. 

2. Use classes for variations

With all default styles set, Classes can be added to create design variations.

The variations are related to a different usage of the element in the design. In the example above a header uses a class to add a top border and make the font italic. The font-family is still the same as specified for the type.

3. Understanding the colors

The image above shows that the font family for the paragraph from step 1 is specified on the Type. The same is true for the color and line-height. 

The blue indicators show that the font-size and weight are specified for the class. The yellow indicator tells us that the alignment is set for this specific element only —on the (unique) ID.

1. Read the explanations

We are in the process of swapping out the simple filler text in the themes for explanations that describe how certain design effects have been created. 

These sections mention how the HTML is organized — if containers are used for example — and what style properties are being used.

2. Inspect and see for yourself

Responsive Site Designer is an excellent learning tool! At any point you can jump to the Inspector pane and look at the HTML structure and CSS properties for the selected element yourself.

Just right-click an element and select Go to > Inspector. The element order and associated CSS for each HTML element is shown. The CSS is still edited on the Design pane only (for now).

3. The power of an inspector

The elements can also be dragged and dropped in a different position, changing the element order. This can come handy at times when the drop zones or elements in the preview area are small.

You can also hover elements, and view the outline in the preview area. This helps to understand how much extra space (margin, padding) an elements takes up.

1. Decrease (increase) the width

Responsive Design does not mean designing for a tablet or iPhone — it means designing for any width.

The width slider can be used to view the design at any possible viewport width and is instrumental for creating websites that look good on any screen and device.

2. Breakpoint buttons

The white dots with the + and - can be used to add (or remove) breakpoints. The dots will be added above the current position of the slider, at the pixel value displayed at the left of the device indicators.

The device icons indicate what type of devices are likely to be used at the current width. With all the different device sizes they are just in indication.

The zoom buttons don’t really belong in this tip ☺

3. Update styles

Any style, from column spans to border colors, can be adjusted at a breakpoint. A breakpoint is active, receptive to style changes, when the white dot has a black center.

In the example above this means that a smaller font size is applied as of that point and until further changes are applied at a next breakpoint.

In a desktop down workflow breakpoints are active when the slider is positioned on the left of the dot. Mobile-first designs work the other way around.

1. Make the row full width

Add a row and change the max-width to  none from within the Design pane.

This will allow the row to expand out full screen for the viewer. It’s great for stretching the navigation bar (see above) or creating a section with a background image that fills the entire window (see step 3).

To keep site content in the row from expanding too wide, a max-width can be used to center elements. For more control over groups of elements, a container or subgrid element can be added.

2. Constrain width and center the container or subgrid

Specify a max-width that corresponds to the width of the other rows (or any other value relevant to the design intent).

The container (subgrid) can be centered by setting the left and right margins to auto. Alternatively, you can now use Flexbox for this. Simply set the Display control in the Position section to flex and BAM…all types of cool layout controls pop up.

3. Insert your content

Now you’re ready to add your content. Drag-n-drop content elements into the container or subgrid as you see fit. These elements will stay restrained to the width you set in the previous step.

The items can be positioned within the subgrid columns or container in the same way they can be positioned in a normal column.

For more centering, positioning and alignment options, check out this tip.

1. Drop the HTML Element

Place the HTML Element where you want the custom code or object to appear. This works great for all types of objects, from menus and web forms, to cool slideshows.

These objects can be exports from our apps like Form Builder, but also be exports from 3rd party apps.

2. Add code — tweak the design

The code can be inserted into the HTML box on the Design pane. In the example above the code for a slideshow is shown.

The HTML Element can be positioned and styled just like other elements with borders, backgrounds, etc.

Yep, creating a larger box for adding and editing the code is on the development roadmap. ☺

3. Some objects need additional code or link to resources

Stylesheets and other resource files can be linked using the Head (or Footer) boxes.

To not interfere with the internals of of RSD some objects, mostly the ones using Javascript, can not previewed live in the woking area right now.

You can use the ‘Preview on…’ button on the toolbar to view them in the browser.

1. Block, inline-block, or inline

The Display property plays an important role when it comes to the placement of elements. Most elements are displayed block by default. They take up all available horizontal space, and will always stack on top of each other.

Setting the display to inline-block places the elements next to each other. Just like block elements they can be ‘moved’ from that position using margin and padding. 

Using display: inline places  the elements on one line, just like inline-block. However, this time margin and padding will not have any vertically impact.

More details about placing and aligning elements using these display properties are included in this secret tip »

2. Floats...being threated by flex

Using the float property is yet another option for placing elements next to each other. Floats were originally intended for text wrapping around other elements such as pictures. However, floats work really well for many layout constructs, including building an entire responsive grid system!

Flexbox offers all the layout options that floats bring, and more. However, it can not be used for text wrapping and large layout constructs shift around when loading. Don’t let that last part scare you though, within the grid we' ve started to use flexbox as our preferred method for arranging elements.

This tip » contains a few more details about float elements. For a good overview of Flexbox please read our Flexbox guide »

3. Positioning super powers

The position property provides additional rules for placing elements. The most most common values for this property are static and relative.

Nothing new here, both behave according to the (display) rules mentioned before. Relative positioned elements however can also be ‘pushed’ using the top, left, right and bottom properties.

An absolute element can be positioned anywhere using the same offset properties as relative elements.

A fixed positioned element always stays at the exact same position, also when the page is scrolled. 

These last two values should be used with care in a responsive desig. Here’s a bonus tip » that helps taming the super powers positioning offers.

1. Block basics

Block level elements will always stack. Even if their widths are constrained (using max-width for example) with enough space for both to sit on a single line.

The picture element is a good example. We opted to use block  and a max-width: 400px as default value for them in our grid framework. This way centering them is as easy as setting the margin values for the left and right both to auto.

Block level elements naturally flow to the top-left of their parent. They can be ‘pushed’ from that position using top or left margin. Padding has the same visual effect but extends the background of the element.

Block level elements that do not take up the full space can also be left-aligned, right-aligned or horizontally centered using the auto values for theses margins.

2. Aligning blocks and inline-blocks

Setting the margin-left to auto pushes a block element to the right side of the parent. A right margin can then be used to move it back a little. As mentioned above, setting both the left and right margin values to auto will horizontally center a block element within the parent. Inline-blocks behave differently here.

A convenient method for placing elements next to each other within the same parent is using the inline-block value for the display property. The width and height properties continue to be respected by the browser, similar to how they work for block level elements. However, inline-block elements can not be centered with the margin controls.

In this case centering can be achieved through the text-align control for the parent element. Selecting the parent (column or container) and setting text-align to center under the Typography section will center all its children.

3. Inline elements and more

The inline-block navigation links above have been centered as just explained. The inline display property works in a similar way. As expected, this will always place the elements inline — margin and padding will push the other elements away, but only horizontally and never vertically.

Just as the inline-blocks, inline elements can be right-aligned and centered using the text-align control of the parent container.

Good to know...

Another characteristic of inline and (inline-block) elements is that they only take up the space they need. Space can be increased using the padding or width controls. 

Elements can also be pushed and by adding padding to the top or left side of the parent (column or container) element. It will keep them aligned!

And yea, automatic vertical centering is not possible using this property set. Luckily we have Flexbox now!

1. Float on!

Using the float property is yet another option for placing elements next to each other. This method is often used — and was originally intended — for pictures with text wrapped around it. 

Float can also be used to push the elements to the far right (or left) of the containing parent element.

Although floats work really well in most cases, sometimes there are unintended side effects (although less now older version of IE are rapidly disappearing).

2. Please don’t change that order

One effect is that the parent element does not automatically take up (minimally) the same height as the floated element. This isn't always noticeable if the parent doesn't use a background color or image, but it is something to be aware of.

Another example is that the order of the elements changes when they are floated to the right.

3. The flex future

The element that was positioned first (left) in the HTML order, will be visually positioned on the far right. This can be undesirable when the float: right is removed at a breakpoint.

For these cases it is nowadays better to use Flexbox — with the widespread browser support this is something we @CoffeeCup are increasingly doing.

1. Static and relative

Static is the position value applied by the browser if no other value has been specified. These elements behave exactly as you would expect, according to the rules defined by the display property. In most cases that will be stacking and floating to left (block elements).

Relative positioned elements behave very similar to static elements with two exceptions. First of all they allow you to apply an offset value. An offset of left: 10px will push the element 10 pixels from the left, very similar to the element would shift when a margin would be applied.

Secondly a relative positioned element creates a coordinate system for it’s children. This coordinate system serves as the reference point for any offset values the children might have. When using an absolute positioned element in a section, the parent container will almost always relative postion.

2. Absolute powers

An absolute element can be positioned anywhere in the design using the same offset properties as relatively positioned elements. These values are relative to the nearest ancestor that is not positioned static.

Element that are positioned absolutely are taken out of the flow, taking up no space and not influencing the position of the other elements. Usually the z-index property is increased to make sure the element is visible on top of the other elements.

Absolute positioned elements also possess a secret power: they can be stretched. This can, for example, be used to create perfectly fitting overlays that change to a semi-transparent color on hover.

In the example above an absolute positioned container with button is used as overlay. Using zero values for all four offsets ‘snaps’ the container within the parent. On hover the transparancy is changed from 0 to 1 with transitopn effect. 

When the document body is the nearest positioned element providing the reference point, an absolute positioned element moves along when the page is scrolled.

3. Pin it down!

An element with position: fixed uses the viewport as its coordinate system. This means it always stays at the exact same position, also when the page is scrolled. 

The same top, right, bottom, and left offset properties are used to place the element.

A navigation bar or header is sometime positioned fixed to keep it in view, even when the page is scrolled. Another example is a button or icon that links back the top of the page or some other important page section.

All these controls are really powerful but there’s one thing to keep in mind. In the world of endless screen widths where content naturally flows down, they should be used with care.