Frontfire documentation

Page module

Version 2.1.0

Frontfire UI provides a set of basic page layout styles that support many web design scenarios with ease. This part of the documentation describes the general page document structure.

This module is available in the Minimal and Complete bundles.

normalize.css

While it is not technically a part of the Frontfire UI Page plugin, this is nevertheless a good place to mention it. Frontfire UI includes a CSS normalisation “that provides consistent, cross-browser default styling of HTML elements.” The copy that is used here is normalize.css from Jonathan Neal and Nicolas Gallagher. More information about it can be found in their GitHub repository. Frontfire 1 included an earlier version of it and a variant from a different repository.

Document structure

The general principle is that all block elements are as wide as the window, or viewport. Since that usually isn’t desired for text content, CSS classes exist to limit that width or at least keep a padding on the left and right side. Additionally, you can have header and footer elements that also fill the window width. Their content can be width-limited in exactly the same ways. This allows you to fill header and footer elements with a different background colour and it avoids using hacky negative margins for boxes to reach out of their content width to the window edges.

Window
Header
Logo, navigation etc.
Main
Page title
Paragraph content etc.
Footer
Info, contact etc.
TODO: Make demo box horizontally resizable

The simplest HTML document structure for use with Frontfire is this:

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page title</title> <link rel="stylesheet" href="frontfire-ui-complete.min.css"> </head> <body> <!-- spans to the left and right window edge --> <header> <div class="{{{page-width}}}"> <!-- limited width, responsive layout --> Header content </div> </header> <main class="{{{page-width}}}"> <!-- limited width, responsive layout --> <h1 class="no-top-margin">Page title</h1> <p> Sample content </p> </main> <script src="frontfire-ui-complete-singlefile.min.js"></script> </body> </html>

In this example, the JavaScript file is included at the end of the document’s <body> after all visible elements. Alternatively (not preferred), it can be placed in the document <head>. If included anywhere else (like at the beginning of <body> or before some visible elements in the document, it will not apply the default features to all following elements. Then you have to call the autostart() method yourself after all relevant elements have been added to the page.

See the Installation page for more details about how to include Frontfire in a web page.

Limited page width

The page-width CSS class restricts content to the default page width and scales down with smaller screens. That width is set by the --page-width CSS variable. In any case, it also keeps a minimum horizontal padding to the window edge which is set by the --page-width-padding CSS variable. This class should be applied to the <body> element, or better, a top-level block element that contains the page content, like <main> in the above example. The page comes with no horizontal padding on its own, which allows extending the content to the full width of the page if you want. This class gives the content a limited width and a padding at the left and right side, and shrinks with smaller screens.

All of these limits and paddings are removed when printing. So the page will always use the full (already smaller) paper page width, no matter what it looked like on the (usually wider) screen. This is done automatically through a media query.

Using this technique also allows mixing different content widths on the same page. You can, for example, have text content at the limited width, and image or map content at the full width (with or without any horizontal padding to the viewport). Using block elements at the full viewport width, you can also change the page background colour midpage or for certain sections. Just mix the background elements and page-wide content like so:

<body> <main class="page-width"> <p>Sample content</p> <p>Sample content</p> </main> <div class="dark"> <main class="page-width"> <p>Content with dark theme</p> </main> </div> <main class="page-width"> <p>Normal background again</p> </main> </body>

Centered alignment

By default, the limited-width elements are aligned at the left edge. To change that to a more pleasing centre alignment, add the center CSS class to the <html> element once. It will affect all elements with the page-width class. Adding this class to the document also forces a vertical scrollbar to be shown, no matter if the content is longer than a window height or not. This is to ensure that horizontally centered content does not jump to the side when navigating between pages with and without a scrollbar (which takes some of the available width in most desktop browsers) because of their length.

Window
Main
Content
TODO: Make demo box horizontally resizable

Full page width

If you would like to use the full window width for your web layout, use the full-page-width CSS class instead. It maintains the same horizontal padding but will otherwise not limit the width. This is a great choice for applications that deal with larger amounts of data, presented in tables, or other graphical content like a photo gallery. This is also what this documentation page uses.

CSS box sizing

Frontfire always uses the more manageable CSS box-sizing of border-box. It means that the width and height of an element are not measured by their content box (without padding and border) but by their border box (including the padding, excluding margins). So the width and height is never increased by the padding and border of an element but always matches all visible parts of the element. In turn, the width available for the content of an element is the specified width, minus border and padding.

This box model setting is made in the least intrusive way, by setting it for the document root only and inheriting it everywhere else. If you need to change the box model for one of your elements or foreign code, just set it at that element and it will be inherited as you wish further down the tree.

Disable transitions

Many Frontfire styles use CSS transitions to smoothly change their appearance. This is most visible when hovering interactive elements like hyperlinks (depending on the colours) or buttons. It aims to look more pleasing and not as abrupt. Transitions from immediate interactions are usually asymmetric: the change is instant when an interaction begins (hover in) and smooth when the attention moved somewhere else (hover out). Other transitions like the switch from or to the dark theme are symmetric (try out the theme toggle at the top of the page or change your system setting).

To disable all transitions completely, add the no-transitions CSS class to the desired element. It can be used everywhere and affects the element itself an all descendant elements. This class is used in this documentation to set up the dark theme at page load without the transitions and is then removed after a short moment. It could also be used by user preference to avoid animations or on devices with reduced performance.

Additionally, all animations and transitions are disabled when the user has requested reduced motion at a system level. This may be the case in Windows Remote Desktop sessions.

Content works differently on paper than on screen. Some parts just don’t make any sense when printed, and other information might be relevant instead. To optimise a page for printing, you can specify the print visibility of elements with the CSS classes print-only and not-print which will make an element only visible for printing or hide it for printing, respectively.

Background dimmer

Some plugins like the modal want to lead the user attention on a smaller element on the page. For this reason, the remaining page can be dimmed so that it stands back from the overlay element. This dimmed background can be activated with the static Frontfire.dimBackground() method and deactivated again with Frontfire.undimBackground(). For each activation, the undimBackground() must be called again. Multiple activation will not result in a change of the visual effect, but it will only disappear after the last level was closed. The page background blur effect can be disabled with the simple-dimmer CSS class.