Bootstrap theme inspired by Windows Phone's Modern UI (aka “Metro”)
Watch a live demo!
This theme was created with Modern UI's Segoe font-family in mind. While this commercial font is largely available on the Windows platform (Windows Phone, Windows Vista and later), system-default fonts will be used as fallback on other platforms.
| Font | Platform |
|---|---|
| Segoe UI | Windows Vista (or later), Windows Phone 7 (or later) |
| Roboto Condensed | Android, Web font (optional) |
| Fira Sans | Firefox OS, Web font (optional) |
| Neue Helvetica | iOS, Mac OS X |
Style-sheets are meant to be used instead of bootstrap.min.css, there's no need to include both files.
Pre-compiled CSS files can be installed using Bower or npm:
# Install from Bower
bower install m8tro-bootstrap
# Install from npm
npm install m8tro-bootstrapAs of version 3.3.2, the style-sheet is hosted various content delivery networks (CDN). Serving files via SSL is encouraged, though you can always use schemeless URLs as well.
| Service | URL |
|---|---|
| cdnjs | //cdnjs.cloudflare.com/ajax/libs/m8tro-bootstrap/3.3.7/m8tro.min.css |
| jsDelivr | //cdn.jsdelivr.net/bootstrap.m8tro/3.3.7/m8tro.min.css |
Note: It is not advised to embed a link to the raw file hosted on GitHub.
Use the style-sheet from a release or download the latest development version of m8tro.min.css.
The provided gulpfile.js will serve as our primary build tool. In order to use it, you need to have Node.js and Gulp installed.
Once set up, install all required Node packages:
npm installSeveral gulp tasks are now available:
| Task | Description |
|---|---|
make |
build M8tro theme |
setup |
choose Bootstrap components & build M8tro theme |
clean |
delete contents of distribution folder |
lint |
lint included LESS and JavaScript files |
A special case is building the theme for Bootstrap Listr, which only uses a subset of Bootstrap's features. To do so use gulp setup --listr. The resulting CSS will be half the size, the JavaScript about a twelfth.
- Clone the repository
git clone https://github.com/idleberg/m8tro-bootstrap.git - Install Less compiler
npm install less -g - Edit any of the files in the src-folder
- Run
./m8ke(or./m8ke <theme>) to run the LESS compiler
That last step will also install all required Bower components, the equivalent of a manually typed bower install.
This repository includes templates for Chris Kempson's Base16 Builder, which you can use to create your own color schemes.
Anybody can contribute new features and bug fixes by cloning the repository, and then sending a pull request.
This project is licensed under the MIT license. See LICENSE for full license details.
You are welcome support this project using Flattr or Bitcoin 17CXJuPsmhuTzFV2k4RKYwpEHVjskJktRd