Getting starting with Metro_4
Tags: metro4
Published: 2020-03-13 19:23:49

---
title: Getting starting with Metro_4

published: true
description: We are going to showing how staring with this amazing tool

tags: Metro_4


series: Metro_4
---

### Why Metro_4
  Metro 4 is an open source toolkit for developing with HTML, CSS, and JS.
  You can quickly prototype your ideas or build your apps with its extensive set of components, and powerful plugins.

More info here: [https://metroui.org.ua/](https://metroui.org.ua/)

### What we are going to see:
   1. Setting up a markup for using the library
        1.1 Initialize the project
        1.2 Initialize the markup
        1.3 Install live-server
        1.4 Run out page
        
   2. Creating a login page:
![LoginScreenShot](https://dev-to-uploads.s3.amazonaws.com/i/weq9g27wzk3vhcgudzoe.png)
   3. Conclusion


### 1. Setting up:
   1.1 Create a dir, inside it initialize an npm project:
             ```
         mkdir metro4_login && npm init -y
             ```


   1.2 Create a file index.html with this content (you can find this content here: https://metroui.org.ua/intro.html):

       ```html
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <!-- Required meta tags -->
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

                <!-- Metro 4 -->
                <link rel="stylesheet" href="node_modules/metro4/build/css/metro-all.min.css">
            </head>
            <body>
                <h1>Hello, world!</h1>

                <!-- Metro 4 -->
                <script src="node_modules/metro4/build/js/metro.min.js"></script>
            </body>
        </html>
         ```

   3. Install if you don't have it live-server (you can use anohter variant for reloading yor page):
```bash
        npm install -g live-server
```
   

4. With this, inside your project, run:
	```
	  live-server
	  ```
	 You should see a page with Hello World


### Create the login page:

   Paste this code inside the body tag:
  ```
  <div class="container-fluid">
      <div class="grid ">
        <div class="row d-flex flex-column flex-justify-center h-vh-50" >
          <div class="cell-3 offset-4">
            <form class="p-6 win-shadow">
              <span class="mif-4x mif-vpn-lock place-right" style="margin-top: -10px;"></span>
              <h2 class="text-light">Login to service</h2>
              <hr class="thin mt-4 mb-4 bg-white">
              <div class="form-group">
                  <label>Email address</label>
                  <input type="email" placeholder="Enter email" data-role="input" />
                  <small class="text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                  <label>Password</label>
                  <input type="password" placeholder="Enter email" data-role="input" />
              </div>
              <div class="form-group mt-10">
                  <button class="button success" data-role="button">Submit data</button>
              </div>
          </form>
          </div>
        </div>
      </div>
      <!-- content here -->
    </div>

    <!-- Metro 4 -->
    <script src="node_modules/metro4/build/js/metro.min.js"></script>
  ``` 
Basically the login page structure consists of:
```
        .container-fluid
            .grid
                .row
                    .cell
                        form
                            - icon (<span class="mif-4x mif-vpn-lock place-right" style="margin-top: -10px;"></span>)
                            h2 
                            hr
                            .form-group (relative to email address)
                            .form-group (relative to email password)
                            .form-group (relative to submit button)
  ```                          
    We use a .container-fluid to place our page all wide into the viewport
    
    With the grid system we give the form a width of 3 columns.
    
    We also give an offset of 4 for centering horizontal
    
    With the flex classes we demonstrate flexbox with Metro_4. 
    
    The name off flexbox classes are practically self explanatory.
    
    Last we can see the use of .form-group for the form items.


#### Conclusion:

**Metro_4 IS AND IMPRESSIVE COMPONENTS LIBRARY.**
It have support for **Angular and React**.
It is **easy** to use, with **several examples** and explanation.
It's **free**, open source and **well supported**.
It's give us a **huge number of components**.