Suggestions to Metro UI CSS v3

[olton]

Dear friends! If You have suggestions for version 3, please write them here. I will try their best to satisfy.

[AnnieGitUrGun]

Hi there!

Love what you're doing. I have one suggestion. I forked a copy of your project and added themes for the dialogs. I guess it's not 100% in the Metro style but I've found it useful for the project I'm currently working on. Below is what the dialog.js now looks like.

code copied to todo list (olton)

[mtycholaz]

Integration with WinJS?

[olton]

@mtycholaz NO, may be in 3.1

[thibaultmeyer]

Hi,

what about :

• More color theme for the bottom menu bar
• Compatibility with AngularJS or EmberJS

[duytq]

Hi. Can you make loader for Metro-UI? That is displayed when user's waiting some task . Thanks.

[iuliangcata]

• Less use of the "!Important" as I have to do black magic to change some styles :)
• Somehow I can't override @font-face.
• More elements like numeric spinner
• Numeric slider (not percentage)

[olton]

@enr00ted http://metroui.org.ua/v3/sliders.html (min[max]Value example)

[iuliangcata]

• Be able to set the calendar to choose only years, or only months or the way it works right now. So it becomes a 3 in 1 picker (year, month or day). I imagine it like a 3-depth widget, and you start by selecting year, then month, then day but be able to limit the depth.
• Pagination for tables.
• Some yeasy pagination for other elements

Can't wait for the v3, just in time for my academic project. Oh my so many new COOL things, I'll have to redo my project from scratch :)

[bruno4eva]

@olton. Please can you add a php sample script on how to retreive form values of input fields when the slider and switches are used?

--- Original Message ---

From: "Sergey Pimenov" notifications@github.com Sent: March 25, 2015 8:49 AM To: "olton/Metro-UI-CSS" Metro-UI-CSS@noreply.github.com Subject: Re: [Metro-UI-CSS] Suggestions to Metro UI CSS v3 (#739)

@enr00ted http://metroui.org.ua/v3/sliders.html (min[max]Value example)

---

Reply to this email directly or view it on GitHub: https://github.com/olton/Metro-UI-CSS/issues/739#issuecomment-85933381

[olton]

@bruno4eva http://metroui.org.ua/v3/sliders.html (Example: Put slider value to input)

[olton]

@bruno4eva switch eq checkbox :)

[ghost]

RTL support please...

[ShubhamBadal]

I believe this present version can be improved a lot by adding more new features and functionality. These are my ideas which can be considered for next releases and most are derived from windows metro design -

integrated off-canvas metro-styled sidepanel bottom panel (on-hover or on-click) (can be used as footer or nav pane) charms bar on-hover (as in windows 8) top-panel (like in outlook mail)

tiles stack vertically first instead of horizontal (better for mobile/tab screens) drag and drop for tiles (save positions using cookies or local storage) customize bg and tile color (save using cookies or local storage) an 'All apps' screen (an extension of start screen, like in windows 8) keyboard selector for tiles (like in win 8 start screen) enable right click for tiles and start screen

background/theme/color changer (like in win 8 start screen) continuously varying background color (as seen when setting up windows 8 first time)

smoother scroll in startscreen (tiles page) parallex scroll in startscreen scroll on right edge hover like in windows 8 start screen ajax loader to load more tiles on scroll

if you like some of my ideas let me know because i think i can help more. thank you very much. you are doing great work, keep it up!

[devo5teee]

RTL support

Thanks for your great work ..

[iuliangcata]

@olton What will happen with the actual elements from version 2, like the navigation-bar ? Will it be a plug'n'play transition or I will have to redo things, or do them differently ? :)

We also need more icons, font icons, or a way of creating them. I normally use http://www.flaticon.com/ for images but I prefer font-icons. I am not sure about the licencing though.

[olton]

@enr00ted trying to do so would be most compatible

[olton]

@enr00ted icons you can use any, it might be your own set

[iuliangcata]

I'm only a student not a very experienced developer, so bear with me. I have one question that might turn into another suggestion, regarding the defined grid system.

1) For example, I want to add a navigation-bar at the top and a sidebar. If I just define them with the syntax they will correctly overlap because both start from the upper left corner and take 100% of the width/height (and maybe they have different indexes ?). I imagine being able to build a ui like a puzzle, or a matrix grid.

