Variables

Mirotone uses variables, they are split in two groups, initial and derived variables. All those values are in the src/foundation-core.css. You can override the foundation-core before importing Mirotone or with ruling the CSS. For now please use the DevTools to check the full list of created variables.

Initial variables

Those variables are defined by literal value.

Example: --space-xsmall: 8px

Derived variables

Those variables are calculated based on a initial variable created.

Example:
--space-xsmall: 8px
--space-small: calc(var(--space-xsmall) * 2)

Headings

Use .h1 – .h4 class to change an elements, it is also normalizing each text element. font size and weight to match Miro heading styles.

Heading 1

Heading 2

Heading 3

Heading 4

<h1 class="h1">Heading 1</h1>

Paragraphs

Use .p-large,.p-medium or .p-small to change an elements font size and weight to match Miro paragraph styles.

Paragraph large

Paragraph medium

Paragraph small

<p class="p-large">Paragraph large</p>

Icons

You can use the Miro icons by adding class .icon + .icon-eye, eye in this case is the icon name. You can find all icons in the dist/icons folder.

<div class="icon icon-eye"></div>

Buttons

You can find two sizes of buttons: .button and .button-small

<button class="button button-primary" type="button">Primary button</button>
 <button class="button button-primary button-small" type="button">Primary small</button>

<button class="button button-secondary" type="button">Secondary button</button>
 <button class="button button-secondary button-small" type="button">Secondary small</button>

Danger button

Use the .button class to trigger the default button.

Use the .button-danger to add modificator for color. When using a button element, always specify a type=""

<button class="button button-danger" type="button">Danger button</button>
 <button class="button button-danger button-small" type="button">Danger small</button>

Secondary border button

Use the .button class to trigger the default button.

Use the .button-secondary-border to add modificator for color. When using a button element, always specify a type=""

<button class="button button-secondary-border" type="button">Secondary Border button</button>
 <button class="button button-secondary-border button-small" type="button">Secondary Border small</button>

Danger border button

Use the .button class to trigger the default button.

Use the .button-danger-border to add modificator for color. When using a button element, always specify a type=""

<button class="button button-danger-border" type="button">Danger Border button</button>
 <button class="button button-danger-border button-small" type="button">Danger Border small</button>

Disabled button

Use the disabled="" attribute for disabling buttons. When using a button element, always specify a type=""

<button class="button button-primary" type="button" disabled>Primary button</button>
 <button class="button button-primary button-small" type="button" disabled>Primary small</button>

Loading button

Use the button-loading attribute for calling a loading button appereance. When using a button element, always specify a type=""

<button class="button button-primary button-loading" type="button" >Primary button</button>
 <button class="button button-primary button-small button-loading" type="button " >Primary small</button>

Icon button

Use the .button-icon class + .icon-{name} to render an icon button.

Add the .button-icon-small if you want to add a smalller icon button.

<button class="button-icon icon-eye" type="button" ></button>

Checkbox

Use the .checkbox class.

<label class="checkbox"> <input type="checkbox" checked=""> <span>Checkbox</span> </label>
 <label class="checkbox"> <input type="checkbox"> <span>Checkbox</span> </label>

Toggle

Use the .toggle class.

<label class="toggle">
  <input type="checkbox" checked="">
  <span>First toggle</span>
 </label>
 <label class="toggle">
  <input type="checkbox">
  <span>Second toggle</span>
 </label>

Radio button

Use the .radiobutton class.

<label class="radiobutton">
  <input type="radio" value="0" name="radio" checked="">
  <span>First</span>
 </label>
 <label class="radiobutton">
  <input type="radio" value="1" name="radio">
  <span>Second</span>
 </label>

Link

Use the .link class to stlye the <a>tag

Use the .link-primary to add modificator for color.

<a class="link link-primary" href="">Primary</a>

Textarea

Use a .form-groupto group the textarea with label and status if needed.

<div class="form-group">
  <label>Textarea</label>
  <textarea class="textarea" placeholder="Placeholder text" spellcheck="true" rows="4"></textarea>
 </div>
                

Input

Use a .form-groupto group the input with label and status if needed.

You can find two sizes of inputs: .input and .input-small

For .input-small combine it with a .form-group-small as wrapping style.

Input is supporting disabled='' attribute and also the following type attributes: type="text"
type="password" type="email" type="tel"

<div class="form-group">
  <label>Input</label>
  <input class="input" type="text" placeholder="Enter something"/>
 </div>
                        

<div class="form-group-small">
    <label>Input</label>
    <input class="input input-small" type="text" placeholder="Enter something"/>
  </div>

Select

Use a .selectclass to style your select HTML Element.

<select class="select">
  <option value="1">Option one</option>
  <option value="3">Option two</option>
  <option value="4">Option three</option>
  <option value="5">Option four</option>
 </select>

Tabs

Use a .tabsclass to style your wrapper. Use .tab to style each pill.

You can add data-badge attribute if you want to present a numerical values inside each tab. You can use tabindex="0" for indicating that its element can be focused.

<div class="tabs">
  <div class="tabs-header-list">
    <div tabindex="0" class="tab tab-active">
      <div class="tab-text tab-badge" data-badge="1,000">Tab</div>
    </div>
    <div tabindex="0" class="tab">
      <div class="tab-text tab-badge" data-badge="2,201">Tab</div>
    </div>
    <div tabindex="0" class="tab">
      <div class="tab-text tab-badge" data-badge="2,858">Tab</div>
    </div>
  </div>
 </div>

Divider

Use a <hr/> or class .hr to use a divider.

<hr/>

Label

Use a class .label to use a label element.

Use the .label-warningto add modificator.

<span class="label label-warning">Warning label</span>

App layouts

Explore different startig kits layouts, which you can use to make good composition for your Miro app. The layout is based on grid. You can explore src/grid-system.css to get more details. Currently Mirotone provides three basic layouts which are hosted in glitch and can be taken from there.

• Gallery grid allows you to create basic setup for your drag and drop visual assets.

• Icon grid allows you to create basic setup for your drag and drop icon assets.

• Mixed grid allows you to create basic setup with different elements.

Report an issue or request a feature

Mirotone is an open source project, so if you want to report bugs,improvements or feature request please fill out the form.