winjs / winstrap

The official Bootstrap theme for Microsoft's Modern design language

Winstrap

The official Bootstrap theme for Windows

 http://winstrap.azurewebsites.net/

Development

Install Node.js

http://nodejs.org/download/

Make sure Node.js is available in your path.

Install Grunt and Bower

npm install -g grunt-cli
npm install -g bower

Clone the repo

git clone https://github.com/winjs/winstrap.git

You should have a winstrap folder.

Installing npm packages

To install the required npm packages:

cd winstrap
npm install

Building Winstrap

Just run:

grunt

This will compile the generated files into the dist folder.

Launching a local server

Just run this task to display the demo pages in your browser:

grunt server

Launch this URL in your brower: http://localhost:9001/

The changes you make to the Sass files *.scss or source documentation files *.hbs will be automatically recompiled. Just refresh your browser window.

---

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

winstrap's Issues

Anchors should conform to Microsoft design language

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

azure site id down

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

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

Clickable star rating update

Bootstrap wells

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?

Tooltip update

Color variable swap

$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

Need Basel Symbols Font

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

Source for Selawik

Please include the source files for Selawik

Accessibility: Elements don't show any indication when navigating by tab

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.

EOT support for symbols

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

Bootstrap-WinJS needs a Bower package

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

Add flyout

Progress bar update

Input group height

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>

Winstrap needs a NuGet package

Star rating update

indeterminate progress bar not supported

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

Radio button update

Progress Bar and Progress Ring

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.

Add toggle switch button

Indeterminate progress bar update

WinJS "Controls" in WinStrap?

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.

Support RTL and BiDi languages

bootstrap-winjs is available. Woo!

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

Good work guys.

I can't build it

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.

On Azure site, "Download bootstrap-winjs 0.3.0" returns "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

International Type Ramp

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

Add pivot control

dark theme?

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

Winstrap support for IE8

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.

Bower package should come pre-built

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.

Need Checkbox without Label

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

app.scss renamed to bootstrap-winjs.scss

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.

Grunt copy task references tries to copy files that don't exist in the project

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.

Grid Columns Variable

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.

build task updates

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.

Winstrap needs an npm package

Typography settings have lost font weight variants

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

Checkbox update

Global styling on form controls

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.

Border-Width differs from WinJS

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?

What browsers do you officially support?

Radio Checked Vertically Center

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

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

Same for indeterminate checkbox.

Class name prefixes

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.

Info button hover state is not accessible

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

Dropdown fixes

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.

Font file updates

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.

Contributing guidelines doc

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

Ratings on hover is incorrect color

• 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.
  

Intrinsic dropdown fixes

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: