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
<headerclass="homey-header"></header>
.homey-title
<h1class="homey-title"></h1>
.homey-subtitle
<pclass="homey-subtitle"></p>
Example
<headerclass="homey-header"> <h1class="homey-title"data-i18n="settings.title"><!-- This will be filled with the translated string with key 'settings.title'. --> </h1> <pclass="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
<formclass="homey-form"></form>
Example
<formclass="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.
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.
<divclass="homey-form-group"> <labelfor="textarea-example-1"class="homey-form-label">Label for textarea</label> <textareaclass="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.
