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.
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.
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
.
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 |
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.
Hint: You can use SCSS to write concise CSS code in Topincs.
.tiny {
.someclass {
width: 5em;
}
}
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.
@media only screen and (max-width: 40em) {
#header img {
height: 2em;
}
}
This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.
Saving …