The HTML5 Diaries – Part 3 – Advanced Layouts and Animations

This blog post covers the third module in the training course for the Microsoft 70-480 exam. We’ll be talking about using CSS to layout the content of your HTML document, along with using advanced features of CSS, including transforms and animations.

If you have no idea what any of this is about, click here to read more about the Microsoft 70-480 certification. If you want to start from the beginning of the course, click here. If you want to read the previous post in the series, click here. This blog series aims to be a companion to the training videos that are on the Microsoft Virtual Academy web site. Anyway, let’s begin.

CSS3 has heaps of new features that allow you to better lay out your document, and we’ll get to these in a second. But, first let’s talk about how we used to lay out things in a web page back when Marilyn Monroe wasn’t a quote on a facebook page and everything was black and white.

Some people thought it was a good idea to use tables to do all their layout. I’m totally serious. Now, this is bad idea. It’s bad for search engine optimization. It’s bad for developers, who have to write lots of horrible code. And it’s just… Not semantically nice. It reads badly. Blegh. Thank god we’ve moved on.

People eventually caught on that CSS can be useful for laying out documents, and we started doing things like this:

.centered {
display: table-cell;
min-height: 200px;
min-width: 200px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}

Now, the problem is that this code isn’t exactly descriptive with what it does; Display: table-cell? What does that do? I’m not even using a table!

That code, is not good code. It doesn’t make it clear what’s happening. It screams of hackyness. Now, good code isn’t just if it compiles, or renders, or is valid CSS. Good code is readable code. Good code is explicit. Explicit is always better than implicit.

You know how I mentioned HTML5 and semantics tags a few blog posts ago? Well, that’s a driving thing with HTML5. Making code just a bit… Y’know. Clearer. More explicit. Good CSS3 will do what it looks like. Which is kinda cool.

I’m going to mention one thing before I move on; You’ll see a lot of tags going forward that are prefaced with a ‘-ms’. Yep, these are vendor specific tags. They are still valid CSS3 though. If you’re developing just for Windows 8, you only have to worry about using the ‘-ms’ tags.

So, the first advanced layout technique we’re going to look at is called FlexBoxes. Check this out:

.flexbox #flexbox {
margin-top: 200px;
display: -ms-flexbox;
width: 100%;
-ms-flex-pack: end;
border: 1px solid gray;
}

Here you’re creating a Flexbox. Any idea what they are? No? The are basicaly flexible boxes that give you control over child elements and the remaining space. These are massively useful if you’re creating user interfaces. Most of the CSS properties here should be fairly familiar. The only ones I’m going to clarify are “display”, which is where you’re telling it that you’re telling the browser that you’re making a flexbox, and -ms-flex-pack, which says how you’re going ¬†to distribute surplus space.

There are also Flexing Flexboxes. Confused? These are basically like before, but the child elements within the boxes flex in order to assume some of the surplus space. You make these by calling a property that’s simply called -ms-flex and is passed three parameters. The first specifies the relative space proportional to the rest of the element. The second is the recommended size of the child element (you can just put a zero here) and the third is auto. And you use it just like a normal CSS property.

And let’s not forget Wrapping Flexboxes. They are like the first example, but you’ll use the -ms-flex-wrap. These allow you to wrap text, so that you can present things as columns or rows. Another useful instrument in your user interface design toolbox.

I’m a little bit conscious here that I’ve not explained Flexboxes perhaps as well as the subject deserves. Fortunately¬†HTML5 Rocks have a great article on FlexBoxes. Check it out here. It’s rather good.

Moving on, you can also use CSS to layout things in a grid. Now, grids are the basis of all design. Think of a site you use regularly. Reddit perhaps? Facebook? Your online banking? When designing the user interface of that web application you use, someone actually sat down and drew a bunch of grids. From there they added detail and little embellishments of design, until it started to look like the website you use today. Grids are very important, and it’s cool that you can easily make them in CSS3.

Anyway, grids. So, here’s how you actually make one.

#grid {
display: ms-grid;
ms-grid-columns: 1fr 1fr 1fr;
ms-grid-rows: 1fr 1fr 1fr;
}

So, I just made a grid with three rows and three columns. Easy. Notice how I used ‘fr’ as a unit of measurement? That means fractions. Yep, all this stuff is relative.

Now, we’re going to talk about using CSS3 to make your application a bit more theatrical. Yep, we’re talking about those cool animations and transforms that came about recently.

So, suppose you have a DIV called “transformme”, in which there’s a picture that you want to enlarge by a factor of two whenever you’re hovering over it with your mouse? Simple. Just use the “transform” CSS property.

#transformme:hover {
transform: scale(2);
}

Simple. How about moving it whenever your mouse hovers over it?

#transformme:hover {
transform: translate(50px, 50px);
}

Want to rotate it a little bit? No worries.

#transformme:hover {
transform: rotate(10deg);
}
Notice there that we’re rotating by degrees; Not by inches, centimetres or any other measurement.

Sometimes, you want to delay a transform or once a transform has occurred, have it hold its new position. Well, the ‘animation’ property handles all that for you. This is a little bit tricky, and therefore I’m going to refer you to Smashing Magazine who have an excelent article on CSS3 animations.

The skinny is this. You have these things called Keyframe rules, and this is what they look like.

@Keyframes dostuff {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(10deg);
}
75% {
transform: rotate(10deg);
}
}

So, it’s fairly obvious what’s going on here. We have a Keyframes rule, and you’re specifying actions to do at each milestone within the animation. Now, suppose you want to call this animation when you hover over an element in your HTML document? Easy.

#dosomestuffhere {
animation: dostuff 5s forwards;
}

So, you’re using the animation properties, and you’re passing it three parameters. The first is the rules specified in the @keyframes bit. The second is the duration of the actual animation. The third parameter is telling it to hold the position it is in. See! You can make cool animations without Javascript.

And that concludes this blog post on advanced layouts and animations. Any questions or feedback, please leave it in the comments box below.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

Leave a Reply