Introducing List As Table

I’m currently working on Subretz, a webapp for tracking time, billying and stuff like this. Just a side-project that I’m very happy to be working on.

When it came to listing bills, tables seemed like a good option, but you know, they look terrible on small screens, and I want Subretz to be mobile first. I had a look at Chris Coyier’s article on  responsive tables, also tried Bootstrap and Foundation frameworks’ proposed solutions, but none of them convinced me. And then I had the thought: what if I could simply emulate tables but use another markup? After all, tables are unsemantic as shit, and I rather use definition lists instead. So I tried.

Definition lists work better than tables in small screens

Definition lists work better than tables in small screens

After a couple of hours I had this Sass mixin that lets you use the underused (but semantically awesome) Definition List and still get a table layout for larger screens. That is, it lets create faux tables but with a semantic markup.

The idea behind List As Table is simple: you simply markup your data as a list of definition lists, and CSS does the rest.

Here’s the markup. Pretty neat and deadly simple:

Now import the mixin and apply it to your list:

 

And here you are: a list of definition list that looks like a table in viewports over 960px. You can see a demo here or get the code in Github.

Enjoy!