I created a demo for this weeks CodePen Pattern Rodeo which uses CSS regions, flexbox and counter: A UI for a playlist.

But how does this work?

CSS regions

---

This lets you specify how content flows from one element to another. Hmm, what?

1. Create content

This content will flow into myFlow, which can be used by other elements.

HTML

<div class="content">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. 
</div>

CSS

.content {
  -adobe-flow-into: myFlow;
  -webkit-flow-into: myFlow;
  flow-into: myFlow;
}

2. Create "other elements"

The content from myFlow will flow into these two elements.

HTML

<div class="region"></div>
<div class="region"></div>

CSS

.region {
  -adobe-flow-from: myFlow;
  -webkit-flow-from: myFlow;
  flow-from: myFlow;
  width: 5em;
  height: 5em;
  float: left;
  margin: 0 .5em
}

Demo

Regions demo on CodePen

Browser support

The browser support for regions is pretty bad at the moment, because it's just a proposal by Adobe, but you can use the JavaScript polyfill by Adobe. Hurray!

CSS flexbox

---

Taken from the w3c spec:

In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

If you want to know more about flexbox and the difference between the old / new syntax, you should read the article by Chris Coyier. Otherwise continue reading...

So how does it work?

1. Specify a flexbox container

Every child of this container is from now on a flexbox item.

HTML

<article></article>

CSS

article {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

2. Add elements

We are going to create 4 elements. One has a width of 70% and the other 3 should share the remaining space.

HTML

<article>
  <section class="small"></section>
  <section class="big"></section>
  <section class="small"></section>
  <section class="small"></section>
</article>

CSS

.big {
  width: 70%;
}

.small {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: 10%;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

Demo

Flexbox demo on CodePen

Browser support

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

CSS counter

---

Create a counter with automatic numbering and add it via the content attribute.

You know what comes next...

1. Reset the counter

We are going to create a counter named myAwesomeCounter and are going to reset the value (start from 0).

HTML

body {
  counter-reset: myAwesomeCounter;
}

2. Use the counter

HTML

<ul>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

CSS

ul {
  list-style-type: none;
}

li:before {
  counter-increment: myAwesomeCounter;
  content: counter(myAwesomeCounter) ". ";
}

Demo

Counter demo on CodePen

Browser support

• Chrome any
• Firefox any
• Safari any
• Opera any
• IE 8+
• iOS any
• Android any

Final result

---

I used all this CSS awesomeness to create my Playlist UI.

See the live version and the source code: Playlist UI on CodePen.