talkslab / metro-bootstrap

Twitter Bootstrap with Metro style

metro-bootstrap

Simple bootstrap from Twitter with Metro style.

⚠ This project is not being maintained

This project is not being maintained. For more information, please read the Maintainers Wanted section below.

Maintainers Wanted

Unfortunately, the former maintainers no longer have the time and/or resources to work on this project. This means that bugs will not be fixed and features will not be added unless someone else does so.

If you're interested in fixing up metro-bootstrap, please reply to this GitHub issue (#65).

Demo

For a live preview of the theme, see http://talkslab.github.com/metro-bootstrap.

Repository structure

In the repository you will find the following directories:

app/
├── fonts/
│   └── (FontAwesome files)
└── less/
    └── (metro-bootstrap less files)
dist/
├── fonts/
│   └── font-awesome/
│   │   └── (FontAwesome files)
└── css/
    ├── metro-bootstrap.css
    └── metro-bootstrap.min.css
docs/
└── (metro-bootstrap GitHub Pages)

We provide compiled CSS (metro-bootstrap.css) in the dist folder, as well as compiled and minified CSS (metro-bootstrap.min.css).

Installing Dependencies

We manage dependencies using Bower. Run bower install to download the required dependencies.

If don't have Grunt installed, execute the following steps from the command line:

1. Make sure you have node.js installed.
2. Install bower with npm install -g bower.

Compiling CSS

We compile metro-bootstrap using Grunt. Run grunt build to compile the CSS into /dist.

If don't have Grunt installed, execute the following steps from the command line:

1. Make sure you have node.js installed.
2. Install grunt-cli globally with npm install -g grunt-cli.
3. Go to the metro-bootstrap directory, then run npm install. npm will look at package.json and automatically install the necessary dependencies.

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

metro-bootstrap's Issues

bootstrap is missing real checkbox, radio, select styles - metro ?

Hello,
just curious if you might add some styles for checkboxes, radio buttons, select boxes. AFAIK, bootstrap itself does only style these elements in basic appearance. Not really cross-browser styles...

I can´t see those important form styles in the current metro-bootstrap demo.
Is it possible to include metro styles?

BTW, I have seen this visual appealing project:
http://metroui.org.ua/forms.php

Funilly, that project seems to lack the SELECT box style completely. At least on my last visit.

Thanks in advance and for listening.
Maik

Missing License

Hi.

There's no information about the license for these changes.

May I suggest using the same license as Bootstrap, i.e. Apache License v2?

When Collapsed, Dropdown menus are broken

When there are submenus they do not behave properly when the view is collapsed to mobile size.

The submenus will expand when clicked but and push down the content below them. However the container they are in does not expand so it will push items off the bottom of the list (or if they are the last item they are not visible at all)

an example

<div class="nav-collapse">
    <nav role="navigation">
    <ul class="menu nav">
        <li class="first leaf"><a href="/">Home</a></li>
        <li class="expanded active-trail dropdown"><a href="/menu" class="active-trail dropdown-toggle" data-toggle="dropdown" data-target="#">Menu<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="first last leaf active-trail"><a href="/submenu" class="active-trail active">Test Submenu</a></li>
        </ul>
        </li>
    </ul>
    </nav>
</div>

CSS as a mixin to original twitter-bootstrap CSS

Thank you for this so beautiful styles!

Is it possible to create some separate CSS-file which will add necessary changes to twitter-bootstrap classes, but main CSS will be still in original, untouched twitter-bootstrap CSS file?

Example:
`

`

[enhancement] Add missing bower.json.

Hey, maintainer(s) of TalksLab/metro-bootstrap!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library TalksLab/metro-bootstrap is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "TalksLab/metro-bootstrap",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Responsive

Responsive not working properly. Fixed navbar menu list items disappear when resized

Why the NuGet package have a dependency on FontAwesome?

Hi,

I just installed the NuGet package for Metro Bootstrap and I do not quite understand why it have a dependency on the Font Awesome package. In my project, I am using the Less version of FontAwesome and this requires me to have both. Looking at the sources of Metro Bootstrap, I do not quite understand why this dependency is required.

Thank you,

Jacques.

CSS errors avalanche

Hi everybody,
i saw your theme and thought it was awesome, so i've included it in my project.
But as soon as i open my console(firefox one) I found tons of CSS errors from metro-bootstrap.css. So i checked out on your website[ http://talkslab.github.io/metro-bootstrap/components.html ] and it does the same.
Why does it happens?

And also, i've found that on the same page i've just linked, there are classes like 'jumbotron' and similar that are not implemented in metro-bootstrap.css but in bootstrap.css. BTW i've tried to include the main bootstrap.css in my project but it mess with link colors with metro-bootstrap.css.

Thanks,
Paolo.

Problem when using glyphicon

When using icon glyphicon don't apply

Icons

Boas,

Faltam os icons correspondentes: http://twitter.github.com/bootstrap/base-css.html#icons

Drop down menus

Drop-down menus should be without chrome (shadows) and round corners

Dialog not centred

The Modal-Dialogs are not centred on the screen. Checked it with IE10 and Chrome 31.

This is the code I used:

    <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

bower info metro-bootstrap return No versions available.

I use "metro-bootstrap": "~3.2.1" in my bower.json file,

bower info metro-bootstrap
bower metro-bootstrap#* not-cached https://github.com/TalksLab/metro-bootstrap.git#*
bower metro-bootstrap#* resolve https://github.com/TalksLab/metro-bootstrap.git#*
bower metro-bootstrap#* checkout master
bower metro-bootstrap#* invalid-meta metro-bootstrap is missing "ignore" entry in bower.json
bower metro-bootstrap#* resolved https://github.com/TalksLab/metro-bootstrap.git#b5a7f5e3b3

{
name: 'metro-bootstrap',
main: [
'./dist/css/metro-bootstrap.css',
'./dist/fonts/font-awesome/.',
'./dist/fonts/glyphicons/.'
],
dependencies: {
bootstrap: '~3.2.0',
'font-awesome': '~4.0.0'
},
devDependencies: {},
homepage: 'https://github.com/TalksLab/metro-bootstrap'
}

Please resolve.

Maintainers Wanted

Unfortunately, the former maintainers no longer have the time and/or resources to work on this project. This means that bugs will not be fixed and features will not be added unless someone else does so.

If you're interested in fixing up metro-bootstrap, please reply to this issue.

Glyphicons missing in bower installed version.

I installed the lib via Bower, and now I get 404 errors about glyphicons files. It seems you are referencing them as "../fonts/glyphicons-blabla" from the CSS.

I know I could just copy them over from Bootstrap, but the point of Bower is that I don't have to touch what's under bower_components.

I think the glyphicons files should be included under the fonts/ directory.

Links for Dropdown Menu JS are not working.

How to get contact form working?

Which .js files are dependent on the contact form working?

Body's padding-top extends to small-width view

The body's padding-top, hard-coded into the markup, overrides the padding-top 0 declaration for smaller widths in the generated CSS:

@media (max-width: 979px) {
    body {
        padding-top: 0;
    }
}

(extrapolated, since the CSS is compressed, and I couldn't find its source in the less folder)

Surely if the top-padding is necessary for the floating header, it should be defined in the same place?

Navigation goes under the content

When the horizontal screen resolution is small, the content column on the Components page goes on top of the navigation bar.

Annoying 404 errors with Glyphicons, take 2

Commit 41def84 renamed / moved Glyphicons font files, but without updating the reference in the CSS.

Colors Dislocation <IE>

.col-sm-6
position:relative
min-height:1px /* !!! Change 0px */
padding-left:15px
padding-right:15px

/css/metro-bootstrap.css

Clicking buttons and stuff scrolls you to the top of the page

Annoying and you lose your place :(

Using metro-bootstrap with Font-Awesome-icons in tiles

Hi,
I am trying to use the Font-Awesome-icons in the tiles.
this is my code:

<ul class="thumbnails">
      <li class="span3 tile tile-double">
          <a href="#">
              <i class="icon-tasks icon-large icon-5x"></i>
             <h1 class="tile-text">Task</h1>
          </a>
      </li>
</ul>

the issue is that there is no text visible and the icon is only visible if there is a mouse-hover event. what am i doing wrong?

modal-backdrop no need z-index anymore

in .modal-backdrop, z-index need to be removed. https://github.com/TalksLab/metro-bootstrap/blob/master/dist/css/metro-bootstrap.css#L5377

I used it along with bootstrap 3.2 and the modal works again..

Collapse not working in IE

I'm trying to create an accordion, using the code shown on the Bootstrap demo page - http://twitter.github.com/bootstrap/javascript.html#collapse

Whilst the collapsing of the elements technically works, the content of each accordion group still shows.

This is in IE9. It works in Opera 12.12 and the latest version of Chrome.

I've managed to fix it by adding css attributes to set the display.

I've got a fixed version on jsfiddle: http://jsfiddle.net/ztCYM/

You can recreate the issue by removing the style block just before the body.

Dialog now always full-sized

With the latest changes regarding modal dialogs (Issue: #44 + PR: 87a6d35) there is a new small issue:
The dialog is now always full width. The media query css from the original bootstrap doesn´t seem to kick in:
@media screen and (min-width: 768px)
.modal-dialog {
width: 600px;
margin: 30px auto;
}

Without this css the modal-dialog is on width: auto.

JavaScript plugin links are broken

The links to the JavaScript plugins point to non-existing URLs. For example: http://talkslab.github.io/javascript/#buttons results in the "There isn't a Github page here." 404 error.

Thanks for fixing it.

some ASSETS are wrong / unneeded ( lines : 23-29) + chrome extension script access

Some assets that are wrong in the index.html . Are they from your localhost ? Also chromeextension url schema is referenced.

CheckBox not clickable

Just tried to click on the "Checkbox" under http://talkslab.com/metro-bootstrap/components.html#input-groups but nothing happens.

Tested with IE10 & Chrome 30. Working fine in Firefox 24.

Submit button type not working if Jquery is referenced

Hi,

I am trying to post a form data like username and password the submit type is working if I mentioned the JQuery reference otherwise it works.

Is there any dependency with respective to jquery

Not compatible with Xbox (IE)

Subject. The layout does not work on XBox (internal Internet Explorer). If possible, check it.

carousel not aligning properly when using fluid layouts

Hi,

When using row-fluid carousel items are being stacked on top of each other and not stacked off screen as they should be.

Anyone else finding that they can't use the carousel properly?

Regards,

Jamie

Update to bootstrap 3 ?

Is this a option for this project?
I know b3 is beta right now but it when its final <re you going to update to this?

Dropdowns have shadows

Metro has no shadows and it looks strange that the only thing with shadows are the dropdowns.

some ideas for enhancements

Just in case this project is still active. maybe you coul add the following to your project:

• more colors to choose from:
  http://www.creepyed.com/2012/09/windows-8-colors-hex-code/
• add optional the text in tiles in small light font in left corner (like in win8) for tile description
• add optional the text in tiles in small bold font in right corner (like in win8) for some counter or short info
• command buttons. they are usually in the top left corner in win8 (arrows for back navigation i.e.)

navbar issues

the drop down menu in the navbar dosn't seem to work ..

the responsive version does not display the phone drop down icon when in phone width..

Carousel animations doesn't work when I use metro theme

As I mentioned in the title, when I use metro bootstrap, the default Bootstrap carousel doesn't perfectly, it's animations are gone and it slides not smoothly. It's works perfectly when I remove metro CSS dependency. I didn't customized metro theme so it's naturally because of internal metro theme bugs.

The left navigation menu should be scrollable

When the vertical screen resolution is small, you cannot navigate to the bottom of the left navigation menu on the Components page.

Jumbotron doesn't wrap text

The paragraph content ("This is a simple hero unit...") in the Jumbotron horizontally overflows the container instead of automatically breaking to lines.

Tested in IE11 and FF24 on Windows 8.1.

Chrome does some line breaking but the content still overflows.

add compiled files

hi
add dist folder and put compiled less files in it.
thanks

Navbar and progress bars in IE9 is broken

Navbar and progress bars in IE9 is broken

Documentation Suggestion - Show all tile colour variations

It would be useful to see all tile colours available in one place

<ul class="thumbnails">
    <li class="span3 tile tile-double tile-blue">
        <a href="#" >
            <h1 class="tile-text">blue</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-green">
        <a href="#" >
            <h1 class="tile-text">green</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-red">
        <a href="#" >
            <h1 class="tile-text">red</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-yellow">
        <a href="#" >
            <h1 class="tile-text">yellow</h1>
        </a>
    </li>
   <li class="span3 tile tile-double tile-orange">
        <a href="#" >
            <h1 class="tile-text">orange</h1>
        </a>
    </li>
   <li class="span3 tile tile-double tile-pink">
        <a href="#" >
            <h1 class="tile-text">pink</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-purple">
        <a href="#" >
            <h1 class="tile-text">purple</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-lime">
        <a href="#" >
            <h1 class="tile-text">lime</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-magenta">
        <a href="#" >
            <h1 class="tile-text">magenta</h1>
        </a>
    </li>
    <li class="span3 tile tile-double tile-teal">
        <a href="#" >
            <h1 class="tile-text">teal</h1>
        </a>
    </li>
</ul>

LESS files aren't compiling in VS 2012

I'm using VS 2012, and Web Essentials and getting compilation errors when trying to view the less files:

Possible Incorrect Variable in Navbar LESS

Hi, I think I have found an issue in the Metro Bootstrap navbar.less file. Line 39:

color: @textcolor;

I think should be:

color: @navbarLinkColorHover;

When I make that change, then the final css output is consistent with what I understand the variables to be used for. Thanks!

Label for checkbox is misaligned. It is slightly downward to checkbox

As you can see in the image, label for checkbox is slightly moving to downward. This behavior is not found in original bootstrap.