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
yarn add mirotone
npm
npm install mirotone
• Link the css directly by standard css linking
html
<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:
html
<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:
html
<div class="cs1 ce12"></div>
cs1 ce2
cs3 ce7
cs8 ce10
cs11 ce12
cs1 ce8
cs9 ce12
cs1 ce5
cs6 ce12
cs1 ce3
cs4 ce6
cs7 ce9
cs10 ce12
Check App template
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.
Heading 1
Heading 2
Heading 3
Heading 4
html
<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.
Paragraph large
Paragraph medium
Paragraph small
html
<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.
html
<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
.
Header 1
test
Header 2
test
Header 3
test
html
<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:
css
.YOUR_CONTAINER {
display: flex;
flex-direction: column;
}
Checkbox
Use the .checkbox
class.
html
<label class="checkbox">
<input type="checkbox" tabindex="0">
<span>Checkbox</span>
</label>
Toggle
Use the .toggle
class.
html
<label class="toggle">
<input type="checkbox" tabindex="0"/>
<span>Toggle</span>
</label>
Link
Use .link
class to style the <a>
tag. Use the .link-primary
class to add a modifier for color.
html
<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
)
html
<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"
.
html
<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.
html
<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
.
html
<span class="input-group">
<span class="input-decoration">€</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\>
:
html
<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:
html
<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
html
<div class="grid">
<span class="input-group cs1 ce6">
<span class="input-decoration border-right">€</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">€</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
).
html
<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
)
html
<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>
html
<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:
html
<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.
html
<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.
html
<hr/>
Label
Use .label
to use a label element. Use the .label-warning
to add a modifier.
html
<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.
You can change a tags color
and background
by using the css variables --color
and --background
:
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.
html
<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
.
App card title
App card description
html
<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.
html
<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.
html
<div class="app-card" style="--accent-color: #f4823e"></div>
App card title
Add .app-card--title
to style and position your title.
App card title
html
<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
.
App card title
The description of this app-card
html
<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.
html
<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>
Table
Use the .table
classname to make your tables pretty. By default, the thead
will be sticky. You can opt-out of this behaviour by adding .table__no-sticky-headers
.
Item | Status | Date |
---|---|---|
Create table component | Done ✅ | |
Create React components for Mirotone | To do | |
Create Vue components for Mirotone | To do | |
Create Angular components for Mirotone | To do | |
Create web-components for Mirotone | To do |
html
<table class="table">
<thead>
<tr>
<th>Item</th><th>Status</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Create table component</td>
<td>Done ✅</td>
<td><time>May 12, 2022</time></td>
</tr>
<tr>
<td>Create React components for Mirotone</td>
<td>To do</td>
<td><time>June 2, 2021</time></td>
</tr>
<tr>
<td>Create Vue components for Mirotone</td>
<td>To do</td>
<td><time>July 30, 202</time></td>
</tr>
<tr>
<td>Create Angular components for Mirotone</td>
<td>To do</td>
<td><time>February 30 2021</time></td>
</tr>
<tr>
<td>Create web-components for Mirotone</td>
<td>To do</td>
<td><time>October 28, 2021</time></td>
</tr>
</tbody>
</table>
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.
html
<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.
html
<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.
html
<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>
Scrollable view with sticky buttons
If you have one or 2 primary actions that you always want visible, use this template.
Your long content here
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
html
<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>
css
.scrollable-example .buttons {
position: sticky;
bottom: 0;
padding-block: var(--space-medium);
background: #fff;
}
Form template
Use this as a base for forms.
html
<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>
css
.form-example {
grid-auto-rows: 1fr auto
}
.form-example--main-content {
align-self: flex-start
}
Message template
You can use this template to, for example, display an error message.
html
<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>
css
.message-example {
grid-auto-rows: 1fr auto
}