aozora / bootmetro Goto Github PK
View Code? Open in Web Editor NEWSimple 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
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
would be nice if you add custom scrollbar styles, as in new outlook mail
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.
For the Hub page, make a css pseudo class for 2 scroll layout, using mousewheel plugin or with metro arrow button
In the table demo, add a column with checkboxes.
See http://aozora.github.com/bootmetro/bootstrap-components.html#buttonDropdowns
in Chrome btn-large is broken
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?
In IE7/8 wincommand buttons in the appbar have a blue background instead a transparent one.
Move all css to LESS files, and customize the Bootstrap LESS files in order to achieve a seamless integration if possible.
Good morning
Just wondering if any plans for full compatability in IE 8 and also IE 7 ?
Thanks
Shane
In IE7/8 the backbutton display only an empty bordered square...
Due to the fact that in any case IE7 and 8 don't support rounded border, think about provide an image as fallback.
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.
hub page tiles moving when we scroll on up direction
by default it is down for moving a page
sorry for my english
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.
There is a small defect in hub.html
You have:
but the there is no such stylesheet "assets/css/bootmetro-icons-ie7.css"
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.
Add Notification demo page, and edit the relative section in the bootstrap component page
Map Segoe UI Symbol to CSS classes in order to replace and extend the Bootstrap glyphicons.
How can I show charm by default, I want to load the page and at the same time show the charm ??
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?
having some problem in bootmetro when integrating in MVC3 project
affix is set on top 0 in page size
not in container
Reduce the css classes, use LESS.
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.
Add a page to demo a bootstrap form, with a customized metro calendar
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.
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?
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.
In webkit the backbutton arrow is vertically not aligned.
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
{
}
Tx
add specific css for IE7 support
Microsoft fonts are licensed and cannot be redistributed.
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.
Be it Opera Next or the Opera browser, bootmetro is extremely broken on Opera.
There are so many bugs and issues with it, is it even being supported?
If its not supported, is there any ETA on the support for Opera web browser?
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.
Tx
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?
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?
The naming for the icon-seven-segment
(see the icon page) seems almost deliberately confusing.
icon-seven-segment
is a 0
while icon-seven-segment-2
is 1
, and the pattern continues all the way to icon-seven-segment-10
being 9
.
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?
It would be awesome if a user could use the arrow keys to navigate through the tiles. Great project so far though.
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
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.
Horizontal scroll not working in the hub page in Chrome or IE, works only in firefox.
Add hover effect for single cells for tables
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.