I’ve been in a pretty heated email conversation over the past couple of days regarding how effective (or not) the CSS Working Group has been. I’ve been pretty brutal in my critique in the past (and much of it still stands), but there’s reason to hope.

The best bits are — not surprisingly — being driven by the implementers. Apple is in the driver’s seat, with major contributions for Animations (including keyframes!), 2D Transforms, 3D Tranforms, and Transitions. Great stuff.

Similarly, David Baron (of Mozilla fame) is editing a long-overdue but totally awesome Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it can be a bit tedious. Should you be working on an app that can ignore IE (say, for a mobile phone), this should help make box layouts a bit easier to get started with:

CSS3 brings us a host of new features. Whilst most people will be familiar with gradients, text-shadow etc. I’d like to draw your attention to one of the lesser known modules in CSS3: flexbox. What’s interesting about Flexbox is that you can use it now if you use a Gecko or Webkit based browser (no IE sadly and Opera’s support isn’t there yet).

What does Flexbox bring us that we didn’t have before? Well it gives us a whole raft of new ways of controlling layout and flow. What we now achieve with floats we can do far more successfully and with more control with Flexbox.

I’ve never liked floats, they always seemed a hacky way of structuring HTML. Unfortunately with the meager positional CSS available, floats ended up being the best way of creating flexible fluid layouts. Let’s look at some examples.

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

The draft describes Flexbox as:

[...] a CSS box model optimized for interface design. It provides an additional layout system alongside the ones already in CSS. [CSS21] In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of "flex" to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. This model is based on the box model in the XUL user-interface language used for the user interface of many Mozilla-based applications (such as Firefox).
Super. What this means to you, as a developer, nay, as a Layout Architect™ is:

Floats? Where we're going, we don't need floats.
Layouts that were challenging before are more sensible.
We can create true flexible layouts, and the browser will do the calculations for us.
Flexbox gives us a new value for the display property (the box value), and eight new properties:

box-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
Eight new properties? Yeah, a little overwhelming, right? Okay let's break these down.

I'm Big John, and here I attempt to describe and demonstrate some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

Negative space is often misunderstood as a tool to implement in certain designs that call for a simple aesthetic.

However, it is in fact something you should pay attention to and carefully structure in every design you create.

This guide discusses what negative space is and how to effectively use it to analyze and improve your designs.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 7 Impressive techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.

Problems with float

The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
Enter display: inline-block

This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.