Clean and intuitive front-end framework that helps create bold and modern web development.

The Grid

Fully responsive 12 column grid based on 80% width.

Metro Colors

Look at all the pretty colors.

Basic Styling

  • Typography
  • Tables
  • Forms
  • Buttons

LESS Mixins

Extras

  • Tooltips
  • Tables
  • Forms
  • Buttons

Download

License

The Metro Bootstrap is distributed under the MIT License.

Go forth and make magic.

Getting Started

Info

The Metro Bootstrap is very helpful with helping you create beautiful, clean, and quick frontend markup for your applications.

Since we are all about supporting standards, we encourage you use the awesome normalize.css.

LESS CSS is also used to allow for some really great cross-browser compatibility in the MIXINS section.

Requirements

Folder Structure

  |- css/
  |---- normalize.css
  |---- metro.less
  |---- style.less
  |- js/
  |---- jquery.js
  |---- less.js

Linking Files

Add these lines to the <head> of your document.

  <!-- CSS -->
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet/less" href="metro.less">
  <link rel="stylesheet/less" href="metro.less">

  <!-- JS -->
  <script src="jquery.js"></script>
  <script src="less.js"></script>

For LESS development purposes, add this line before loading less.js

With this line, if there are any syntax errors in your .less files, an error will be shown. Very helpful.

  <script>less = { env : development };</script>

Fluid Grid

The fluid grid is based on a 12 column approach. It is based on 3 main CSS classes:

  • container-fluid or container-fixed
  • row
  • span

The span classes must add up to 12 to make a full grid.

The first span must also carry a class of first.

  <div class="container-fluid">
    <div class="row">

      <div class="span6 first">
        this is half of the row
      </div>

      <div class="span6">
        this is the second half of a row
      </div>

    </div>
  </div>

Grid Example

container-fluid is used on your overall container class.

row is used for every row you want to use.

span is the size for each grid item. the first item on the row also needs the first class

  <div class="container-fluid">
    <div class="row">

      <div class="span2 first">section one</div>      
      <div class="span2">sections two</div>
      <div class="span2">sections three</div>
      <div class="span2">sections four</div>
      <div class="span2">sections five</div>
      <div class="span2">sections six</div>

    </div>
  </div>
span1 span1 span1 span1 span1 span1 span1 span1 span1 span1 span1 span1
span3 first span3 span3 span3
span2 first span6 span3
span6 first span6

Advanced Grid Example

  <div class="container-fluid">
    <div class="row">

      <div class="span2 first">section one</div>      
      <div class="span2">sections two</div>
      <div class="span2">sections three</div>
      <div class="span2">sections four</div>
      <div class="span2">sections five</div>
      <div class="span2">sections six</div>

    </div>
  </div>
span6 span6
second big

Metro Colors

These colors are LESS variables that can be used for anything from background to color.

They can also be tweaked using the LESS lighten, darken, and 


  .circle 		{ background: @magenta; }
  .circle:hover 	{ background: lighten(@magenta, 20%); }
Magenta (@magenta) Purple (@purple) Teal (@teal) Lime (@lime) Brown (@brown)
Pink (@pink) Blue (@blue) Red (@red) Green (@green) Mango (@mango)
gray (@gray) grayLight (@grayLight) grayLighter (@grayLighter) grayLightest (@grayLightest)
gray (@gray) grayDark (@grayDark) grayDarker (@grayDarker) grayDarkest (@grayDarkest)

Tables

Tables with the added class of table are given clean and easy to use styles.


  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <td>Superhero</td>
        <td>Secret Identity</td>
        <td>Email</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Iron Man</td>
        <td>Tony Stark</td>
        <td>titanium@titan.com</td>
      </tr>
    </tbody>
  </table>

Default Table .table

Superhero Secret Identity Email
Iron Man Tony Stark titanium@titan.com
Batman Bruce Wayne caped@crusader.com
Flash Wally West fastestmanalive@speedforce.com

Bordered Table .table-bordered

Superhero Secret Identity Email
Iron Man Tony Stark titanium@titan.com
Batman Bruce Wayne caped@crusader.com
Flash Wally West fastestmanalive@speedforce.com

Striped Table .table-striped

Superhero Secret Identity Email
Iron Man Tony Stark titanium@titan.com
Batman Bruce Wayne caped@crusader.com
Flash Wally West fastestmanalive@speedforce.com

Hovered Table .table-hover

Superhero Secret Identity Email
Iron Man Tony Stark titanium@titan.com
Batman Bruce Wayne caped@crusader.com
Flash Wally West fastestmanalive@speedforce.com

Forms

Stacked Form

Horizontal Form

Advanced Form

Form Sizing

LESS Mixins

LESS.js provides a great deal of power to take CSS even further.

Rounded Corners

  .border-radius(4px);
  .border-radius-all(
    4px, 4px, 0, 0
  );

  .border-radius-all(
    @topleft, 
    @topright, 
    @bottomright, 
    @bottomleft
  );

Example

Opacity

  .opacity(1);
  .opacity(0.5);
  .opacity(.2);

Example

Box Shadow

  .box-shadow(2px, 2px, 10px, #000, 0);

  .box-shadow(
    @x-size,
    @y-size,
    @blur,
    @color,
    @spread
  );

Example

Box Shadow Inset

  .box-shadow-inset(2px, 2px, 10px, #FFF, 0);

  .box-shadow-inset(
    @x-size,
    @y-size,
    @blur,
    @color,
    @spread
  );

Example

Gradient Vertical

  .gradient-vertical(#C2C2C2, #838383);

  .gradient-vertical(
    @firstColor, 
    @secondColor
  );

Example

Gradient Horizontal

  .gradient-horizontal(#C2C2C2, #838383);

  .gradient-horizontal(
    @firstColor, 
    @secondColor
  );

Example