Hi!

I'm trying to build bootstrap-winjs, but I've got some issues on my way. I'm not grunt/node expert. I'm using OS X on MacBook Pro

My process is:

I've installed fresh nodejs

I've installed grunt cli with npm install -g grunt-cli

I've cloned from git with git clone https://github.com/winjs/bootstrap-winjs.git

I've entered created dir with cd bootstrap-winsj

I've used sudo npm install

Then I've used sudo grunt, I've got info about builded 8 pages

I run grunt server

Then I go to localhost:9001/

What I see is some page, but without any CSS, Times New Roman and Bootstrap WinJs image in the top.

In my console I get 2 errors (Chrome 41)

GET http://localhost:9001/css/app.css?0.2.0 jquery.min.map:1 GET http://localhost:9001/js/vendor/jquery.min.map 404 (Not Found)

In my my dist folder I've got 8 html files, js, images, fonts folder. No even css folder. Any idea what am I doing wrong?

No matter what solution is - it would be great to have online demo of this project.

Please include the source files for Selawik

The Selawik font file permissions are not set to installable. See #17.

WOFF and EOT references should be removed until those file formats are included in the project.

Today we use win- prefixed CSS class names, which might cause issues when the library is used in conjunction with WinJS since it has the same prefix. We should consider changing our prefix to something more unique to the project.

Bootstrap applies textbox styles globally as opposed to exposing a class http://getbootstrap.com/css/#forms. In Bootstrap-WinJS we should follow suit and apply the form styles globally where Bootstrap does.

Anchor states & theming options should be consistent with the design language.

Copy task tries to copy html5shiv.min.js and respond.min.js from their corresponding bower packages. These packages are not part of the project, so they should not be referenced in the copy task.

This isn't an issue, I'm just happy that this project is now available.

Good work guys.

I was looking at the winstrap site on ie8 and things don't look right. Stuff is broken. Colours and backgrounds are off, among other things.

Is there a shim or build step or something that I need to add to my site to make these things ie8 friendly? A few examples of things that I've seen in the css would be the usage of rgba() which isn't supported by ie8 and is ignored, or the use of before:: instead of before: with one : will break glyphs.

An EOT file for the symbols should be added to support IE8

It looks like:
@import "../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/wells";
is commented out in override/_bootstrap.scss. It seems to work after un-commenting it. Is there a reason this is commented out?

The typography is displaying in "normal" font weight and there should be multiple font weight variants

1. add clean task to grunt
2. add post-assembly check that the files that were supposed to have been built were built. apparently grunt-sass doesn't consider a missing src file an error.

For JS dropdown:
Links inside dropdown should have text decoration none and the background color of the button should NOT change when dropdown is opened. Currently it becomes blue.

Is there a dark theme available? If not, where is the best place to change the colors?

I have two issues with progress indicators.

I like loading indicator in Windows Phone's interface. But in winstrap, there's big ugly black bar above progress bar. Yes, I can remove it with CSS tricks, but why it is there in first place? This one is much better than current implementation. Also you can't apply text-center to winstrap's progress bar.

Other thing is about progress ring. If you apply text-center with a div to progress rings, they don't move to horizontally center and they look ugly.

• Navigate to http://bootstrap-winjs.azurewebsites.net/components.html#rating
• Hover over "clickable rating."
• Notice, the stars in the rating are picking up some yellow color and they shouldn't. I noticed the "active" class appears as well.
  

Grunt file needs to be updated from this

 'dist/css/app.css': 'src/scss/app.scss'

to this

'dist/css/bootstrap-winjs.css': 'src/scss/bootstrap-winjs.scss'

While you're at it, @import "win/panels"; needs to be @import "override/panels"; in bootstrap-winjs.scss too.

Running bower install bootstrap-winjs should not only pull the development files but also build them.

Alternatively, a pre-built package could be pulled down with the development files.

WinJS does not support the Indeterminate progress bar. Please add this feature so we can be unblocked.

http://bootstrap-winjs.azurewebsites.net/ gives:

You do not have permission to view this directory or page.

In _variables.scss, $grid-columns is set to 24 in bootstrap-winjs. In regular bootstrap it's set to 12.

We should consider not modifying the original bootstrap value. That way if someone were to add bootstrap-winjs into an existing project with bootstrap, they wouldn't need to readjust their grids.

Probably way more urgent than either an NPM or NuGet package.

When you check radio button, black circle doesn't place vertically center.

http://winstrap.azurewebsites.net/controls.html#forms

Same for indeterminate checkbox.

Currently there is no option to have a checkbox or radio button without attaching it to a label.

The input group is not aligned to the input control

<label for="DateIssued">Date Issued</label>
<div class="input-group datepicker col-sm-6 col-md-6" id="DateIssued-datepicker">
    <input class="form-control" id="DateIssued" name="DateIssued" type="datetime" value="">
    <div class="input-group-addon">
        <span class="win-icon-calendar"></span>
    </div>
</div>

We need to write a document to with high level guidelines for contributing to this project

For intrinsic drop downs:
Make the background color of the entry point the same as the flyout so we avoid this color problem we often run in to.
Current:

Expected:

When navigating a page via tabs, checkboxes and radio buttons do not change state in any way to indicate which control you've selected. This seems like it might happen with some buttons as well.

Hello,

I noticed that the border-width for all components have been set to 1px to satisfy the "Basel" guidelines. The only official Guidlines I've found for MDL are always using a border greater then 1 for textbox and other fields giving them a "solid" look. WinJS itself is using a bigger border, that means the look of projects made with WinJS differ from projects made with Winstrap. What's the reason for that inconsistency?

What is this Basel style guide?
Where can I find it?

Hi
I just discovered this project. The idea of using Bootstrap as the underlying "Theme" is great, because it is well known. Currently there are many "Metro"-bootstrap Themes out there, but they all have more or less the same style and target: Web Applications.

If I look at the current Win10 apps like Groove Music or the Xbox App they make heavily use of the http://try.buildwinjs.com/#splitview (at the first glance... of course there are many controls used... )

So my question is: Are you trying to build a real bootstrap theme targeting for the Windows Universal World where a "SplitView" is just a couple of HTML elements away, because the "default" style and behaviour is baked into your template?
Or do you just try to make a Modern-Design-Language Theme for Bootstrap, without touching the WinJS controls?

I know I could mix "WinStrap" and the WinJS Stuff, but the beauty of Bootstrap is that a couple of default styles are shipped with the bootstrap.css.

The contrast ratio between the border and button on info button is too low. The hover border needs to be changed to $color-alt-medium

1. How do we want to approach international fonts?
2. How does falling back to Selawik work internationally? Does it work?

Our current font is Metro. Both Checkbox and Radio button need these updated symbols to be design complete.

$color-chrome-20 and $color-chrome-30 need to be swapped throughout this project so the darkness of grey increases as the variable number increases