Custom Styling
Customise the presentation of the embedded widgets.
Colours
You can specify an array of colours for the widgets to use. These colours will be used for calls to action and charts throughout the widgets.
Specify the colours when you initialise stub:
window.stub.init({
...
colours: ['pink','#00A86B','rgb(0,100,200)','aliceblue','#9599B2']
})Font
You can specify a font stack for the widgets, when you initialise stub:
window.stub.init({
...
font: "'Comic Sans', Arial, sans-serif"
})Empty State Images
You can customise the image shown when no data is available for a given date range. You need to set an image for both light and dark mode.
window.stub.init({
...
emptyImage: {
light: 'https://url.of.your.own/image.png',
dark: 'https://url.of.your.own/image.png'
}
})Theme
The stub widgets support both dark and light themes, but they will default to light mode. To change the theme set the data-theme property on the root <html> or <body> tag of your webpage.
The stub SDK does not automatically detect the device preference and default this property. It leaves this up to your application.
<!DOCTYPE html>
<html data-theme="dark">
<head>
...
</head>
<body>
...
</body>
</html> CSS
You can use CSS to customise the presentation of any HTML element rendered by the stub SDK.
Make sure you add your custom styles after loading the stub stylesheet, so that your styles override the default stub ones.
The main HTML elements of the stub SDK can be targetted and styled using the following SCSS class selectors (all class name are prefixed with stub- to avoid conflicts with your existing styles).
All elements in the stub SDK generally conform to these conventions, though they might have some nuances to their structure depending on their purpose. When in doubt inspect the DOM.
Basics
Colours used by stub. You can override these CSS variables, but doing so might have unintended consequences. If you use light and dark themes overrides may go awry. Be careful.
:root {
--stub-primary: // Primary text colour
--stub-secondary: // Secondary text colour
--stub-inverted: // Inverted text colour
--stub-background: // Background colour
--stub-background-inverted: // Inverted background colour
--stub-surface: // Alternative background colour, used rarely
--stub-object: // Used by loading skeletons
--stub-edge: // Marks bounderies and horizontal rules
--stub-overlay: // Background when an element overlays the UI
--stub-shadow: // Drop shadow used to lift elements
--stub-accent-1: // Set by the SDK in init()
--stub-accent-2: // Set by the SDK in init()
--stub-accent-3: // Set by the SDK in init()
--stub-feedback: // Indicates touch target areas
--stub-active: // Indicates interaction with touch target areas
--stub-focus: // Indicates interaction with touch target areas
--stub-success: // Success informational colour
--stub-danger: // Error informational colour
--stub-warning: // Warning informational colour
--stub-info: // Info informational colour
}Font stack used by stub
.stub {
.stub-heading {
// Used for titles and headings
}
.stub-subheading {
// Used for subtitles
}
.stub-text {
// Used for most text
}
.stub-label {
// Used for labels and supporting text
}
.stub-sublabel {
// Used for supporting information
}
}Informational colours and presentation
.stub {
.stub-danger {
// Used for errors
}
.stub-warning {
// Used for warnings
}
.stub-success {
// Used for success messages
}
.stub-info {
// Used for informational messages
}
}Widget
The container that each stub widget is presented in.
.stub-widget {
.stub-widget__header {
// Heading for the widget
}
.stub-widget__action {
// Actions show next to the heading on the right
}
.stub-widget__content {
// Content of the widget
}
}Modal
Modals that present information when users interact with the widgets.
.stub-modal-overlay {
// The background overlay behind the modal
.stub-modal {
// The actual modal
.stub-modal__header {
// Heading for the modal
}
.stub-modal__tag {
// Optional actions available on the modal
}
.stub-modal__content {
// Content of the modal
}
}
.stub-modal.stub-modal--mega {
// A wider than usual modal, used in some places
}
}
Button
You know what a button is right? Can be disabled, and have a loading state too.
.stub-button {
// Used for primary calls to action
}
.stub-button.stub-button--loading {
// When an action has been taken and something is loading
}
.stub-button.stub-button--danger {
// Used to indicate destructive actions
}
.stub-action {
// Used for secondary calls to action. This one doesn't go up to 11.
}
.stub-action.stub-action--loading {
// When an action has been taken and something is loading
}Text Input
Plain text field. Vanilla is a flavour too.
.stub-text-input {
// Wrapper for the text input
label {
// Field label
}
input[type=text].stub-input {
// The input element
}
}Text Area
Multiline textarea.
.stub-text-area {
// Wrapper for the text input
label {
// Field label
}
.stub-text-area-wrapper {
// Used to auto-resize the textarea element as content is added.
> textarea.stub-textarea {
// The textarea element
// Note the direct child selector! That's NB. Set the height at your own peril.
}
}
}Date Selector
Date selector uses the native device selector.
.stub-date-input {
// Wrapper for the date selector
label {
// Field label
}
input[type=date].stub-input {
// The input element
}
}Amount Input
Used for inputting currency amounts.
.stub-amount-input {
// Wrapper for the amount input
label {
// Field label
}
.stub-input-wrapper {
// wrapper for the composed input elements
.stub-currency {
// The currency symbol
}
input[type=text].stub-input {
// The input element
}
}
.stub-input-wrapper.stub-input-wrapper--focused {
// When the input is focused
}
.stub-input-wrapper.stub-input-wrapper--disabled {
// When the input is disabled
}
}Month Selector
Used for selecting a month and year combination.
.stub-month-selector {
// Wrapper for the month selector
select.stub-select {
// Both the month and year elements
}
select.stub-select.stub-select--month {
// Month element
}
select.stub-select.stub-select--year {
// Year element
}
}Category Selector
Used for selecting a category for income and expenses. Has a mini variant that is used as a quick action in lists, and a standard form that is used in forms.
.stub-category-selector {
// Wrapper for category selector
label.stub-input-wrapper {
// Wrapper for the composed input elements
.stub-category-icon {
// Category icon
}
input[type=text].stub-input {
// Input element
}
}
.stub-input-wrapper.stub-input-wrapper--focused {
// When the input is focused
}
.stub-input-wrapper.stub-input-wrapper--disabled {
// When the input is disabled
}
.stub-input-wrapper.stub-input-wrapper--alert {
// When there is no category selected
}
.stub-category-list {
// List of categories
.stub-category-list__header {
// Sticky header
input[type=search].stub-input {
// The search input element
}
}
.stub-category-list__item {
// Each category list item
}
.stub-category-list__item.stub-category-list__item--focused {
// List item focus state
}
}
}
.stub-category-selector.stub-category-selector--mini {
// Customisation for the mini version used in lists
}List
Lists of income and expenses.
.stub-list {
// Row
.stub-list__cell {
// Column
}
}Card
Cards used to callout some information in certain contexts.
.stub-card {
.stub-card__heading {
// Heading and optional actions
}
.stub-card__content {
// Card content
}
}Loader
Used to indicate a loading state on charts, buttons and elsewhere.
.stub-loader {
// Loader element used most of the time.
}
.stub-loader.stub-loader--secondary {
// You can't be fezzy all the time.
}Toast
Who doesn't love some toast?
.stub-toast {
// Were you hoping for more?
}Last updated