HTML & CSS Styling
The Homey Style Library is the key to a consistent user experience across all Homey Apps. We recommend to use this library above custom styling.
These CSS classes are available on Homey Cloud, and on Homey Pro since v8.1.0
Header and Titles
For custom pairing screens and app settings you might want to use our default header with title and an optional subtitle.
CSS class | HTML |
---|---|
| |
| |
|
Example
Forms
Start a new form by using the homey-form
CSS class.
CSS class | HTML |
---|---|
|
Example
Fieldset and legend
With <fieldset class="homey-form-fieldset">
you can create a new fieldset in your form.
A fieldset is useful to create larger sections in your forms. Make sure your always use a <legend class="homey-form-legend">
to give the fieldset a title.
CSS class | HTML |
---|---|
| |
|
Example
Groups
Use <div class="homey-form-group">
to create a group combining a label with an input field. Use the homey-form-group
class to create equal vertical spacing between all inputs.
CSS class | HTML |
---|---|
|
Example
Basic input & label
CSS class | HTML |
---|---|
| |
| |
Can be used for the input types: |
Example
Radio input
Radio set
CSS class | HTML |
---|---|
| |
|
Radio buttons
CSS class | HTML |
---|---|
| |
| |
| |
|
Example
Checkbox input
Checkbox set
CSS class | HTML |
---|---|
| |
|
Checkboxes
CSS class | HTML |
---|---|
| |
| |
| |
|
Example
Select
CSS class | HTML |
---|---|
|
Example
Textarea
CSS class | HTML |
---|---|
|
Example
Buttons
Button variants
Using multiple button variants:
Each button class starts with .homey-button
this you can follow up with color variants such as: -primary
,-secondary
, -danger
. You can further adjust the button style by adding -full
, -shadow
, -small
parameters. This way you end up having a class such as .homey-button-primary-shadow-full
.
CSS class | HTML |
---|---|
| |
| |
| |
| |
| |
v8.1.1
| |
v8.1.1
| |
v8.1.1
|
Example
Disabled state
CSS class | HTML |
---|---|
| |
|
Example
Loading state
CSS class | HTML |
---|---|
|
Example
Last updated