Skip to main content

Buttons Grid Layout

In the paid version of the agile Downloads module for Joomla! you can choose in the layout options next to the list layout also a button layout. The buttons layout enables a large number of configuration options that are partially discussed here.

Options without direct influence on the grid layout

To realize a grid layout with the buttons you have to change the design to "Buttons" in the Layouts tab first and then you have more options. The field "Button Type" defines the button layout. Here you can choose between the UIkit standards default, primary, secondary, text and link. This option has no influence on the grid layout and can be chosen freely.

Also the option "Button Size Modifier" has no direct influence on the grid layout - but can be used in multi-column grids to make content readable that could otherwise be abbreviated.

Columns for small devices and desktops

Currently, the agile downloads module supports three different display sizes: very small devices => always one column, small devices (@s) and tablets in landscape / desktops or larger (@m). The corresponding button width options @s / @m define the width of a button for the corresponding viewport. You have different options in percent. For example, if you choose @m to use 33% of the width and 50%@s, the module will display the buttons in one column on very small devices, two columns on smartphones in landscape mode and tablets and finally switch to a three column layout when the page is displayed on the desktop. Please note that it is the effective screen width that matters and not the available space you provide to the module. So if the module is placed in an area where your template only uses 50% of the screen width, the space is limited which can lead to display errors. 

However, this alone does not lead to a grid layout right now - currently we have only one column but a defined button width. To arrange the buttons in columns we have to select the option Floating Buttons in the option Buttons Display. After that we get additional fields which define the flex direction of the buttons. As well as options for the definition of the Row / Column gaps.

Here you can find a possible configuration of the above fields that represents a grid layout:

agileDownloads floatingButtons

The options shown here lead to this representation (Enlarge / reduce the window to see the different column settings for different viewports):