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 a Topincs window to see the differnt 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 instead of 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. Usually this is no problem with one exception for Administrators: the admin mode status message is only visible in the layout HTML modes standard and wide. Use the keystroke Alt-Shift-A to show the status message in these modes.
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 width …	Device
`tiny`	… up to 40em	Smartphones
`small`	… between 40em and 70em	Tablets
`standard`	… between 70em and 100em	Laptops and Monitors up to 21 inch
`wide`	… above 100em	Monitors bigger than 21 inch

Making adjustments

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.css in the source code view of that particular service.

CSS code in GET.css, POST.css or custom.css

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

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