VII Responsive

To access the Sparky’s template options and open the Responsive tab, do the following:

1. Login to your Joomla Administration panel.
2. Go to Extensions > Templates > sparky_framework > Responsive (Joomla 3.x) or System > Templates > Site Template Styles > sparky_framework > Responsive (Joomla 4.x).

Responsive web design is considered as a good practice in modern web design. It allows your site to adopt its layout accordingly to the available space on screen. Therefore, websites have different layouts on small smartphone screens and on big desktop monitors.

In responsive web design, it’s recommended to use relative units (em, rem, vw, vh and %) because they are relative to the screen size. However, many developers still prefer to use pixels even in the responsive web design era. Which units you would use, depends on your preference. The Sparky Framework allows you to select any of these units when you are building your site.

The Sparky Framework is fully responsive! The layout you are building in the Layout tab will be displayed differently on mobile devices. Screen widths when the layout is changing are known as breakpoints in responsive web design theory. The Sparky Framework uses similar breakpoints as Bootstrap. This is an explanation of how it works in practice:

• If visitor’s screen width is larger than value of the Template Width parameter from the Layout tab, then your site will have the width given in this parameter. All elements of your layout will be positioned as it’s defined in the Layout Builder.
• If visitor’s screen width is less than value of the Template Width parameter from the Layout tab, and it’s not less than 990 pixels, then width of your site will be reduced to 960 pixels. All elements of your layout will be positioned as it’s defined in the Layout Builder. However, the widths of the elements will be reduced proportionally, so they can fit in the reduced width of the site.
• If visitor’s screen width is between 768 and 990 pixels, width of your site will be reduced to 750 pixels. All elements of your layout will be positioned as it’s defined in the Layout Builder. However, the widths of the elements will be reduced proportionally, so they can fit in the reduced width of the site.
• If visitor’s screen width is 767 pixels or less, width of your site will be set to 100%. It will be equal to the width of the visitor’s screen. All elements of your layout will also have width of 100% (less paddings). So, if you had a row with 3 elements, all these elements will be stacked vertically. You can avoid this for a particular row if you enable the No Collapse on Small Screens parameter in settings for this row in the Layout Builder (read more about it in the Layout section).

The Responsive tab has just a few parameters. But, the main part of the action is actually “under the hood”, as we explained above. Let’s explain the parameters available in the Responsive tab.

Responsive Layout parameter is enabled by default. If it’s disabled, your website will not be responsive anymore and it will have the same layout, regardless of the visitor’s screen size.

Responsive Menu parameter is also enabled by default. If your menu is either of Drop-down, Mega or Horizontal type, then it will be converted to a button (also known as “hamburger” menu) on smaller screens. When visitor taps on the button, the menu will appear, but differently formatted and easier for navigation on mobile devices with touch screens.

By default, the responsive menu stays open when the user clicks a menu item. If you want a menu item to close the menu after clicking, set the Link Class value to "closeNav" for this menu item (this parameter is under the Link Type tab of the menu item parameters).

Use Icon On Screen Width parameter allows you to set the maximum screen width when the menu is converted to a button (“hamburger” menu). If screen width is higher than value in this parameter, a normal menu output will be used.

Finally, the Menu Icon Image parameter allows you to select a file that will be used for the menu button (when it’s converted to button). All images from this folder are listed:

To add your own image, upload the image file there using your FTP client.

Sample

Different layout on different screen sizes when Responsive options are enabled. This sample is from Plumber template. This template is available for all premium members.