Responsive Design

Topincs offers responsive design out of the box. Reading this section will help your understanding of the implementation details of this feature. Consequently you will be able to create better HTML representations in services. Topincs has four layout modes:

Hint: Resize the browser window to see the different modes.

tiny for very narrow screens like smartphones
small for tablet screens
standard for desktop screens
wide for wide screens

It is easy to figure out which layout mode is currently in use. Open the DOM inspector of your web browser and you will notice one of the names of the layout mode on the HTML element of the document. Upon resizing the window this class will change.

Parameters

At any time exactly one layout mode is active. Two parameters determine interactively which one:

Hint: Special browser builds, e.g. kiosk browsers, have sometimes unusual default font sizes, e.g. 25px. This will cause tablets to use the tiny layout where you would expect small.

Font size: every web browser has a default font size (factory default is 16px in most cases). When this value is changed in the settings of the web browser (e.g. increased to make it easier to read or decreased to fit more content on the screen), the intended behavior of Topincs is altered.
Screen width: the layout modes are defined by using CSS media queries using the unit em. The following table shows the exact offsets and which devices the mode is mainly for. Latter under the assumption of an unchanged default font size in the browser of 16px.

Layout mode	Effective when	Device
`tiny`	width below 40em	Smartphones
`small`	width between 40em and 70em	Tablets
`standard`	width between 70em and 100em	Laptops and Monitors up to 21 inch
`wide`	width above 100em	Monitors bigger than 21 inch

Using layout classes

The base components Form, Factsheet, Index and Ongoing have grown nearly perfect on all screen sizes and usually do not need any adjustments.

Services which have lots of HTML output are likely to need adjustments to tiny, This can be done by editing the GET.css or POST.cssin the source code view of that particular service.

CSS code for tailoring a layout mode

Hint: You can use SCSS to write concise CSS code in Topincs.

.tiny {
  .someclass {
    width: 5em;
  }
}

Using media queries

In rare cases it might be necessary to use media queries instead of the layout class, e.g. when resizing an image in the header. The header is always visible unlike the body. But there is a small delay before the layout class is added to the document. In this period images in the header would be displayed with the initial size causing a flicker once the layout specific image size becomes active. This flicker can be avoided by using the respective media query directly.

CSS with media queries

@media only screen and (max-width: 40em) {
  #header img {
    height: 2em;
  }
}