Introduction

Mirotone CSS components is the base library which enables everyone to design and build their Miro apps. The goal of this design system is to enable makers to quickly jump into a simple, yet consistent and efficient user experience while creating their functional solutions. The framework aims to provide ready-to-use frontend components that you can incorporate into your app in Miro.

Getting started

Mirotone is a CSS library, which means you can use the classes to style your HTML elements. To use it you can either:

• Install the package as a dependency on your own project by running:

yarn

Copy

 yarn add mirotone

npm

Copy

npm install mirotone

• Link the css directly by standard css linking

<link rel="stylesheet" href="https://unpkg.com/mirotone/dist/styles.css">

How does it work

Mirotone is inspired from the BEM architecture, Object Oriented CSS principles and functional CSS. You define the main class and you use a another class as a modifier to add the cusmotization.

Example:

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

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:

Derived variables

Those variables are calculated based on a initial variable created.

Example:

Layout

Mirotone supports .grid. it is based on 12 column grid-template-columns. Each of the 12 cells are using the fr (fractional unit).

How to use

You can create your own grid html element or add a class .grid to the wrapper you want to create the grid layout. Then you should declare start and values for each of your columns to create the layout. The grid uses the Fluidigrid logic and comes with pre-declared naming convention, we use cs[n] for grid-column-start:[n] andce[n] for grid-column-end:[n].

The grid system is part of the foundation-core, and it is highly recommended when creating App layouts.

For example, if you want to declare a column which starts from the first to the last column you will declare:

<div class="cs1 ce12"></div>

Colors

Typography

Headings

Use .h1 – .h4 class to change an elements font size and weight to match Miro heading styles. It is also normalizing each one of them.

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>

Paragraph

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

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

Spacing

The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for different interface solutions. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px.

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 m2 icon-eye"></div>

Objects

Symbols

Board objects

Logos

You can install and use the Mirotone icons Figma plugin to design your concepts.

Placement

When you want to center something inside a container, there is a class for that. Use .centered.

<div class="YOUR_CONTAINER">
  <div class="centered">
    <h1>We will be centered horizontally</h1>
    <p>And vertically</p>
  </div>
</div>

In the 3rd example you see that its still possible to bottom align another item within your container. Just give the container the following styles:

.YOUR_CONTAINER {
  display: flex;
  flex-direction: column;
}

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>

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

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

<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
</button>

<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
</button>

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

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

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

Checkbox

Use the .checkbox class.

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

Toggle

Use the .toggle class.

<label class="toggle">
  <input type="checkbox" tabindex="0"/>
  <span>Toggle</span>
</label>

Radio button

Use .radiobutton class.

<label class="radiobutton">
  <input type="radio" name="radio">
  <span>Option 1</span>
</label>
<label class="radiobutton">
  <input type="radio" name="radio">
  <span>Option 2</span>
</label>

Link

Use .link class to style the <a>tag. Use the .link-primary class to add a modifier for color.

<a class="link" href="">Link</a>
<a class="link link-danger" href="">Danger Link</a>
<a class="link link-text" href="">Text link</a>

Textarea

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

Textarea supports the normal size (.textarea) and a small size (.textarea.textarea-small)

<div class="form-group">
  <label for="textarea-example">Textarea</label>
  <textarea
    class="textarea"
    placeholder="Placeholder text"
    spellcheck="true"
    id="textarea-example"></textarea>
</div>

<div class="form-group-small">
  <label for="small-textarea-example">Small textarea</label>
  <textarea
    class="textarea textarea-small"
    placeholder="Placeholder text"
    spellcheck="true"
    id="small-textarea-example"></textarea>
</div>

Input

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

You can find two sizes of inputs: .input and .input-small. Wrap .input-small with .form-group-small.

Input supports the following attributes disabled='', type="text", type="password", type="email" & type="tel".

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

Make a small input with the .form-group-small and .input-small classes.

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

Give feedback on validation rules with .success

Decorations

You can also add a decoration before and after a input. To make sure the parts are positioned correctly you have to wrap them with a .input-group.

<span class="input-group">
  <span class="input-decoration">&euro;</span>
  <input class="input" id="test4" type="number" placeholder="123456" />
  <span class="input-decoration">,-</span>
</span>

You can add whatever you want in the decorations, for instance, if you want to add a <svg\>:

