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.

One thought on “Building a project skeleton, using CSS3 layout and styling WinJS controls #Win8Dev

Leave a Reply