Using Percussion's Responsive Templates
Percussion provides a number of base responsive templates for the creation of sites and pages. These are based on the Zurb Foundation framework. Using these templates, you can more easily create a mobile-friendly website.
Below are some things to know when using Percussion's responsive templates.
- Region widths are sized based on a 12-column grid. When you resize a region via drag-and-drop the border will "snap to" the closed grid border. Behind the scenes, the region is associated with a class within the base template CSS. The classes Percussion is using are listed below.
- A given "row" on the template must always fill the 12 columns on the grid. If a given region cannot be resized it will be shown with a solid line border as opposed to a dotted line.
- When adding a region to the left or right of an existing region, it will be added with a grid size of 1 column. You can then drag to resize the column. It will "steal" width by reducing the column size of the next column to the right (or left if added to the far right).
Responsive Widgets
Most widgets in Percussion are responsive by design. When you hover over a widget in the Widget Tray, the popup will display if the widget is responsive or not.
Two of Percussion's delivered widgets are not currently responsive and will not display correctly at small resolutions:
- Calendar
- Form
There are also several widgets which are responsive by design, but which can be made unresponsive by inserting content that uses fixed width. For example, an HTML or Rich Text widget could include a table that had fixed width columns and would not display well on a phone or small table. Designers should be aware that use of responsive templates does not prevent content contributors from entering content that may not be responsivel.
Responsive Classes
The responsive templates provided by Percussion use the following classes from Foundation Zurb: row, columns and large-X (X-- number from 1 to 12).