Blend Tutorial Part 7: Style the Cards—Memory Game

This tutorial provides a walkthrough for styling the game cards 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 Blend Tutorial Part 7: Style the Cards — Memory Game [This post.] Blend Tutorial Part 8: Add CSS Transitions—Memory Game Blend Tutorial Part 9: Build and Run Your App—Memory Game

Styling the cards

The developer has let us know that there are three card classes: closedCard, openCard, and foundCard. The face down state is the closedCard class, the face up state is the openCard class, and the matched state is the foundCard class. These classes are informed by the state the cards are in, and these states are triggered by the code. By default, the cards are assigned the closedCard class. However, when the cards are revealed, they are assigned the openCard class, and when matching pairs are found, they are assigned the foundCard class. You’ll use these classes, along with Blend in interactive mode, to style the cards according to the class they are assigned. For more information from the developer, see Developer notes.

Style the closedCard class

Since the closedCard class is the default class, you can begin styling the closedCard class right away.

To style the closeCard class

1. In the Live DOM panel, expand gameGrid, and select one of the div elements.
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 closedCard. A new style rule is created.
3. In the Styles panel, select .closedCard
4. In CSS Properties panel, locate the opacity property by typing opacity into the Search box. In the opacity text box, type 0, and then press Enter.

Tip: Opacity may appear to be already set to 0. Re-type 0 in the value box, and then press Enter.

5. Since you don’t want to hide the entire card, just the images, you can change the selector so that it affects only the images and leaves the background color visible.

To identify the img elements that are the children of the .closedCard class and apply the style only to those children, in the Styles panel, double-click .closedCard and type .closedCard img. Now, when this rule is modified, it will only affect those img elements that are children of the .closedCard class.

Style the openCard and foundCard classes

The other two classes, openCard and foundCard, are generated by the script when the game is being played, so they don’t exist in the markup. To locate the openCard and foundCard classes so that you can style against them, you need to switch to interactive mode and start playing the game. To play the game without leaving the design surface, click Interactive mode . Now click Start the Game and play the game until you locate a matching pair. After you locate a matching pair, open one more card. The matching pair will make the foundCard class available, and the third card will make the openCard class available. You can now access the classes on the design surface and continue styling the cards.

Note: You could not style against these classes without interactive mode, as these classes don’t exist until after you have started playing the game.

To style the openCard class

1. Click Interactive mode to return to the design surface.
2. On the artboard, click the div that contains the single open card (the one without a match) to select it.
3. In the CSS Properties panel, click the arrow next to Applied Rules, then click Create style rule from selected element class, and then click openCard. A new style rule is created.
4. With .openCard selected in the Styles panel, in the CSS Properties panel, click the background-color box in the Background category of the CSS Properties panel. The color editor appears.

Tip: You may have to clear the Search box to view all of the categories in the CSS Properties panel.

5. In the Hex value box, type #FFC39D19. In the Alpha box, type 50%. Press Enter.

To style the foundCard class

1. On the artboard, click the div containing one of the two matching cards to select it.
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 foundCard. A new style rule is created.
3. With .foundCard selected in the Styles panel, in the CSS Properties panel, 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 #FF52A026. In the Alpha box, type 50%. Press Enter.

You can now return to interactive mode and begin playing the game. The background color assigned to each class will appear based on whether the card is matched to another card or not matched.

Note: Notice that the game continued at the same point that you left off when you were last working in interactive mode. Interactive mode is fluid and makes it easy to test your app without having to build it each time you make a change on the design surface.

The next step: Blend Tutorial Part 8: Add CSS transitions—Memory Game.