Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

BootMetro: Exploring the Framework in Practice

This article introduces you to the BootMetro web framework. Since the history and initial concepts, until the main features, components and typography, well explore it at all.

This article introduces you to the BootMetro web framework. Here I would be covering the following topics with relevant and simple examples

  • Introduction to BootMetro
  • History
  • Features
    • Browsers Support
  • Getting Started with BootMetro
  • Typography
    • Headings
    • Tables
  • Components
    • Command Buttons
    • Command Images
    • Customized Command Button
    • Metro Nav List
  • Page Components
    • Hero Unit
  • Key Points
  • Conclusion

Introduction to BootMetro

BootMetro is a free responsive front end framework for creating web pages and to building user interface websites quickly. It is inspired by Metro UI CSS. It is a complete solution built on top of bootstrap which allows to develop web projects in a intuitive way, using the clean look and feel of Windows 8’s Metro design style by simply providing HTML, CSS and JavaScript for web applications without need to run on Windows 8.

It is said that BootMetro uses Metro UI CSS which is used for creating interfaces and can also be used side by side with any other frameworks. It contains all features, components of Bootstrap for developing easy user interface. The metro design style has gained popularity with most of web developers for creating web sites with use of JavaScript, HTML and CSS. It focuses more on the applications and also works well with other responsive layout scripts.

History

The first line of the source code was added to BootMetro framework in May, 2012. The framework is still changing by using innovative and exciting ideas for developing websites using Metro UI style design. The many new projects begin with existing or older project’s source code and you could be able to tell a rapid rise in the project’s source code early in the project’s history.

The source code for BootMetro has not been changed over a year. But still the code is useful for whoever is making use of this framework. There are four people who have contributed over the entire history of the BootMetro framework: Ray H.J Kwon, Aozora, David Smith and Momo.

Features

  • BootMetro is one of the most successful web design languages for creating web or mobile apps.
  • The BootMetro allows creating web applications with look and feel of the Windows 8 Metro UI style.
  • It uses the Metro UI CSS which provides base for UI style.
  • It is built on top of Bootstrap by including its additional features like tiled pages, application bar etc.
  • It gives more focus on content and provides simple ways to navigate to your other pages.
  • It provides different types of font icons with any color and any dimension and shows messages, warnings and errors like Windows 8 do.
  • It uses Bootstrap and HTML5 Boilerplate to integrate the framework. The HTML5 Boilerplate is a template which can easily build websites and brings together set of best practices for front end development.

Browsers Support

The BootMetro framework supports all the following latest browsers:

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Safari
  • Internet Explorer

Getting Started with BootMetro

There are many ways to start working with BootMetro. When you click on the following link, you will get the screen as shown below:

Click here for BootMetro Documentation Bootmetro download page.

Figure 1. Bootmetro download page.



As shown in Figure 1, there are different types of possibilities to make use of BootMetro framework:

  • Download BootMetro:

    This option provides compiled and minified versions of JavaScript, CSS and fonts. It does not include any documentation for source files.

  • Download BootMetro source:

    This option allows downloading all the files from the GitHub along with latest version and files for the CSS and JavaScript.

  • GitHub repository

    It provides source code management functionality and clones the entire project by adding its own features

  • View the Demo pages

    It provides different types pages for doing Metro stuff and can be reused whenever you need them.

Basic Example

Let’s create one simple example which displays the three columns by using BootMetro framework as shown below:

Listing 1. BootMetroHeading.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Example</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="assets/css/datepicker.css">
   <script src="assets/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
     <div class="container">
	 <h1>Hello, world!</h1>
	 <h2>Welcome to BootMetro web framework!!!</h2><br>
	 <div class="row">
	       <div class="span4">
	         <h3>Heading 1</h3>
		     <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit
		     amet, consectetur, adipisci velit..</p>
		   </div>
	       	<div class="span4">
	         <h3>Heading 2</h3>
		     <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit
		     amet, consectetur, adipisci velit..</p>
		   </div>
		   <div class="span4">
			 <h3>Heading 3</h3>
			 <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit
			 amet, consectetur, adipisci velit..</p>
		   </div>
	 </div>
    </div>
   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
   <script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
   </body>
</html>

The above code describes how to display columns using BootMetro framework. It includes all the CSS files which are placed inside the assets -> css folder. The body contains a container that displays a row class that must be placed within a container for proper alignment and padding. The row class is used to create horizontal group of columns.

Grid columns are created by specifying number of twelve columns you wish to span. In this code, we have used “span" class which would create three equal columns. The js files are placed before the body tag ends to load the program quickly. When you run the code, you would get below in Figure 2.

 BootMetroHeadingExample.

Figure 2. BootMetroHeadingExample.

The framework supports different types of media queries which display your application appropriately on different devices such as desktops, mobiles, tablets etc. The Table 1 provides details of different devices.

Table 1. Different device details.

Devices Layout Width Column Width Gutter Width
Large Display(Desktops) 980px and above 70px 30px
Default 1200px and above 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below No fixed widths No fixed widths
Phones 480px and below No fixed widths No fixed widths