Overlap!

2) It seems that some elements like the sidebar only allow icons from the API but does not allow font-awsome or anything else.

3) Birthdate picker

4) Different textareas, to allow for bigger inputs.

5) Other type of selectors.

[if1live]

CSS class name with prefix

Use metro-ui-css with other css library

For example, pure-css use prefix. http://purecss.io/buttons/

<button class="pure-button pure-button-disabled">...

Thus mixing pure-css and bootstrap is possible. http://purecss.io/extend/

Safe

current metro-ui-css use short css classname.

<button class="button info">Button</button>
<button class="button link">Button</button>

info, link, success, ... is too simple. It may conflict with other library or user's stylesheet. Adding prefix is a method to avoid css conflict.

[iuliangcata]

6) Make tiles unclickable also (optional), so that one can add buttons, and other interaction elements inside. 7) Allow images from other font sources inside a tile (font-awsome, elusive icons etc). Right now what I am getting is a [] symbol.

[olton]

@enr00ted If you do not see icons from other fonts, you incorrectly connect the font

[olton]

@if1live Metro UI CSS since version 3 is no longer positioned as an additional style, so additional namespaces will not be

[iuliangcata]

@olton I don't think so, might be, i'm not sure, but the icons work fine outside the tiles.

<div class="tile-group two">
    <div class="tile-group-title text-bold text-shadow fg-white">PASSWORD 
        <i class="fa fa-music"></i>
    </div>
    <div class="tile double triple-vertical bg-taupe opacity">
        <div class="tile-content">
            <div class="margin20">
                <label class="fg-white text-shadow">Current password</label>
                <div class="input-control text block shadow" data-role="input-control">
                    <input type="text">
                    <button class="btn-clear" tabindex="-1" type="button"></button>
                </div>
                <label class="fg-white text-shadow">New password</label>
                <div class="input-control text block shadow" data-role="input-control">
                    <input type="text">
                    <button class="btn-clear" tabindex="-1" type="button"></button>
                </div>
                <label class="fg-white text-shadow">Repeat new password</label>
                <div class="input-control text block shadow" data-role="input-control">
                    <input type="text">
                    <button class="btn-clear" tabindex="-1" type="button"></button>
                </div>
                <br>
                <button class="block">CHANGE</button>
                <i class="fa fa-music"></i>
            </div>
        </div>
    </div>
</div>

/* Rewrite fonts path for fonts-awsome.min.css */
@font-face{
  font-family:'FontAwesome';
  src: 
      url('/xx/fonts/fontawesome-webfont.eot');
  src: 
      url('/xx/fonts/fontawesome-webfont.eot') 
      format('embedded-opentype'), 
      url('/xx/fonts/fontawesome-webfont.woff2') 
      format('woff2'), 
      url('/xx/fonts/fontawesome-webfont.woff') 
      format('woff'), 
      url('/xx/fonts/fontawesome-webfont.ttf') 
      format('truetype'), 
      url('/xx/fonts/fontawesome-webfont.svg') 
      format('svg');
  font-weight: normal;
  font-style: normal;
}

[iuliangcata]

8) This arrow type of drop-down, drop-up, would be very cool. Also it seems you can't add shadows right now, it looks kind of bad. Now it merges with the naigation bar, and you can't really tell wich is what. I would prefer someting that gives the impression of floating, similar to the first image.

PS: If I'm spamming too much, please let me know :)

[olton]

@enr00ted arrow this is google style, not windows metro, shadow maybe I will reconsider

[ShubhamBadal]

We can have something like in bing - metro style dropdown with tiles. very useful for modern navigation problems.

and something like in outlook.com also. i dont think it will be too hard to implement. very clean, metro and cool!

[ShubhamBadal]

Also i think we should add ability to center a span. center tags don't work for tiles and span in this framework. we can have certain classed like . centered to move any element to center of screen like in gumby framework.

check this : http://gumbyframework.com/docs/grid/#!/centered-columns

right now, its very difficult to use center tags with metro ui css especially in tiles and span classes.

[ShubhamBadal]

also we can add some cool animations to tiles and spans

example: http://sarasoueidan.com/demos/windows8-animations/