<span class="input-group">
  <span class="input-decoration">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
  <input class="input" type="email" placeholder="email@address.com"/>
</span>

You can combine inputs with select tags and decorators as needed:

<div class="input-group">
  <span class="input-decoration">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
  <select class="select one-fourth" id="test17">
    <option value="">Mastercard</option>
    <option value="">American Express</option>
  </select>
  <input class="input two-fourth" id="test18" type="text" placeholder="Card number" />
  <input class="input" type="month" placeholder="Expiration date" />
  <input class="input two-fourth" type="number" placeholder="CVC" />
  <span class="input-decoration border-left">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
</div>

Decorations have no left or right borders by default. You can add them if you want to by adding .border-left or .border-right

<div class="grid">
  <span class="input-group cs1 ce6">
    <span class="input-decoration border-right">&euro;</span>
    <input class="input" id="test4" type="number" placeholder="123456"/>
  </span>
  <span class="input-group cs7 ce12">
    <input class="input" id="test4" type="number" placeholder="123456"/>
    <span class="input-decoration border-left">&euro;</span>
  </span>
</div>

If you want to change a size of any item in the .input-group, you have 3 modifiers available. By default all items have flex: 4. To change it you can use: .one-fourth (flex:1), .two-fourth (flex:2) or .three-fourth (flex:3).

<div class="grid">
  <span class="input-group cs1 ce6">
    <span class="input-decoration border-right one-fourth">.one-fourth</span>
    <input class="input" id="test4" type="number" placeholder="123456" />
  </span>
  <span class="input-group cs7 ce12">
    <input class="input" id="test4" type="number" placeholder="123456" />
    <span class="input-decoration border-left two-fourth">.two-fourth</span>
  </span>
</div>

Select

Use .select to style your select HTML Element.

The select input supports the normal size (.select) and a small size (.select.select-small)

<div class="input-group">
  <select class="select">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
    <option value="4">Option four</option>
  </select>
</div>

<div class="input-group">
  <select class="select select-small">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
    <option value="4">Option four</option>
  </select>
</div>

Just like text inputs, selects support decorations:

<div class="form-group">
  <label for="do-you-use-vcs">Do you use a VCS?</label>
  <div class="input-group">
    <span class="input-decoration">Yes:</span>
    <select class="select" id="do-you-use-vcs">
      <option value="">GitHub</option>
      <option value="">GitLab</option>
      <option value="">BitBucket</option>
    </select>
  </div>
</div>

Tabs

Use .tabs to style your wrapper.Use .tab to style each pill inside.

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

Tabs are currently style-only components. In order to make them interactive, you will have to implement it in Javascript or use an existing NPM package.

  <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 <hr/> to clase .hr to add a divider.

<hr/>

Label

Use .label to use a label element. Use the .label-warning to add a modifier.

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

Tag

To display a tag in your app, use .tag. For example:

To add a mirotone icon, use the .icon .icon-ICONNAME classes.

To add an image, just give the image the .tag-image class. Dont forget to add alt text.

Project tag JIRA-1234 Author: Mettin

html

Copy

<span class="tag">
  Project tag
</span>
<span class="tag icon icon-link">
  JIRA-1234
</span>
<span class="tag">
  <img
    class="tag-image"
    src="/profile.png" alt="Profile photo" width="16" height="16"/>
  Author: Mettin
</span>

You can change a tags color and background by using the css variables --color and --background:

<span class="tag" style="--color: var(--blue100); --background: var(--indigo700)">
  Tag
</span>
<span class="tag" style="--color: var(--blue600)">
  Tag
</span>
<span class="tag" style="--background: var(--yellow700)">
  Tag
</span>

You are also able to make a tag clickable by using the <a> tag. On hover and focus the background and text color will invert, or you can overwrite the hover/focus styles. Be sure to have some visual clue that the tag is clickable, like addding a link icon.

<a class="tag" href="https://example.com">Link tag</a>

App Card

App cards are composed of a few components:

• Card (app-card)
• Title (app-card--title)
• Description (app-card--description)
• Icon (app-card--icon)

Card

Card is the basic container .app-card.

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
  <h1 class="app-card--description p-medium">App card description</h1>
  <div class="app-card--body">
    <div class="app-card--tags">
      <span class="tag">Tag</span>
      <span class="tag" style="--background: yellow">
        Another tag
      </span>
      <span class="tag" style="--color: green">
        Just one more
      </span>
      <span class="tag">JIRA-1234</span>
      <span class="tag icon icon-link">A tag with icon</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </div>
