Skip to main content
Board index markup Started by TE · · Read 10579 times 0 Members and 2 Guests are viewing this topic. previous topic - next topic

Board index markup

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:
Code: (test.html) [Select]
<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
Last Edit: March 14, 2014, 04:05:42 am by TE
Thorsten "TE" Eurich
------------------------

Re: Board index markup

Reply #1

Serious opinion: yes you can use a dl if you like, but honestly nobody will ever care. It's the sort of semantic geewhizzery that code freaks will argue about until the cows come home, but people who just want to use the software will never notice or care about.

But, if you think it's important, there's nothing really wrong with it. However, I have noticed in the past the dl's seem to be trickier to style than ul's. Ul's generally seem to be more tractable, largely because you don't have to fight their default behaviour so much. My 2c.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Board index markup

Reply #2

Agree with Antechinus here. I don't see any need to have a DL personally. They are both lists and fit the bill IMO. A DL fits something better like the register page where each item defines it's list item.  Boardindex for me doesn't really fall into that category for me.
Success is not the result of spontaneous combustion, you must set yourself on fire!