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 dependancy on your own project by running:

yarn

Copy

 yarn add mirotone

npm

Copy

npm install mirotone

• Link the css directly by standart 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.

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.

Heading 1

Heading 2

Heading 3

Heading 4

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

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

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

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.

Objects

Symbols

Board objects

Logos

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

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

Buttons

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

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

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

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

<button class="button button-secondary-border">Secondary border button</button>

<button class="button button-danger-border" >Danger border button</button>

Checkbox

Use .checkbox class.

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

Toggle

Use .toggle class.

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

Radio button

Use .radiobutton class.

<label class="radiobutton"><input type="radio" tabindex="0" checked="" ><span>Radio button</span></label>

Link

Use .link class to stlye the <a>tag. Use the .link-primary to add modificator for color.

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

Textarea

Use .form-group to 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 .form-group to group the input with label and status if needed.

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

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 .select 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 .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.

<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 modificator.

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

App templates

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. 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"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></div>
	<div class="cs1 ce12"></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"></div>
	<div class="cs4 ce6"></div>
	<div class="cs7 ce9"></div>
	<div class="cs10 ce12"></div>
	<div class="cs1 ce3"></div>
	<div class="cs4 ce6"></div>
	<div class="cs7 ce9"></div>
	<div class="cs10 ce12"></div>
	<div class="cs1 ce3"></div>
	<div class="cs4 ce6"></div>
	<div class="cs7 ce9"></div>
	<div class="cs10 ce12"></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">
<!-- input -->
	<div class="cs1 ce12">
		<input class="input input-small" type="text" placeholder="Enter something"/>
	</div>
	<div class="cs1 ce12">
<!-- tabs -->
		<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>
<!-- buttons -->
	<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>
<!-- assets -->
	<div class="cs1 ce12 placeholder"></div>
	<div class="cs1 ce12 placeholder"></div>
	<div class="cs1 ce12 placeholder"></div>
</div>

Report an issue or request a feature

This project is going under constant update, so please feel free to reach me on Twitter.