With a Hund status page, minimal effort is needed to design your status page to match your company's brand. This guide is written for designers and developers.
Note: Team members that are invited for the purpose of customizing a status page must be made an admin to access the Look and Feel section of your dashboard.
Editing
The Look and Feel section of your dashboard provides you with all of the tools needed to edit custom styles and custom HTML while displaying a live preview of your changes.
Expandable Editors
Expand the current editor to fill half of the screen by pressing F11.
Staging
Changes made are not public until published; only admin members can view staged changes.
Browser Support
Upon publishing, generated CSS will be processed by an auto-prefixer to support >99% of all used browsers (inc. IE 9+, iOS 7.1+, and Android 4.4+). Because we handle prefixing, this means you do not need to concern yourself with browser-specific properties.
Responsive Design
For responsive design, the preview's viewport can be changed on-the-fly.
Preprocessors
Preprocessors are available for both CSS and HTML. When using a preprocessor, linters provide immediate feedback for syntax errors.
Styling
As mentioned, the structure of Hund status pages is designed for extendibility. We have focused on making a basic layout that can easily be changed. Our default status page CSS styling (excluding the dashboard) meets the highest Web Content Accessibility Guidelines 2.0 conformance level, level AAA.
We recommend inspecting pages with your browser's developer tools to understand how sections are structured.
Status Page Elements
For brevity sake, we use SCSS in the following examples of how you might style main blocks.
Status Colors
Across your status page are many elements that are colored by operational status classes. The following classes are used to indicate states:
.operational: Typically green, indicates good state.degraded: Typically yellow/orange, indicates abnormal state.outage: Typically red, indicates bad state.pending: Typically gray, indicates unknown state
We do not recommend applying global !important styles for these states. Instead, we suggest styling these with regard to the containing element. Using global styles can break certain elements and make them unreadable.
Elements that use state colors: State bars, groups, and items
Example SCSS element styling:
$states: (
operational: $color-operational,
degraded: $color-degraded,
outage: $color-outage,
pending: $color-pending
);
.state-element {
@each $state, $color in $states {
&.#{$state} {
color: $color;
}
}
}
Brand Header
Changing Header HTML may initially seem to break your status page's header causing navigation buttons to be misaligned, but this is intentional. This customization replaces your status page's logo so that you can entirely customize the header to match your brand's needs.
We suggest a wrapper element (e.g. .brand-header) for fine-tuning positioning. Header navigation can be positioned like so:
.brand-header {
position: relative;
height: 48px;
.header-nav {
position: absolute;
right: 0;
}
}
Note that .header-nav is used as a drop-down navigation on mobile and .toggle-nav-link is used to toggle its positioning.
State Bar
The state bar shows the current overall operational status on the homepage, as well as component statuses on component pages.
Example SCSS:
@mixin state-bar($color) {
background: linear-gradient($color, darken($color, 5%));
border-radius: 5px;
color: $white;
font-weight: 700;
}
.state-bar {
@each $state, $color in $states {
&.#{$state} {
@include state-bar($color);
}
}
}
Groups
Groups are component containers which display an operational state.
Example SCSS:
This example replaces group operational states with a status circle and improves group headers.
@mixin state-circle($color) {
background-color: lighten($color, 20%);
border-top-color: lighten($color, 30%);
border-bottom-color: lighten($color, 10%);
}
.container > section > header {
background: linear-gradient(darken($white, 3%), darken($white, 5%));
h2 {
font-weight: 600;
}
.state {
visibility: hidden;
&::after {
content: " ";
background: transparent;
border-radius: 0.4em;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
display: inline-block;
height: 0.8em;
width: 0.8em;
line-height: 51px;
visibility: visible;
}
@each $state, $color in $states {
&.#{$state}::after {
@include state-circle($color);
}
}
}
}
Items
Items are elements used for history and issues.
Example SCSS:
.item .state {
@each $state, $color in $states {
&.#{$state} {
color: $color;
}
}
}
Metrics
You can override the default colors used when rendering metric graphs by adding a script to the footer of your status page. This script should set a metrics object on the window, with the following properties:
window.metrics = {
styles: {
colors: ["#00C853", "#FF8700", "#E3005C"],
drop_line_color: "#007E33"
}
};
The colors array sets the colors that graphs will use for data series. The drop_line_color changes the color for the x-axis dropline shown beneath points on line graphs (defaults to colors[0]).
Analytics
To log analytics on your status page, we recommend putting your vendor's script in your footer.
Google Analytics
Hund uses Google Analytics, so you only need to add a script which sets your tracking ID:
ga("create", "UA-XXXXX-Z", "auto", "statusPage");