</div>

To make sure everything is positioned correctly, put all tags and the .app-card--app-logo in a wrapped .app-card--body, within that you should have a container for the tags .app-card--tags.

Here's an empty app card with all containers you need.

<div class="app-card">
  <h1 class="app-card--title"></h1>
  <h1 class="app-card--description p-medium"></h1>
  <div class="app-card--body">
    <div class="app-card--tags">
      <span class="tag">Tag</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo"></svg>
  </div>
</div>

Add --accent-color: COLOR to change the theme.

<div class="app-card" style="--accent-color: #f4823e"></div>

App card title

Add .app-card--title to style and position your title.

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
</div>

App card description

Use .app-card--description to position the element. To have the proper styling you also need to add .p-medium.

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
  <p class="app-card--description p-medium">
    The description of this app-card
  </p>
</div>

App card app icon

Use the .app-card--icon class to represent your logo. Add it to the <svg/> directly. Looks best at 24px x 24px.

<div class="app-card">
  <div class="app-card--body">
    <div class="app-card--tags"></div>
    <svg class="app-card--app-logo"
        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"/>
    </svg>
  </div>
</div>

App templates

Explore different starting 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. You can get the basic structure and start building your app in no time.

Gallery template

You can use Gallery grid to quickly setup a fast layout composition for images, videos or other visual like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

<div class="grid">
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
</div>

Icon template

You can use Icon grid to quickly setup a fast layout composition for icon like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

<div class="grid">
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
</div>

Mixed template

You can use Mixed grid to quickly setup a fast layout composition for images, videos or other visual like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

<div class="grid">
  <div class="cs1 ce12">
    <input class="input input-small" type="search" placeholder="Enter something"/>
  </div>
  <div class="cs1 ce12">
      <div class="tabs">
        <div class="tabs-header-list">
          <div tabindex="0" class="tab tab-active">
              <div class="tab-text tab-badge">Tab one</div>
          </div>
          <div tabindex="0" class="tab ">
            <div class="tab-text tab-badge">Tab one</div>
          </div>
          <div tabindex="0" class="tab">
            <div class="tab-text tab-badge">Tab one</div>
          </div>
        </div>
    </div>
  </div>
  <div class="cs1 ce12">
    <button class="button-icon button-icon-small icon-eye" type="button"></button>
    <button class="button-icon button-icon-small icon-parameters" type="button"></button>
  </div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
</div>

<div class="scrollable-example">
	<h1 class="h1">Your long content here</h1>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
	</ul>
	<div class="buttons">
		<button type="button" class="button button-primary">
			Primary action
		</button>
</div>

.scrollable-example .buttons {
  position: sticky;
  bottom: 0;
  padding-block: var(--space-medium);
  background: #fff;
 }

<div class="grid form-example">
  <form class="cs1 ce12 form-example--main-content">
    <div class="form-group">
      <label for="form-example-input-1">Input label</label>
      <input class="input" type="text" id="form-example-input-1" placeholder="Enter something"/>
    </div>
    <div class="form-group">
      <label for="form-example-input-3">Input label</label>
      <select class="select" id="form-example-input-3">
        <option value="1">Option one</option>
        <option value="2">Option two</option>
        <option value="3">Option three</option>
        <option value="4">Option four</option>
      </select>
    </div>
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox"/>
        <span>Select this option</span>
      </label>
    </div>
    
    <div class="form-group">
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 1</span>
      </label>
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 2</span>
      </label>
    </div>
  </form>
  <button type="button" class="cs1 ce12 button button-primary">
    Primary action
  </button>
</div>

.form-example {
  grid-auto-rows: 1fr auto
}
.form-example--main-content {
  align-self: flex-start
}

<div class="grid message-example">
  <div class="cs1 ce12 centered">
    <h1 class="h1">Welcome to App Name!</h1>
    <p class="p-medium">With App Name you can easily sync all of your things with your Miro boards</p>
    <div style="background: #f0f0f0; width: 240px; height: 110px"></div>
  </div>
  <button type="button" class="cs1 ce12 button button-primary">
    Primary action
  </button>
</div>

.message-example {
  grid-auto-rows: 1fr auto
}