Feather: Add customizable grid controls

Feather comes with a set of HTML grid controls that help you customize your layout by dropping them on your pages. When you install Feather, in Sitefinity CMS toolbox, you can see new sections named Bootstrap grid widgets.

These layout widgets are shipped with the resource packages. The widgets for every package are designed to follow the recommendations of the particular frontend framework.

For more information about resource packages in Feather, see https://github.com/Sitefinity/feather-packages and Feather: Resource packages.

You can work with a variety of grid widgets, shipped with the Bootstrap package out-of-the-box. For a list of the default Bootstrap grid widgets, see the GitHub repository. Each grid widget covers a basic grid column configuration via the Bootstrap grid CSS classes and markup. For more information, see Bootstrap grid.

For example, the grid-3+9 widget defines a Bootstrap row with two columns, the first one occupying 3 portions and the second one - 9 portions of the row. For details, see the  
Bootstrap grid-3+9 template file.

The following code sample demonstrates the template of the grid-6+6 widget:

In the code above:

• sf_colsIn class 
  Defines a placeholder on the page, so that you can drop widgets there
• data-sf-element
  Enables you to add and remove classes from parts of the grid widget template. For example, you can add CSS classes to the rows and columns of a grid widget. To do so:
  1. Click Edit in the top right corner of the grid widget 
  2. Open the Classes tab.
     You see all available CSS class fields for the columns and rows of the grid widget.
  3. Insert the required classes, so that they are added to their corresponding element.
  
  You can use this attribute for your HTML elements added to the markup of a grid widget. To do so, place a data-sf-element property on the desired HTML element. The value of this property is the name of its CSS class field
  in the grid widget designer:
  
• data-placeholder-label
  Sitefinity CMS enables you to add placeholder labels to grid widgets columns and rows in the Page editor. Thus, you can easily differentiate one grid widget from another after dropping them on a page.
  To set a placeholder label to a grid widget column:
In some cases, you may want to set a unique label for your custom placeholders or other HTML elements in a grid widget. To do this, place a property on your HTML element. The value of this property corresponds to the name of the placeholder label field for your element in the  tab page of the widget designer:

You can rename a grid widget by renaming the corresponding file. Feather automatically renames the widget in the toolbox and on the pages where it is used.

Based on the specifics of your scenario, you may need to modify a grid widget or you need to create a custom one.

To create a grid widget:

1. Copy a grid widget file from the /ResourcePackages/Bootstrap/GridSystem/Templates folder, for example, the grid-6+6 widget.
2. Navigate to the /ResourcePackages/[Name-of-package]/GridSystem/Templates folder.
3. Paste the grid-6+6 widget.
4. Rename the widget, for example, MyGridWidget.
5. Open the widget for editing and modify the markup, base don your scenario.
6. To create a placeholder in the UI from an HTML element, put the sf_colsIn class on the specific element.

To modify an existing grid, simply modify its markup, based on your requirements.

In case you delete a grid widget file from the file system, an error message appears on the frontend. It informs that the template cannot be found. The widgets can no longer be displayed.

The responsive design of Feather grid widgets depends on your implementation of the CSS framework you are using in your package. For example, the Bootstrap grid widgets are responsive because their markup is identical to the one of the Bootstrap grid system, which is responsive by default. For more information, see Bootstrap Grid system.

NOTE: The Bootstrap responsive design features are not supported if you are working with the Minimal resource package.

You can leverage an additional responsive feature, included in the Feather Navigation widget. For small devices, you can display the navigation in a <select> tag. To do so:

1. Open the Navigation widget template.

   NOTE: The template is usually located at  /Bootstrap/MVC/Views/Navigation/NavigationView.Horizontal.cshtml

2. In the template file, locate the helper method @Html.Action("GetView", new { viewName = "Dropdown", model= Model}) 
   The method renders the <select> and is commented out by default.
3. To use the <select>, modify the markup of the method, located in the /Bootstrap/MVC/Views/Navigation/Dropdown.cshtml file and use it in combination with the responsive utility classes of the Bootstrap framework.