Building a project skeleton, using CSS3 layout and styling WinJS controls #Win8Dev

This past week was spent turning wireframes and workflows into a moving prototype using static data. Not only does this action of sketching out the project inform architecture, but it also allows us to create the placeholders once we get the visual design.

As a bonus, a short screen cap of the prototype can be a valuable asset while the app concept is still forming in our heads.

Project Skeleton

Here’s the process I’ve been using to build the project skeleton.

Start with a Blank Project template
We want the least amount of pre-existing code. The goal is to stay slim and only add what’s needed. The other project templates are a great way to learn, but could be filled with extra cruft. The “default.html” page will act as the frame for the page fragments.

Grab the PageControlNavigator from the Grid project template
The navigator class handles navigation events, instantiating page objects and enabling the back button. Additionally you have the code in your app so its simple to customize if needed. Don’t forget to change the namespace of the class from “Application” to your namespace. Attention to detail, private.

Add pages for each full screen of your app
Using the Page Control item template, create the individual screens (I place them all in a pages folder). In order to set the initial page, add the PageControlNavigator to your default page and set the “home” property to the URL of the initial page. You can grab the code from your sample Grid app.

Embrace the existing CSS and templates
WinJS comes with very refined CSS rules, defined “ui-dark.css” and “ui-light.css” which can both be found by digging into the References folder. Become familiar with the rules applied and try to work with them and not against. You can do this by reading the files or, more targeted, by adding the elements to your page, running the application and using the DOM explorer or Blend to see all of the cascading rules applied to each element.

Another trick is to grab the header and section elements of a page, along with their CSS, from the sample Grid app as well.

The title and content layout of each page is pretty defined in Metro apps and the HTML also includes the back button which the navigator class will be looking for.

Using CSS3 layout

One of the ideas that keeps popping in my head during development is – I am doing web dev for a single browser. Of course the idealistic side of me says “What about the open web?”, but then the pragmatic side says “Hey, that’s actually pretty cool for development.”

One browser to test and you can guarantee what is going to work, including CSS layouts. All you need to is refer to the Internet Explorer 10 Dev Guide.

Looking at the example above, if you need a continuous flow of items filling up all the space available, use a Flexbox.  Need to change the order of the items? Set the direction.

Or you may have a requirement for a complex tile-based layout like the above image.  Use the Grid.  Learn the Grid, love the Grid, it is your friend.  Many layout issues can be easily sized and made adaptable by taking advantage of the Grid.

Styling the ListView and WinJS Controls

Along the same lines, one other tip I wanted to pass along is remember that the appearance of HTML elements and WinJS controls are driven by CSS.  Yes its obvious, but sometimes when you get into “control-thinking” you may take the hard road skipping the easy dandelion-laced path.

On StackOverflow a question was asked about changing the selection template of a ListView. All he wanted to do was change the selection border color and rather than updating the entire selection template, all you need to do is override a single CSS rule.

The rules to override can most easily be found by loading your application in Blend, turning on Interactive mode to change the state of your app if needed and then, in Design mode, select the element and examine the CSS Properties panel.

Further Reading

Last week I mentioned Promises as one of the main features to learn in WinJS. To learn more beyond the MSDN docs, check out Christopher Bennage’s WinJS: Unpacking Promises post. He goes into detail on chaining Promises and their results together.

Another post of note is Kirupa’s Animating with requestAnimationFrame. You no longer need to use setInterval for JavaScript-based procedural animations, it’s wonderful.

The Book of CSS3 – take me to the future! …which is right now

The Book of CSS3, from Peter Gasston, is your ticket from understanding the long-lived CSS2.1 to the new world full of possibilities with CSS3.

The Book of CSS3Yes, there are issues understanding which features of CSS3 have been properly recommended and are currently supported by modern browsers.  But this is where Peter’s extensive knowledge of the past, present and future direction of CSS3 transcribed into this book is so valuable.

His writing style is clear, concise and casual and although the samples are not pulled from real-world apps, their brevity keeps the focus on the feature of discussion. Walking through each example step-by-step, Peter manages to cover the major features while explaining how to implement them successfully in each browser.

After reviewing the past and present, the book ends with Chapter 17 “The Future of CSS”. Although most features discussed have limited or no implementations, it’s fun to look at new ideas and the chapter acts as a reminder that CSS is ever expanding and becoming more and more powerful.

You may have other display technologies and frameworks of choice, but you would be remiss to ignore the current and future most popular display technology.  This book is a great guide to updating your CSS knowledge, ensuring you are not left behind.

Metro List View double line (ep. 2) – from PSD to HTML

I mentioned I was going to shelve this project for now, but I started thinking about implmenting the same style and layout in HTML.

“Metro in HTML?!”

Yes, I said it.  And its really not too far of stretch, especially when you think of the style of menus, focus on typography and the print and infographic-based design concepts. That’s very “webby”.

If you remember from the previous post, the goal was to match a Silverlight for Windows Phone page to the PSD Design Templates provided by the Windows Phone Design team. By the end of it, I was able to get very close only truly stumbling on the lack of font tracking or charcter spacing in Silverlight on the Windows Phone.

Instead of waiting for Silverlight 5 (which includes charcter spacing) to get on the Windows Phone (next year?) I thought I would try the same exercise in a technology that does in fact allow you to set font tracking – CSS.

You can see the results in action here -> Metro Line View double line in HTML.

Or check out the image below:

browser comparison of Metro List View in HTML

A few notes on the implementation:

– I started the project using the HTML5 Boilerplate is a project template.  It includes a CSS rest and normalization and a load of other useful features.  I expect to use it again in the future.

– There is no special CSS casing for different browsers.  I wanted to serve them all the same plate and see how they would render.

– I switched to “Segoe UI” from “Segoe WP” which works much better in the browser (which makes sense, of you think about it) so there are slight chracter differences no matter how close the layout.

– Letter-spacing is tricky (especially since the fonts are not the same).  It appears that in the first line item “Text” could use less space and “example” could use more.  I went with a happy medium for all.

– I went the easy route and decided to use absolute positioning and pixel values since the exact heights were important. In a real implementation, I’d likely need to move to a relative solution.

Relative values especially become important when you start thinking of different screens and devices. In the photo below you can see the test page loaded in an iPhoen 3GS, iPhone 4 and Samsung Focus (WP7 NoDo).

Metro List View in html on phones

The viewport is set to device-width and the initial scale is set to 1, the difference is the absolute values for font size and spacing mixed with the different levels dpi per screen and browser upscaling.  If I were to switch over to relative values I could get much more consistant results.

This was a fun exercise, but is it the first and last time, I’ll be implementing the Metro design language in HTML?

No, I don’t think so.