[ShubhamBadal]

we should also work on metro styled off-canvas and smart navigation panels. we can either include these plugins directly in this metro ui css or write our own code for something like this.

live demo: http://demo.siterepo.com/metropanel/metropanel-left.php?mpid=metrotabs http://demo.sonhlab.com/biz/js-plugins/openpanel/demo.php http://demo.sonhlab.com/biz/js-plugins/metrotab/metrotab-v2.html http://demo.sonhlab.com/biz/js-plugins/metrobox/metrobox.php

more here: http://www.webdesigntunes.com/coding/metro-style-navigation-menus/

[olton]

@ShubhamBadal https://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

there is a guide line, there is philosophy, there is my view of the philosophy of style. I'm hardly going to add some subjective views on metro style :) but this does not mean that I will not add something later

[ShubhamBadal]

yes, that is a good guide to metro design. we should always follow that. I just shared some elements (features) that are missing (and should be added) to make metro-ui-css for modern metro styled web apps. :)

[olton]

@ShubhamBadal and I'm very grateful for the resources provided

[olton]

@ShubhamBadal tiles animation in v3 http://metroui.org.ua/v3/tiles.html

[iuliangcata]

Very cool animations :)

[ShubhamBadal]

@olton very good sir, but please do not remove anything that is there in existing version because all tile animations and elements that are in v2 are also very good! :)

[olton]

@ShubhamBadal no one was going to remove them

[iuliangcata]

Regarding the arrow and non-metro drop-down/up, I think it's not that hard to acheive. I used a notice widget and hid the drop-down holder. However the arrow position and the placement need "a little bit" of fiddling :)

[bruno4eva]

@Gabriel, I think the class " .metro.notice.marker-on-top" has same effects. That small triangle sitting on the rectangle 😁.

Sent from my Windows Phone

---

From: Iulian Gabriel Catamailto:notifications@github.com Sent: ‎7/‎4/‎2015 18:18 To: olton/Metro-UI-CSSmailto:Metro-UI-CSS@noreply.github.com Cc: bruno4evamailto:bruno4eva@live.com Subject: Re: [Metro-UI-CSS] Suggestions to Metro UI CSS v3 (#739)

Regarding the arrow and non-metro drop-down/up, I think it's not that hard to acheive. I used a notice widget and hided the drop-down holder. However the arrow position and the placement need "a little bit of fiddling :)

---

Reply to this email directly or view it on GitHub: https://github.com/olton/Metro-UI-CSS/issues/739#issuecomment-90687893

[iuliangcata]

@bruno4eva Yes, that's what I used :grin:

[olton]

@enr00ted I will add a simple implementation of a drop-down block with arrow tomorrow or the day after, so stay tuned 3rd

[iuliangcata]

@olton One question with these drop-downs, which I did not understand from the docs in v2: Can I specify in wich direction does it take space/opens or is it automatic ? This might also be usefull, what do you think ?

[olton]

@enr00ted http://metroui.org.ua/buttons.html#_dropdown-btn

[aminubakori]

@olton Great work you have done in V3. The changes are impressive i cant wait for it to be released. By the way can you please check the tiles page? It seems like they dont scroll in mobile view. Thanks

[Mike-Honey]

@olton I'm also very keen to try v3 - it looks great!

Could you please consider adding larger screen sizes (e.g. in metro-bootstrap-responsive.css). 1920x is quite common this days, but that css only scales up to 1200x, leaving a lot of whitespace on either side.

Thanks!

[ShubhamBadal]

@olton okay, i am very excited :) @Mike-Honey i too agree :+1:

[renielcanlas]

@olton sir, Is there any chance that MetroUI will have new widget for Rich Text Editors? By the way, I checked the Version3 and when you start the progress bar test then click on the start button again, see what will happen.

[olton]

@renielcanlas may be

[renielcanlas]

i think this should be very helpful. how about direct implementation of validation. for example

<input data-transform="input-control" type="text" data-validate="true" data-required="true" data-minlength="5" data-maxlength="25">

then automatically validated on loosing focus then after that, if validation is failed, validation input classes will be automatically applied to that control

[renielcanlas]

@olton can you please add a captcha widget?

[olton]

all to forum please http://forum.metroui.org.ua