Awesome CSS 3 Layouting

At first let me ask you a few questions about developing web applications:

• How do you create multiple column layouts?
• How do you make it flexible?
• How do you solve the 100% height problem?
• How do you make it responsiveness for Desktop vs Mobile?

If one of your answers contained ‘absolute positioning‘, ‘floating‘ or ‘JavaScript‘ you’re welcome for further reading about my favourite CSS 3 features. Wait, CSS 3? The thing that enables rounded corners and gradients? Yep, exactly, and despite the new trend of flat design CSS 3 is still useful since it has a bit more to offer than rounded corners and gradients.
Unfortunately this is still bleeding edge and even Firefox (version 21.0 on ubuntu 13.04) doesn’t render the examples. Update: A few hours ago version 22 of Firefox was released with support for display: flex *yay*
Feel free to add working examples in the comments below 🙂

display: flex

My most favourite feature is the new display property display: flex. This solves the first three questions including the most painful 100% height problem. Remember the ugly JavaScript workarounds to set the height equally to to highest div? Or the abuse of the border attribute and absolute positioned divs? Well, forget that. All you gonna need in the future are a few lines of css code.

.container {
  display: -webkit-flex;
  display: flex;
}
.menu {
  overflow: hidden;
  background-color: #D8E47F;
  -webkit-flex: 1;
          flex: 1;
}
.content {
  -webkit-flex: 3;
          flex: 3;
}
.sidenote {
  padding: 1em;
  background-color: #D8E47F;
  -webkit-flex: 2;
          flex: 2;
}
.menu > ul {
  margin: 1em;
  list-style-type: none;
  white-space: nowrap;
}
.menu a {
  color: black;
}
.content article {
  margin: 1em;
}
* {
  padding: 0;
  margin: 0;
}
Check out this Pen!

The value of the flex property tells the browser how much space the section should fill of the available place. In our example the .main-nav is the smallest, followed by .side-note which is twice as big and by .content which is three times as big as the .main-nav. The children of .wrapper are flexible (as the name flex tells us), in other words these sections will adjust their width relatively to the parent element. Feel free to play around with the code pen above! Open it in a new window and change the browser size and see how the other columns adapt their height automatically to the ‘master’ column. Awesome, isn’t it? No more JavaScript calculations or ugly CSS workarounds for this trivial use case.
Now what if you want a static width for the .main-menu. Well, just remove flex: 1 or replace it by a width declaration, that’s it. The other columns will take the remaining place that is left, of course relative to it’s set flex value. If you’re interested to dive deaper into the amazing flexbox layout I recommend the article on css-tricks.com.
Impressed so far? We’re just getting started with CSS 3!

@media

Nowadays we developers hopefully want to support various devices and resolutions. How often do I curse webpages while surfing on it with my smartphone. Most smartphones uses Webkit as browser platform, so maybe it’s worth to take a look at CSS 3 Media Queries even now.
In the codepen below the @media is at the bottom since it must override the default css values. In this example the sidenote will be hidden if the display is too small. Furthermore the menu on the left will be positioned at the top when decreasing the display size even more.

.container {
  display: -webkit-flex;
  display: flex;
}
.menu {
  overflow: hidden;
  background-color: #D8E47F;
  -webkit-flex: 1;
          flex: 1;
  -webkit-transition: -webkit-flex 1s;
          transition: flex 1s;
}
.content {
  -webkit-flex: 3;
          flex: 3;
}
.sidenote {
  padding: 1em;
  background-color: #D8E47F;
  -webkit-flex: 2;
          flex: 2;
}
.menu > ul {
  margin: 1em;
  list-style-type: none;
  white-space: nowrap;
}
.menu a {
  color: black;
}
.content article {
  margin: 1em;
}
@media (max-width: 800px) {
  .sidenote {
    display: none;
  }
}
@media (max-width: 400px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .menu > ul {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
  }
  .menu > ul > li {
    padding: 0 1em;
    -webkit-flex: 1;
            flex: 1;
  }
  .content {
    padding-top: 3em
  }
}
* {
  padding: 0;
  margin: 0;
}
Check out this Pen!

A more complex use case could be the alignment of the navigation dependent of the screen size. With @media we can simply place it on the top if the screen is small like on a smartphone or place it on the right if the page is visited by a desktop browser or even by a mobile one in landscape mode. And all magic is done with CSS only! Again, feel free to play around with the given codepen.
There are a lot more @media properties and possibilities that can be best read on css-tricks.com.

transitions

Last but not least let me introduce css transitions if you never heard of it so far. As well as you won’t need JavaScript for 100% height calculations anymore you won’t need it for simple animations.
Let’s imagine that we have too much content and want to use every pixel the display gives us, but we cannot hide the menu on the left because it’s too important!!1!. Why don’t we let the user decide what is important or not? And with some extra animation he will love our application even more!

Check out this Pen!

Due to simple adding or removing the class .hidden we can change the width of the menu container. The transition property takes all the magic for us and animates the width change. Try to increase the duration and click ‘hide’ and ‘show’ in the codepen before the animation time is over. Note how the animation stops immediately and returns to the previous state as soon as you click again. Did you ever implemented something like this with JavaScript? Luckily I didn’t.
As well as the above mentioned CSS 3 features, transitions are much more powerful and css-tricks.com is a nice source to learn more and to play with advanced examples.
Thanks for reading! And hopefully we can enjoy the full power of CSS 3 as soon as possible throughout all modern browsers (even IE…).