# Getting started

# Introduction

Atomio is a UI library and design system for building modern web applications. Atomio provides an alternative for existing libraries and design systems like Material Design or Bootstrap. It provides reasonable defaults with the ability to customize library to your needs.

# Installation

# npm

You can install library with npm:

npm install --save atomio-vue

# HTML

Library will install itself if you include it via <script> tag, assuming you have included Vue earlier:

<script src="https://unpkg.com/atomio-vue"></script>

# Fonts

By default Atomio uses Open Sans font, so you have to provide it via CDN or locally:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

Or in HTML:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> 

# Basic usage

Atomio exposes plugin, which you can use to install the whole library. All required styles are bundled in one CSS file, so you have to import it as well.

import Vue from "vue"
import Atomio from "atomio-vue"
import "atomio-vue/dist/atomio.min.css"

Vue.use(Atomio)

If you want to use only individual parts of library you need to install AtomioContext. AtomioContext manages Atomio theming, configuration, i18n and other functionality. It is installed for you automatically when you install the whole library, so here you have to install it manually.

After installing AtomioContext just import required modules and register them manually. All components expose name property with prefixed component's name.

import Vue from "vue"
import {AtomioContext} from "atomio-vue"
import {AtomioButton} from "atomio-vue/dist/components"

Vue.use(AtomioContext)
Vue.component(AtomioButton.name, AtomioButton)