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']
})

Specify 5 colours. They will be used in their order of precedence.

Font

You can specify a font stack for the widgets, when you initialise stub:

window.stub.init({
    ...
    font: "'Comic Sans', Arial, sans-serif"
})

Make sure the font you specify is loaded in your DOM. stub will not detect and inject font dependencies.

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'
    }
})

You will need to host image assets on your own server.

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.

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
    }
}

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
    }
}

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?
}

PreviousEmbedded accounting NextReference

Last updated 9 months ago

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']
})

Specify 5 colours. They will be used in their order of precedence.

Font

You can specify a font stack for the widgets, when you initialise stub:

window.stub.init({
    ...
    font: "'Comic Sans', Arial, sans-serif"
})

Make sure the font you specify is loaded in your DOM. stub will not detect and inject font dependencies.

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'
    }
})

You will need to host image assets on your own server.

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 , 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
    }
}

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
    }
}

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?
}

PreviousEmbedded accounting NextReference

Last updated 9 months ago

Custom Styling

Colours

Font

Empty State Images

Theme

CSS

Basics

Widget

Button

Text Input

Text Area

Date Selector

Amount Input

Month Selector

Category Selector

List

Card

Loader

Toast

Custom Styling

Colours

Font

Empty State Images

Theme

CSS

Basics

Widget

Button

Text Input

Text Area

Date Selector

Amount Input

Month Selector

Category Selector

List

Card

Loader

Toast