How to develop a metro template using bootstrap framework
Categories:
Developing a Metro-Style Template with Bootstrap 3
Learn how to create a modern, tile-based 'Metro' design template using the robust features of Bootstrap 3, focusing on responsive layouts and visual appeal.
The 'Metro' design language, popularized by Microsoft, emphasizes clean typography, bold colors, and a tile-based layout. While Bootstrap 3 doesn't natively include Metro components, its flexible grid system and styling capabilities make it an excellent framework for building such a template. This article will guide you through the process of combining Bootstrap's power with Metro's aesthetic to create a responsive and visually engaging web interface.
Understanding the Metro Design Philosophy
Before diving into code, it's crucial to grasp the core principles of Metro design. It's characterized by:
- Tiles: Rectangular or square blocks that serve as interactive elements, often displaying live information or acting as navigation links.
- Typography: Emphasis on large, clean fonts (like Segoe UI or similar sans-serifs) with clear hierarchies.
- Color Palette: Bold, vibrant colors often used in conjunction with stark contrasts (e.g., white text on a colored tile).
- Flat Design: Minimalist approach with no gradients, shadows, or skeuomorphic elements.
- Content-First: Design focuses on presenting content clearly and efficiently.
Bootstrap 3's col-*-* grid system is perfect for arranging these tiles, and its utility classes can help with spacing and alignment. Custom CSS will be key for applying the distinct Metro visual styles.
flowchart TD
A[Start Metro Template Development] --> B{Choose Bootstrap Grid Layout}
B --> C[Define Tile Structure (e.g., `div.col-md-4`)]
C --> D[Apply Base Bootstrap Styling]
D --> E[Custom CSS for Metro Aesthetics]
E --> F[Add Responsive Design Considerations]
F --> G[Integrate Interactive Elements (e.g., hover effects)]
G --> H[Test Across Devices]
H --> I[Refine and Optimize]
I --> J[End]Workflow for developing a Metro-style template with Bootstrap 3
Setting Up Your Bootstrap Project
First, ensure you have a basic Bootstrap 3 project set up. You can either download the compiled CSS and JavaScript or use a CDN. For this example, we'll assume you have the necessary Bootstrap files linked in your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Metro Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Metro CSS -->
<link href="css/metro-style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Your Metro tiles will go here -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Basic HTML structure with Bootstrap 3 and custom CSS linked.
<meta name="viewport" ...>) for proper responsive behavior in Bootstrap projects.Creating Metro Tiles with Bootstrap Grid
The core of a Metro layout is its tile system. We'll use Bootstrap's grid to arrange these tiles. A common approach is to have tiles of varying sizes, but for simplicity, we'll start with uniform tiles and then discuss variations. Each tile will be a div with Bootstrap column classes and a custom metro-tile class for styling.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="metro-tile bg-primary">
<h3>Tile 1</h3>
<p>Short description or content.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="metro-tile bg-success">
<h3>Tile 2</h3>
<p>Another piece of content.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="metro-tile bg-info">
<h3>Tile 3</h3>
<p>Information goes here.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="metro-tile bg-warning">
<h3>Tile 4</h3>
<p>Warning or alert content.</p>
</div>
</div>
</div>
</div>
Bootstrap grid layout for Metro tiles using col-*-* classes.
Styling Your Metro Tiles with Custom CSS
Now, let's add the metro-style.css to give our tiles the distinct Metro look. This will involve setting fixed heights, removing default Bootstrap padding/margins, and applying bold colors and typography.
body {
font-family: 'Segoe UI', Arial, sans-serif; /* Or any clean sans-serif font */
background-color: #f0f0f0;
}
.metro-tile {
min-height: 150px; /* Fixed height for tiles */
margin-bottom: 15px; /* Spacing between tiles */
padding: 20px; /* Inner padding */
color: #fff; /* White text on colored tiles */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease; /* Smooth hover effect */
}
.metro-tile h3 {
margin-top: 0;
font-size: 2em;
font-weight: 300; /* Lighter font weight for modern look */
}
.metro-tile p {
font-size: 1.1em;
line-height: 1.4;
}
/* Example background colors (using Bootstrap's default colors) */
.bg-primary { background-color: #337ab7; }
.bg-success { background-color: #5cb85c; }
.bg-info { background-color: #5bc0de; }
.bg-warning { background-color: #f0ad4e; }
.bg-danger { background-color: #d9534f; }
/* Hover effects */
.metro-tile.bg-primary:hover { background-color: #286090; }
.metro-tile.bg-success:hover { background-color: #449d44; }
.metro-tile.bg-info:hover { background-color: #31b0d5; }
.metro-tile.bg-warning:hover { background-color: #ec971f; }
.metro-tile.bg-danger:hover { background-color: #c9302c; }
/* Responsive adjustments for smaller tiles on smaller screens */
@media (max-width: 767px) {
.metro-tile {
min-height: 120px;
padding: 15px;
}
.metro-tile h3 {
font-size: 1.5em;
}
.metro-tile p {
font-size: 0.9em;
}
}
Custom CSS for Metro tile styling and basic responsiveness.
Implementing Larger and Double-Width Tiles
Metro layouts often feature tiles of different sizes. You can achieve this by adjusting the Bootstrap column classes and potentially adding custom classes for height. For a double-width tile, simply use a column class that spans twice the width of your standard tile (e.g., col-md-6 instead of col-md-3). For double-height, you'll need a custom CSS class.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="metro-tile bg-danger metro-tile-double-width">
<h3>Double Width Tile</h3>
<p>This tile spans two columns on medium and larger screens.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="metro-tile bg-info">
<h3>Small Tile</h3>
<p>Regular size.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="metro-tile bg-success metro-tile-double-height">
<h3>Double Height Tile</h3>
<p>This tile has twice the height of a regular tile.</p>
</div>
</div>
<!-- More tiles -->
</div>
</div>
HTML structure for varied tile sizes.
.metro-tile-double-height {
min-height: 315px; /* Approx. double the standard 150px + 15px margin */
}
/* Adjust for responsiveness */
@media (max-width: 767px) {
.metro-tile-double-height {
min-height: 250px; /* Adjust for smaller screens */
}
}
Custom CSS for double-height tiles.
By combining Bootstrap's robust grid system with custom CSS for styling, you can effectively create a responsive and visually appealing Metro-style template. Remember to prioritize clean typography, bold colors, and a content-first approach to truly capture the Metro aesthetic.