Quick <Start>
The information below will show you how to quickly get started with Metro UI
1. Installation (5.x)
To get started with Metro UI, you have three ways to install it:
  1. Include precompiled Metro UI from CDN
  2. Using source from NPM
  3. Using source from Github (if you want to modify Metro UI)
Workflow
1.1 Include from CDN
CDN for Metro UI is provided by professional provider KeyCDN. KeyCDN is a high performance content delivery network that has been built for the future.

Add to page head tag link with reference to styles and (if require) icons css files: 


    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/metro.css">
    <!-- Icons -->                    
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/icons.css">

And before closing tag body tag script with reference to javascript part of Metro UI:


    <!-- JavaScript -->
    <script src="https://cdn.metroui.org.ua/current/metro.js"></script>
You can load specified version of Metro UI. To get it, you must specify the version number: 

    <!-- JavaScript -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/5.0.6/metro.css">
    <script src="https://cdn.metroui.org.ua/5.0.6/metro.js"></script>
Also can load develop version of Metro UI. To get it, you must specify the dev branch: 

    <!-- JavaScript -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/dev/metro.css">
    <script src="https://cdn.metroui.org.ua/dev/metro.js"></script>
Important! When your use Metro UI from CDN, you receive ALL functions and components. This has the maximum library size.
1.2 Install from NPM

To install Metro UI from NPM, use next command: 


    npm install @olton/metroui

Include Metro UI into your project (all features):


    import "@olton/metroui"
2. Using (5.x)
2.1 Using from CDN
When your are using Metro UI from CDN, you receive ALL functions and components. You cannot customize the component set.
2.2 Using from NPM
When your are using Metro UI from NPM, you can use full set of Metro UI or customize the component set.

Include Metro UI into your project (all features):


    import "@olton/metroui"

You can also specify individual components: 


    /*
    * Only CSS features
    */  
    import "@olton/metroui/reset"                    
    import "@olton/metroui/common-css/flex" //only css                    
    import "@olton/metroui/components/grid" //only css

or with js

    /*
    * CSS features plus JavaScript Component
    */  
    import "@olton/metroui/runtime.js" // everything you need for the components to work                    
    import "@olton/metroui/components/grid" // css component                    
    import "@olton/metroui/components/accordion" // js component
2.3 i18n

If you use custom set, you must manually include internationalization modules: 


    import "@olton/metroui/runtime.js" // everything you need for the components to work          
              
    // all modules              
    import "@olton/metroui/i18n" 
    
    // or individual
    import "@olton/metroui/i18n/de-DE.js" // Deutschland                       
    import "@olton/metroui/i18n/uk-UA.js" // Ukrainian

Please note that: English i18n module included by default!