Getting starting with Metro_4

Mario E. Olivares — Fri, 13 Mar 2020 19:23:49 +0000

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/

What we are going to see:

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
Creating a login page:
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>
     ```

Install if you don't have it live-server (you can use anohter variant for reloading yor page):

        npm install -g live-server

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: