aozora / bootmetro Goto Github PK

View Code? Open in Web Editor NEW

2.2K 273.0 504.0 16.67 MB

Simple and complete web UI framework to create web apps with Windows 8 Metro user interface, based on Bootstrap 2.

Home Page: http://aozora.github.io/bootmetro

License: Other

JavaScript 8.92% CSS 38.50% HTML 52.59%

bootstrap css metro-ui

bootmetro's Introduction

BootMetro

Please pay attention that this project is no longer maintaned.

BootMetro provides simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 MetroUI" style, without the need to run on Windows 8. It is built on top of Twitter Bootstrap and HTML5 Boilerplate.

Features

The framework permit to create web applications with the look&feel of Windows 8 "Windows Store App" (ex "MetroUI" style). Maybe not ideal for internet web sites, the MetroUI style can be adopted for modern intranet web sites. I've choose to use as base the awesome Twitter Bootstrap framework, applying a set of customizations in pure css.

The framework integrate and extend the work first done by other great people:

Build from sources

Prepare your environment

Install Node.js and NPM (should come with)
Install global dev dependencies (Windows users should run it as administrator): npm install -g grunt-cli karma
Instal local dev dependencies: npm install while current directory is bootmetro repo

Build

To build the whole project run 'grunt' in the project directory.

Versioning

Latest Release: v1.0.0 Alpha1

This release is based on Twitter Bootstrap 2; the v2.0 will be completely redone from scratch using as base Twitter Bootstrap v3.

BREAKING CHANGES:

Replaced icomoon font with a new icomoon set generated with PUA. Many icon-* class names has changed;
internal mapping of char codes has changed, please be patient and check every icon you used.
the static resources in the content folder has been moved to the assets folder
toast markup has changed, now it is conforming to the bootstrap media object model.
listview markup has changed, now it is conforming to the bootstrap media object model.
removed default padding-top: 24px and padding-bottom: 88px (scaffolding.less)

List of changes:

source files now builds with GruntJS
bug fixes over v0.6
New and revamped documentation pages, separated from demo pages, with all metro widgets & customization integrated with the original bootstrap documentation.
updated Bootstrap Less files to latest v2.3.1
new Metro Nav List (like the one used in the doc sidebar)
new Page Header with back button and various styles
new RTL support for metro checkboxes & radio buttons
move CSS to LESS and integrate build with Bootstrap
complete Tiles templates
Toast notifications
ListView
Pivot view (like WP8)
Dual license GPL2 + Apache2
Panorama plugin & Hub: - new options - simplified markup

Latest Release: v1.0.0 alpha 1

BREAKING CHANGES:
- icomoon.css is now bootmetro-icons.css and is recomended to have it before bootmetro.css
- bootmetro.js is now bootmetro-panorama.js
  - classes in hub.html to use panorama scroll, are changed from metro* to panorama*
moved bootmetro main css files to LESS
upgraded to jQuery 1.8.3
upgraded to Modernizr 2.6.2
integrated HTML5 Boilerplate 4.0.1
added metro controls:
- new panorama
- new pivot
- Metro Progress Bars, determinate & indeterminate & ring
- Metro styled date picker
- FlipView
- Toast notifications
Metro Layouts
use NiceScroll for Hub scrolling with touch support

v1.0.0-alpha1-wip

v0.6

Various bug fixes
restored correct use of OpenSans web font
upgraded to use Twitter Bootstrap v2.2.1
added ListView demo
added Wizard demo (in progress)
styled modal dialogs as Metro guidelines for messages and errors/warnings.

ToDo

check layout guideline on "Understanding the Windows 8 silhouette"
- make 2 layout grid: h-scroll + v-scroll
(almost done) Complete the implementation of the tiles templates (add counter & mini ico)
demo form page with notifications
demo image thumbs selectables
demo charms with docs

License

BootMetro is dual licensed, GPL-2 and Apache-2; see the LICENSE file.

Links

Official Metro UI Guidelines

bootmetro's People

Contributors

Stargazers

Watchers

Forkers

lawrencenull jkarpilo dineshkummarc fudong1127 sundna huydung kevnz yatsuru ikennyfallas dsingenalted allforweb matsnl65 feiqitian king-tom anasjaber zbage cigraphics ubiratanbraga dotnetdesign mechanism djoudi samarkandiy break123 fengyiyi fizcus nullablebool eddy8 skopp jubic iplaydu stioann mohammedovich calvez oakraven kranthikumar revskill10 souravzzz ragbb awesome axpart mythreyaraj lorenhsu1128 railsdev grengojbo neiz ipomz kthguru jlsfernandez barockok jfinal erls-corporation shaan360 catufunwa surer214 wuliupo marshallchen 383366063 torrence woerwin nithinmd iqbalidol cn-triplez looksgood qwikee nadiamode itstamen jiahut drluiji dev-life yofly touchx unixcrh huangbaihua001 plutocyf uxscripts diegoneuralo zane5 dsoftwares tao11 hanjing5 niliquan niuzhu forgetfulvet ducban xlogan lins sahilpopli edurdias zeuscart7 daocalendar hsuching repos-bootstrap canwhn techhahn simboyz zaric jentanbernardus chu888chu888 libransser saturnisbig

bootmetro's Issues

Open queston on BootMetro Evolution: how about having responsive tiles?

I was wondering if having responsive tiles could be helpful. As of now, du eto the fact that BootMetro tries to replicate the Metro style, Tiles too have the same standard size of the original: i.e. square tiles are 150x150, wide 310x150 etc.
I can make tiles responsive without a fixed width, and using the span* classes of bootstrap to set it instead; that will ensure correct resizing of a hub page with various display resolutions.

Let me know what you think about it.

Few contextual icons are missing

Hi Aozora,

Its not actually an issue.
Few contextual icons are missing in the footer of appbar-demo.html example.Home , search Icon .
Just want to know how icon are added in this way - win-commandimage class and span tag with value similar to ! .
It would be really good we have wiki documentation also for this project.

Thanks & Regards
Anil

Buttons with specific style (primary, success, ...) in IE7/8 appears with default color.

dynamic toolbar actions

Hi based on the demo page bootstrap-javascript i would like to suggest a capability.

if you add in this page a toolbar app could be posible based on the visibility of and element or if this is in the visible area, to customize the toolbar actions?

I mean if you click in modal in the subnav element you are scrolled to modal section and this means that in the app bar appear and action that let you launch a modal window, on the other hand if you click on the collapse nav option you are scrolled to this section and in this case the action of the app bar could be print the page from this point to this point.

Could be use visibility option:

if( $('#modal').is(':visible') ) {
// it's visible, do something

}else {
// it's not visible so do something else
}

or perhaps check if the section menu is in the visible area:

function isElementVisible(element) {
element = $(element);
var parent = $(window);
var containerLeft = parent.parent().scrollLeft();
var containerRight = containerLeft + parent.parent().width();
var elemLeft = element.offsetLeft;
var elemRight = elemLeft + $(element).width();
if (elemLeft < containerLeft || elemRight > containerRight) {
return false;
}
return true;
}

    if(isElementVisisble(modal.h5)){
         //inside visble area
     } else

{

}

No scrollbar or wrap display

In your website demo (http://aozora.github.com/bootmetro/hub.html), the design is intended for use with a width of 640 + 640 + 320px.
In a smaller resolution, the content is clipped.

You can add a css attribute for "metro-sections" -> "100% width." Hidden content will appear on a new line. However, I'm not sure that there will be no impact.

EDIT : I just see that it is possible to scroll. But there is still no scrollbar.

Add transition to the charms panel

Table demo: add checkbox column box

In the table demo, add a column with checkboxes.

make 2 layout grid: h-scroll + v-scroll

For the Hub page, make a css pseudo class for 2 scroll layout, using mousewheel plugin or with metro arrow button

horizontal scroll
vertical scroll

Reorganize css for Tiles

Reduce the css classes, use LESS.

Rewrite Tiles sliding using BT Carousel

image file 404

page:

http://aozora.github.com/bootmetro/scaffolding.html

404 file:

http://aozora.github.com/bootmetro/assets/img/responsive-illustrations.png

[mousewheel] Horizontal scroll not working in the hub page in Chrome or IE

Horizontal scroll not working in the hub page in Chrome or IE, works only in firefox.

Map Segoe UI Symbol to CSS classes

Map Segoe UI Symbol to CSS classes in order to replace and extend the Bootstrap glyphicons.

Tables: add hover over single cells

Add hover effect for single cells for tables

ApplicationBar and backbutton do not look good in Chrome

In the application bar the border seems truncated. Setting the min-width of the win-command element to 44px helps.

For the backbutton, the arrow is not centered in the circle. No idea how to fix this one.

broken css link in hub.html

There is a small defect in hub.html

You have:

but the there is no such stylesheet "assets/css/bootmetro-icons-ie7.css"

Consider creating a NuGet package

Currently, the download seems to include everything there is in the project. Why not create a NuGet package that will only install the nessecary components?

caching

manifest caching woudl be fab.
also a node script to automatically make the manifest would be awesome because me and others woudl need to include our own assets in it.

I plan to use this to make desktop, web, android and iphone applications.
Hence the app manifest.

I also plan to use pouchDB with to allow full off line data and synchronisation possabilities.

Charms plugin tutorial page

This started as a simple tweak where I wanted to make the charms panel 350px wide rather than 320px. So I changed the width in my own .CSS file, but found #charms sticks out those extra 30px. So I dug around in bootmetro-charms.js and found the Charms plugin. I tried creating my own with $("#charms").charms({ width: "350px", animateDuration: 600 });, but this got me nowhere near where I need to go. It would help to have some docs on how to create charms-like side panels of my own. It might be as simple as changing the #charms id to a class so other elements can take advantage of the same behavior.

For the record, I did get it working properly by adding #charms.slide { right: -350px; }, but it would be nice to know the right way to use the charms plugin without having to rely on the #charms id.

auto overflow in panorama class

You now have

.panorama {
overflow: auto
}
in bootmetro.css, which results in an ugly horizontal scroll bar (at least in Chrome and Firefox).
Accedent or on purpose?

problam in mvc integration

having some problem in bootmetro when integrating in MVC3 project
affix is set on top 0 in page size
not in container

Relationship between bootmetro & Metro-UI-CSS & bootstrap

Hi aozora,

You said bootmetro is based on Metro-UI-CSS, will the changes of the future of Metro-UI-CSS be merged into bootmetro project? What's the goal of bootmetro project (more than Metro-UI-CSS project)?

And another question, what's the significance of using Twitter bootstrap? I think it's a full featured UI framework, if I desided to use bootmetro + jQuery UI, will them confict or redundant?

Execuse me that I could find your contact information, so I ask question here.
Thank you.

Key-enabled navigation

It would be awesome if a user could use the arrow keys to navigate through the tiles. Great project so far though.

Fix ApplicationBar and WinCommand buttons for IE7/8

In IE7/8 wincommand buttons in the appbar have a blue background instead a transparent one.

Slide divs in and out of charms panel like a pivot?

I know the charms page is yet to be written, but do charms offer the ability to slide multiple divs in and out of the charms panel like the pivot control does? Windows 8 does something like this when using the settings charm in any of the standard apps (like Mail or Calendar), and selecting any one setting seems to pop out another sidebar/charm panel of varying width. It seems like it would be more fluid if the next panel just slid in from the right like a pivot control. Does the existing charms control handle the need to show multiple divs as a user navigates one of many master-detail relationships shown in the sidebar?

Export IcoMoon font using PUA (was: "Icons not showing up in chrome")

Hello,

there are some icons not showing up sometimes in chrome and firefox.

icon-home icon-home-2 icon-home-3 icon-newspaper icon-pencil icon-pencil-2 icon-droplet icon-picture icon-picture-2 icon-camera icon-music icon-play icon-film icon-camera-2 icon-spades icon-clubs icon-diamonds icon-broadcast icon-microphone icon-book icon-paper icon-paper-2 icon-new icon-copy icon-folder icon-folder-2 icon-tag icon-cart icon-basket icon-calculate icon-support icon-phone icon-mail icon-location icon-compass icon-history icon-clock icon-bell icon-bell-2 icon-bell-3 icon-calendar icon-mouse icon-screen icon-laptop icon-mobile icon-tablet icon-mobile-2 icon-drawer icon-drawer-2 icon-box-add icon-box-remove icon-database icon-undo icon-redo icon-forward icon-reply icon-reply-2 icon-comments icon-comments-2 icon-comments-3 icon-comments-4 icon-comments-5 icon-comments-6 icon-user icon-user-2 icon-user-3 icon-busy icon-loading icon-loading-2 icon-search icon-search-2 icon-zoom-in icon-zoom-out icon-key icon-key-2 icon-locked icon-unlocked icon-wrench icon-equalizer icon-cog icon-pie icon-bars icon-stats-up icon-gift icon-trophy icon-diamond icon-coffee icon-rocket icon-meter-slow icon-meter-medium icon-meter-fast icon-dashboard icon-fire

These icons are pretty weird as they only show up sometimes and not all the time.

They show up fine on Opera because Opera always has the best CSS.

Add form edit page with metro calendar

Add a page to demo a bootstrap form, with a customized metro calendar

Primary Navigation Hub Page on Demo Is Not Responsive

Nice work on this interface. Unfortunately, it looks like the demo on the main site is not responsive. I've tested it in multiple browsers and on multiple devices...pc, mac, ipad, android phone. The main navigation only shows the first category of navigation items on the hub page. I also downloaded and tested the code locally. The primary navigation looks like it has all the correct bootstrap classes and all the css is there, but it doesn't respond to changes in browser size.

Large button dropdown

See http://aozora.github.com/bootmetro/bootstrap-components.html#buttonDropdowns
in Chrome btn-large is broken

add custom scrollbar styles

would be nice if you add custom scrollbar styles, as in new outlook mail

https://gist.github.com/4088787

IcoMoon font-face does not render with ASP.NET Web Optimization

Icons and css-classes using the IcoMoon font-face do not work for me whenever I include IcoMoon.css in a style bundle using ASP.NET MVC 4. Is anyone else seeing the same behavior?

Move all css to LESS files and integrate it with Bootstrap

Move all css to LESS files, and customize the Bootstrap LESS files in order to achieve a seamless integration if possible.

best prctices MVC4/webapi/knockout

Hi
would you mind to describe or to point to a url where a best practices (folder structure, use of knockout templates, javascript async gui, etc) are described for a visual Studio MVC4/webapi project.

What about transitions for Single Page applications.

Compatability in IE8 + IE7

Good morning

Just wondering if any plans for full compatability in IE 8 and also IE 7 ?

Thanks

Shane

No Mouse wheel

Is there any fall back built in for those that don't have a mouse wheel? Any quick way to add navigation arrows or similar.

Applicationbar clickable?

How to make the icons in the Applicationbar clickable?
I tried everything. A simple doens't work. Neither adding onClick="window.loctation... to the span does'nt work. Can someone help me?

Add Toast notifications

Fix win-backbutton misalignement in webkit

In webkit the backbutton arrow is vertically not aligned.

Following links are not working on Github

http://aozora.github.com/bootmetro/charms-demo.html

and

http://aozora.github.com/bootmetro/images.html

Button dropdown menus do not capture click on iOS

Looks like a great looking project, but the button dropdown menus do not capture the click on iOS. It looks to me as though the user clicks on whatever is beneath the menu rather than the menu itself.

Any clue on what would be needed to help with this?

Add Notification demo page

Add Notification demo page, and edit the relative section in the bootstrap component page

Replace SegoeUI Symbol icons with png images

Microsoft fonts are licensed and cannot be redistributed.

Fix IcoMoon fonts for IE7

add specific css for IE7 support

In Base-Css.html, when using Dark theme, text not visible

In Base-Css.html, after changing theme to Dark by way of 'Settings', the text elements in bs-docs-example classes appear to change to a foreground color of white. Hence, the text is not visible. Changing the theme back to Light causes the foreground color to revert to black. And thanks for putting BootMetro together – a really nice piece of work!

If its not supported, is there any ETA on the support for Opera web browser?