Typography

It is a technique of arranging types to make written language into readable and beautiful format. It includes line spacing, different types of heading formats, and alignment of texts, block quotes, lists etc. Let’s see different types of typography as described below:

Headings

It’s possible to display different types of headings with use of h1 to h6 tags as shown in Listing 2.

Listing 2. TypographyExample.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Example</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
</head>
<body>
    <div class="container">
	<div class="row">
	<h3><u>Different types of Headings</u></h3>
		 <h1>BootMetro!</h1>
		 <h2>BootMetro!</h2>
		 <h3>BootMetro!</h3>
		 <h4>BootMetro!</h4>
		 <h5>BootMetro!</h5>
		 <h6>BootMetro!</h6><br>
			<h3><u>Defining small text</u></h3>
			<p><small>Welcome to BootMetro</small> </p><br>
		   <h3><u>Different emphasis classes</u></h3>
		   	<p class="text-warning">Welcome to BootMetro</p>
		   	<p class="text-error">Welcome to BootMetro</p>
		   	<p class="text-info">Welcome to BootMetro</p>
		   	<p class="text-success">Welcome to BootMetro</p><br>
		   <h3><u>Abbreviations</u></h3>
		   <abbr title="Transport Control Protocol">TCP</abbr>
	   </div>
    </div>
         <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>
</html> 

Run the above code and you would get the output as in Figure 3.

TypographyExample.

Figure 3. TypographyExample.

Tables

In BootMetro, you could display the tables with different formats such as striped table, condensed table, bordered table, hovered table etc. Let’s create one example using these styles:

Listing 3. Tables.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Example</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
</head>
<body>
    <div class="container">
	<div class="row"><br>
	<table class="table table-condensed table-cell-hover table-bordered table-striped">
	<thead>
	<tr>
		<th>#</th>
		<th>First Name</th>
		<th>Last Name</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>1</td>
		<td>Sachin</td>
		<td>Tendulkar</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Sourav</td>
		<td>Ganguly</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Rahul</td>
		<td>Dravid</td>
	</tr>
	</tbody>
	</table>
	</div>
    </div>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>
</html>

The above program displays a table with different types. The table-condensed class makes the table more compact, the table-cell-hover class defines hover state on each cell, the table-bordered class displays the table with borders and the table-striped class defines the table with zebra striping to table rows.

You could see the output as shown below:

TablesExample.

Figure 4. TablesExample.

Components

BootMetro contains standard components such as command buttons, navigations, dropdowns, progress bars, alerts, badges, breadcrumbs etc. Some of these components are common, if you know Bootstrap technology. The functionality of all these components works the same as in Bootstrap.

The new components apart from these components are, command buttons, Metro nav list under navs components and, indeterminate and indeterminate ring styles under progress bars components.

Command Buttons

These special action buttons can be used with .win-command class along with button and anchor elements. If you want to make use of icons in BootMetro, use win-commandicon and icon-* class. To specify a label for an icon, use win-label class within the span tag.

Listing 4. CommandButtons.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
</head>
<body>
    <div class="container">
	<div class="row"><br>
	<h2>Command Buttons</h2>
	<button class="win-command" rel="tootlip" title="Simple an icon">
      <span class="win-commandicon icon-cog-4"></span>
    </button>
    <button class="win-command" rel="tootlip" title="icon with label">
	      <span class="win-commandicon icon-cog-4"></span>
	      <span class="win-label">icon with label</span>
    </button>

    <button class="win-command" rel="tootlip" title="Simple a ring icon">
	      <span class="win-commandicon win-commandring icon-cog-4"></span>
    </button>
    <button class="win-command" rel="tootlip" title="ring icon with label">
	      <span class="win-commandicon win-commandring icon-cog-4"></span>
	      <span class="win-label">ring icon with label</span>
    </button>
	</div>
    </div>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>	
</html>  

The screen shot of the above code will be look like as shown in Figure 5.

CommandButtonsExample.

Figure 5. CommandButtonsExample.

Command Images

BootMetro also provides a class called .win-commandimage to use custom image of user choice.

The above program can be modified with little changes by using .win-commandimage class as shown below:

Listing 5. CommandImages.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
</head>
<body>
    <div class="container">
	<div class="row"><br>
	<h2>Command Images</h2>
	<button class="win-command" rel="tootlip" title="Simple an image">
      <span class="win-commandimage">
      	<img src="assets/img/Square-Silver-icon.png">
      </span>
    </button>
    <button class="win-command" rel="tootlip" title="Image with label">
	  <span class="win-commandimage">
		 <img src="assets/img/Square-Silver-icon.png">
           </span>
	      <span class="win-label">image with label</span>
    </button>
    <button class="win-command" rel="tootlip" title="Simple a ring image">
	   <span class="win-commandimage win-commandring">
	      <img src="assets/img/Square-Silver-icon.png">
	   </span>
    </button>
    <button class="win-command" rel="tootlip" title="Ring image with label">
	   <span class="win-commandimage win-commandring">
	      <img src="assets/img/Square-Silver-icon.png">
	   </span>
	      <span class="win-label">ring image with label</span>
    </button>
	</div>
    </div>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>
