Blend Tutorial Part 6: Style the Game Board—Memory Game

This tutorial provides a walkthrough for styling the game board and the items in the game board for your app. About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.    

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS Blend Tutorial Part 2: Create the Project—Memory Game Blend Tutorial Part 3: Add a Style Sheet—Memory Game Blend Tutorial Part 4: Create a Flexible Layout—Memory Game Blend Tutorial Part 5: Align Content to The Grid—Memory Game Blend Tutorial Part 6: Style the Game Board — Memory Game [This post.] Blend Tutorial Part 7: Style the Cards—Memory Game Blend Tutorial Part 8: Add CSS Transitions—Memory Game Blend Tutorial Part 9: Build and Run Your App—Memory Game

Style the game board

Now that all of the elements of the game are in position, you can begin to style the game board, including the dynamic elements generated by JavaScript. Before you begin styling the game board, expand gameGrid in the Live DOM panel. Next to each of the div elements, you’ll see a lightning bolt icon. This lightning bolt indicates that this element is dynamically generated, so you don’t see it in the markup. However, you’re still able to style these dynamic elements using Microsoft Expression Blend 5 for Windows Developer Preview.

Style the gameItem class

The developer has let us know that each of the cards has a gameItem class applied. You can use this class to begin styling the game board. For more information from the developer, see Developer notes.

To style the gameItem class

1. In the Live DOM panel, expand gameBoard, then expand gameGrid, and then select a div in the gameGrid section.
2. In the CSS Properties panel, click the arrow next to Applied Rules, then click Create style rule from selected element class, and then click gameItem. A new style rule is created.
3. Click the background-color box in the Background category of the CSS Properties panel. The color editor appears.
4. In the Hex value box, type #FF494949. In the Alpha box, type 50%. Press Enter.

A background color is now applied to the div elements of the gameItem class.

Create a flexbox

The next step is to create the flexbox. The flexbox allows us to arrange content within the box vertically or horizontally. In addition to creating and styling the flexbox, you’ll also be modifying the gameItem class to style how the cards appear inside the flexbox. For more information from the developer, see Developer notes.

To create and style the flexbox

1. In the Live DOM panel, click gameGrid.
2. In the CSS Properties panel, click the arrow next to Applied Rules, and select Create style rule from selected element ID:gameGrid. A new style rule is created.
3. In the Sizing category of the CSS Properties panel, set width and height to 100%.
4. In the Layout category of the CSS Properties panel, select –ms-box from the display list.

The card list now appears “stacked” from left to right (all of the cards appear from left to right instead of from top to bottom).

5. To add space between the cards in the display, in the Styles panel, click .gameItem. In the Layout category in the CSS Properties panel, set margin-right and margin-bottom to 8px.

6. To modify the gameGrid so that the cards appear in multiple lines, in the Live DOM panel, click gameGrid. In the Flexbox category in the CSS Properties panel, click Advanced properties , and then select multiple from the –ms-box-lines drop-down list.

7. With .gameItem selected in the Styles panel, in the Sizing category of the CSS Properties panel, set the width and height to 22%.

Note: Setting the width and height to 22% rather than 25% allows for the space used by the margin that you set in step 5.

8. To use the extra space that is left in the gameGrid to display the cards, in the Styles panel, click .gameItem. In the CSS Properties panel, in the Flexbox category, set –ms-box-flex to 1.

Display the images

You can now replace the URIs for the card images with the images. The developer has told us that all of the content for the cards is copied from the cardTemplate element. You’ll style the cardTemplate so that you can display the images instead of the image URIs. For more information from the developer, see Developer notes.

To style the cardTemplate element

1. In the Live DOM panel, expand cardTemplate. Right-click the p element and click Delete.
2. With the cardTemplate selected in the Live DOM panel, in the Assets panel, locate the img tag by typing img in the Search box. Double-click the img asset to add it to the cardTemplate element.

Tip: If the Assets panel isn’t visible, on the Window menu, click Assets.

3. Click Refresh in the upper right of the artboard to generate the images.

The image size is too large for the display. You need to create a style rule to modify the appearance of all of the img elements in the gameGrid.

To style the img element

1. In the Live DOM panel, expand gameBoard, then expand gameGrid, and then select one of the div elements.
2. In the CSS Properties panel, click the arrow next to Applied Rules, point to Create style rule form selected element class, and then click gameItem. A new style rule is created.
3. In the Styles panel, double-click or the .gameItem class that you just created, and type .gameItem img.

Tip: You can also right-click .gameItem and then click Edit selector.

4. You can now select all of the img elements that are children of the .gameItem class.
5. In the CSS Properties panel, in the Sizing category, set max-width and max-height to 100%.
6. With .gameItem (not .gameItem img) selected in the Styles panel, in the CSS Properties panel, in the Text category, set text-align to center.

The next step: Blend Tutorial Part 7: Styling the Cards—Memory Game.