Editing Responsive Layouts

After creating a responsive layout, you may need to return to it at times to make modifications. You also might need to adjust some of the associated styles for it. For more details, see Responsive Layouts and Responsive Layout Window Pane.

How to Edit a Responsive Layout

  1. Open the content file.
  2. In the content file, click in the responsive layout that you want to edit.
  3. If you want to change the content within the layout, you can simply click in the cells and replace or edit the content as necessary.

  4. Select Home > Responsive Layout. The Responsive Layout window pane opens.

    In the Manage section, the style being used by the current responsive layout is shown. So any changes you make will be applied to that style in your stylesheet.

  5. At the top of the Responsive Layout window pane, select the appropriate medium/media query: Web, Tablet, or Mobile.

    Alternatively, you can select the appropriate layout view in the top local toolbar of the XML Editor.

    It is recommended that you start with Web to edit a layout for large screens. After you finish those settings, you can move on to Tablet, and then finally Mobile.

  6. Use any of the following options in the Responsive Layout window pane to enhance the cell and your layout.

    Warning Keep in mind that your changes in this window pane will be auto-saved to your stylesheet by default. This means that anyone making changes to a particular row style using the Responsive Layout window pane will be affecting any other responsive layouts that are using that same style wherever they have been inserted throughout the project. You can remove the check mark from the Auto-save Stylesheet option at the bottom of the window pane; however, if you do that, you will need to save your changes to both your content file and your stylesheet as you work.

    Add Cell

    Adds a new cell to the right edge of the row. By default, a new cell will start out with a width of one column (8.333%).

    Delete Cell

    Deletes the selected cell from the layout. A message asks if you want to remove the corresponding style from the stylesheet as well.

    Cell Width

    Select a number of columns to set the width of the current cell (in percentage). For example, six columns equals 50%. As you select each number the new percentage changes in the Cell Style preview area below.

    Cell Offset

    Select a number of columns to provide the offset (left margin) for the current cell (in percentage). For example, four columns equals a left margin of 33.333%. When you select a number, the left margin percentage changes in the Cell Style preview area below.

    Row Gutter

    Enter the number of pixels for a gutter in the entire row. This adds left and right padding for each of the cells. For example, if you enter 20 pixels for a gutter, each cell will have 10 pixels of left padding and 10 pixels of right padding.

    Moves the entire row up. This simply moves the layout above whatever block element is next to it (at the same level) in the XML Editor. Alternatively, you can click and drag the outermost div structure bar.

    Moves the active cell to the left in the row.

    Moves the active cell to the right in the row.

    Moves the entire row down. This simply moves the layout below whatever block element is next to it (at the same level) in the XML Editor. Alternatively, you can click and drag the outermost div structure bar.

    Edit

    Opens the stylesheet so that the style (i.e., complex selector) for the current cell is selected. You can then make any additional style changes (e.g., add a border, add a background color, set the right margin).

    Example In the following example, we have a row style called "MyResponsiveLayout." In the XML Editor, we clicked in the second cell, and in the Responsive Layout window pane, we clicked Edit. The stylesheet therefore opened with this complex selector highlighted.

    So any changes we make in the stylesheet at this point will alter our second cell only.

    You can also make style changes for the entire row.

    Example To make style changes that affect the entire row, we can either select the main complex selector having to do with our responsive layout, or we can select the appropriate class shown under the div style.

    Auto-save Stylesheet

    If this is selected any changes made to the selected style in this window pane will be applied in the stylesheet. If you disable this option, you must save changes in both the XML Editor and Stylesheet Editor as you work.
  7. When you are finished configuring the row for your current layout, select a different media query (e.g., Tablet, Mobile) at the top of the Responsive Layout window pane. (Alternatively, you can change the layout in the local toolbar of the XML Editor.)
  8. Repeat steps 6 and 7 until you are finished designing the row for all mediums/media queries.
  9. Click Save the active file. to save your work.

Responsive Layout Styles

If you've used the Foundation framework, you know that there are several styles involved. In the simplified Flare system, there are only a few styles to know about.

When you create a responsive layout in Flare, you are asked to create a new "row" style, or use an existing one. It's called a row style because it controls everything that is going on inside that one-row grid. However, in CSS it is actually a div style.

In fact, when you are all done adding cells to the row and assigning columns, you will also end up with multiple complex selectors in your stylesheet. These selectors consist of div styles, using the nth-child pseudo class for each cell.

Example In the following image, we have a responsive layout with three cells, so we have three complex selectors; the number at the end in parentheses represents the order of the cells.

Maybe you want to make formatting adjustments to the second cell in this row style. In that case, you would select div.My-Responsive-Layout > div:nth-child(2) and modify the properties for it on the right side of the editor.

When you click in a cell in the XML Editor, the Responsive Layout window pane will show the relevant complex selector and the definitions for it. You cannot edit this part of the Responsive Layout window pane, but you can copy and paste it elsewhere if necessary. If you click the Edit button below this section, the stylesheet opens and automatically chooses the appropriate selector so that you can edit its properties.

Tip Depending on the type of content you add to your responsive layouts, certain additional styles and settings might be especially useful for you. If you create a grid where the content in each cell is exactly the same size, you're likely to have a much easier time configuring your layout. But if you have different types of content in your cells, or content that requires more space in some cells than others, you might need to use additional styles and properties in your stylesheet. For example, the "height" property can be quite useful to keep all of your cells looking the same. In the Stylesheet Editor, you would expand (Complex Selectors), choose your main selector (e.g., if your layout is named "Grid," you would select div.Grid > div) and then complete the height or other settings to the right.

How to Edit Responsive Layout Styles

Most of the editing for a responsive layout can be done in the XML Editor and in the Responsive Layout window pane. When you make changes in the Responsive Layout window pane, they affect the appropriate styles automatically in your stylesheet. However, the number of settings you can select in the Responsive Layout window pane is limited (e.g., width, left margin, gutter). Therefore, if you want to make additional style changes to your layout, you need to open and edit your stylesheet.

  1. From the Content Explorer, open the stylesheet that you want to modify. Alternatively, you can click Edit in the Responsive Layout window pane; this opens the stylesheet, selecting the style related to the cell currently selected in the XML Editor.
  2. Open the Advanced view of the Stylesheet Editor. In the local toolbar, make sure the first button displays The button to change the stylesheet to the advanced view.. If the button displays The button to change the stylesheet to the simplified view. instead, then click it.
  3. In the upper-left of the editor, make sure the drop-down field is set to Use the drop-down filter for "all styles" to view in the stylesheet..
  4. On the left side of the editor, select the style that you want to edit, depending on whether you want to make changes for the entire row or for a particular cell:

    • Entire Responsive Layout Row You can expand the div style and choose the class you created for the layout.

      Alternatively, you can expand (Complex Selectors) at the top of the styles list, and choose the first selector with the name of your class.

    • Specific Responsive Layout Cell Expand (Complex Selectors). Then choose the selector with the class you created, with a number at the end. The number indicates which cell in the layout will be changed (e.g., 1=first cell, 2=second cell).

  5. (Optional) From the Show drop-down list on the upper-right side of the editor, select any of the options shown to determine which properties are displayed below. This is simply a way to find the appropriate property as quickly as possible.
    • Set (Locally) Properties Displays properties that have been set explicitly in the stylesheet.
    • Set Properties Displays properties that have been set explicitly in the stylesheet. It will also show properties that have been set in an imported stylesheet or inherited properties that have been set in a factory stylesheet.
    • Assorted Relevant Properties Displays the property groups that are used most often for the selected style type.
    • All Properties Displays all the different groups holding the properties for the selected style. This is simply a way to organize the properties intro groups so that they are easy for you to find. If you want to see the values for a given property group, expand it.
  6. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view Stylesheet local toolbar button to show properties in a group view. or an alphabetical view Stylesheet local toolbar button to show properties in an alphabetical view..

  7. Locate the property you want to change.

    Making your changes in the correct medium is important. If you want to make changes that affect large screens, edit the default medium. If you want to make changes to medium-sized screens, edit the tablet media query. And if you want to make changes to small screens, edit the mobile media query. See Selecting Mediums and Media Queries.

    For more information about stylesheets and the many types of changes you can make to styles, see Regular Stylesheets and Editing Styles in a Regular Stylesheet.

  8. The area to the right of the property is used for selecting and entering values. If you know how to enter the information correctly, you can click in the value field and type it directly. Otherwise, click the ellipsis button Display more options. to the right of the property. Depending on the type of property, the appropriate controls and options display, allowing you to choose or enter values (e.g., select from a drop-down list, click a button, complete fields in a dialog or popup). If you completed values in a popup, click OK at the bottom of the box.

    As you make changes to a property's values, you can see how the changes look in the Preview section at the bottom of the editor.

  9. Click Save the active file. to save your work.

How to Delete a Responsive Layout Style

  1. Open the content file.
  2. Select Home > Responsive Layout.
  3. At the top of the Responsive Layout window pane, click the Styles drop-down and choose the row style you want to delete.
  4. Click Delete Style. All styles related to that responsive layout are removed from your stylesheet.

What’s Noteworthy?

Note Depending on the approach you use, it may be technically possible to create responsive content in other formats besides HTML5. However, you will notice that best results are achieved with HTML5 targets, and in particular, Side and Top Navigation outputs. Many of the other formats are able to produce responsive content only in very basic ways.

Also, even though the Responsive Layout window pane is designed with only online output in mind, the content you add to the layouts will show up in other outputs, including print-based outputs (unless you condition that content out). You can open your stylesheet, choose the print medium, and edit the resulting div and complex selectors that were created from a responsive layout. You just might find that you are able to reuse those layouts in your print-based outputs, depending on the simplicity of the responsive layout and the style settings that you provide for the print output.