</html>

The code uses .win-command class to use command styles as discussed in the previous example. The .win-commandimage class displays the custom image by using tag within its class.

You would get the output in Figure 6 when you run the script:

CommandImagesExample.

Figure 6. CommandImagesExample.

Customizing Command Buttons

It is also possible to customize the command buttons by adding CSS styles to the buttons.

Listing 6. CommandButtonCustomize.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
</head>
<body>
    <div class="container">
	<div class="row"><br>
		<h2>Customizing Command Buttons</h2>
	<button class="win-command mycolor" rel="tootlip" title="ring icon with label">
	 <span class="win-commandicon win-commandring icon-cog-4"></span>
	<span class="win-label">ring icon with label</span>
	</button>
	</div>
    </div>
         <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>
</html>

The below is the output of customized command button which display the icon and text color using CSS style:

CommandButtonCustomizeExample.

Figure 7. CommandButtonCustomizeExample.

Metro Nav List

This is one of the new navigation components in BootMetro for displaying metro styled groups with optional headers. This can be achieved by using the class .nav metro-nav-list.

The below example shows usage of this component:

Listing 7. MetroNavList.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
</head>
<body>
    <div class="container">
	   <div class="row"><br>
		<ul class="nav metro-nav-list">
			<li class="nav-header">Header One</li>
			<li class="active">
				<a href="#">Langauges</a>
				<ul class="nav">
					<li><a href="#">Java</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">HTML</a></li>
				</ul>
			</li>
			<li class="nav-header">Header Two</li>
			<li>
				<a href="#">Operating Systems</a>
				<ul class="nav">
					<li><a href="#">Windows xp</a></li>
					<li><a href="#">Unix</a></li>
					<li><a href="#">Android</a></li>
				</ul>
			</li>
	   </div>
    </div>
         <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-panorama.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-pivot.js"></script>
	<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
</body>
</html>

The code uses .nav metro-nav-list class for displaying the metro styled groups of nav links. The .nav-header class defines header for the particular navigation. If you want to define nesting of nav list within metro nav list, use the class .nav.

The Figure 8 output shows how the code will work:

MetroNavListExample.

Figure 8. MetroNavListExample.

Page Components

The BootMetro provides different types of page components such as page header, page header with title, back button and navigation menu.

We will create one example by using these page components.

Listing 8. PageComponent.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-ui-light.css">
</head>
<body>
    <div class="container">
		<div id="nav-bar">
		   <div class="row">
			  <div class="span9">
				 <div id="header-container">
					<a class="win-backbutton" href="#"></a>
					<h4>My Application</h4>
					   <a class="header-dropdown accent-color" href="#">
						 Boot Metro
					   </a>
				 </div>
			  </div>
		   </div>
	   </div>
    </div>
</body>
</html> 

The code displays the back button with title name. The back button is displayed using the class .win-backbutton which is defined within the anchor tag. The title name displayed with color by using the class .header-dropdown accent-color.

The below screen shot shows output of the page component:

PageComponentExample.

Figure 9. PageComponentExample.

Hero Unit

It is like a jumbotron style component to display extra information on your site. It is mostly used for calling extra attention to content on marketing and heavy sites. It can be used by adding the class .hero-unit.

The below example describes usage of hero unit:

Listing 9. HeroUnit.html

<!DOCTYPE html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BootMetro Framework</title>
   <link rel="stylesheet" href="style.css" type="text/css">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="assets/css/bootmetro-ui-light.css">
</head>
<body>
<div class="container">
	<div class="row"><br>
		<div class="hero-unit">
		  <h1>Welcome to BootMetro</h1>
<p>It is free responsive front end framework for creating web pages and to build user interface websites quickly. It is inspired by Metro UI CSS is a complete solution built on top of bootstrap which allows to develop web projects in a intuitive way, using the clean  look and feel of Windows 8’s Metro design style.</p>
		<a class="btn btn-success btn-large"> Learn more</a>
		  </p>
		</div>
	</div>
</div>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>

Once you run the above code, it will display following output (Figure 10):

HeroUnitExample.

Figure 10. HeroUnitExample.

Key Points

  • BootMetro is a simple and flexible framework for creating web applications.
  • It is supported by all the browsers.
  • It is built on top of Bootstrap and HTML5 Boilerplate.
  • Uses Metro UI CSS as base for UI style.
  • Provides simple ways to navigate to other web pages.

Conclusion

Here we saw some of the important concepts of the BootMetro framework. This framework as you must have known by now id heavily based on Bootstrap framework. Knowing Bootstrap well would be an advantage to start with BootMetro. The source code of all the above examples is attached with this tutorial. You can execute and play around to understand BootMetro framework better.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login