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
.homey-header	<header class="homey-header"></header>
.homey-title	<h1 class="homey-title"></h1>
.homey-subtitle	<p class="homey-subtitle"></p>

Example

By using the homey-header class you create spacing and a line between your settings and title(s).

<header class="homey-header">
  <h1 class="homey-title" data-i18n="settings.title">
    <!-- This will be filled with the translated string with key 'settings.title'. -->
  </h1>
  <p class="homey-subtitle" data-i18n="settings.subtitle">
    <!-- This will be filled with the translated string with key 'settings.subtitle'. -->
  </p>
</header>

Forms

Start a new form by using the homey-form CSS class.

CSS class	HTML
.homey-form	<form class="homey-form"></form>

Example

<form class="homey-form">
 <!-- Your form html here -->
</form>

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
.homey-form-fieldset	<fieldset class="homey-form-fieldset"></fieldset>
.homey-form-legend	<legend class="homey-form-legend"></legend>

Example

Use a homey-form-legend to create headings between form elements.

<fieldset class="homey-form-fieldset">
  <legend class="homey-form-legend"></legend>
  <!-- ... -->
</fieldset>

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
.homey-form-group	<div class="homey-form-group"></div>

Example

The yellow space marks the spacing above and below each .homey-form-group class

<div class="homey-form-group">
  <label class="homey-form-label" for="target">label</label>
  <input class="homey-form-input" id="target" type="text" value=""/>
</div>

Basic input & label

CSS class	HTML
.homey-form-label	<label class="homey-form-label" for="target"></label>
.homey-form-input	<input class="homey-form-input" id="target" type="text" value=""/>
	Can be used for the input types: text, number, password and url .

Example

Basic label + input example

<form class="homey-form">
  <fieldset class="homey-form-fieldset">
    <legend class="homey-form-legend">Login data</legend>

    <div class="homey-form-group">
      <label class="homey-form-label" for="username">Username</label>
      <input class="homey-form-input" id="username" type="text" value=""/>
    </div>
    <div class="homey-form-group">
      <label class="homey-form-label" for="password">Password</label>
      <input class="homey-form-input" id="password" type="password" value=""/>
    </div>
    <!-- ... -->

Radio input

Radio set

CSS class	HTML
.homey-form-radio-set	<fieldset class="homey-form-radio-set"></fieldset>
.homey-form-radio-set-title	<legend class="homey-form-radio-set-title"></legend>

Radio buttons

CSS class	HTML
.homey-form-radio	<label class="homey-form-radio"></label>
.homey-form-radio-input	<input class="homey-form-radio-input"></input>
.homey-form-radio-checkmark	<span class="homey-form-radio-checkmark"></span>
.homey-form-radio-text	<span class="homey-form-radio-text"></span>

Example

Radio buttons should be grouped in fieldsets. You can use multiple levels of fieldsets with different classes.

<form class="homey-form">
  <!-- ... -->
  <fieldset class="homey-form-fieldset">
    <legend class="homey-form-legend">Multiple choice questions</legend>
    
    <div class="homey-form-group">
      <fieldset class="homey-form-radio-set">
        <legend class="homey-form-radio-set-title">Group of radio buttons</legend>
    
        <label class="homey-form-radio">
          <input class="homey-form-radio-input" type="radio" name="radio-example"/>
          <span class="homey-form-radio-checkmark"></span>
          <span class="homey-form-radio-text">Radio label 1</span>
        </label>
    
        <label class="homey-form-radio">
          <input class="homey-form-radio-input" type="radio" name="radio-example"/>
          <span class="homey-form-radio-checkmark"></span>
          <span class="homey-form-radio-text">Radio label 2</span>
        </label>
    
        <label class="homey-form-radio">
          <input class="homey-form-radio-input" type="radio" name="radio-example"/>
          <span class="homey-form-radio-checkmark"></span>
          <span class="homey-form-radio-text">Radio label 3</span>
        </label>
      </fieldset>
    </div>
    <!-- ... -->

Checkbox input

Checkbox set

CSS class	HTML
.homey-form-checkbox-set	<fieldset class="homey-form-checkbox-set"></fieldset>
.homey-form-checkbox-set-title	<legend class="homey-form-radio-checkbox-set-title"></legend>

Checkboxes

CSS class	HTML
.homey-form-checkbox	<label class="homey-form-checkbox"></label>
.homey-form-checkbox-input	<input class="homey-form-checkbox-input"></input>
.homey-form-checkbox-checkmark	<span class="homey-form-checkbox-checkmark"></span>
.homey-form-checkbox-text	<span class="homey-form-checkbox-text"></span>

Example

<div class="homey-form-group">
  <fieldset class="homey-form-checkbox-set">
    <legend class="homey-form-checkbox-set-title">Group of checkbox buttons</legend>

    <label class="homey-form-checkbox">
      <input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
      <span class="homey-form-checkbox-checkmark"></span>
      <span class="homey-form-checkbox-text">Checkbox label 1</span>
    </label>

    <label class="homey-form-checkbox">
      <input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
      <span class="homey-form-checkbox-checkmark"></span>
      <span class="homey-form-checkbox-text">Checkbox label 2</span>
    </label>

    <label class="homey-form-checkbox">
      <input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
      <span class="homey-form-checkbox-checkmark"></span>
      <span class="homey-form-checkbox-text">Checkbox label 3</span>
    </label>
  </fieldset>
</div>

Select

CSS class	HTML
.homey-form-select	<select class="homey-form-select"> <option value="1">Option 1</option> </select>

Example

<div class="homey-form-group">
  <label class="homey-form-label" for="select-example">Select your option</label>
  <select class="homey-form-select" name="select-example" id="select-example">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

Textarea

CSS class	HTML
.homey-form-textarea	<textarea class="homey-form-textarea"></textarea>

Example

<div class="homey-form-group">
  <label for="textarea-example-1" class="homey-form-label">Label for textarea</label>
  <textarea class="homey-form-textarea" name="textarea-example-1" id="textarea-example-1" rows="10"
            placeholder="type here your text"></textarea>
</div>

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
.homey-button-primary	<button class="homey-button-primary"></button>
.homey-button-primary-full	<button class="homey-button-primary-full"></button>
.homey-button-primary-shadow	<button class="homey-button-primary-shadow"></button>
.homey-button-primary-shadow-full	<button class="homey-button-primary-shadow-full"></button>
.homey-button-transparent	<button class="homey-button-transparent"></button>
v8.1.1 .homey-button-secondary-shadow	<button class="homey-button-secondary-shadow"></button>
v8.1.1 .homey-button-danger-shadow	<button class="homey-button-danger-shadow"></button>
v8.1.1 .homey-button-small	<button class="homey-button-small"></button>

Example

.homey-button-primary-full

.homey-button-secondary-shadow

.homey-button-danger-shadow

Disabled state

CSS class	HTML
.homey-button-{variant}.is-disabled	<button class="homey-button-primary is-disabled"></button>
.homey-button-{variant}[disabled=disabled]	<button class="homey-button-primary" disabled="disabled"></button>

Example

.homey-button-primary-full.is-disabled

Loading state

CSS class	HTML
.homey-button-primary-{variant}.is-loading	<button class="homey-button-primary-full is-loading"></button>

Example

.homey-button-primary-full.is-loading