Up until now, if you wanted to display content in columns which are adjacent to each other on a course or category page, you had no other option than to use layout tables. These tables, however, are not really suited to being displayed on mobile end devices and force the user to scroll horizontally on their small screens. It is much more user friendly if your content on ILIAS adjusts to fit the screen width of the device being used. Today's post will show you how to create such a responsive, multi-column layout in ILIAS 5.0 and 5.1 without using layout tables.

In our example, we will implement a five column layout in a standard ILIAS. The columns will eventually contain icons that will be displayed next to each other when the screen width allows. Should the user reduce the screen width, however, then ILIAS will automatically reorganise the column layout at pre-defined widths until, when being viewed on a mobile end device, all the columns will be displayed one on top of the other (see screenshot right).

Tip: The homepage of ilias.de uses a layout with four columns. Here you can try out the responsive layout yourself. Just reduce the size of your browser window!

It is recommend that you implement a multiple column layout using the side element 'block'. That way, the columns can contain both text and images. As you probably only use these blocks for catagories, course or group pages, you should create and use a separate, independent 'content style'.

All changes to the content style can be made by going to   Administration » Layout : Content-Styles.  For this you need the appropriate rights on your ILIAS installation.

Step One: Defining Media Queries in the Content Style

So that page contents are at all able to react responsively, you have to first define the 'media queries' for the content style you will be using. These rules determine at which screen-widths ILIAS uses which CSS properties to display the page contents. To define these rules, go to the Media Queries tab in the content style you are editing.

In the following example the five columns should have a minimum width of 100px. Therefore, in addition to the already existing 'standard' rule, four further media queries with the following properties have to be created.

• only screen and (max-width: 1067px)
  
• only screen and (max-width: 967px)
  
• only screen and (max-width: 867px)
  
• only screen and (max-width: 767px)
  

The pixel value of the the last media query listed is also the value at which ILIAS automatically switches to the mobile-end-device view and, for example, shows the contents of the right-hand column of the course overview page underneath the main content column. The values of the queries above that are the result of the the requirement of having columns that are at least 100px wide. By creating media queries, a new options menu appears on the editing form of style classes for the respective media query. These are labeled  @media .

Step Two: New style classes for responsive columns

In the content style being used by the category or course page in question, two new 'block' style classes need to be created (the following style names being used are just examples - feel free to use other names).

1. ResponsiveContainerFluidAll5 : This block is the container in which the five columns will afterwards be located. You only need to enter information for the media query (@media) 'default'. Enter the following 'Additional Parameters' into 'Further CSS Rules' at the end of the form:

   • width: 100%
   • float: left
   • padding: 0
   • margin: 0

2. ResponsiveElement1Column : This block will be used for the individual columns. Here you will need to enter different values for each media query. This is how ILIAS will know to automatically reduce the number of columns when being displayed on narrower screen widths.

   • @media: Standard : Enter the following 'Additional Parameters' into 'Further CSS Rules' in order to display the five-column layout as standard:
     • width: calc(20%)
     • float: left
     • padding: 0
     • margin: 0
   • @media: ...(max-width: 1067px): Turns a five-column layout into a four-column layout.
     • width: calc(25%)
   • @media: ...(max-width: 967px) : Creates a three-column layout.
     • width: calc(33.3%)
   • @media: ...(max-width: 867px) : Displays only two columns next to each other.
     • width: calc(50%)
   • @media: ...(max-width: 767px) : Displays the page content for mobile end devices in only one single column.
     • width: calc(100%)

Final Step: Creating the column layout using the ILIAS page editor

After defining the necessary stylesheet information, you can now use the ILIAS page editor to create a page with a responsive column layout.

1. First create a block on the course or category page with the style  ResponsiveContainerFluidAll5 .
   
2. Now create five further blocks within the block created in step 1. These five blocks represent the five responsive columns and can be later filled with content. Assign the style  ResponsiveElement1Column  to each of these blocks.
   

And that's it! The responsive page layout is done. Don't let yourselves get irritated by the fact that the layout looks rather stepped in the editing mode of the ILIAS page editor:

If you already fill the blocks with some random text or an image, you can quickly test the effect of the stylesheets yourself. All the columns are neatly positioned next to each other:

To test the responsiveness, simply reduce the size of your browser window, step by step. As soon as the window size falls below a specific width, the content of the last column to the right jumps into the second row. The following screenshot shows the example five-column layout when the media query  @media: ...(max-width: 967px)  is in effect and two of the five columns have been moved to the second row.

Further Tips

You can easily change the settings of the five-column layout to create three or four-column layouts instead. In this case you would define appropriately fewer media queries and choose different widths.

If the columns contain mainly text, it is recommended that you use a larger minimal width and appropriately larger gaps when entering the maximal width in the media queries. The 100 pixels used in the example were chosen based on the width of the icons used.

The presentation of text or image contents across two columns is also possible. For this you only need an additional block stylesheet (for example with the name  ResponsiveElement2Columns). Depending on the media query, you define the width of this block always as two columns. In the case of a three-column view with the media query  @media: ...(max-width: 967px)  you have to enter  width: calc(66.6%)  for the block across two columns.

This is the English version of the German blog post ‘Responsives Spaltenlayout mit dem ILIAS-Seiteneditor’ written by Matthias Kunkel and translated into English by Chris Potter.