New Row Style Dialog

This dialog opens when you click New Style in the Responsive Layout window pane. See Responsive Layout Window Pane.

It lets you create a new responsive row style, basing it on either a factory template or a style you have previously created. See Creating Responsive Layouts.

Option

Description

Class name

Enter a name for the new row style (or you can keep the default name).

Stylesheet

Select the stylesheet where the new style will be added.

Select Row Template

Choose a template as the starting point for your new style. Selecting a template simply makes a copy of the style settings in that template and places them in your new style. You can then make changes to those styles when you choose different settings in the Responsive Layout window pane. So when you choose a template, pick one that is closest to the design that you plan on creating.

Following are the three factory templates:

  • Row-4-4-4 This template starts you out with three cells, each taking up the space of four columns (33.333%) for Web and Tablet layouts, and 12 columns (100%) for Mobile layouts.
  • Row-6-6 This template starts you out with two cells, each taking up the space of six columns (50%) for Web and Tablet layouts, and 12 columns (100%) for Mobile layouts.
  • Row-8-4 This template starts you out with two cells. For Web and Tablet layouts, the first cell takes up the space of eight columns (66.667%) and the second cell takes up the space of four columns (33.333%). For Mobile layouts, both cells take up the space of 12 columns (100%).

Preview

As you click on each factory template, a preview to the right describes how each one is configured. If you click on one of your previously created row styles, you will see some default text. This text was added as a comment for that new style. You can open your stylesheet and replace this text with whatever you want to describe your layout. This can be especially useful if you work with a team of authors who will be creating responsive layouts. See Adding Comments to Styles.