Serious discussions please (mainly adresses @Antechinus )
While working on the boardindex I had an idea. Why do we use unordered lists? I think the Content fits well in a Definition list with 1 to n elements.. (one category with n boards, one child board title "sub-boards" with n childs..)
It's easy to style, it's working pretty well (even in ie8 it's responsive) and it looks still structured logical, just in case you disable the CSS completely.
Here's an example, didn't spend much time for borders, line-height and such things.. just a quick mockup:
<doctyle !html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>Thorstens TEST</title>
<style type="text/css">
h2, h3 {
margin: 0;
padding: 0;
line-height: 2em;
}
p {
margin: 0;
padding: 0;
}
dl, dt, dd {
margin: 0;
padding: 0;
box-sizing: border-box;
border-collapse: collapse;
}
.category, .board {
display: table;
width: 100%;
border-collapse: collapse;
empty-cells: show;
}
.cat_name {
display: table-caption;
border-radius: 5px;
background: #eee;
font-weight: bold;
}
.boards {
display: table-row;
width: 100%;
}
.board:first-child {
border-top: 1px solid red;
margin: 1px;
}
.board {
border-bottom: 1px solid red;
margin: 1px;
}
.board.has_childs {
border-bottom: 1px solid #ccc;
margin: 1px;
}
.child_boards {
border-bottom: 1px solid red;
margin: 1px;
}
.title, .stats, .lastpost {
display: table-cell;
}
.title {
min-width: 50%;
}
.stats {
width: 12em;;
}
.lastpost {
width: 15em;
}
.child_boards {
display: block;
width: 100%;
margin-top: 5px;
position: relative;
}
.child_boards dt, .child_boards dd {
display: inline-block;
color: #999;
}
@media screen and (max-width: 50em) {
.stats {
display: none;
}
.board, .title, .lastpost {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<dl class="category">
<dt class="cat_name"><h2>First Category - this is an extra-long category title which should expand the table cells</h2></dt>
<dd class="boards">
<dl class="board has_childs">
<dt class="title">
<h3>My first Board</h3>
<p>my boards description</p>
</dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: blablabla by Antechinus</dd>
</dl>
<dl class="child_boards">
<dt>Sub-Boards:</dt>
<dd>My Subboard1</dd>
<dd>Second Sub-Board</dd>
<dd>Second Sub-Board2</dd>
<dd>Second Sub-Board3</dd>
<dd>Second Sub-Board4</dd>
<dd>Second Sub-Board5</dd>
<dd>Second Sub-Board6</dd>
<dd>Second Sub-Board7</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My Second parent</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: blablablablablabla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My third parent</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>Yet another parent board</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
<dl class="board">
<dt class="title"><h3>My redirect boards title</h3></dt>
<dd class="stats">150 Redirects</dd>
<dd class="lastpost"></dd>
</dl>
<dl class="board">
<dt class="title"><h3>Yet another parent board</h3></dt>
<dd class="stats">10 Topics / 233 Replies</dd>
<dd class="lastpost">Re: bla by Antechinus</dd>
</dl>
</dd>
</dl>
</body>
</html>
Serious oppinions please..
Note: Due to the lack of colspan / rowspan for Display: table-cell the child boards are not grouped inside it's parent ..
Class names are just samples
Modern, Free, Powerful